jekkinoopy/sechskies
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat 各年份下插入欄位表頭列

Browse Source
This commit is contained in:
jekkinoopy
2026-05-17 19:23:30 +08:00
parent d0f76ace74
commit 2ea6cc03f4
4 changed files with 64 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/images/logo/magnific_img24-img1_2995847305.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 MiB

assets/images/logo/magnific_img24-img1_2995847311.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

assets/images/logo/magnific_img24-img1_2995847324.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 MiB

variety/variety-shows.html
+64 -24
View File
@@ -102,7 +102,8 @@
width: 18%; width: 18%;
} }
body.variety-shows-page .variety-table thead th { body.variety-shows-page .variety-table thead th,
body.variety-shows-page .variety-table__year-head th {
padding: 12px 10px; padding: 12px 10px;
border: none; border: none;
border-bottom: 2px solid #e6e6e6; border-bottom: 2px solid #e6e6e6;
@@ -113,6 +114,10 @@
white-space: nowrap; white-space: nowrap;
} }
body.variety-shows-page .variety-table__year-head[hidden] {
display: none;
}
body.variety-shows-page .variety-table tbody td { body.variety-shows-page .variety-table tbody td {
padding: 11px 10px; padding: 11px 10px;
border: none; border: none;
@@ -364,22 +369,7 @@
<section id="variety-shows" class="variety-shows-archive" aria-label="全員發瘋"> <section id="variety-shows" class="variety-shows-archive" aria-label="全員發瘋">
<div class="variety-shows-archive-card"> <div class="variety-shows-archive-card">
<table class="variety-table" id="captain-brothers" data-show-tabs="all captain"> <table class="variety-table" id="captain-brothers" data-show-tabs="all captain">
<colgroup>
<col class="variety-table__col-air">
<col class="variety-table__col-channel">
<col class="variety-table__col-program">
<col class="variety-table__col-member">
<col class="variety-table__col-eps">
</colgroup>
<thead>
<tr>
<th scope="col">播出日期</th>
<th scope="col">頻道</th>
<th scope="col">節目名稱</th>
<th scope="col">出演成員</th>
<th scope="col">集數</th>
</tr>
</thead>
<tbody class="variety-table__year-list"> <tbody class="variety-table__year-list">
<tr class="variety-table__year-row" data-year="2016"> <tr class="variety-table__year-row" data-year="2016">
<td colspan="5" class="variety-table__year-bar"> <td colspan="5" class="variety-table__year-bar">
@@ -394,6 +384,13 @@
</div> </div>
</td> </td>
</tr> </tr>
<tr class="variety-table__year-head" data-year="2016" hidden>
<th scope="col">播出日期</th>
<th scope="col">頻道</th>
<th scope="col">節目名稱</th>
<th scope="col">出演成員</th>
<th scope="col">集數</th>
</tr>
<tr class="variety-table__year-panel-row" data-year="2016" hidden> <tr class="variety-table__year-panel-row" data-year="2016" hidden>
<td colspan="5" class="variety-table__year-panel-cell"> <td colspan="5" class="variety-table__year-panel-cell">
<div class="variety-table__year-panel" data-year="2016"> <div class="variety-table__year-panel" data-year="2016">
@@ -508,6 +505,13 @@
</div> </div>
</td> </td>
</tr> </tr>
<tr class="variety-table__year-head" data-year="2017" hidden>
<th scope="col">播出日期</th>
<th scope="col">頻道</th>
<th scope="col">節目名稱</th>
<th scope="col">出演成員</th>
<th scope="col">集數</th>
</tr>
<tr class="variety-table__year-panel-row" data-year="2017" hidden> <tr class="variety-table__year-panel-row" data-year="2017" hidden>
<td colspan="5" class="variety-table__year-panel-cell"> <td colspan="5" class="variety-table__year-panel-cell">
<div class="variety-table__year-panel" data-year="2017"> <div class="variety-table__year-panel" data-year="2017">
@@ -594,6 +598,13 @@
</div> </div>
</td> </td>
</tr> </tr>
<tr class="variety-table__year-head" data-year="2018" hidden>
<th scope="col">播出日期</th>
<th scope="col">頻道</th>
<th scope="col">節目名稱</th>
<th scope="col">出演成員</th>
<th scope="col">集數</th>
</tr>
<tr class="variety-table__year-panel-row" data-year="2018" hidden> <tr class="variety-table__year-panel-row" data-year="2018" hidden>
<td colspan="5" class="variety-table__year-panel-cell"> <td colspan="5" class="variety-table__year-panel-cell">
<div class="variety-table__year-panel" data-year="2018"> <div class="variety-table__year-panel" data-year="2018">
@@ -668,6 +679,13 @@
</div> </div>
</td> </td>
</tr> </tr>
<tr class="variety-table__year-head" data-year="2019" hidden>
<th scope="col">播出日期</th>
<th scope="col">頻道</th>
<th scope="col">節目名稱</th>
<th scope="col">出演成員</th>
<th scope="col">集數</th>
</tr>
<tr class="variety-table__year-panel-row" data-year="2019" hidden> <tr class="variety-table__year-panel-row" data-year="2019" hidden>
<td colspan="5" class="variety-table__year-panel-cell"> <td colspan="5" class="variety-table__year-panel-cell">
<div class="variety-table__year-panel" data-year="2019"> <div class="variety-table__year-panel" data-year="2019">
@@ -768,6 +786,13 @@
</div> </div>
</td> </td>
</tr> </tr>
<tr class="variety-table__year-head" data-year="2020" hidden>
<th scope="col">播出日期</th>
<th scope="col">頻道</th>
<th scope="col">節目名稱</th>
<th scope="col">出演成員</th>
<th scope="col">集數</th>
</tr>
<tr class="variety-table__year-panel-row" data-year="2020" hidden> <tr class="variety-table__year-panel-row" data-year="2020" hidden>
<td colspan="5" class="variety-table__year-panel-cell"> <td colspan="5" class="variety-table__year-panel-cell">
<div class="variety-table__year-panel" data-year="2020"> <div class="variety-table__year-panel" data-year="2020">
@@ -885,14 +910,26 @@
); );
} }
function getYearHeadRow(slot, year) {
return slot.querySelector(
`.variety-table__year-head[data-year="${year}"]`
);
}
function getYearPanel(slot, year) { function getYearPanel(slot, year) {
return getYearPanelRow(slot, year)?.querySelector( return getYearPanelRow(slot, year)?.querySelector(
`.variety-table__year-panel[data-year="${year}"]` `.variety-table__year-panel[data-year="${year}"]`
); );
} }
function openYearPanel(panelRow, panel) { function setYearHeadVisible(slot, year, visible) {
const head = getYearHeadRow(slot, year);
if (head) head.hidden = !visible;
}
function openYearPanel(slot, panelRow, panel, year) {
if (!panelRow || !panel) return; if (!panelRow || !panel) return;
setYearHeadVisible(slot, year, true);
panelRow.hidden = false; panelRow.hidden = false;
if (panel.classList.contains("is-open")) { if (panel.classList.contains("is-open")) {
panel.style.maxHeight = `${panel.scrollHeight}px`; panel.style.maxHeight = `${panel.scrollHeight}px`;
@@ -905,7 +942,7 @@
}); });
} }
function closeYearPanel(panelRow, panel) { function closeYearPanel(slot, panelRow, panel, year) {
if (!panelRow || !panel || !panel.classList.contains("is-open")) { if (!panelRow || !panel || !panel.classList.contains("is-open")) {
return; return;
} }
@@ -918,6 +955,7 @@
panel.classList.remove("is-open"); panel.classList.remove("is-open");
panel.style.maxHeight = ""; panel.style.maxHeight = "";
panelRow.hidden = true; panelRow.hidden = true;
setYearHeadVisible(slot, year, false);
panel.removeEventListener("transitionend", onEnd); panel.removeEventListener("transitionend", onEnd);
}; };
panel.addEventListener("transitionend", onEnd); panel.addEventListener("transitionend", onEnd);
@@ -944,19 +982,21 @@
if (yearOpen && panelRow && panel) { if (yearOpen && panelRow && panel) {
if (q && !anyMatch) { if (q && !anyMatch) {
closeYearPanel(panelRow, panel); closeYearPanel(slot, panelRow, panel, year);
yearRow.classList.remove("is-open"); yearRow.classList.remove("is-open");
if (btn) btn.setAttribute("aria-expanded", "false"); if (btn) btn.setAttribute("aria-expanded", "false");
} else { } else {
openYearPanel(panelRow, panel); openYearPanel(slot, panelRow, panel, year);
panel.style.maxHeight = `${panel.scrollHeight}px`; panel.style.maxHeight = `${panel.scrollHeight}px`;
} }
} else {
setYearHeadVisible(slot, year, false);
} }
if (q && anyMatch && !yearOpen && panelRow && panel) { if (q && anyMatch && !yearOpen && panelRow && panel) {
yearRow.classList.add("is-open"); yearRow.classList.add("is-open");
if (btn) btn.setAttribute("aria-expanded", "true"); if (btn) btn.setAttribute("aria-expanded", "true");
openYearPanel(panelRow, panel); openYearPanel(slot, panelRow, panel, year);
} }
yearRow.hidden = Boolean(q) && !anyMatch; yearRow.hidden = Boolean(q) && !anyMatch;
@@ -973,9 +1013,9 @@
btn.setAttribute("aria-expanded", open ? "true" : "false"); btn.setAttribute("aria-expanded", open ? "true" : "false");
yearRow.classList.toggle("is-open", open); yearRow.classList.toggle("is-open", open);
if (open) { if (open) {
openYearPanel(panelRow, panel); openYearPanel(slot, panelRow, panel, year);
} else { } else {
closeYearPanel(panelRow, panel); closeYearPanel(slot, panelRow, panel, year);
} }
if (slot) syncYearRows(slot); if (slot) syncYearRows(slot);
} }