@nsnanocat/preference-panes 1.3.0 → 1.3.1

package/dist/{module/navigation.mjs → navigation.mjs}

@@ -1,6 +1,6 @@
 /**
- * 独立页面的三点按钮和底部操作菜单；嵌入页面由宿主提供对应界面。
- * Overflow trigger and bottom action sheet for standalone pages; embedded pages use host-provided chrome.
+ * 共用菜单按钮和底部操作菜单；原生宿主可通过 MORE 调用。
+ * Shared menu trigger and bottom action sheet; native hosts may invoke it through MORE.
  */
 class ActionMenu {
     #button;
@@ -28,13 +28,14 @@ class ActionMenu {
         this.element = document.createElement("span");
         const triggerRoot = this.element.attachShadow({ mode: "open" });
         triggerRoot.innerHTML = `<style>
-          :host{display:inline-flex;width:44px;height:44px;color:inherit}
+          :host{display:inline-flex;flex:none;width:37px;height:37px;color:inherit}
           :host([hidden]){display:none!important}
-          button{width:44px;height:44px;padding:10px;font:inherit;cursor:pointer;border:0;color:inherit;background:none}
+          button{box-sizing:border-box;width:37px;height:37px;padding:8px;border-radius:4px;font:inherit;cursor:pointer;border:0;color:inherit;background:none;transition:background-color .3s}
+          button:hover{background:var(--pp-field,#8882)}
           button:disabled{opacity:.4;cursor:default}
           button:focus-visible{outline:2px solid currentColor;outline-offset:-3px}
-          svg{display:block;width:24px;height:24px;fill:currentColor}
-        </style><button type="button" aria-label="更多操作" aria-haspopup="menu" aria-expanded="false"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="4" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="20" cy="12" r="2"/></svg></button>`;
+          svg{display:block;width:21px;height:21px;fill:none}
+        </style><button type="button" aria-label="更多操作" aria-haspopup="menu" aria-expanded="false"><svg viewBox="0 0 21 21" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.667" d="M3.645 5.225h13.333M3.645 10.225h13.333M3.645 15.225h13.333"/></svg></button>`;
         this.#button = triggerRoot.querySelector("button");
         this.#layer = document.createElement("span");
         const layerRoot = this.#layer.attachShadow({ mode: "open" });
@@ -146,129 +147,6 @@ class ActionMenu {
     }
 }
 
-/**
- * 模块文档容器：获取静态 HTML，并通过 iframe 数据属性传递页面资源输入。
- * Module document container: fetch static HTML and pass page resource inputs through iframe data attributes.
- */
-class ModuleFrame extends EventTarget {
-    #url;
-    #options;
-    #controller = new AbortController();
-    #abort = () => this.destroy();
-    #state;
-    #change = event => {
-        this.#state = { ...event.detail, actions: event.detail.actions ?? [] };
-        this.dispatchEvent(new Event("change"));
-    };
-    #forward(type, event) {
-        if (!this.dispatchEvent(new CustomEvent(type, { cancelable: true, detail: event.detail }))) event.preventDefault();
-    }
-    #confirmation = event => this.#forward("confirm", event);
-    #notice = event => this.#forward("notice", event);
-    #openURL = event => this.#forward("open-url", event);
-
-    /**
-     * 建立 iframe；调用方挂载 element 后调用 load。
-     * Create the iframe; callers mount element and then call load.
-     * @param {string | URL} url 模块请求地址 / Module request URL.
-     * @param {{signal?: AbortSignal, headers?: HeadersInit}} [options] 请求选项 / Request options.
-     */
-    constructor(url, options = {}) {
-        super();
-        this.#url = new URL(url, document.baseURI);
-        const match = /^\/settings\/([a-zA-Z0-9_-]+)\/?$/.exec(this.#url.pathname);
-        if (!match) throw new TypeError("Open a concrete module URL");
-        this.#options = { signal: options.signal };
-        this.element = document.createElement("iframe");
-        this.element.title = `${match[1]} 设置`;
-        this.element.dataset.preferencePanes = "true";
-        this.element.dataset.preferencePanesModule = match[1];
-        this.element.dataset.preferencePanesBase = this.#url.href;
-        const headers = new Headers(options.headers);
-        for (const [header, property, kind] of [
-            ["X-PreferencePanes-JSON", "preferencePanesJson", "BoxJS"],
-            ["X-PreferencePanes-CSS", "preferencePanesStylesheet", "CSS"],
-        ]) {
-            if (!headers.has(header)) continue;
-            const source = headers.get(header)?.trim();
-            if (!source) {
-                if (kind === "BoxJS") throw new TypeError("BoxJS resource URL is required");
-                continue;
-            }
-            const resource = new URL(source, this.#url);
-            if (!["http:", "https:"].includes(resource.protocol)) throw new TypeError(`${kind} resource must use HTTP(S)`);
-            this.element.dataset[property] = resource.href;
-        }
-        this.element.addEventListener("preferencepanes:change", this.#change);
-        this.element.addEventListener("preferencepanes:confirm", this.#confirmation);
-        this.element.addEventListener("preferencepanes:notice", this.#notice);
-        this.element.addEventListener("preferencepanes:open-url", this.#openURL);
-        this.#state = { title: match[1], module: match[1], busy: false, canGoBack: true, actions: [] };
-        options.signal?.addEventListener("abort", this.#abort, { once: true });
-    }
-
-    /**
-     * 当前模块导航状态。
-     * Current module navigation state.
-     */
-    get state() {
-        return { ...this.#state };
-    }
-
-    /**
-     * 获取原始 HTML；晚到响应在退出后不得重新挂载。
-     * Fetch unmodified HTML; a late response must not remount after departure.
-     * @returns {Promise<void>} HTML 已交给 iframe；表单状态通过 change 事件提供 / HTML assigned; form state is reported through change.
-     */
-    async load() {
-        if (this.#options.signal?.aborted) this.destroy();
-        const timer = setTimeout(() => this.#controller.abort(), 10000);
-        try {
-            const response = await fetch(this.#url, { method: "GET", cache: "no-store", credentials: "omit", signal: this.#controller.signal });
-            if (response.status !== 200) throw new Error(`HTTP ${response.status}`);
-            const html = await response.text();
-            if (this.#controller.signal.aborted) throw new DOMException("The operation was aborted", "AbortError");
-            this.element.srcdoc = html;
-        } finally {
-            clearTimeout(timer);
-        }
-    }
-
-    /**
-     * 使用 iframe 的联合历史返回；写入期间不导航。
-     * Navigate joint iframe history back, except while a write is pending.
-     * @returns {void} 无返回值 / No return value.
-     */
-    back() {
-        if (!this.#state.busy && this.#state.canGoBack) this.element.contentWindow.history.back();
-    }
-
-    /**
-     * 向模块发送菜单操作，不让宿主访问内部 DOM 或存储客户端。
-     * Dispatch a menu action without host access to internal DOM or the storage client.
-     * @param {string} id 当前可用操作 / Available action identifier.
-     * @returns {void} 无返回值 / No return value.
-     */
-    perform(id) {
-        if (this.#state.busy || !this.#state.actions.some(action => action.id === id)) throw new Error("Action is not available");
-        this.element.dispatchEvent(new CustomEvent("preferencepanes:action", { detail: id }));
-    }
-
-    /**
-     * 取消加载与事件订阅；节点保留到 Navigation 的退出动画结束。
-     * Cancel loading and subscriptions; Navigation retains the node until its exit animation ends.
-     * @returns {void} 无返回值 / No return value.
-     */
-    destroy() {
-        this.#controller.abort();
-        this.#options.signal?.removeEventListener("abort", this.#abort);
-        this.element.removeEventListener("preferencepanes:change", this.#change);
-        this.element.removeEventListener("preferencepanes:confirm", this.#confirmation);
-        this.element.removeEventListener("preferencepanes:notice", this.#notice);
-        this.element.removeEventListener("preferencepanes:open-url", this.#openURL);
-    }
-}
-
 /**
  * 模块探测请求选项。
  * Options for a module probe request.
@@ -395,8 +273,8 @@ class ModuleStatus extends EventTarget {
 }
 
 /**
- * 同一文档内的主页/子页导航；iframe 各自的实例通过浏览器联合历史协作。
- * Navigate home/detail views within a document; iframe instances cooperate through joint browser history.
+ * 同一文档内的首页、模块及字段子页导航。
+ * Navigate homepage, module and field views within one document.
  */
 class Navigation extends EventTarget {
     #container;
@@ -408,7 +286,7 @@ class Navigation extends EventTarget {
     #retiring;
     #controller;
     #animation;
-    #scroll = new WeakMap();
+    #scroll = new Map();
     #onHistory = () => this.#route();
     #onPageShow = event => {
         if (event.persisted) this.#route(true);
@@ -451,28 +329,37 @@ class Navigation extends EventTarget {
     }
 
     /**
-     * 加入子页历史；使用文档自身 URL，避免 srcdoc 按宿主 base URL 跳转。
-     * Push a detail using the document URL, avoiding srcdoc navigation against the host base URL.
+     * 加入模块或字段子页历史，保留路由中的层级分隔符。
+     * Push a module or field view while retaining route hierarchy separators.
      * @param {string} key 子页键 / Detail key.
      * @returns {void} 无返回值 / No return value.
      */
     open(key) {
         if (key === this.#key) return;
         const url = new URL(this.#window.location.href);
-        url.hash = encodeURIComponent(key);
+        url.hash = key.split("/").map(encodeURIComponent).join("/");
         this.#window.history.pushState({ ...this.#window.history.state, preferencePanesRoute: key }, "", url.href);
         this.#route();
     }
 
     /**
-     * 沿浏览器联合历史返回，根页可退回宿主或上个文档。
-     * Go back through joint history, including a host or previous document from home.
+     * 沿文档历史返回，根页可退回上个文档。
+     * Go back through document history, including the previous document from home.
      * @returns {void} 无返回值 / No return value.
      */
     back() {
         if (this.canGoBack) this.#window.history.back();
     }
 
+    /**
+     * 更新当前页的挂载视图，保留路由和滚动位置。
+     * Refresh the mounted view while retaining route and scroll position.
+     * @returns {void} 无返回值 / No return value.
+     */
+    refresh() {
+        this.#route(true);
+    }
+
     /**
      * 解析 URL 并统一处理页面切换、加载取消与动画结束后的释放。
      * Resolve the URL and coordinate transitions, cancellation and release after animation.
@@ -489,28 +376,42 @@ class Navigation extends EventTarget {
             key = "";
         }
         if (!reload && key === this.#key) return;
+        if (key !== this.#key) this.#scroll.set(this.#key, (this.#view ?? this.#home).scrollTop);
         this.#controller?.abort();
         this.#controller = new AbortController();
         const next = key ? this.#create(key, this.#controller.signal) : undefined;
         if (!next) key = "";
         const history = this.#window.history;
-        // 直接打开子页时建立一次主页历史；刷新不重复堆叠。
-        // Seed home history once for direct details, without stacking entries on reload.
+        // 直接打开字段页时补齐首页和模块历史；刷新不重复堆叠。
+        // Seed homepage and module history for direct field links without stacking on reload.
         if (url.hash && history.state?.preferencePanesRoute !== key) {
             url.hash = "";
             history.replaceState({ ...history.state, preferencePanesRoute: "" }, "", url.href);
             if (key) {
-                url.hash = encodeURIComponent(key);
+                const module = key.split("/")[0];
+                if (key.includes("/") && module !== "$link") {
+                    url.hash = encodeURIComponent(module);
+                    history.pushState({ ...history.state, preferencePanesRoute: module }, "", url.href);
+                }
+                url.hash = key.split("/").map(encodeURIComponent).join("/");
                 history.pushState({ ...history.state, preferencePanesRoute: key }, "", url.href);
             }
         }
         const previous = this.#view;
+        if (previous === next && this.#key === key) {
+            if (previous && this.#scroll.has(key)) {
+                previous.scrollTop = this.#scroll.get(key);
+                this.#scroll.delete(key);
+            }
+            this.dispatchEvent(new Event("change"));
+            return;
+        }
+        const scroll = this.#scroll.get(key) ?? (key === this.#key ? (previous?.scrollTop ?? 0) : 0);
         const position = previous ? this.#window.getComputedStyle(previous).transform : "none";
         this.#animation?.cancel();
         this.#retiring?.remove();
         this.#retiring = previous;
         if (previous) {
-            this.#scroll.set(previous, previous.scrollTop);
             previous.inert = true;
         }
         this.#key = key;
@@ -519,7 +420,14 @@ class Navigation extends EventTarget {
         if (next) {
             next.inert = false;
             this.#container.append(next);
-            next.scrollTop = this.#scroll.get(next) ?? 0;
+            next.scrollTop = scroll;
+            // 加载占位页可能无法滚到原位置；配置与控件就绪后的 refresh 再恢复一次。
+            // A loading placeholder may clamp scrolling; restore once more when config and controls refresh.
+            if (next.scrollTop === scroll) this.#scroll.delete(key);
+        }
+        if (!next) {
+            this.#home.scrollTop = this.#scroll.get("") ?? 0;
+            this.#scroll.delete("");
         }
         const moving = next ?? previous;
         if (moving) {
@@ -553,4 +461,4 @@ class Navigation extends EventTarget {
     }
 }
 
-export { ActionMenu, ModuleFrame, ModuleStatus, Navigation, probeModule };
+export { ActionMenu, ModuleStatus, Navigation, probeModule };