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
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
/* globals browser */
class AltTextModal {
constructor() {
this.modalId = `alt-text-ml`;
this.#initialize();
browser.runtime.onMessage.addListener(this.onMessage.bind(this));
}
#initialize() {
if (document.getElementById(this.modalId)) {
return;
}
this.modal = this.#createModal();
this.textContainer = this.#createTextContainer();
this.closeButton = this.#createCloseButton();
this.#appendElements();
}
onMessage(message, _sender, _sendResponse) {
this.updateProgress(message);
}
close() {
browser.runtime.onMessage.removeListener(this.onMessage);
}
#createModal() {
modal = document.createElement("div");
modal.id = this.modalId;
modal.className = "ml-progress";
document.body.appendChild(modal);
return modal;
}
#createTextContainer() {
const textContainer = document.createElement("div");
textContainer.className = "ml-text-container";
textContainer.textContent = "Initializing...";
return textContainer;
}
#createCloseButton() {
const closeButton = document.createElement("button");
closeButton.className = "close-btn";
closeButton.textContent = "Close";
closeButton.addEventListener("click", () => {
document.body.removeChild(this.modal);
});
return closeButton;
}
#appendElements() {
this.modal.appendChild(this.textContainer);
this.modal.appendChild(this.closeButton);
}
updateText(message) {
this.#initialize();
this.textContainer.textContent = message;
}
updateProgress(data) {
this.#initialize();
const dataId = data.id;
const progressPercentage = Math.round(data.progress) || 100;
let progressBarContainer = document.getElementById(dataId);
// Create a new progress bar container if it doesn't exist
if (!progressBarContainer) {
progressBarContainer = document.createElement("div");
progressBarContainer.id = dataId;
progressBarContainer.className = "progress-bar-container";
// Create the label
const label = document.createElement("div");
label.textContent = data.metadata.file;
progressBarContainer.appendChild(label);
// Create the progress bar
const progressBar = document.createElement("div");
progressBar.className = "progress-bar";
const progressBarFill = document.createElement("div");
progressBarFill.className = "progress-bar-fill";
progressBarFill.style.width = `${progressPercentage}%`;
progressBarFill.textContent = `${progressPercentage}%`;
progressBar.appendChild(progressBarFill);
progressBarContainer.appendChild(progressBar);
// Add the progress bar container to the modal
this.modal.appendChild(progressBarContainer);
} else {
// Update the existing progress bar
const progressBarFill =
progressBarContainer.querySelector(".progress-bar-fill");
progressBarFill.style.width = `${progressPercentage}%`;
progressBarFill.textContent = `${progressPercentage}%`;
}
// Remove the progress bar when it reaches 100% or more
if (progressBarContainer && progressPercentage >= 100) {
this.modal.removeChild(progressBarContainer);
}
}
}
let modal;
function getModal() {
if (modal) {
return modal;
}
modal = new AltTextModal();
window.addEventListener("beforeunload", _event => {
modal.close();
});
return modal;
}
|
