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);
}