Add separate module for UI Fallback Mechanism for Persistent Queue

2025-09-25 14:20:25 +02:00
parent 9698c402bf
commit 530b59b53d
1 changed files with 36 additions and 0 deletions
@@ -0,0 +1,36 @@
+(function () {
+    "use strict";
+
+    const UI = (window.PQueue && window.PQueue.UI) || window.UI;
+    const state = (window.PQueue && window.PQueue.state) || {};
+
+    UI.mountFallback = function mountFallback() {
+        if (document.getElementById("pqueue-fallback-panel")) {
+            state.container = document.querySelector("#pqueue-fallback-panel .pqueue-fallback__content");
+            return;
+        }
+        const fab = UI.el("button", { id: "pqueue-fab", class: "pqueue-fab", type: "button" }, [UI.icon("ti ti-history", { size: "md" }), UI.el("span", { class: "pqueue-fab__label", text: "Persistent Queue" })]);
+        const panel = UI.el("div", { id: "pqueue-fallback-panel", class: "pqueue-fallback", "data-open": "false" });
+        const header = UI.el("header", { class: "pqueue-fallback__header" }, [UI.el("div", { class: "pqueue-fallback__title", text: "Persistent Queue" }), UI.button({ icon: "ti ti-x", variant: "ghost", subtle: true, title: "Close", onClick: () => panel.setAttribute("data-open", "false") })]);
+        const content = UI.el("div", { class: "pqueue-fallback__content" });
+        panel.appendChild(header);
+        panel.appendChild(content);
+        document.body.appendChild(panel);
+        document.body.appendChild(fab);
+        fab.addEventListener("click", () => {
+            const open = panel.getAttribute("data-open") === "true";
+            panel.setAttribute("data-open", open ? "false" : "true");
+            if (!open) refresh({ skipIfBusy: true });
+        });
+        state.container = content;
+    };
+
+    UI.removeFallback = function removeFallback() {
+        document.getElementById("pqueue-fab")?.remove();
+        document.getElementById("pqueue-fallback-panel")?.remove();
+    };
+})();
+
+
+
+