From 811e12b6ac91467d40e304665b4453bebd603a4f Mon Sep 17 00:00:00 2001 From: JekkiNoopy Date: Sun, 17 May 2026 18:54:09 +0800 Subject: [PATCH] =?UTF-8?q?feat=20=E7=B6=9C=E8=97=9D=E8=A1=A8=E5=B9=B4?= =?UTF-8?q?=E4=BB=BD=E4=B8=8B=E6=BB=91=E5=B1=95=E9=96=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- variety/variety-shows.html | 199 +++++++++++++++++++++++++++++-------- 1 file changed, 158 insertions(+), 41 deletions(-) diff --git a/variety/variety-shows.html b/variety/variety-shows.html index 161208b..9af0b3b 100644 --- a/variety/variety-shows.html +++ b/variety/variety-shows.html @@ -122,10 +122,55 @@ color: #444; } - body.variety-shows-page .variety-table__year-list>.variety-table__show-row:last-child td { + body.variety-shows-page .variety-table__year-panel>.variety-table__show-row:last-child td { border-bottom: 1px solid #f0f0f0; } + body.variety-shows-page .variety-table__year-panel { + display: block; + overflow: hidden; + max-height: 0; + opacity: 0; + transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease; + } + + body.variety-shows-page .variety-table__year-panel.is-open { + opacity: 1; + } + + body.variety-shows-page .variety-table__year-panel tr { + display: table; + width: 100%; + table-layout: fixed; + border-collapse: collapse; + } + + body.variety-shows-page .variety-table__year-panel td:nth-child(1) { + width: 22%; + } + + body.variety-shows-page .variety-table__year-panel td:nth-child(2) { + width: 10%; + } + + body.variety-shows-page .variety-table__year-panel td:nth-child(3) { + width: 28%; + } + + body.variety-shows-page .variety-table__year-panel td:nth-child(4) { + width: 22%; + } + + body.variety-shows-page .variety-table__year-panel td:nth-child(5) { + width: 18%; + } + + @media (prefers-reduced-motion: reduce) { + body.variety-shows-page .variety-table__year-panel { + transition: none; + } + } + body.variety-shows-page .variety-table__year-row>td { padding: 0; background: #fafafa; @@ -223,7 +268,7 @@ display: none; } - body.variety-shows-page .variety-table__show-row:nth-child(even of .variety-table__show-row) td { + body.variety-shows-page .variety-table__year-panel .variety-table__show-row:nth-child(even) td { background: #fcfcfc; } @@ -341,7 +386,7 @@ - +
- + + + + 04/22  09 - + 04/27  09 - + 05/04  12 - + 06/05  12 - + 09/05  12 - + 10/12  02 - + + +
- + + + + 01/01  19/06/02 + class="variety-table__date">06/02 KBS2 超人回來了 高志鎔 @@ -465,7 +518,7 @@ class="fa-solid fa-circle-right variety-table__range-arrow" aria-hidden="true"> 280 - + 01/08  09＋導演版 - + 06/13  10＋導演版 - + 12/05  18/01/09 + class="variety-table__date">01/09 tvN 姜食堂 殷志源 @@ -507,7 +560,9 @@ class="fa-solid fa-circle-right variety-table__range-arrow" aria-hidden="true"> 05＋導演版 - + + +
- + + + + 05/05  25 - + 09/30  05 - + 10/28  05＋導演版 - + + +
- + + + + 05/31  06 - + 06/08  11 - + 07/05  04 - + 09/20  10 - + 10/25  20/01/03 + class="variety-table__date">01/03 tvN 新西遊記7 殷志源 @@ -647,7 +710,9 @@ class="fa-solid fa-circle-right variety-table__range-arrow" aria-hidden="true"> 11 - + + +
- + + + + 01/10  10＋導演版 - + 10/09  10＋導演版 - + @@ -754,29 +822,71 @@ return text.includes(q); } + function getYearPanel(slot, year) { + return slot.querySelector( + `.variety-table__year-panel[data-year="${year}"]` + ); + } + + function openYearPanel(panel) { + if (!panel || panel.classList.contains("is-open")) return; + panel.hidden = false; + panel.style.maxHeight = "0"; + panel.classList.add("is-open"); + requestAnimationFrame(() => { + panel.style.maxHeight = `${panel.scrollHeight}px`; + }); + } + + function closeYearPanel(panel) { + if (!panel || !panel.classList.contains("is-open")) return; + panel.style.maxHeight = `${panel.scrollHeight}px`; + requestAnimationFrame(() => { + panel.style.maxHeight = "0"; + }); + const onEnd = (e) => { + if (e.propertyName !== "max-height") return; + panel.classList.remove("is-open"); + panel.hidden = true; + panel.style.maxHeight = ""; + panel.removeEventListener("transitionend", onEnd); + }; + panel.addEventListener("transitionend", onEnd); + } + function syncYearRows(slot) { const q = (input && input.value.trim().toLowerCase()) || ""; slot.querySelectorAll(".variety-table__year-row").forEach((yearRow) => { const year = yearRow.dataset.year; const btn = yearRow.querySelector(".variety-table__year-toggle"); - const detailRows = slot.querySelectorAll( - `.variety-table__show-row[data-year="${year}"]` - ); + const panel = getYearPanel(slot, year); + const detailRows = panel + ? panel.querySelectorAll(".variety-table__show-row") + : []; let anyMatch = false; const yearOpen = yearRow.classList.contains("is-open"); detailRows.forEach((row) => { const match = rowMatchesSearch(row, q); if (match) anyMatch = true; - row.hidden = !yearOpen || (q && !match); + row.hidden = Boolean(q) && !match; }); - if (q && anyMatch) { + if (yearOpen && panel) { + if (q && !anyMatch) { + closeYearPanel(panel); + yearRow.classList.remove("is-open"); + if (btn) btn.setAttribute("aria-expanded", "false"); + } else { + openYearPanel(panel); + panel.style.maxHeight = `${panel.scrollHeight}px`; + } + } + + if (q && anyMatch && !yearOpen) { yearRow.classList.add("is-open"); if (btn) btn.setAttribute("aria-expanded", "true"); - detailRows.forEach((row) => { - row.hidden = !rowMatchesSearch(row, q); - }); + openYearPanel(panel); } yearRow.hidden = Boolean(q) && !anyMatch; @@ -785,10 +895,17 @@ function setYearOpen(yearRow, open) { const btn = yearRow.querySelector(".variety-table__year-toggle"); - if (!btn) return; + const year = yearRow.dataset.year; + const slot = yearRow.closest("table[data-show-tabs]"); + const panel = slot ? getYearPanel(slot, year) : null; + if (!btn || !panel) return; btn.setAttribute("aria-expanded", open ? "true" : "false"); yearRow.classList.toggle("is-open", open); - const slot = yearRow.closest("table[data-show-tabs]"); + if (open) { + openYearPanel(panel); + } else { + closeYearPanel(panel); + } if (slot) syncYearRows(slot); }