npm - estreui - Versions diffs - 1.2.6 → 1.4.0 - Mend

estreui 1.2.6 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/index.html +21 -0
package/managedOverlay.html +3 -2
package/overwatchPanel.html +27 -0
package/package.json +1 -1
package/scripts/estreUi-dialog.js +1 -4
package/scripts/estreUi-main.js +326 -0
package/scripts/estreUi-notification.js +539 -0
package/scripts/estreUi-pageModel.js +190 -2
package/serviceWorker.js +4 -2
package/styles/estreUi.css +1 -1
package/styles/estreUiCore.css +90 -1
package/styles/estreUiCore2.css +25 -1
package/styles/estreUiInitialize.css +5 -1
package/styles/estreUiRoot.css +139 -2

package/index.html CHANGED Viewed

@@ -64,6 +64,7 @@
     <script defer type="text/javascript" src="./scripts/estreUi-core.js"></script>
     <script defer type="text/javascript" src="./scripts/estreUi-dialog.js"></script>
     <script defer type="text/javascript" src="./scripts/estreUi-notation.js"></script>
+    <script defer type="text/javascript" src="./scripts/estreUi-notification.js"></script>
     <script defer type="text/javascript" src="./scripts/estreUi-pageModel.js"></script>
     <script defer type="text/javascript" src="./scripts/estreUi-pageManager.js"></script>
     <script defer type="text/javascript" src="./scripts/estreUi-handles.js"></script>
@@ -81,6 +82,7 @@
     <link rel="preload" as="fetch" type="text/html" href="./staticDoc.html" crossOrigin="anonymous" />
     <link rel="preload" as="fetch" type="text/html" href="./instantDoc.html" crossOrigin="anonymous" />
     <link rel="preload" as="fetch" type="text/html" href="./mainMenu.html" crossOrigin="anonymous" />
+    <link rel="preload" as="fetch" type="text/html" href="./overwatchPanel.html" crossOrigin="anonymous" />
     <link rel="preload" as="fetch" type="text/html" href="./stockHandlePrototypes.html" crossOrigin="anonymous" />
     <link rel="preload" as="fetch" type="text/html" href="./customHandlePrototypes.html" crossOrigin="anonymous" />
@@ -97,6 +99,22 @@
 </head>
 <body class="vfv_scroll">
+    <!--
+        Dark mode pre-paint coupling (opt-in): uncomment to write
+        body[data-dark-mode] before the splash paints, avoiding FOLM
+        (flash of light mode) on dark-locked sessions. Adjust the
+        storage key and auto-mode policy to match your project.
+    -->
+    <!--
+    <script>
+        (function () {
+            const stored = localStorage.getItem("estreUi.darkMode");
+            const dark = stored === "1"
+                || (stored == null && window.matchMedia && matchMedia("(prefers-color-scheme: dark)").matches);
+            if (dark) document.body.dataset.darkMode = "1";
+        })();
+    </script>
+    -->
     <main id="splashRoot" style="z-index: 500; ">
         <section id="splash" data-on-top="0">
             <div class="container" data-container-id="root">
@@ -113,6 +131,9 @@
     </header>
     <nav id="mainMenu" class="right" data-exported="1" data-opened="">
     </nav>
+    <nav id="overwatchPanel" data-exported="1" data-opened="">
+    </nav>
+    <section id="panelTrigger" data-static="1"></section>
     <div id="ptr"><div>
             <!-- Commented out. This is not implemented currently. <dotlottie-player src="./lotties/ptr_indic.json" background="transparent" speed="1" direction="1" mode="normal"></dotlottie-player> -->

package/managedOverlay.html CHANGED Viewed

@@ -199,12 +199,13 @@
             <div class="container top" data-container-id="noti" data-static="1" data-on-top="1">
                 <article class="" data-article-id="noti" data-static="" data-multi-instance="1" data-instance-origin="">
                     <div class="h_icon_set post_block" data-bind-attr="interactive@data-interactive" data-bind-style="bgColor@--bg-color">
-                        <div class="icon_place"><img data-bind-attr="iconSrc@src" /></div>
+                        <div class="icon_place"><img data-bind-attr="largeIconSrc@src" /></div>
                         <div class="content_place">
                             <div class="title_line"><span data-bind="contentTitle"></span></div>
+                            <div class="subtitle_line"><span data-bind="subtitle"></span></div>
                             <div class="h_icon_Set content_area">
                                 <div class="content_place" data-bind="content" data-bind-style="textColor@--color textSize@--size textWeight@--weight"></div>
-                                <div class="icon_place"><img data-bind-attr="subIconSrc@src" /></div>
+                                <div class="icon_place"><img data-bind-attr="iconSrc@src" /></div>
                             </div>
                         </div>
                     </div>

package/overwatchPanel.html ADDED Viewed

@@ -0,0 +1,27 @@
+        <header id="panelHeader" data-static="1">
+            <!-- Common top header. Clock / date populated by setOverwatchPanelClock in a later commit. -->
+            <span id="panelClock"></span>
+            <span id="panelDate"></span>
+        </header>
+        <div class="dynamic_section_host" data-static="1">
+            <div class="host_item" data-id="timeline"><span>Timeline</span></div>
+            <div class="host_item" data-id="quickPanel"><span>Quick</span></div>
+        </div>
+        <div class="dynamic_section_block full_screen" data-static="1">
+            <section class="block_item" id="timeline" data-id="timeline" data-static="1">
+                <!-- Timeline slot: markup reserved in roadmap #008. Implementation scheduled separately. -->
+            </section>
+            <section class="block_item" id="quickPanel" data-id="quickPanel" data-static="1">
+                <div class="container" data-container-id="root" data-static="1">
+                    <article data-article-id="main" data-static="1">
+                        <div class="quick_tiles">
+                            <button id="darkModeToggle" class="quick_tile" type="button" data-dark-mode-state="auto" onclick="estreUi.cycleDarkMode();">
+                                <span class="tile_icon" aria-hidden="true">&#x1F313;</span>
+                                <span class="tile_label">Auto</span>
+                            </button>
+                        </div>
+                    </article>
+                </div>
+            </section>
+        </div>
+        <section id="panelGrabArea" data-static="1"><div class="handle"></div><div class="pad"></div></section>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "estreui",
-  "version": "1.2.6",
+  "version": "1.4.0",
   "description": "EstreUI Core Library - A comprehensive UI framework for web applications",
   "main": "scripts/estreUi.js",
   "files": [

package/scripts/estreUi-dialog.js CHANGED Viewed

@@ -502,10 +502,7 @@ const arrived = function (instanceOrigin) {
 }
-const noti = function (title, htmlContent, onTakeInteraction = (intent) => {}, mainIconSrc, subIconSrc) {
-    //<= To do implement
-}
+// noti() moved to estreUi-notification.js (roadmap #009).
 // ======================================================================

package/scripts/estreUi-main.js CHANGED Viewed

@@ -31,6 +31,11 @@ const estreUi = {
     menuSectionList: [],
     get menuArea() { return this.menuSections["menuArea"]; },
+    panelSections: {},
+    panelSectionList: [],
+    get quickPanel() { return this.panelSections["quickPanel"]; },
+    get timeline() { return this.panelSections["timeline"]; },
     headerSections: {},
     headerSectionList: [],
     get appbar() { return this.headerSections["appbar"]; },
@@ -41,6 +46,7 @@ const estreUi = {
     blindedCurrentOnTop: null,
     mainCurrentOnTop: null,
     menuCurrentOnTop: null,
+    panelCurrentOnTop: null,
     headerCurrentOnTop: null,
     //static getter
@@ -102,6 +108,16 @@ const estreUi = {
     $menuArea: null,
     $grabArea: null,
+    $overwatchPanel: null,
+    get $panelSections() { return this.$panelBlock?.find(c.c + se + uis.blockItem) ?? $(); },
+    $panelHeader: null,
+    $panelHost: null,
+    $panelBlock: null,
+    $panelClock: null,
+    $panelDate: null,
+    $panelGrabArea: null,
+    $panelTrigger: null,
     $fixedTop: null,
     get $headerSections() { return this.$fixedTop.find(c.c + se); },
     $appbar: null,
@@ -121,6 +137,11 @@ const estreUi = {
     //handles
     menuSwipeHandler: null,
+    panelOpenSwipeHandler: null,
+    panelCloseSwipeHandler: null,
+    panelClockTimeoutId: null,
+    panelClockIntervalId: null,
+    darkModeMql: null,
     //properties
     euiState: "exit",
@@ -166,6 +187,16 @@ const estreUi = {
     //getter and setter
     get isOpenMainMenu() { return this.$mainMenu.attr(eds.opened) == t1; },
+    get isOpenOverwatchPanel() { return this.$overwatchPanel.attr(eds.opened) == t1; },
+    get darkMode() {
+        const stored = localStorage.getItem("estreUi.darkMode");
+        if (stored == "1") return true;
+        if (stored == "0") return false;
+        return null;
+    },
+    get isDarkMode() { return document.body.dataset.darkMode == t1; },
     //links (object redirection)
@@ -187,6 +218,9 @@ const estreUi = {
         this.$mainMenu = $("nav#mainMenu");
+        this.$overwatchPanel = $("nav#overwatchPanel");
+        this.$panelTrigger = $("section#panelTrigger");
         this.$fixedTop = $("header#fixedTop");
         this.$fixedBottom = $("#fixedBottom");
@@ -198,6 +232,7 @@ const estreUi = {
         this.setReload();
         this.setBackNavigation();
         this.setMenuSwipeHandler();
+        this.setupDarkMode();
         const onLoadedFixedBottom = async _ => {
@@ -236,6 +271,23 @@ const estreUi = {
             return this.initStaticMenus(subTerm);
         }
+        const onLoadedOverwatchPanel = subTerm => {
+            this.$panelHeader = this.$overwatchPanel.find("header#panelHeader");
+            this.$panelHost = this.$overwatchPanel.find(uis.dynamicSectionHost);
+            this.$panelBlock = this.$overwatchPanel.find(uis.dynamicSectionBlock);
+            this.$panelClock = this.$panelHeader.find("#panelClock");
+            this.$panelDate = this.$panelHeader.find("#panelDate");
+            this.$panelGrabArea = this.$overwatchPanel.find("section#panelGrabArea");
+            this.$panelGrabArea.click(this.overwatchPanelGrabAreaOnclick);
+            this.setPanelSwipeHandler();
+            this.scheduleOverwatchPanelClock();
+            this.initOverwatchPanelHandles();
+            this.initOverwatchPanelTimeline();
+            this.updateDarkModeToggleWidgets();
+            return this.initStaticPanels(subTerm);
+        }
         const loadExported = url => fetch(url).then(response => {
             if (!response.ok) throw new Error('Network response was not ok');
@@ -315,6 +367,18 @@ const estreUi = {
                 .then(() => loadExportedMainMenu(subTerm, attempt + 1));
         });
+        let loadExportedOverwatchPanel;
+        loadExportedOverwatchPanel = (subTerm, attempt = 0) => loadExported("overwatchPanel.html").then(htmlContent => {
+            this.$overwatchPanel.prepend(htmlContent);
+            return onLoadedOverwatchPanel(subTerm);
+        }).catch(error => {
+            const delay = Math.min(1000 * Math.pow(2, attempt), 30000);
+            console.error("There has been a problem with your fetch operation for overwatchPanel: ", error);
+            console.log(`Retrying to load overwatchPanel in ${delay}ms...`);
+            return postPromise(resolve => setTimeout(resolve, delay))
+                .then(() => loadExportedOverwatchPanel(subTerm, attempt + 1));
+        });
         let loadExportedStockHandlePrototypes;
         loadExportedStockHandlePrototypes = (_, attempt = 0) => loadExported("stockHandlePrototypes.html").then(htmlContent => {
             this.$handlePrototypes.prepend(htmlContent);
@@ -372,6 +436,7 @@ const estreUi = {
             await Promise.all(mainLoader);
             await (this.$mainMenu.attr(eds.exported) == t1 ? loadExportedMainMenu(subTerm) : onLoadedMainMenu(subTerm));
+            await (this.$overwatchPanel.attr(eds.exported) == t1 ? loadExportedOverwatchPanel(subTerm) : onLoadedOverwatchPanel(subTerm));
             this.initSessionManager();
@@ -512,6 +577,95 @@ const estreUi = {
     },
+    //dark mode
+    setupDarkMode() {
+        if (window.matchMedia) {
+            this.darkModeMql = window.matchMedia("(prefers-color-scheme: dark)");
+            const onChange = _ => { if (this.darkMode == null) this.applyDarkMode(); };
+            if (this.darkModeMql.addEventListener) this.darkModeMql.addEventListener("change", onChange);
+            else this.darkModeMql.addListener(onChange);
+        }
+        this.applyDarkMode();
+    },
+    setDarkMode(value) {
+        let pref;
+        if (value == null) pref = null;
+        else if (value === false || value === 0 || value === "0") pref = false;
+        else pref = true;
+        if (pref == null) localStorage.removeItem("estreUi.darkMode");
+        else localStorage.setItem("estreUi.darkMode", pref ? "1" : "0");
+        this.applyDarkMode();
+        return this.isDarkMode;
+    },
+    applyDarkMode() {
+        const pref = this.darkMode;
+        const active = (pref == null) ? (this.darkModeMql?.matches ?? false) : pref;
+        if (active) document.body.dataset.darkMode = "1";
+        else delete document.body.dataset.darkMode;
+        this.updateDarkModeToggleWidgets();
+    },
+    // Cycle auto -> light -> dark -> auto (single-button 3-state control)
+    cycleDarkMode() {
+        const pref = this.darkMode;
+        if (pref == null) this.setDarkMode(false);
+        else if (pref === false) this.setDarkMode(true);
+        else this.setDarkMode(null);
+        return this.darkMode;
+    },
+    /**
+     * Register a tile in the quickPanel section of overwatchPanel.
+     * Host projects call this after estreUi.init to append custom toggles/shortcuts.
+     *
+     * @param {Object} config
+     * @param {string} config.id unique DOM id for the tile
+     * @param {string} [config.icon] short glyph or emoji shown in the .tile_icon span
+     * @param {string} [config.label] text label shown in the .tile_label span
+     * @param {Function} [config.onClick] click handler; receives the jQuery event
+     * @returns {HTMLElement|null} the tile element, or null if quickPanel is not ready / id collides
+     */
+    registerOverwatchPanelTile(config) {
+        if (config == null || config.id == null) return null;
+        const $tiles = this.$overwatchPanel?.find("#quickPanel .quick_tiles");
+        if ($tiles == null || $tiles.length < 1) return null;
+        if ($tiles.find("#" + config.id).length > 0) return null;
+        const $tile = $("<button>").addClass("quick_tile").attr("type", "button").attr("id", config.id);
+        $tile.append($("<span>").addClass("tile_icon").attr("aria-hidden", "true").text(config.icon ?? ""));
+        $tile.append($("<span>").addClass("tile_label").text(config.label ?? ""));
+        if (typeof config.onClick == "function") $tile.on("click", config.onClick);
+        $tiles.append($tile);
+        return $tile[0];
+    },
+    unregisterOverwatchPanelTile(id) {
+        if (id == null) return false;
+        const $tile = this.$overwatchPanel?.find("#quickPanel .quick_tiles #" + id);
+        if ($tile == null || $tile.length < 1) return false;
+        $tile.off("click").remove();
+        return true;
+    },
+    updateDarkModeToggleWidgets() {
+        const $widgets = $("#darkModeToggle");
+        if ($widgets.length < 1) return;
+        const pref = this.darkMode;
+        const state = (pref == null) ? "auto" : (pref ? "dark" : "light");
+        const icon = state == "light" ? "\u2600\uFE0F" : (state == "dark" ? "\u263D" : "\u{1F313}");
+        const label = state.charAt(0).toUpperCase() + state.slice(1);
+        $widgets.each(function() {
+            const $w = $(this);
+            $w.attr("data-dark-mode-state", state);
+            $w.find(".tile_icon").text(icon);
+            $w.find(".tile_label").text(label);
+        });
+    },
     //mainMenu
     setMenuSwipeHandler() {
         if (this.$mainMenu.length > 0) {
@@ -534,6 +688,88 @@ const estreUi = {
         if (this.menuSwipeHandler != null) this.menuSwipeHandler.release();
     },
+    //overwatchPanel
+    setPanelSwipeHandler() {
+        if (this.$overwatchPanel.length < 1) return;
+        this.releasePanelSwipeHandler();
+        const ui = this;
+        if (this.$panelTrigger.length > 0) {
+            this.panelOpenSwipeHandler = new EstreSwipeHandler(this.$panelTrigger[0]).unuseX()
+                .setResponseBound(this.$overwatchPanel)
+                .setOnUp(function(grabX, grabY, handled, canceled, directed) {
+                    if (handled && grabY > 0 && !ui.isOpenOverwatchPanel) {
+                        setTimeout(_ => ui.openOverwatchPanel(), 0);
+                    }
+                });
+        }
+        if (this.$panelGrabArea.length > 0) {
+            this.panelCloseSwipeHandler = new EstreSwipeHandler(this.$panelGrabArea[0]).unuseX()
+                .setResponseBound(this.$overwatchPanel)
+                .setOnUp(function(grabX, grabY, handled, canceled, directed) {
+                    if (handled && grabY < 0 && ui.isOpenOverwatchPanel) {
+                        setTimeout(_ => ui.closeOverwatchPanel(), 0);
+                    }
+                });
+        }
+    },
+    releasePanelSwipeHandler() {
+        if (this.panelOpenSwipeHandler != null) { this.panelOpenSwipeHandler.release(); this.panelOpenSwipeHandler = null; }
+        if (this.panelCloseSwipeHandler != null) { this.panelCloseSwipeHandler.release(); this.panelCloseSwipeHandler = null; }
+    },
+    // The .dynamic_section_block inside overwatchPanel lives outside any <article>,
+    // so the standard article-scoped handle init never reaches it. Attach the handle
+    // here with the panel itself acting as a minimal host.
+    initOverwatchPanelHandles() {
+        if (this.$overwatchPanel.length < 1) return;
+        const $block = this.$panelBlock;
+        if ($block == null || $block.length < 1) return;
+        const host = { $host: this.$overwatchPanel };
+        new EstreDynamicSectionBlockHandle($block[0], host).init();
+    },
+    // Mounts EstreTimelineView onto overwatchPanel #timeline slot (roadmap #010).
+    // Timeline persists entries left by checkOut()ed noti banners.
+    initOverwatchPanelTimeline() {
+        if (typeof EstreTimelineView === "undefined") return;
+        if (this.$overwatchPanel == null || this.$overwatchPanel.length < 1) return;
+        const $timeline = this.$overwatchPanel.find("#timeline");
+        if ($timeline.length < 1) return;
+        this.timelineView = new EstreTimelineView($timeline);
+    },
+    setOverwatchPanelClock() {
+        if (this.$panelClock == null) return;
+        const now = new Date();
+        if (this.$panelClock.length > 0) {
+            const hh = String(now.getHours()).padStart(2, "0");
+            const mm = String(now.getMinutes()).padStart(2, "0");
+            this.$panelClock.text(hh + ":" + mm);
+        }
+        if (this.$panelDate.length > 0) {
+            const fmt = new Intl.DateTimeFormat(undefined, { weekday: "short", month: "short", day: "numeric" });
+            this.$panelDate.text(fmt.format(now));
+        }
+    },
+    scheduleOverwatchPanelClock() {
+        this.releaseOverwatchPanelClock();
+        this.setOverwatchPanelClock();
+        const now = new Date();
+        const msToNext = 60000 - (now.getSeconds() * 1000 + now.getMilliseconds());
+        this.panelClockTimeoutId = setTimeout(_ => {
+            this.setOverwatchPanelClock();
+            this.panelClockIntervalId = setInterval(_ => this.setOverwatchPanelClock(), 60000);
+        }, msToNext);
+    },
+    releaseOverwatchPanelClock() {
+        if (this.panelClockTimeoutId != null) { clearTimeout(this.panelClockTimeoutId); this.panelClockTimeoutId = null; }
+        if (this.panelClockIntervalId != null) { clearInterval(this.panelClockIntervalId); this.panelClockIntervalId = null; }
+    },
     mainMenuBtnOnClick(e) {
         estreUi.toggleMainMenuButton();
     },
@@ -542,6 +778,10 @@ const estreUi = {
         estreUi.closeMainMenu();
     },
+    overwatchPanelGrabAreaOnclick(e) {
+        estreUi.closeOverwatchPanel();
+    },
     toggleMainMenuButton() {
         if (this.isOpenMainMenu) return this.closeMainMenu();
         else return this.openMainMenu();
@@ -590,6 +830,53 @@ const estreUi = {
     },
+    //overwatchPanel
+    toggleOverwatchPanel(sectionId) {
+        if (this.isOpenOverwatchPanel) return this.closeOverwatchPanel();
+        else return this.openOverwatchPanel(sectionId);
+    },
+    openOverwatchPanel(sectionId) {
+        if (!this.isOpenOverwatchPanel) {
+            this.$overwatchPanel.attr(eds.opened, t1);
+            if (sectionId != null) this.showOverwatchPanelSection(sectionId);
+            else {
+                const $top = this.$panelSections.filter(asv(eds.onTop, t1));
+                const panelCurrentTop = $top[$top.length - 1]?.pageHandle;
+                if (panelCurrentTop != null) {
+                    this.panelCurrentOnTop = panelCurrentTop;
+                    panelCurrentTop.show(false);
+                }
+            }
+            return true;
+        } else if (sectionId != null) {
+            this.showOverwatchPanelSection(sectionId);
+            return true;
+        } else return false;
+    },
+    closeOverwatchPanel() {
+        if (this.isOpenOverwatchPanel) {
+            this.$overwatchPanel.attr(eds.opened, "");
+            this.panelCurrentOnTop?.onHide();
+            return true;
+        } else return false;
+    },
+    showOverwatchPanelSection(id) {
+        const $target = this.$panelSections.filter(eid + id);
+        if ($target.length < 1) return false;
+        const targetEl = $target[$target.length - 1];
+        targetEl.scrollIntoView({ behavior: "smooth", block: "start", inline: "start" });
+        const targetComponent = targetEl.pageHandle;
+        if (targetComponent != null) {
+            targetComponent.show(false);
+            this.panelCurrentOnTop = targetComponent;
+        }
+        return true;
+    },
     //rootbar
     initRootbar() {
         this.$rootTabs = this.$tabsbar.find(c.c + btn);
@@ -1393,6 +1680,45 @@ const estreUi = {
         return component;
     },
+    async initStaticPanels(term = 0) {
+        const $pss = this.$panelSections;
+        const delayer = (delay = term) => postPromise(resolve => setTimeout(resolve, delay));
+        for (var i=0; i<$pss.length; i++) {
+            this.initStaticPanel($pss[i], null, u, true);
+            await delayer();
+        }
+        let $top = this.$panelSections.filter(asv(eds.onTop, t1));
+        if ($top.length < 1) $top = this.$panelSections.filter(eid + "quickPanel");
+        if ($top.length < 1) $top = this.$panelSections;
+        if ($top.length > 0) {
+            const targetComponent = $top[$top.length - 1].pageHandle;
+            targetComponent?.show(false);
+            this.panelCurrentOnTop = targetComponent;
+        }
+    },
+    releaseStaticPanel(component) {
+        if (component == null) return;
+        const instanceId = component.instanceId;
+        component.release(component.isStatic ? null : true);
+        if (this.panelSections[instanceId] != null) delete this.panelSections[instanceId];
+        const index = this.panelSectionList.indexOf(component);
+        if (index > -1) this.panelSectionList.splice(index, 1);
+    },
+    initStaticPanel(bound, intent = null, instanceOrigin, init = false) {
+        this.releaseStaticPanel(bound.pageHandle);
+        const component = new EstrePanelComponent(bound, instanceOrigin);
+        if (!init || component.isStatic) {
+            this.panelSections[component.instanceId] = component;
+            this.panelSectionList.push(component);
+        }
+        component.init(intent);
+        return component;
+    },
     async initHeaderBars(term = 0) {
         const $hss = this.$headerSections;