fix add assets/並更新全站引用
This commit is contained in:
@@ -0,0 +1,304 @@
|
||||
(() => {
|
||||
const canvas = document.getElementById("particles");
|
||||
if (canvas) {
|
||||
const ctx = canvas.getContext("2d");
|
||||
let particles = [];
|
||||
|
||||
function resizeCanvas() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
}
|
||||
|
||||
class Particle {
|
||||
constructor() {
|
||||
this.x = Math.random() * canvas.width;
|
||||
this.y = Math.random() * canvas.height;
|
||||
this.size = Math.random() * 4 + 1;
|
||||
this.speedX = Math.random() * 0.5 - 0.25;
|
||||
this.speedY = Math.random() * 0.5 + 0.2;
|
||||
}
|
||||
update() {
|
||||
this.x += this.speedX;
|
||||
this.y += this.speedY;
|
||||
if (this.y > canvas.height) this.y = 0;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#FFDD00";
|
||||
ctx.globalAlpha = 0.6;
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
function initParticles() {
|
||||
particles = [];
|
||||
for (let i = 0; i < 80; i += 1) {
|
||||
particles.push(new Particle());
|
||||
}
|
||||
}
|
||||
|
||||
function animateParticles() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
for (const particle of particles) {
|
||||
particle.update();
|
||||
particle.draw();
|
||||
}
|
||||
requestAnimationFrame(animateParticles);
|
||||
}
|
||||
|
||||
resizeCanvas();
|
||||
initParticles();
|
||||
animateParticles();
|
||||
window.addEventListener("resize", () => {
|
||||
resizeCanvas();
|
||||
initParticles();
|
||||
});
|
||||
}
|
||||
|
||||
const tabs = Array.from(document.querySelectorAll(".tab-btn"));
|
||||
const cards = Array.from(document.querySelectorAll(".polaroid-card"));
|
||||
const searchInput = document.getElementById("itinerary-search");
|
||||
const itineraryList = document.querySelector(".itinerary-list");
|
||||
const detailPanel = document.getElementById("detail-panel");
|
||||
const detailDate = document.getElementById("detail-date");
|
||||
const detailTitle = document.getElementById("detail-title");
|
||||
const detailDesc = document.getElementById("detail-desc");
|
||||
const detailQuote = document.getElementById("detail-quote");
|
||||
const detailTag = document.getElementById("detail-tag");
|
||||
const detailLink = document.getElementById("detail-link");
|
||||
const detailImage = document.getElementById("detail-image");
|
||||
const memberMapFrame = document.getElementById("member-map");
|
||||
const mapEmbedSingle = document.getElementById("map-embed-single");
|
||||
const mapEmbedAll = document.getElementById("map-embed-all");
|
||||
const openMapLink = document.getElementById("open-map-link");
|
||||
const openMapLinksDual = document.getElementById("open-map-links-dual");
|
||||
const openMapLinkKo = document.getElementById("open-map-link-ko");
|
||||
const openMapLinkEun = document.getElementById("open-map-link-eun");
|
||||
const dayGroups = new Map();
|
||||
|
||||
let currentMember = "all";
|
||||
let currentKeyword = "";
|
||||
const memberMaps = {
|
||||
eun: {
|
||||
embed: "https://www.google.com/maps/d/embed?mid=1VGZ76SPPjm3NWCBQe-hkm08oe5WPRJI&ehbc=2E312F",
|
||||
open: "https://www.google.com/maps/d/u/0/viewer?mid=1VGZ76SPPjm3NWCBQe-hkm08oe5WPRJI"
|
||||
},
|
||||
ko: {
|
||||
embed: "https://www.google.com/maps/d/embed?mid=1xpAsSoO8gNmMiW4x2sfkndISFTtjMQDw&hl=zh-TW&ehbc=2E312F",
|
||||
open: "https://www.google.com/maps/d/u/0/viewer?mid=1xpAsSoO8gNmMiW4x2sfkndISFTtjMQDw"
|
||||
}
|
||||
};
|
||||
const memberTripPrefix = {
|
||||
ko: "高高父子遊台灣",
|
||||
eun: "殷空少搭飛機去台灣高雄"
|
||||
};
|
||||
const memberSortOrder = { ko: 0, eun: 1 };
|
||||
|
||||
function normalizeMember(member) {
|
||||
if (member === "kogo") return "ko";
|
||||
return member;
|
||||
}
|
||||
|
||||
function getMemberLabel(member) {
|
||||
const normalized = normalizeMember(member);
|
||||
if (normalized === "eun") return "殷志源";
|
||||
if (normalized === "ko") return "高志溶";
|
||||
return "未分類";
|
||||
}
|
||||
|
||||
function getDayToken(rawDate) {
|
||||
const match = String(rawDate || "").match(/Day\s*(\d+)/i);
|
||||
if (!match) return String(rawDate || "未分類");
|
||||
return "Day " + match[1];
|
||||
}
|
||||
|
||||
function getGroupLabel(card) {
|
||||
const date = getDayToken(card.dataset.date || "未分類");
|
||||
const normalized = normalizeMember(card.dataset.member || "");
|
||||
const prefix = memberTripPrefix[normalized] || getMemberLabel(normalized);
|
||||
return prefix + "_" + date;
|
||||
}
|
||||
|
||||
function setDualMapVisible(isAll) {
|
||||
if (mapEmbedSingle && mapEmbedAll) {
|
||||
mapEmbedSingle.hidden = isAll ? true : false;
|
||||
mapEmbedAll.hidden = isAll ? false : true;
|
||||
mapEmbedAll.setAttribute("aria-hidden", isAll ? "false" : "true");
|
||||
}
|
||||
if (openMapLink && openMapLinksDual) {
|
||||
openMapLink.hidden = isAll ? true : false;
|
||||
openMapLinksDual.hidden = isAll ? false : true;
|
||||
}
|
||||
}
|
||||
|
||||
function updateMapByMember(member) {
|
||||
const normalized = normalizeMember(member);
|
||||
if (normalized === "all") {
|
||||
setDualMapVisible(true);
|
||||
if (openMapLinkKo) openMapLinkKo.href = memberMaps.ko.open;
|
||||
if (openMapLinkEun) openMapLinkEun.href = memberMaps.eun.open;
|
||||
return;
|
||||
}
|
||||
setDualMapVisible(false);
|
||||
const mapConfig = memberMaps[normalized];
|
||||
if (!mapConfig || !memberMapFrame) return;
|
||||
memberMapFrame.src = mapConfig.embed;
|
||||
if (openMapLink) openMapLink.href = mapConfig.open;
|
||||
}
|
||||
|
||||
function getCardSearchText(card) {
|
||||
return [
|
||||
card.dataset.date || "",
|
||||
card.dataset.title || "",
|
||||
card.dataset.desc || "",
|
||||
card.dataset.tag || "",
|
||||
].join(" ").toLowerCase();
|
||||
}
|
||||
|
||||
function createDayGroup(dayLabel) {
|
||||
const group = document.createElement("section");
|
||||
group.className = "day-group";
|
||||
group.dataset.day = dayLabel;
|
||||
|
||||
const toggle = document.createElement("button");
|
||||
toggle.type = "button";
|
||||
toggle.className = "day-toggle";
|
||||
toggle.setAttribute("aria-expanded", "false");
|
||||
toggle.innerHTML = "<span>" + dayLabel + "</span><i class='fa-solid fa-chevron-down'></i>";
|
||||
|
||||
const body = document.createElement("div");
|
||||
body.className = "day-cards";
|
||||
body.style.display = "none";
|
||||
|
||||
group.appendChild(toggle);
|
||||
group.appendChild(body);
|
||||
itineraryList.insertBefore(group, detailPanel);
|
||||
dayGroups.set(dayLabel, { group, toggle, body });
|
||||
return dayGroups.get(dayLabel);
|
||||
}
|
||||
|
||||
function setDayExpanded(dayGroup, shouldExpand) {
|
||||
dayGroup.toggle.setAttribute("aria-expanded", shouldExpand ? "true" : "false");
|
||||
dayGroup.body.style.display = shouldExpand ? "grid" : "none";
|
||||
dayGroup.group.classList.toggle("expanded", shouldExpand);
|
||||
}
|
||||
|
||||
function initializeDayGroups() {
|
||||
const sortedCards = [...cards].sort((a, b) => {
|
||||
const memberA = normalizeMember(a.dataset.member || "");
|
||||
const memberB = normalizeMember(b.dataset.member || "");
|
||||
const memberDiff = (memberSortOrder[memberA] ?? 99) - (memberSortOrder[memberB] ?? 99);
|
||||
if (memberDiff !== 0) return memberDiff;
|
||||
|
||||
const dayA = Number((getDayToken(a.dataset.date).match(/\d+/) || [999])[0]);
|
||||
const dayB = Number((getDayToken(b.dataset.date).match(/\d+/) || [999])[0]);
|
||||
return dayA - dayB;
|
||||
});
|
||||
|
||||
sortedCards.forEach((card) => {
|
||||
const dayLabel = getGroupLabel(card);
|
||||
const dayGroup = dayGroups.get(dayLabel) || createDayGroup(dayLabel);
|
||||
dayGroup.body.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
function updateDayGroupVisibility() {
|
||||
dayGroups.forEach(({ group, body, toggle }) => {
|
||||
const visibleCards = Array.from(body.querySelectorAll(".polaroid-card")).filter((card) => card.style.display !== "none");
|
||||
group.style.display = visibleCards.length ? "" : "none";
|
||||
if (!visibleCards.length) {
|
||||
setDayExpanded({ group, toggle, body }, false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function ensureExpandedForCard(card) {
|
||||
const dayGroup = dayGroups.get(getGroupLabel(card));
|
||||
if (!dayGroup) return;
|
||||
setDayExpanded(dayGroup, true);
|
||||
}
|
||||
|
||||
function setActiveCard(card, options = {}) {
|
||||
const { expandDay = true } = options;
|
||||
cards.forEach((item) => item.classList.remove("active"));
|
||||
card.classList.add("active");
|
||||
if (expandDay) {
|
||||
ensureExpandedForCard(card);
|
||||
}
|
||||
const mapKey = currentMember === "all" ? "all" : currentMember;
|
||||
updateMapByMember(mapKey);
|
||||
|
||||
detailDate.textContent = card.dataset.date || "";
|
||||
detailTitle.textContent = card.dataset.title || "";
|
||||
detailDesc.textContent = card.dataset.desc || "";
|
||||
detailQuote.textContent = "「" + (card.dataset.quote || "") + "」";
|
||||
detailTag.textContent = card.dataset.tag || "";
|
||||
detailLink.href = card.dataset.link || "#";
|
||||
detailImage.src = card.querySelector("img").src;
|
||||
detailImage.alt = "節目截圖 - " + (card.dataset.title || "行程地點");
|
||||
}
|
||||
|
||||
function applyFilter() {
|
||||
let firstVisible = null;
|
||||
cards.forEach((card) => {
|
||||
const cardMember = normalizeMember(card.dataset.member || "");
|
||||
const matchedMember = currentMember === "all" || cardMember === currentMember;
|
||||
const matchedKeyword = !currentKeyword || getCardSearchText(card).includes(currentKeyword);
|
||||
const matched = matchedMember && matchedKeyword;
|
||||
card.style.display = matched ? "" : "none";
|
||||
if (matched && !firstVisible) firstVisible = card;
|
||||
});
|
||||
updateDayGroupVisibility();
|
||||
const activeVisibleCard = cards.find((card) => card.classList.contains("active") && card.style.display !== "none");
|
||||
const fallbackCard = activeVisibleCard || firstVisible;
|
||||
if (fallbackCard) {
|
||||
setActiveCard(fallbackCard, { expandDay: false });
|
||||
} else {
|
||||
updateMapByMember(currentMember === "all" ? "all" : currentMember);
|
||||
}
|
||||
}
|
||||
|
||||
tabs.forEach((tab) => {
|
||||
tab.addEventListener("click", () => {
|
||||
tabs.forEach((item) => {
|
||||
item.classList.remove("active");
|
||||
item.setAttribute("aria-pressed", "false");
|
||||
});
|
||||
tab.classList.add("active");
|
||||
tab.setAttribute("aria-pressed", "true");
|
||||
currentMember = normalizeMember(tab.dataset.member || "all");
|
||||
applyFilter();
|
||||
});
|
||||
});
|
||||
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener("input", (event) => {
|
||||
currentKeyword = event.target.value.trim().toLowerCase();
|
||||
applyFilter();
|
||||
});
|
||||
}
|
||||
|
||||
itineraryList.addEventListener("click", (event) => {
|
||||
const toggle = event.target.closest(".day-toggle");
|
||||
if (!toggle) return;
|
||||
const group = toggle.closest(".day-group");
|
||||
if (!group) return;
|
||||
const dayGroup = dayGroups.get(group.dataset.day);
|
||||
if (!dayGroup) return;
|
||||
const isExpanded = dayGroup.toggle.getAttribute("aria-expanded") === "true";
|
||||
setDayExpanded(dayGroup, !isExpanded);
|
||||
});
|
||||
|
||||
cards.forEach((card) => {
|
||||
card.addEventListener("click", () => {
|
||||
setActiveCard(card, { expandDay: true });
|
||||
if (window.innerWidth < 920) {
|
||||
detailPanel.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
initializeDayGroups();
|
||||
applyFilter();
|
||||
})();
|
||||
@@ -0,0 +1,58 @@
|
||||
(() => {
|
||||
const canvas = document.getElementById("particles");
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
let particles = [];
|
||||
|
||||
function resizeCanvas() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
}
|
||||
|
||||
class Particle {
|
||||
constructor() {
|
||||
this.x = Math.random() * canvas.width;
|
||||
this.y = Math.random() * canvas.height;
|
||||
this.size = Math.random() * 4 + 1;
|
||||
this.speedX = Math.random() * 0.5 - 0.25;
|
||||
this.speedY = Math.random() * 0.5 + 0.2;
|
||||
}
|
||||
update() {
|
||||
this.x += this.speedX;
|
||||
this.y += this.speedY;
|
||||
if (this.y > canvas.height) this.y = 0;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#FFDD00";
|
||||
ctx.globalAlpha = 0.6;
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
function initParticles() {
|
||||
particles = [];
|
||||
for (let i = 0; i < 80; i += 1) {
|
||||
particles.push(new Particle());
|
||||
}
|
||||
}
|
||||
|
||||
function animateParticles() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
for (const particle of particles) {
|
||||
particle.update();
|
||||
particle.draw();
|
||||
}
|
||||
requestAnimationFrame(animateParticles);
|
||||
}
|
||||
|
||||
resizeCanvas();
|
||||
initParticles();
|
||||
animateParticles();
|
||||
window.addEventListener("resize", () => {
|
||||
resizeCanvas();
|
||||
initParticles();
|
||||
});
|
||||
})();
|
||||
@@ -0,0 +1,271 @@
|
||||
(() => {
|
||||
/**
|
||||
* ── 導覽「尚未開放」連結 ─────────────────────────────────────────
|
||||
* ① 整個檔案先關：COMING_SOON_PAGES（目前已含志源頁／演唱會／典藏／地圖／視覺進化論等）。
|
||||
* ② index.html 細到錨點：INDEX_NAV_OPEN_HASHES。
|
||||
* ③ 文案 NAV_SOON_PHRASES：每次「滑過或鍵盤聚焦」連結時隨機擇一句（不交錯只靠重整）。
|
||||
* 浮層、title 與該次互動同步；無障礙用語固定為「尚無開放」（避免標籤隨機跳動）。
|
||||
* 要調整詞句：改 NAV_SOON_PHRASES 即可。
|
||||
*/
|
||||
const NAV_SOON_PHRASES = ["奇蹟醞釀中", // 頁面準備中，呼應黃色奇蹟的誕生
|
||||
"感動載入中", // 資料讀取中，連結入坑時的悸動
|
||||
"初心校準中", // 結構調整中，呼應 LOGO 的六人設計核心
|
||||
"黃海漫延中", // 視覺填充中，發想自黃色海洋填滿漆黑的過程
|
||||
"傳奇編排中", // 內容整理中，記錄 1999 年榮譽與歷史軌跡
|
||||
"夢想航行中", // 未來規劃中，期待水晶男孩的下一個十年
|
||||
];
|
||||
|
||||
function pickSoonPhrase() {
|
||||
return NAV_SOON_PHRASES[Math.floor(Math.random() * NAV_SOON_PHRASES.length)];
|
||||
}
|
||||
|
||||
/** 每次互動重抽，讀者沿導覽滑動時會交錯看到不同字樣 */
|
||||
function rollSoonLabel(link) {
|
||||
const p = pickSoonPhrase();
|
||||
link.style.setProperty("--portal-nav-soon-msg", JSON.stringify(p));
|
||||
link.setAttribute("title", p);
|
||||
}
|
||||
|
||||
const COMING_SOON_PAGES = new Set([
|
||||
"variety.html",
|
||||
"concert.html",
|
||||
"albums.html",
|
||||
"map.html",
|
||||
"minister.html",
|
||||
"minister_ge.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("aria-label", `${visibleTitle}，尚無開放`);
|
||||
|
||||
const onSoonInteract = () => rollSoonLabel(link);
|
||||
link.addEventListener("pointerenter", onSoonInteract);
|
||||
link.addEventListener("focus", onSoonInteract);
|
||||
link.addEventListener("touchstart", onSoonInteract, { passive: true });
|
||||
|
||||
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");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 站根與 `portal-nav.js` 同層；依腳本路徑與當前頁路徑計算回到站根的相對前綴（如 `../`）。
|
||||
* 子資料夾內頁面之導覽連結必須帶此前綴，否則 `./assets/images`、`index.html` 會錯層。
|
||||
*/
|
||||
function portalNavRootPrefix() {
|
||||
const el =
|
||||
document.currentScript ||
|
||||
Array.from(document.querySelectorAll("script[src*='portal-nav.js']")).find((s) => s.src);
|
||||
if (!el?.src) return "./";
|
||||
try {
|
||||
const scriptPathname = new URL(el.src, window.location.href).pathname;
|
||||
const scriptDirSegs = scriptPathname.split("/").filter(Boolean);
|
||||
scriptDirSegs.pop();
|
||||
const pageDirSegs = window.location.pathname.split("/").filter(Boolean);
|
||||
pageDirSegs.pop();
|
||||
let i = 0;
|
||||
const a = scriptDirSegs;
|
||||
const b = pageDirSegs;
|
||||
while (i < a.length && i < b.length && a[i] === b[i]) {
|
||||
i += 1;
|
||||
}
|
||||
const ups = b.length - i;
|
||||
return ups > 0 ? "../".repeat(ups) : "./";
|
||||
} catch {
|
||||
return "./";
|
||||
}
|
||||
}
|
||||
|
||||
/** 全站導覽 HTML — `rp` 為站根相對前綴；僅修改此模板即可同步所有頁面 */
|
||||
function buildPortalNavInnerHTML(rp) {
|
||||
return `
|
||||
<a class="logo" href="${rp}index.html"><img src="${rp}assets/images/logov.svg" alt="SECHSKIES Logo"></a>
|
||||
<ul>
|
||||
<li><a href="${rp}index.html#origin">淪陷瞬間</a>
|
||||
<ul class="portal-submenu">
|
||||
<li><a href="${rp}index.html#start">好奇的開端</a></li>
|
||||
<li><a href="${rp}index.html#mission">成立的初衷</a></li>
|
||||
<li><a href="${rp}index.html#timeline">跨時空軌跡</a></li>
|
||||
<li><a href="${rp}index.html#story">傳奇的轉折</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="${rp}variety/variety.html">瘋子與天才</a>
|
||||
<ul class="portal-submenu">
|
||||
<li><a href="${rp}variety/variety.html#variety">瘋狂出演中</a></li>
|
||||
<li><a href="${rp}variety/variety.html#stage">隊長的氣場</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="${rp}concert/concert.html">現場的震撼</a>
|
||||
<ul class="portal-submenu">
|
||||
<li><a href="${rp}concert/concert.html#stage-now">永恆的重逢</a></li>
|
||||
<li><a href="${rp}concert/concert.html#stage-past">燦爛的最初</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="${rp}albums/albums.html">黃色留聲機</a>
|
||||
<ul class="portal-submenu">
|
||||
<li><a href="${rp}albums/albums.html#new">啟動新篇章</a></li>
|
||||
<li><a href="${rp}albums/albums.html#classic">輝煌全盛期</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="${rp}map/map.html">聖地巡禮</a>
|
||||
<ul class="portal-submenu">
|
||||
<li><a href="${rp}map/map.html#taipei">台北聖地</a></li>
|
||||
<li><a href="${rp}map/map.html#global">海外遠征</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
`.trim();
|
||||
}
|
||||
|
||||
const rootPrefix = portalNavRootPrefix();
|
||||
document.querySelectorAll("nav.portal-nav[data-portal-nav]").forEach((nav) => {
|
||||
nav.innerHTML = buildPortalNavInnerHTML(rootPrefix);
|
||||
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");
|
||||
}
|
||||
});
|
||||
});
|
||||
})();
|
||||
@@ -0,0 +1,97 @@
|
||||
(() => {
|
||||
const hubButtons = Array.from(document.querySelectorAll("[data-totoga-hub]"));
|
||||
const hubPanels = Array.from(document.querySelectorAll("[data-totoga-panel]"));
|
||||
|
||||
function setHubPanel(name) {
|
||||
hubButtons.forEach((btn) => btn.classList.toggle("active", btn.dataset.totogaHub === name));
|
||||
hubPanels.forEach((panel) => {
|
||||
panel.hidden = panel.dataset.totogaPanel !== name;
|
||||
});
|
||||
}
|
||||
|
||||
hubButtons.forEach((btn) => {
|
||||
btn.addEventListener("click", () => setHubPanel(btn.dataset.totogaHub));
|
||||
});
|
||||
|
||||
const reader = document.getElementById("totoga2-reader");
|
||||
if (!reader) return;
|
||||
|
||||
const chapters = Array.from(reader.querySelectorAll(".chronicle-chapter"));
|
||||
const modeButtons = Array.from(document.querySelectorAll("[data-totoga-reader-mode]"));
|
||||
const pager = document.getElementById("totoga2-pager");
|
||||
const prevBtn = document.getElementById("totoga2-prev");
|
||||
const nextBtn = document.getElementById("totoga2-next");
|
||||
const indicator = document.getElementById("totoga2-chapter-indicator");
|
||||
if (!pager || !prevBtn || !nextBtn || !indicator) return;
|
||||
|
||||
let currentIndex = 0;
|
||||
|
||||
function updatePagedView() {
|
||||
chapters.forEach((chapter, index) => {
|
||||
chapter.style.display = index === currentIndex ? "" : "none";
|
||||
chapter.classList.toggle("active", index === currentIndex);
|
||||
});
|
||||
indicator.textContent = `${currentIndex + 1} / ${chapters.length}`;
|
||||
prevBtn.disabled = currentIndex === 0;
|
||||
nextBtn.disabled = currentIndex === chapters.length - 1;
|
||||
}
|
||||
|
||||
function setReaderMode(mode) {
|
||||
reader.dataset.mode = mode;
|
||||
modeButtons.forEach((btn) => btn.classList.toggle("active", btn.dataset.totogaReaderMode === mode));
|
||||
if (mode === "paged") {
|
||||
pager.hidden = false;
|
||||
updatePagedView();
|
||||
} else {
|
||||
pager.hidden = true;
|
||||
chapters.forEach((chapter) => {
|
||||
chapter.style.display = "";
|
||||
chapter.classList.remove("active");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
modeButtons.forEach((button) => {
|
||||
button.addEventListener("click", () => setReaderMode(button.dataset.totogaReaderMode));
|
||||
});
|
||||
|
||||
prevBtn.addEventListener("click", () => {
|
||||
if (currentIndex > 0) {
|
||||
currentIndex -= 1;
|
||||
updatePagedView();
|
||||
}
|
||||
});
|
||||
|
||||
nextBtn.addEventListener("click", () => {
|
||||
if (currentIndex < chapters.length - 1) {
|
||||
currentIndex += 1;
|
||||
updatePagedView();
|
||||
}
|
||||
});
|
||||
|
||||
const initialHub =
|
||||
hubButtons.find((b) => b.classList.contains("active"))?.dataset.totogaHub ||
|
||||
hubButtons[0]?.dataset.totogaHub ||
|
||||
"video";
|
||||
setHubPanel(initialHub);
|
||||
setReaderMode("scroll");
|
||||
|
||||
function applyLocationHashNavigation() {
|
||||
const hash = (location.hash || "").slice(1);
|
||||
if (hash === "ebook") {
|
||||
setHubPanel("ebook");
|
||||
return;
|
||||
}
|
||||
if (hash && document.getElementById(hash)) {
|
||||
setHubPanel("reader");
|
||||
setReaderMode("scroll");
|
||||
pager.hidden = true;
|
||||
requestAnimationFrame(() => {
|
||||
document.getElementById(hash)?.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
applyLocationHashNavigation();
|
||||
window.addEventListener("hashchange", applyLocationHashNavigation);
|
||||
})();
|
||||
Reference in New Issue
Block a user