estreui 1.3.0 → 1.5.0

package/scripts/estreUi-pageModel.js

@@ -45,6 +45,80 @@ class EstrePageHandle {
 
     get title() { return this.$host?.attr(eds.title); }
 
+    /**
+     * Cover-bar entry label override. Falls back to `title` (= `data-title`) when unset.
+     * Set via `setCoverTitle(value)`; pass `undefined` to clear the override.
+     * @type {string|undefined}
+     */
+    #coverTitle = undefined;
+    get coverTitle() { return this.#coverTitle ?? this.title; }
+    setCoverTitle(value) {
+        this.#coverTitle = value;
+        if (this.#coverEntryToken != null) {
+            estreUi.coverBarHandle?.updateEntry(this.#coverEntryToken, { title: this.coverTitle });
+        }
+    }
+
+    /**
+     * Cover-bar entry icon override. Distinguishes "unset" (falls back to
+     * `data-icon`) from explicit set values via #isCoverIconSet — `undefined`,
+     * `null`, `""`, `"none"`, and an arbitrary URL are all distinct outcomes
+     * the bar's fallback branch interprets in Phase 1C.
+     * @type {string|null|undefined}
+     */
+    #coverIcon = undefined;
+    #isCoverIconSet = false;
+    get coverIcon() {
+        if (this.#isCoverIconSet) return this.#coverIcon;
+        return this.$host?.attr(eds.icon);
+    }
+    setCoverIcon(value) {
+        this.#coverIcon = value;
+        this.#isCoverIconSet = true;
+        if (this.#coverEntryToken != null) {
+            estreUi.coverBarHandle?.updateEntry(this.#coverEntryToken, { icon: this.coverIcon });
+        }
+    }
+
+    /**
+     * Opt-in flag for cover-bar mounting. `data-cover-mount="1"` on the page
+     * section enables this; sub-class handlers can override the getter for
+     * programmatic opt-in (Phase 1C will also expose a constructor option).
+     */
+    get coverMount() { return this.$host?.attr(eds.coverMount) == t1; }
+
+    /**
+     * Token returned by `estreUi.coverBarHandle.pushEntry()` when this handle's
+     * page was registered in the cover bar. `null` whenever no entry is live
+     * (page closed / cover bar not ready / coverMount opt-out).
+     */
+    #coverEntryToken = null;
+    get coverEntryToken() { return this.#coverEntryToken; }
+
+    /**
+     * Internal — push an entry for this handle into the cover bar when opt-in
+     * is set and the bar is ready. Re-entry-safe: noop if already registered.
+     */
+    #registerCoverEntry() {
+        if (this.#coverEntryToken != null) return;
+        if (!this.coverMount) return;
+        const handle = estreUi.coverBarHandle;
+        if (handle == null) return;
+        this.#coverEntryToken = handle.pushEntry({
+            pageHandle: this,
+            sectionBound: this.sectionBound,
+            title: this.coverTitle,
+            icon: this.coverIcon,
+        });
+    }
+
+    /** Internal — remove this handle's cover-bar entry, if any. */
+    #releaseCoverEntry() {
+        if (this.#coverEntryToken == null) return;
+        estreUi.coverBarHandle?.removeEntry(this.#coverEntryToken);
+        this.#coverEntryToken = null;
+    }
+
     #appbarLeft = null;
     #appbarRight = null;
     #appbarCenter = null;
@@ -403,6 +477,7 @@ class EstrePageHandle {
         if (!this.isOpened) {
             if (window.isDebug) console.log("[onOpen] " + this.sectionBound + " " + this.hostType + " " + this.pid);//, this.host);
             this.#isOpened = true;
+            this.#registerCoverEntry();
             if (this.handler?.onOpen != null) this.handler.onOpen(this);
             if (this.intent?.onOpen != null) for (var item of this.intent.onOpen) if (item.from == this.hostType && !item.disabled) this.processAction(item);
             return true;
@@ -414,6 +489,7 @@ class EstrePageHandle {
             if (window.isVerbosely) console.log("[onShow] " + this.sectionBound + " " + this.hostType + " " + this.pid, this.host);
             else if (window.isDebug) console.log("[onShow] " + this.sectionBound + " " + this.hostType + " " + this.pid);
             this.#isShowing = true;
+            if (this.#coverEntryToken != null) estreUi.coverBarHandle?.setMinimizedByToken(this.#coverEntryToken, false);
             if (this.handler?.onShow != null) this.handler.onShow(this);
             if (this.intent?.onShow != null) for (var item of this.intent.onShow) if (item.from == this.hostType && !item.disabled) this.processAction(item);
             return true;
@@ -426,6 +502,7 @@ class EstrePageHandle {
             if (window.isDebug) console.log("[onFocus] " + this.sectionBound + " " + this.hostType + " " + this.pid);//, this.host);
             this.#isFocused = true;
             this.#everFocused = true;
+            if (this.#coverEntryToken != null) estreUi.coverBarHandle?.setActiveByToken(this.#coverEntryToken);
             const handled = this.handler?.onFocus?.(this, isFirstFocus);
             if (this.intent?.onFocus != null) for (var item of this.intent.onFocus) if (item.from == this.hostType && !item.disabled) this.processAction(item);
             if (handled === true) {
@@ -475,6 +552,7 @@ class EstrePageHandle {
             this.#isShowing = false;
             if (window.isVerbosely) console.log("[onHide] " + this.sectionBound + " " + this.hostType + " " + this.pid, this.host);
             else if (window.isDebug) console.log("[onHide] " + this.sectionBound + " " + this.hostType + " " + this.pid);
+            if (this.#coverEntryToken != null) estreUi.coverBarHandle?.setMinimizedByToken(this.#coverEntryToken, true);
             if (this.intent?.onHide != null) for (var item of this.intent.onHide) if (item.from == this.hostType && !item.disabled) await this.processAction(item);
             if (this.handler?.onHide != null) await this.handler.onHide(this, fullyHide);
             if (this.intent?.bringOnBack != null && this.intent.bringOnBack.pid != n) {
@@ -499,6 +577,7 @@ class EstrePageHandle {
             this.#everFocused = false;
             this.lastFocusedElement = null;
             if (window.isDebug) console.log("[onClose] " + this.sectionBound + " " + this.hostType + " " + this.pid);//, this.host);
+            this.#releaseCoverEntry();
             if (this.intent?.onClose != null) for (var item of this.intent.onClose) if (item.from == this.hostType && !item.disabled) await this.processAction(item);
             if (this.handler?.onClose != null) await this.handler.onClose(this);
             if (this.intent?.bringOnBack != null && this.intent.bringOnBack.pid != n) {
@@ -2774,6 +2853,17 @@ class EstrePageHandler {
     /** @type {*} The data field of the intent. */
     get intentData() { return this.intent?.data; }
 
+    /** Cover-bar entry label — see EstrePageHandle.coverTitle. */
+    get coverTitle() { return this.handle?.coverTitle; }
+    /** Cover-bar entry icon — see EstrePageHandle.coverIcon. */
+    get coverIcon() { return this.handle?.coverIcon; }
+    /** Cover-bar opt-in flag — see EstrePageHandle.coverMount. */
+    get coverMount() { return this.handle?.coverMount ?? false; }
+    /** Updates the cover-bar entry label for this handler's page. */
+    setCoverTitle(value) { return this.handle?.setCoverTitle(value); }
+    /** Updates the cover-bar entry icon for this handler's page. See EstrePageHandle.coverIcon for unset/empty/"none"/URL semantics. */
+    setCoverIcon(value) { return this.handle?.setCoverIcon(value); }
+
     /**
      * @param {EstrePageHandle} handle - The page handle to bind.
      * @param {*} [provider] - The provider that registered this handler.
@@ -3723,7 +3813,147 @@ class EstreUiPage {
 
         },
 
-        "$i&o=notification#noti@noti^": class extends EstrePageHandler { },
+        "$i&o=notification#noti@noti^": class extends EstrePageHandler {
+            $postBlock;
+            $mainIconPlace;
+            $subIconPlace;
+            $titleLine;
+            $subtitleLine;
+            $contentLine;
+            swipeHandler;
+            #closeTimer;
+            #closing = false;
+
+            #applyIntentToBlock(intent) {
+                const data = intent?.data ?? {};
+                this.$mainIconPlace.toggle(data.largeIconSrc != null && data.largeIconSrc !== "");
+                this.$subIconPlace.toggle(data.iconSrc != null && data.iconSrc !== "");
+                this.$titleLine.toggle(data.contentTitle != null && data.contentTitle !== "");
+                this.$subtitleLine.toggle(data.subtitle != null && data.subtitle !== "");
+                this.$contentLine.toggle(data.content != null && data.content !== "");
+            }
+
+            #resetCloseTimer(handle) {
+                if (this.#closeTimer != null) {
+                    clearTimeout(this.#closeTimer);
+                    this.#closeTimer = null;
+                }
+                const showTime = handle.intent?.data?.showTime ?? EstreNotificationManager.defaultShowTime;
+                this.#closeTimer = setTimeout(_ => this.#beginClose(handle), showTime);
+            }
+
+            #beginClose(handle) {
+                if (this.#closing) return;
+                this.#closing = true;
+                if (this.#closeTimer != null) {
+                    clearTimeout(this.#closeTimer);
+                    this.#closeTimer = null;
+                }
+
+                if (!EstreNotificationManager.hasQueued) {
+                    handle.close();
+                    return;
+                }
+
+                const $block = this.$postBlock;
+                const blockEl = $block[0];
+                if (blockEl == null) { handle.close(); return; }
+                const $article = $block.parent();
+                const articleEl = $article[0];
+                const rect = blockEl.getBoundingClientRect();
+                const articleRect = articleEl.getBoundingClientRect();
+                const $ghost = $block.clone(false).removeClass("banner_incoming");
+                $ghost.addClass("banner_ghost_exit");
+                $ghost.css({
+                    position: "absolute",
+                    left: (rect.left - articleRect.left) + "px",
+                    top: (rect.top - articleRect.top) + "px",
+                    width: rect.width + "px",
+                    margin: 0,
+                    pointerEvents: "none",
+                });
+                $article.append($ghost);
+                setTimeout(() => $ghost.remove(), 550);
+
+                $block.css({ visibility: "hidden", pointerEvents: "none" });
+
+                EstreNotificationManager.beginCheckOut(handle.intent);
+            }
+
+            onBring(handle) {
+                const $host = handle.$host;
+                this.$postBlock = $host.find(".post_block");
+                this.$mainIconPlace = this.$postBlock.children(".icon_place");
+                this.$titleLine = this.$postBlock.find("> .content_place > .title_line");
+                this.$subtitleLine = this.$postBlock.find("> .content_place > .subtitle_line");
+                this.$contentLine = this.$postBlock.find("> .content_place > .content_area > .content_place");
+                this.$subIconPlace = this.$postBlock.find("> .content_place > .content_area > .icon_place");
+
+                this.#applyIntentToBlock(handle.intent);
+
+                EstreNotificationManager.current = handle.intent;
+                if (window.isVerbosely) console.log("pushed", handle.intent);
+            }
+
+            onOpen(handle) {
+                this.#closing = false;
+                this.$postBlock.click((e) => {
+                    e.preventDefault();
+
+                    if (window.isVerbosely) console.log("clicked: ", handle.intent);
+                    handle.intent?.onTakeInteraction?.(handle.intent);
+                    this.#beginClose(handle);
+
+                    return false;
+                });
+
+                const self = this;
+                this.swipeHandler = new EstreSwipeHandler(this.$postBlock)
+                    .setStopPropagation()
+                    .setPreventDefault()
+                    .unuseX()
+                    .setThresholdY(1)
+                    .setDropStrayed(false)
+                    .setResponseBound(this.$postBlock)
+                    .setOnUp(function (grabX, grabY, handled, canceled, directed) {
+                        if (!handled) return;
+                        if (this.handledDirection === "up" && Math.abs(grabY) > 20) {
+                            self.#beginClose(handle);
+                        } else if (this.handledDirection === "down" && Math.abs(grabY) > 40) {
+                            handle.intent?.onTakeInteraction?.(handle.intent);
+                            self.#beginClose(handle);
+                        }
+                    });
+
+                this.#resetCloseTimer(handle);
+                if (window.isVerbosely) console.log("showing: ", handle.intent);
+            }
+
+            onIntentUpdated(handle, intent) {
+                // Queue-chain handover: previous banner's exit is playing on a
+                // detached ghost clone; this article reuses the same DOM with
+                // fresh content + a restart-triggered enter animation.
+                this.#closing = false;
+                if (intent?.data != null) this.#applyIntentToBlock(intent);
+                EstreNotificationManager.current = handle.intent;
+
+                const $block = this.$postBlock;
+                $block.css({ visibility: "", pointerEvents: "" });
+                $block.removeClass("banner_incoming");
+                void $block[0]?.offsetWidth;
+                $block.addClass("banner_incoming");
+
+                this.#resetCloseTimer(handle);
+            }
+
+            onClose(handle) {
+                if (this.#closeTimer != null) {
+                    clearTimeout(this.#closeTimer);
+                    this.#closeTimer = null;
+                }
+                EstreNotificationManager.checkOut(handle.intent);
+            }
+        },
         "$i&o=notification#note@note^": class extends EstrePageHandler {
             $postBlock;
 

package/serviceWorker.js

@@ -1,4 +1,4 @@
-const INSTALLATION_VERSION_NAME = "1.3.0-r20260421";
+const INSTALLATION_VERSION_NAME = "1.5.0-r20260524";
 // ^^ Use for check new update "Native application(webview) version(or Android/iOS version combo) - PWA release version"
 // ex) "1.0.1/1.0.0-r20251101k"
 
@@ -22,7 +22,7 @@ const INSTALLATION_FILE_LIST = [
 
 
 // Common files cache - Be changes some time but, well not changed very often
-const CACHE_NAME_COMMON_FILES = "common-files-cache-v1-20260421";
+const CACHE_NAME_COMMON_FILES = "common-files-cache-v1-20260524";
 
 const COMMON_FILES_TO_CACHE = [
     "./",
@@ -51,6 +51,7 @@ const COMMON_FILES_TO_CACHE = [
     "./scripts/estreUi-core.js",
     "./scripts/estreUi-dialog.js",
     "./scripts/estreUi-notation.js",
+    "./scripts/estreUi-notification.js",
     "./scripts/estreUi-pageModel.js",
     "./scripts/estreUi-pageManager.js",
     "./scripts/estreUi-handles.js",
@@ -60,7 +61,7 @@ const COMMON_FILES_TO_CACHE = [
 
 
 // Static files cache - Rarely changes after release
-const CACHE_NAME_STATIC_FILES = "static-files-cache-v1-20260221";
+const CACHE_NAME_STATIC_FILES = "static-files-cache-v1-20260524";
 
 const STATIC_FILES_TO_CACHE = [
     "./favicon.ico",
@@ -96,6 +97,9 @@ const STATIC_FILES_TO_CACHE = [
 
     "./vectors/more_vertical_slim_icon.svg",
     "./vectors/app_icon.svg",
+    "./vectors/cover-icon-default-static.svg",
+    "./vectors/cover-icon-default-instant.svg",
+    "./vectors/cover-icon-default-overlay.svg",
 ];