viewof dashboard = { const root = html`

`; root.innerHTML = `

Hover for description · Click to expand

${indicators.map((d,idx)=>`

${icons(d.code)}

${d.title}

${scores[d.code] ? `

${scores[d.code].score}/100

` : ""}

${descriptions[d.code] || ""}

`).join("")}

`; const grid = root.querySelector(".ha-grid"); const cards = [...grid.querySelectorAll(".card")]; let openIndex = null, animating = false; root.value = null; function buildPanel(d){ const cat = scores[d.code]; const hh = n => ` n=${n} iHousehold participation `; const bar = sc => { const seg = (cls, v) => v > 0 ? `${v >= 10 ? v : ""}` : ""; return `

${ seg("pos", sc.p || 0)}${seg("neu", sc.n || 0)}${seg("neg", sc.g || 0)}

`; }; const el = document.createElement("div"); el.className = "panel"; el.innerHTML = `

${icons(d.code)}

${d.code}

${d.title}

${cat ? `

${cat.score}/100

Category Score

Positive Neutral Negative

` : ""}

${categoryNarratives[d.code] ? `

${categoryNarratives[d.code]}

` : ""}${d.subs.map((s,i)=>{ const ss = scores[s.code]; return `

${s.code} ${s.name} ${ss ? `${ss.score}` : ""} ${icons("chev")}

${ss ? `

${hh(ss.part||0)}${bar(ss)}

` : ""}

${s.def}

`;}).join("")}

`; el.querySelectorAll(".sub").forEach(sub => { sub.querySelector(".sub-head").addEventListener("click", e => { e.stopPropagation(); const wasOpen = sub.classList.contains("open"); el.querySelectorAll(".sub.open").forEach(x => x.classList.remove("open")); if (!wasOpen) sub.classList.add("open"); }); }); el.querySelector(".panel-close").addEventListener("click", e => { e.stopPropagation(); select(openIndex); }); return el; } async function select(i){ if (animating) return; const first = cards.map(c => c.getBoundingClientRect()); const closing = (i === openIndex); grid.querySelector(".card.is-expanded .panel")?.classList.remove("show"); openIndex = closing ? null : i; grid.classList.toggle("is-open", openIndex !== null); cards.forEach((c, idx) => { c.classList.toggle("is-expanded", idx === openIndex); c.classList.toggle("is-compressed", openIndex !== null && idx !== openIndex); c.setAttribute("aria-expanded", String(idx === openIndex)); if (idx !== openIndex){ c.querySelector(".panel")?.remove(); c.querySelector(".card-inner").style.opacity = ""; } }); animating = true; grid.classList.add("animating"); const anims = flipPlay(cards, first); await Promise.all(anims.map(a => a.finished)).catch(()=>{}); animating = false; grid.classList.remove("animating"); if (openIndex !== null){ const card = cards[openIndex]; let panel = card.querySelector(".panel"); if (!panel){ panel = buildPanel(indicators[openIndex]); card.appendChild(panel); } card.querySelector(".card-inner").style.opacity = "0"; requestAnimationFrame(() => panel.classList.add("show")); } root.value = openIndex === null ? null : indicators[openIndex].code; root.dispatchEvent(new Event("input", {bubbles:true})); // ===== 广播给父页(Webflow):用 window.top 穿透 Observable 的嵌套 iframe ===== const outCode = root.value || "ALL"; console.log("[HA send] →", outCode); try { window.top.postMessage({ type: "ha:category", code: outCode }, "*"); } catch (e) {} try { window.parent.postMessage({ type: "ha:category", code: outCode }, "*"); } catch (e) {} } cards.forEach(c => { const idx = +c.dataset.i; c.addEventListener("click", () => { if (idx !== openIndex) select(idx); }); c.addEventListener("keydown", e => { if (e.key === "Enter" || e.key === " "){ e.preventDefault(); if (idx !== openIndex) select(idx); } }); }); const onDocClick = e => { if (openIndex === null) return; if (e.target.closest(".ha-dash .card")) return; select(openIndex); }; const onKey = e => { if (e.key === "Escape" && openIndex !== null) select(openIndex); }; document.addEventListener("click", onDocClick); document.addEventListener("keydown", onKey); invalidation.then(() => { document.removeEventListener("click", onDocClick); document.removeEventListener("keydown", onKey); }); // ===== URL 深链:?category=... ===== const catMap = { comfort:"CW", temperature:"TH", acoustic:"AC", durability:"DM", social:"SP", reflection:"RC", values:"VM", financial:"FF" }; const readCategoryParam = () => new URLSearchParams(location.search).get("category"); const raw = readCategoryParam(); const code = raw ? catMap[raw.trim().toLowerCase()] : null; const deepIdx = code ? indicators.findIndex(d => d.code === code) : -1; console.log("[HA deep-link] raw =", raw, "| code =", code, "| deepIdx =", deepIdx); if (deepIdx >= 0) { let done = false, tries = 0; const MAX = 200; let mo = null; const ready = () => grid.isConnected && grid.offsetParent !== null && cards[deepIdx] && cards[deepIdx].getBoundingClientRect().width > 0; const finish = (label) => { if (done) return true; if (openIndex !== null) { done = true; if (mo) mo.disconnect(); console.log("[HA deep-link] aborted — user already interacted"); return true; } if (ready() && !animating) { done = true; if (mo) mo.disconnect(); console.log("[HA deep-link] select(" + deepIdx + ") INVOKED via " + label + " after " + tries + " polls"); select(deepIdx); return true; } return false; }; const poll = () => { if (done) return; if (!finish("raf") && tries++ < MAX) requestAnimationFrame(poll); else if (!done) console.warn("[HA deep-link] gave up after " + tries + " polls — never became ready"); }; requestAnimationFrame(poll); mo = new MutationObserver(() => finish("observer")); mo.observe(document.documentElement, { childList: true, subtree: true }); (window.requestIdleCallback || (cb => setTimeout(cb, 200)))(() => finish("idle")); setTimeout(() => finish("timeout-600"), 600); setTimeout(() => finish("timeout-1500"), 1500); invalidation.then(() => { if (mo) mo.disconnect(); }); } // ===== 新增:监听父页 postMessage 深链(穿透嵌套 iframe) ===== const onMsg = (e) => { const d = e.data || {}; if (d.type !== "ha:setCategory") return; const mapMsg = { comfort:"CW", temperature:"TH", acoustic:"AC", durability:"DM", social:"SP", reflection:"RC", values:"VM", financial:"FF" }; const c = mapMsg[(d.category || "").trim().toLowerCase()]; const idx = c ? indicators.findIndex(x => x.code === c) : -1; console.log("[HA recv] setCategory =", d.category, "→ idx =", idx); if (idx >= 0 && idx !== openIndex && !animating) select(idx); }; window.addEventListener("message", onMsg); invalidation.then(() => window.removeEventListener("message", onMsg)); // 挂载后主动向父页要一次 category(冗余保险) try { window.top.postMessage({ type: "ha:getCategory" }, "*"); } catch (e) {} try { window.parent.postMessage({ type: "ha:getCategory" }, "*"); } catch (e) {} return root; }