sechskies/portal-nav.js

(() => {
    /**
     * ── 頁面籌備中：開關方式 ─────────────────────────────────────────
     * ① 整個檔案先關：COMING_SOON_PAGES 列出主檔名（目前已含長卷／電子書／志源頁／演唱會／典藏／地圖等）。
     * ② index.html 細到錨點：改 INDEX_NAV_OPEN_HASHES；列在其中的 #才可點，其餘同檔連結為籌備中。
     * ③ 視覺：「(頁面籌備中)」由 style.css 的 ::after 在 hover／鍵盤 focus 時才顯示，
     *    title 與 aria-label 供觸控長按／螢幕閱讀器補充說明。
     * 要開放某連結：從對應 Set 移除檔名或補上錨點後重新整理。
     */
    const COMING_SOON_PAGES = new Set([
        "chronicle.html",
        "ssg2-ebook.html",
        "jiwon.html",
        "concert.html",
        "archive.html",
        "map.html",
    ]);

    /** 目前先開：淪陷瞬間 #origin + 子選單三項 #start / #mission / #timeline */
    const INDEX_NAV_OPEN_HASHES = new Set(["#origin", "#start", "#mission", "#timeline"]);

    function normalizePageKey(href) {
        if (!href || href === "#") return "";
        const core = href.split("#")[0].split("?")[0];
        const parts = core.split("/").filter(Boolean);
        const last = parts.length ? parts[parts.length - 1] : "";
        return last.toLowerCase();
    }

    /** 比照原邏輯：取 href 前半與網址列檔名比對 */
    function hrefMatchesCurrentPage(href, currentPage) {
        if (!href || href === "#") return false;
        const [filePart] = href.split("#");
        const base = filePart.split("/").pop();
        return base === currentPage;
    }

    /** 取得 #fragment（含 #）；若無錨點則回傳空字串 */
    function anchorFromHref(href) {
        const i = href.indexOf("#");
        if (i < 0) return "";
        return href.slice(i).split("?")[0];
    }

    function markLinkComingSoon(link, originalHref) {
        const visibleTitle = link.textContent.trim();
        link.setAttribute("data-coming-soon", "true");
        link.setAttribute("aria-disabled", "true");
        link.setAttribute("title", "頁面籌備中");
        link.setAttribute("aria-label", `${visibleTitle}（頁面籌備中）`);
        if (!link.dataset.originalHref) {
            link.dataset.originalHref = originalHref;
        }

        link.setAttribute("href", "#");
    }

    function linkShouldBeComingSoon(href, pageKey, pageKeysSoon) {
        if (pageKeysSoon.has(pageKey)) {
            return true;
        }
        if (pageKey === "index.html") {
            const frag = anchorFromHref(href);
            return !INDEX_NAV_OPEN_HASHES.has(frag);
        }
        return false;
    }

    /** 將籌備中規則套用至單一導覽列 */
    function applyComingSoonToNav(nav) {
        const pageKeysSoon = new Set(
            [...COMING_SOON_PAGES].map((p) => normalizePageKey(String(p))).filter(Boolean),
        );

        nav.querySelectorAll('a[href]').forEach((link) => {
            if (link.classList.contains("logo")) return;

            const href = link.getAttribute("href");
            if (!href || href === "#") return;

            const pageKey = normalizePageKey(href);
            if (!pageKey) return;

            if (!linkShouldBeComingSoon(href, pageKey, pageKeysSoon)) return;

            markLinkComingSoon(link, href);
        });

        nav.querySelectorAll(":scope > ul > li").forEach((li) => {
            const trigger = li.querySelector(":scope > a[href]");
            if (!trigger || trigger.classList.contains("logo")) return;
            if (trigger.getAttribute("data-coming-soon") === "true") {
                li.classList.add("coming-soon");
            }
        });
    }

    /** 全站導覽 HTML — 僅修改此字串即可同步所有頁面 */
    const PORTAL_NAV_INNER_HTML = `
<a class="logo" href="index.html"><img src="./img/logov.svg" alt="SECHSKIES Logo"></a>
<ul>
    <li><a href="index.html#origin">淪陷瞬間</a>
        <ul class="portal-submenu">
            <li><a href="index.html#start">好奇的開端</a></li>
            <li><a href="index.html#mission">成立的初衷</a></li>
            <li><a href="index.html#timeline">跨時空軌跡</a></li>
            <li><a href="index.html#story">傳奇的轉折</a></li>
            <li><a href="chronicle.html">傳奇紀實長卷</a></li>
            <li><a href="ssg2-ebook.html">六六歌2 電子書</a></li>
        </ul>
    </li>
    <li><a href="jiwon.html">瘋子與天才</a>
        <ul class="portal-submenu">
            <li><a href="jiwon.html#variety">瘋狂出演中</a></li>
            <li><a href="jiwon.html#stage">隊長的氣場</a></li>
        </ul>
    </li>
    <li><a href="concert.html">現場的震撼</a>
        <ul class="portal-submenu">
            <li><a href="concert.html#stage-now">永恆的重逢</a></li>
            <li><a href="concert.html#stage-past">燦爛的最初</a></li>
        </ul>
    </li>
    <li><a href="archive.html">黃色留聲機</a>
        <ul class="portal-submenu">
            <li><a href="archive.html#new">啟動新篇章</a></li>
            <li><a href="archive.html#classic">輝煌全盛期</a></li>
        </ul>
    </li>
    <li><a href="map.html">聖地巡禮</a>
        <ul class="portal-submenu">
            <li><a href="map.html#taipei">台北聖地</a></li>
            <li><a href="map.html#global">海外遠征</a></li>
        </ul>
    </li>
</ul>
`.trim();

    document.querySelectorAll("nav.portal-nav[data-portal-nav]").forEach((nav) => {
        nav.innerHTML = PORTAL_NAV_INNER_HTML;
        applyComingSoonToNav(nav);
    });

    const navs = Array.from(document.querySelectorAll(".portal-nav"));
    if (!navs.length) return;

    const currentPage = window.location.pathname.split("/").pop() || "index.html";

    navs.forEach((nav) => {
        const items = Array.from(nav.querySelectorAll("li"));
        const soonLinks = Array.from(nav.querySelectorAll('a[data-coming-soon="true"]'));

        const blockNavigation = (event) => {
            event.preventDefault();
            event.stopPropagation();
        };
        soonLinks.forEach((link) => {
            link.addEventListener("click", blockNavigation);
            link.addEventListener("auxclick", blockNavigation);
        });

        items.forEach((item) => {
            const trigger = item.querySelector(":scope > a");
            const submenu = item.querySelector(":scope > .portal-submenu");
            if (!trigger || !submenu) return;

            let closeTimer = null;

            const openItem = () => {
                if (closeTimer) window.clearTimeout(closeTimer);
                items.forEach((other) => {
                    if (other !== item) other.classList.remove("open");
                });
                item.classList.add("open");
            };

            const scheduleClose = () => {
                closeTimer = window.setTimeout(() => item.classList.remove("open"), 180);
            };

            item.addEventListener("mouseenter", openItem);
            item.addEventListener("mouseleave", scheduleClose);
            trigger.addEventListener("focus", openItem);

            trigger.addEventListener("click", (event) => {
                const isSoon = trigger.getAttribute("data-coming-soon") === "true";

                if (window.innerWidth <= 1024) {
                    event.preventDefault();
                    if (!isSoon && !item.classList.contains("coming-soon")) {
                        item.classList.toggle("open");
                    }
                    return;
                }

                if (isSoon) {
                    event.preventDefault();
                }
            });
        });

        document.addEventListener("click", (event) => {
            if (!nav.contains(event.target)) {
                items.forEach((item) => item.classList.remove("open"));
            }
        });

        const topLevelLinks = Array.from(nav.querySelectorAll(":scope > ul > li > a[href]"));
        topLevelLinks.forEach((link) => {
            const fallback = link.getAttribute("href");
            const source = link.dataset.originalHref || fallback;
            if (!source || source === "#") return;
            if (hrefMatchesCurrentPage(source, currentPage)) {
                link.classList.add("nav-current");
            }
        });
    });
})();