Convert PDFBug, in web/debugger.js, to a class with static methods

This gets rid of one more closure from the code-base.
This commit is contained in:
Jonas Jenwald 2023-09-17 08:06:43 +02:00
parent c9cd934f8a
commit 2d79be941e

View File

@ -491,114 +491,118 @@ const Stats = (function Stats() {
})(); })();
// Manages all the debugging tools. // Manages all the debugging tools.
const PDFBug = (function PDFBugClosure() { class PDFBug {
const buttons = []; static #buttons = [];
let activePanel = null;
return { static #activePanel = null;
tools: [FontInspector, StepperManager, Stats],
enable(ids) {
const all = ids.length === 1 && ids[0] === "all";
const tools = this.tools;
for (const tool of tools) {
if (all || ids.includes(tool.id)) {
tool.enabled = true;
}
}
if (!all) {
// Sort the tools by the order they are enabled.
tools.sort(function (a, b) {
let indexA = ids.indexOf(a.id);
indexA = indexA < 0 ? tools.length : indexA;
let indexB = ids.indexOf(b.id);
indexB = indexB < 0 ? tools.length : indexB;
return indexA - indexB;
});
}
},
init(container, ids) {
this.loadCSS();
this.enable(ids);
/*
* Basic Layout:
* PDFBug
* Controls
* Panels
* Panel
* Panel
* ...
*/
const ui = document.createElement("div");
ui.id = "PDFBug";
const controls = document.createElement("div"); static tools = [FontInspector, StepperManager, Stats];
controls.setAttribute("class", "controls");
ui.append(controls);
const panels = document.createElement("div"); static enable(ids) {
panels.setAttribute("class", "panels"); const all = ids.length === 1 && ids[0] === "all";
ui.append(panels); const tools = this.tools;
for (const tool of tools) {
if (all || ids.includes(tool.id)) {
tool.enabled = true;
}
}
if (!all) {
// Sort the tools by the order they are enabled.
tools.sort(function (a, b) {
let indexA = ids.indexOf(a.id);
indexA = indexA < 0 ? tools.length : indexA;
let indexB = ids.indexOf(b.id);
indexB = indexB < 0 ? tools.length : indexB;
return indexA - indexB;
});
}
}
container.append(ui); static init(container, ids) {
container.style.right = "var(--panel-width)"; this.loadCSS();
this.enable(ids);
/*
* Basic Layout:
* PDFBug
* Controls
* Panels
* Panel
* Panel
* ...
*/
const ui = document.createElement("div");
ui.id = "PDFBug";
// Initialize all the debugging tools. const controls = document.createElement("div");
for (const tool of this.tools) { controls.setAttribute("class", "controls");
const panel = document.createElement("div"); ui.append(controls);
const panelButton = document.createElement("button");
panelButton.textContent = tool.name;
panelButton.addEventListener("click", event => {
event.preventDefault();
this.selectPanel(tool);
});
controls.append(panelButton);
panels.append(panel);
tool.panel = panel;
tool.manager = this;
if (tool.enabled) {
tool.init();
} else {
panel.textContent =
`${tool.name} is disabled. To enable add "${tool.id}" to ` +
"the pdfBug parameter and refresh (separate multiple by commas).";
}
buttons.push(panelButton);
}
this.selectPanel(0);
},
loadCSS() {
const { url } = import.meta;
const link = document.createElement("link"); const panels = document.createElement("div");
link.rel = "stylesheet"; panels.setAttribute("class", "panels");
link.href = url.replace(/.js$/, ".css"); ui.append(panels);
document.head.append(link); container.append(ui);
}, container.style.right = "var(--panel-width)";
cleanup() {
for (const tool of this.tools) { // Initialize all the debugging tools.
if (tool.enabled) { for (const tool of this.tools) {
tool.cleanup(); const panel = document.createElement("div");
} const panelButton = document.createElement("button");
panelButton.textContent = tool.name;
panelButton.addEventListener("click", event => {
event.preventDefault();
this.selectPanel(tool);
});
controls.append(panelButton);
panels.append(panel);
tool.panel = panel;
tool.manager = this;
if (tool.enabled) {
tool.init();
} else {
panel.textContent =
`${tool.name} is disabled. To enable add "${tool.id}" to ` +
"the pdfBug parameter and refresh (separate multiple by commas).";
} }
}, this.#buttons.push(panelButton);
selectPanel(index) { }
if (typeof index !== "number") { this.selectPanel(0);
index = this.tools.indexOf(index); }
static loadCSS() {
const { url } = import.meta;
const link = document.createElement("link");
link.rel = "stylesheet";
link.href = url.replace(/.js$/, ".css");
document.head.append(link);
}
static cleanup() {
for (const tool of this.tools) {
if (tool.enabled) {
tool.cleanup();
} }
if (index === activePanel) { }
return; }
}
activePanel = index; static selectPanel(index) {
for (const [j, tool] of this.tools.entries()) { if (typeof index !== "number") {
const isActive = j === index; index = this.tools.indexOf(index);
buttons[j].classList.toggle("active", isActive); }
tool.active = isActive; if (index === this.#activePanel) {
tool.panel.hidden = !isActive; return;
} }
}, this.#activePanel = index;
}; for (const [j, tool] of this.tools.entries()) {
})(); const isActive = j === index;
this.#buttons[j].classList.toggle("active", isActive);
tool.active = isActive;
tool.panel.hidden = !isActive;
}
}
}
globalThis.FontInspector = FontInspector; globalThis.FontInspector = FontInspector;
globalThis.StepperManager = StepperManager; globalThis.StepperManager = StepperManager;