@preference-sl/pref-viewer 2.11.0-beta.1 → 2.11.0-beta.10

package/src/pref-viewer-dialog.js

@@ -0,0 +1,139 @@
+/**
+ * PrefViewerDialog - Custom Web Component for displaying modal dialogs in PrefViewer.
+ *
+ * Overview:
+ *  - Provides a modal dialog overlay for user interactions such as downloads or confirmations.
+ *  - Handles DOM creation, styling, and open/close logic.
+ *  - Ensures dialog content is centered and styled appropriately.
+ *  - Automatically focuses the canvas when closed for improved accessibility.
+ *
+ * Usage:
+ *  - Use as a custom HTML element: <pref-viewer-dialog></pref-viewer-dialog>
+ *  - Call open(title, content, footer) to display the dialog with a header, content, and footer.
+ *  - Call close() to hide and remove the dialog.
+ *
+ * Methods:
+ *  - constructor(): Initializes the custom element.
+ *  - connectedCallback(): Called when the element is added to the DOM; sets up DOM and styles.
+ *  - disconnectedCallback(): Called when the element is removed from the DOM; cleans up resources.
+ *  - open(title, content, footer): Displays the dialog and sets its header, content, and footer.
+ *  - close(): Hides and removes the dialog, refocuses the canvas if available.
+ *  - #createDOMElements(): Creates the dialog structure and applies styles.
+ */
+export class PrefViewerDialog extends HTMLElement {
+    #wrapper = null;
+    #header = null;
+    #content = null;
+    #footer = null;
+
+    /**
+     * Initializes the custom dialog element.
+     * Only calls super(); heavy initialization is deferred to connectedCallback.
+     */
+    constructor() {
+        super();
+    }
+
+    /**
+     * Called when the element is inserted into the DOM.
+     * Sets up the dialog's DOM structure and styles.
+     * @returns {void}
+     */
+    connectedCallback() {
+        this.#createDOMElements();
+    }
+
+    /**
+     * Called when the element is removed from the DOM.
+     * Cleans up resources and event listeners.
+     * @returns {void}
+     */
+    disconnectedCallback() {
+        this.removeEventListener("click", this.#closeOnBackdropClick.bind(this));
+    }
+
+    /**
+     * Creates the dialog's DOM structure and applies CSS styles.
+     * Adds a click handler to close the dialog when clicking outside the content.
+     * @private
+     * @returns {void}
+     */
+    #createDOMElements() {
+        this.#wrapper = document.createElement("div");
+        this.#wrapper.classList.add("dialog-wrapper");
+        this.#wrapper.innerHTML = `
+            <div class="dialog-header"><h3 class="dialog-header-title"></h3></div>
+            <div class="dialog-content"></div>
+            <div class="dialog-footer"></div>`;
+        this.append(this.#wrapper);
+
+        const style = document.createElement("style");
+        style.textContent = `@import "/dist/css/pref-viewer-dialog.css";`;
+        this.append(style);
+
+        this.addEventListener("click", this.#closeOnBackdropClick.bind(this));
+
+        this.#header = this.#wrapper.querySelector(".dialog-header");
+        this.#content = this.#wrapper.querySelector(".dialog-content");
+        this.#footer = this.#wrapper.querySelector(".dialog-footer");
+    }
+
+    #closeOnBackdropClick(event) {
+        if (event.target === this) {
+            this.close();
+        }
+    }
+
+    /**
+     * Opens the dialog and sets its header, content, and footer.
+     * @param {string} title - The dialog title to display in the header.
+     * @param {string} content - The HTML content to display in the dialog body.
+     * @param {string} footer - The HTML content to display in the dialog footer (e.g., action buttons).
+     * @returns {boolean} True if the dialog was opened, false if no content was provided.
+     */
+    open(title = "", content = "", footer = "") {
+        if (this.#wrapper === null || this.#header === null || this.#content === null || this.#footer === null) {
+            return false;
+        }
+        if (title === "" && content === "" && footer === "") {
+            return false;
+        }
+
+        if (title === "") {
+            this.#header.style.display = "none";
+        }
+        if (footer === "") {
+            this.#footer.style.display = "none";
+        }
+
+        this.#header.querySelector(".dialog-header-title").innerHTML = title;
+        this.#content.innerHTML = content;
+        this.#footer.innerHTML = footer;
+        this.setAttribute("open", "");
+        return true;
+    }
+
+    /**
+     * Closes and removes the dialog from the DOM.
+     * @returns {void}
+     */
+    close() {
+        this.removeAttribute("open");
+        const parent = this.getRootNode().host;
+        if (parent) {
+            // Refocus 3D canvas or 2D component for accessibility
+            const canvas = parent.shadowRoot.querySelector("pref-viewer-3d[visible='true'] canvas");
+            if (canvas) {
+                canvas.focus();
+            } else {
+                const component2D = parent.shadowRoot.querySelector("pref-viewer-2d[visible='true']");
+                if (component2D) {
+                    component2D.focus();
+                }
+            }
+
+        }
+        this.#wrapper = this.#header = this.#content = this.#footer = null;
+        this.remove();
+    }
+}