extension: Implement modal class

Author: anthony-hyo

web/packages/extension/assets/options.html

@@ -125,7 +125,7 @@ <h2 class="option-title">Per-Site Options</h2>
                         <h3>Site-Specific Settings</h3>
                         <small style="opacity:0.8;">Enable the switch to override the global setting for the website.</small>
                     </div>
-                    <button class="modal-close-btn">&times;</button>
+                        <button class="modal-close-btn" data-ruffle-modal-dismiss>&times;</button>
                 </div>
 
                 <div class="modal-body">

web/packages/extension/src/modal.ts

@@ -0,0 +1,71 @@
+export class Modal {
+    public static readonly MODAL_SHOW = "ruffle.modal.show";
+    public static readonly MODAL_HIDE = "ruffle.modal.hide";
+
+    private readonly modalElement: HTMLElement;
+    private readonly closeButton: NodeListOf<HTMLElement>;
+
+    constructor(target: string | HTMLElement) {
+        if (target instanceof HTMLElement) {
+            this.modalElement = target;
+        } else {
+            const el = document.querySelector<HTMLElement>(target);
+
+            if (!el) {
+                throw new Error(`Unknown modal element`);
+            }
+
+            this.modalElement = el;
+        }
+
+        this.closeButton = this.modalElement.querySelectorAll<HTMLElement>(
+            "[data-ruffle-modal-dismiss]",
+        );
+
+        for (const el of this.closeButton) {
+            el.addEventListener("click", this.hide.bind(this));
+        }
+    }
+
+    public get element(): HTMLElement {
+        return this.modalElement;
+    }
+
+    public show(): void {
+        document.body.classList.add("modal-open");
+
+        this.modalElement.style.display = "flex";
+
+        setTimeout(() => {
+            this.modalElement.classList.add("show");
+
+            this.modalElement.dispatchEvent(
+                new CustomEvent(Modal.MODAL_SHOW, {
+                    bubbles: true,
+                    detail: {
+                        modalElement: this.modalElement,
+                    },
+                }),
+            );
+        }, 150);
+    }
+
+    public hide(): void {
+        document.body.classList.remove("modal-open");
+
+        this.modalElement.classList.remove("show");
+
+        setTimeout((): void => {
+            this.modalElement.style.display = "";
+
+            this.modalElement.dispatchEvent(
+                new CustomEvent(Modal.MODAL_HIDE, {
+                    bubbles: true,
+                    detail: {
+                        modalElement: this.modalElement,
+                    },
+                }),
+            );
+        }, 150);
+    }
+}

web/packages/extension/src/options.ts

@@ -1,6 +1,7 @@
 import * as utils from "./utils";
 import { bindOptions, resetOptions } from "./common";
 import { buildInfo } from "ruffle-core";
+import { Modal } from "./modal";
 
 type SettingForm = {
     id: string;
@@ -646,28 +647,23 @@ window.addEventListener("DOMContentLoaded", async () => {
         });
     }
 
-    const modal = document.getElementById("site-settings-modal")!;
-    const addNewBtn = document.getElementById("site-entry-new")!;
-    const closeBtns = document.querySelectorAll(
-        ".modal-close-btn, #modal-cancel-btn",
-    );
-
-    const openModal = () => {
-        modal.style.display = "flex";
-        document.body.classList.add("modal-open");
-    };
+    const modal = new Modal(document.getElementById("site-settings-modal")!);
 
-    const closeModal = () => {
-        modal.style.display = "none";
-        document.body.classList.remove("modal-open");
-    };
+    modal.element.addEventListener(Modal.MODAL_SHOW, () => {
+        console.log("MODAL_SHOW");
+    });
 
-    addNewBtn.addEventListener("click", openModal);
+    modal.element.addEventListener(Modal.MODAL_HIDE, () => {
+        console.log("MODAL_HIDE");
+    });
 
-    closeBtns.forEach((btn) => btn.addEventListener("click", closeModal));
+    // const addNewBtn = document.getElementById("site-entry-new")!;
+    // const modalSaveBtn = document.getElementById("modal-save-btn")!;
 
     document.querySelectorAll(".edit-site-btn").forEach((btn) => {
-        btn.addEventListener("click", openModal);
+        btn.addEventListener("click", () => {
+            modal.show();
+        });
     });
 
     document.querySelectorAll(".settings-option").forEach((option) => {