All files / Scripts/ui mha.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import {
    fluentButton,
    provideFluentDesignSystem
} from "@fluentui/web-components";
import "../../Content/fluentCommon.css";
import "../../Content/Office.css";
import "../../Content/classicDesktopFrame.css";
 
import { diagnostics } from "../Diag";
import { HeaderModel } from "../HeaderModel";
import { mhaStrings } from "../mhaStrings";
import { Strings } from "../Strings";
import { DomUtils } from "./domUtils";
import { Table } from "./Table";
 
// Register Fluent UI Web Components
provideFluentDesignSystem().register(
    fluentButton()
);
 
let viewModel: HeaderModel;
let table: Table;
 
function enableSpinner() {
    const responseElement = document.getElementById("response");
    if (responseElement) {
        responseElement.style.backgroundImage = "url(../Resources/loader.gif)";
        responseElement.style.backgroundRepeat = "no-repeat";
        responseElement.style.backgroundPosition = "center";
    }
}
 
function disableSpinner() {
    const responseElement = document.getElementById("response");
    if (responseElement) {
        responseElement.style.background = "none";
    }
}
 
const statusMessageTimeouts: Map<string, NodeJS.Timeout> = new Map();
 
function updateStatus(statusText: string) {
    DomUtils.setText("#status", statusText);
    if (viewModel !== null) {
        viewModel.status = statusText;
    }
 
    table.recalculateVisibility();
}
 
function dismissAllStatusMessages() {
    // Clear all pending timeouts
    statusMessageTimeouts.forEach(timeoutId => {
        clearTimeout(timeoutId);
    });
    statusMessageTimeouts.clear();
 
    // Find all status overlay elements and hide them
    document.querySelectorAll(".status-overlay-inline.show").forEach(element => {
        element.classList.remove("show");
        // Clear text content so next announcement is detected as a change
        element.textContent = "";
    });
}
 
function showStatusMessage(elementId: string, message: string, duration = 2000) {
    // Dismiss any currently showing status messages first
    dismissAllStatusMessages();
 
    const statusElement = document.getElementById(elementId);
    if (statusElement) {
        // Update the message text
        statusElement.textContent = message;
        statusElement.classList.add("show");
 
        // Hide after specified duration and track the timeout
        const timeoutId = setTimeout(() => {
            statusElement.classList.remove("show");
            statusElement.textContent = "";
            statusMessageTimeouts.delete(elementId);
        }, duration);
 
        statusMessageTimeouts.set(elementId, timeoutId);
    }
}
 
// Do our best at recognizing RFC 2822 headers:
// http://tools.ietf.org/html/rfc2822
async function analyze() {
    diagnostics.trackEvent({ name: "analyzeHeaders" });
    const headerText = DomUtils.getValue("#inputHeaders");
 
    if (!headerText.trim()) {
        showStatusMessage("analyzeStatusMessage", mhaStrings.mhaNoHeaders);
        return;
    }
 
    viewModel = await HeaderModel.create(headerText);
 
    // Clear UI before rebuilding to ensure clean state
    table.rebuildSections(null);
 
    table.resetArrows();
 
    enableSpinner();
    updateStatus(mhaStrings.mhaLoading);
 
    table.initializeTableUI(viewModel);
    updateStatus("");
 
    disableSpinner();
 
    showStatusMessage("analyzeStatusMessage", mhaStrings.mhaAnalyzed);
}
 
function clear() {
    DomUtils.setValue("#inputHeaders", "");
 
    table.rebuildSections(null);
 
    showStatusMessage("clearStatusMessage", mhaStrings.mhaCleared);
 
    // Delay focus to allow screen reader to fully announce status message
    setTimeout(() => {
        document.getElementById("inputHeaders")?.focus();
    }, 1000);
}
 
function copy() {
    if (!viewModel || !viewModel.hasData) {
        showStatusMessage("copyStatusMessage", mhaStrings.mhaNothingToCopy);
        return;
    }
 
    Strings.copyToClipboard(viewModel.toString());
 
    // Show accessible status message
    showStatusMessage("copyStatusMessage", mhaStrings.mhaCopied);
 
    document.getElementById("copyButton")?.focus();
}
 
document.addEventListener("DOMContentLoaded", function() {
    diagnostics.set("API used", "standalone");
    table = new Table();
    table.initializeTableUI();
    table.makeResizablePane("inputHeaders", "sectionHeader", mhaStrings.mhaPrompt, () => true);
 
    (document.querySelector("#analyzeButton") as HTMLButtonElement).onclick = analyze;
    (document.querySelector("#clearButton") as HTMLButtonElement).onclick = clear;
    (document.querySelector("#copyButton") as HTMLButtonElement).onclick = copy;
});