diff --git a/variety/variety-shows.html b/variety/variety-shows.html index b9a890f..0ab4604 100644 --- a/variety/variety-shows.html +++ b/variety/variety-shows.html @@ -102,8 +102,7 @@ width: 18%; } - body.variety-shows-page .variety-table thead th, - body.variety-shows-page .variety-table__year-head th { + body.variety-shows-page .variety-table thead th { padding: 12px 10px; border: none; border-bottom: 2px solid #e6e6e6; @@ -114,21 +113,15 @@ white-space: nowrap; } - body.variety-shows-page .variety-table__year-head[hidden] { - display: none; - } - - body.variety-shows-page .variety-table__year-head { - transition: opacity 0.35s ease; - } - - body.variety-shows-page .variety-table__year-head.is-closing { - opacity: 0; - } - - body.variety-shows-page .variety-table__year-panel-row.is-closing .variety-table__year-panel-cell { - padding-top: 0; - padding-bottom: 0; + body.variety-shows-page .variety-table__show-row--labels td { + padding: 12px 10px; + border: none; + border-bottom: 2px solid #e6e6e6; + background: #fafafa; + color: #333; + font-weight: 800; + text-align: center; + white-space: nowrap; } body.variety-shows-page .variety-table tbody td { @@ -140,56 +133,6 @@ color: #444; } - body.variety-shows-page .variety-table__year-panel-cell { - padding: 0; - vertical-align: top; - } - - body.variety-shows-page .variety-table__year-panel-row[hidden] { - display: none; - } - - body.variety-shows-page .variety-table__year-panel { - 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__inner { - width: 100%; - margin: 0; - border-collapse: collapse; - table-layout: fixed; - font-size: inherit; - line-height: inherit; - background: transparent; - } - - body.variety-shows-page .variety-table__inner tbody td { - padding: 11px 10px; - border: none; - border-bottom: 1px solid #f0f0f0; - text-align: center; - vertical-align: middle; - color: #444; - } - - body.variety-shows-page .variety-table__inner .variety-table__show-row:last-child td { - border-bottom: 1px solid #f0f0f0; - } - - @media (prefers-reduced-motion: reduce) { - body.variety-shows-page .variety-table__year-panel, - body.variety-shows-page .variety-table__year-head { - transition: none; - } - } - body.variety-shows-page .variety-table__year-row>td { padding: 0; background: #fafafa; @@ -282,7 +225,7 @@ display: none; } - body.variety-shows-page .variety-table__year-panel .variety-table__show-row:nth-child(even) td { + body.variety-shows-page .variety-table__year-list .variety-table__show-row:not(.variety-table__show-row--labels):nth-of-type(even) td { background: #fcfcfc; } @@ -383,7 +326,13 @@
- + + + + + + + - - - - - - + + + + + + - - - - - - - - - + + + + + + - - - - - - - - - + + + + + + - - - - - - - - - + + + + + + - - - - - - - - - + + + + + + - - -
@@ -398,26 +347,14 @@
@@ -519,26 +451,14 @@
@@ -612,26 +527,14 @@
@@ -693,26 +591,14 @@
@@ -800,26 +681,14 @@
@@ -906,7 +770,9 @@ } function rowMatchesSearch(row, q) { - if (!q) return true; + if (!q || row.classList.contains("variety-table__show-row--labels")) { + return true; + } const air = row.querySelector(".variety-table__air-date"); const airData = air ? `${air.dataset.airStart || ""} ${air.dataset.airEnd || ""}` @@ -918,83 +784,41 @@ return text.includes(q); } - function getYearPanelRow(slot, year) { + function getYearLabelsRow(slot, year) { return slot.querySelector( - `.variety-table__year-panel-row[data-year="${year}"]` + `.variety-table__show-row--labels[data-year="${year}"]` ); } - function getYearHeadRow(slot, year) { - return slot.querySelector( - `.variety-table__year-head[data-year="${year}"]` + function getYearShowRows(slot, year) { + return slot.querySelectorAll( + `.variety-table__show-row[data-year="${year}"]:not(.variety-table__show-row--labels)` ); } - function getYearPanel(slot, year) { - return getYearPanelRow(slot, year)?.querySelector( - `.variety-table__year-panel[data-year="${year}"]` - ); - } + function applyYearDetailVisibility(yearRow, open, q) { + const year = yearRow.dataset.year; + const slot = yearRow.closest("table[data-show-tabs]"); + if (!slot) return; + const labels = getYearLabelsRow(slot, year); + const showRows = getYearShowRows(slot, year); + let anyMatch = false; - function setYearHeadVisible(slot, year, visible) { - const head = getYearHeadRow(slot, year); - if (!head) return; - head.classList.remove("is-closing"); - head.hidden = !visible; - } - - function openYearPanel(slot, panelRow, panel, year) { - if (!panelRow || !panel) return; - const head = getYearHeadRow(slot, year); - if (head) { - head.classList.remove("is-closing"); - head.hidden = false; - head.style.opacity = "1"; - } - panelRow.hidden = false; - panelRow.classList.remove("is-closing"); - if (panel.classList.contains("is-open")) { - panel.style.maxHeight = `${panel.scrollHeight}px`; - return; - } - panel.style.maxHeight = "0"; - panel.classList.add("is-open"); - requestAnimationFrame(() => { - panel.style.maxHeight = `${panel.scrollHeight}px`; - }); - } - - function closeYearPanel(slot, panelRow, panel, year) { - if (!panelRow || !panel || !panel.classList.contains("is-open")) { - return; - } - const head = getYearHeadRow(slot, year); - panelRow.classList.add("is-closing"); - if (head) head.classList.add("is-closing"); - panel.classList.remove("is-open"); - panel.style.maxHeight = `${panel.scrollHeight}px`; - requestAnimationFrame(() => { - panel.style.maxHeight = "0"; - }); - const onEnd = (e) => { - if (e.propertyName !== "max-height") return; - panel.style.maxHeight = ""; - panelRow.classList.remove("is-closing"); - panelRow.hidden = true; - if (head) { - head.classList.remove("is-closing"); - head.hidden = true; + showRows.forEach((row) => { + const match = rowMatchesSearch(row, q); + if (match) anyMatch = true; + if (!open) { + row.hidden = true; + } else { + row.hidden = Boolean(q) && !match; } - panel.removeEventListener("transitionend", onEnd); - }; - panel.addEventListener("transitionend", onEnd); - } + }); - function isYearAnimating(panel, panelRow) { - return ( - panel?.classList.contains("is-open") || - panelRow?.classList.contains("is-closing") - ); + if (labels) { + labels.hidden = !open || (Boolean(q) && !anyMatch); + } + + return anyMatch; } function syncYearRows(slot) { @@ -1002,41 +826,22 @@ slot.querySelectorAll(".variety-table__year-row").forEach((yearRow) => { const year = yearRow.dataset.year; const btn = yearRow.querySelector(".variety-table__year-toggle"); - const panelRow = getYearPanelRow(slot, year); - const panel = getYearPanel(slot, year); - const detailRows = panelRow - ? panelRow.querySelectorAll(".variety-table__show-row") - : []; - let anyMatch = false; - const yearOpen = yearRow.classList.contains("is-open"); + let yearOpen = yearRow.classList.contains("is-open"); + let anyMatch = applyYearDetailVisibility(yearRow, yearOpen, q); - detailRows.forEach((row) => { - const match = rowMatchesSearch(row, q); - if (match) anyMatch = true; - row.hidden = Boolean(q) && !match; - }); - - if (yearOpen && panelRow && panel) { - if (q && !anyMatch) { - closeYearPanel(slot, panelRow, panel, year); - yearRow.classList.remove("is-open"); - if (btn) btn.setAttribute("aria-expanded", "false"); - } else { - openYearPanel(slot, panelRow, panel, year); - panel.style.maxHeight = `${panel.scrollHeight}px`; - } - } else if ( - !yearOpen && - !isYearAnimating(panel, panelRow) && - panelRow?.hidden - ) { - setYearHeadVisible(slot, year, false); + if (yearOpen && q && !anyMatch) { + yearOpen = false; + yearRow.classList.remove("is-open"); + if (btn) btn.setAttribute("aria-expanded", "false"); + applyYearDetailVisibility(yearRow, false, q); } - if (q && anyMatch && !yearOpen && panelRow && panel) { + if (q && anyMatch && !yearOpen) { + yearOpen = true; yearRow.classList.add("is-open"); if (btn) btn.setAttribute("aria-expanded", "true"); - openYearPanel(slot, panelRow, panel, year); + applyYearDetailVisibility(yearRow, true, q); + anyMatch = true; } yearRow.hidden = Boolean(q) && !anyMatch; @@ -1045,20 +850,11 @@ function setYearOpen(yearRow, open) { const btn = yearRow.querySelector(".variety-table__year-toggle"); - const year = yearRow.dataset.year; - const slot = yearRow.closest("table[data-show-tabs]"); - const panelRow = slot ? getYearPanelRow(slot, year) : null; - const panel = slot ? getYearPanel(slot, year) : null; - if (!btn || !panelRow || !panel) return; + if (!btn) return; btn.setAttribute("aria-expanded", open ? "true" : "false"); yearRow.classList.toggle("is-open", open); - if (open) { - openYearPanel(slot, panelRow, panel, year); - } else { - closeYearPanel(slot, panelRow, panel, year); - } - const q = (input && input.value.trim()) || ""; - if (slot && q) syncYearRows(slot); + const q = (input && input.value.trim().toLowerCase()) || ""; + applyYearDetailVisibility(yearRow, open, q); } function filterVisibleRows() {