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

fix 綜藝表改show-row結構

Browse Source
This commit is contained in:
jekkinoopy
2026-05-17 19:52:01 +08:00
parent 1b68c233dc
commit 5d23774b50
1 changed files with 110 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files
variety/variety-shows.html
+106 -310
View File
@@ -102,8 +102,7 @@
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;
@@ -114,21 +113,15 @@
white-space: nowrap; white-space: nowrap;
} }
body.variety-shows-page .variety-table__year-head[hidden] { body.variety-shows-page .variety-table__show-row--labels td {
display: none; padding: 12px 10px;
} border: none;
border-bottom: 2px solid #e6e6e6;
body.variety-shows-page .variety-table__year-head { background: #fafafa;
transition: opacity 0.35s ease; color: #333;
} font-weight: 800;
text-align: center;
body.variety-shows-page .variety-table__year-head.is-closing { white-space: nowrap;
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 tbody td { body.variety-shows-page .variety-table tbody td {
@@ -140,56 +133,6 @@
color: #444; 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 { body.variety-shows-page .variety-table__year-row>td {
padding: 0; padding: 0;
background: #fafafa; background: #fafafa;
@@ -282,7 +225,7 @@
display: none; 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; background: #fcfcfc;
} }
@@ -383,7 +326,13 @@
<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>
<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">
@@ -398,26 +347,14 @@
</div> </div>
</td> </td>
</tr> </tr>
<tr class="variety-table__year-head" data-year="2016" hidden> <tr class="variety-table__show-row variety-table__show-row--labels" data-year="2016" hidden>
<th scope="col">播出日期</th> <td>播出日期</td>
<th scope="col">頻道</th> <td>頻道</td>
<th scope="col">節目名稱</th> <td>節目名稱</td>
<th scope="col">出演成員</th> <td>出演成員</td>
<th scope="col">集數</th> <td>集數</td>
</tr> </tr>
<tr class="variety-table__year-panel-row" data-year="2016" hidden> <tr class="variety-table__show-row" hidden data-year="2016">
<td colspan="5" class="variety-table__year-panel-cell">
<div class="variety-table__year-panel" data-year="2016">
<table class="variety-table variety-table__inner">
<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>
<tbody>
<tr class="variety-table__show-row" data-year="2016">
<td class="variety-table__air-date" data-air-start="2016-04-22" <td class="variety-table__air-date" data-air-start="2016-04-22"
data-air-end="2016-06-17"><span data-air-end="2016-06-17"><span
class="variety-table__date">04/22</span>&nbsp;<i class="variety-table__date">04/22</span>&nbsp;<i
@@ -431,7 +368,7 @@
class="fa-solid fa-circle-right variety-table__range-arrow" class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;09</td> aria-hidden="true"></i>&nbsp;09</td>
</tr> </tr>
<tr class="variety-table__show-row" data-year="2016"> <tr class="variety-table__show-row" hidden data-year="2016">
<td class="variety-table__air-date" data-air-start="2016-04-27" <td class="variety-table__air-date" data-air-start="2016-04-27"
data-air-end="2016-06-22"><span data-air-end="2016-06-22"><span
class="variety-table__date">04/27</span>&nbsp;<i class="variety-table__date">04/27</span>&nbsp;<i
@@ -445,7 +382,7 @@
class="fa-solid fa-circle-right variety-table__range-arrow" class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;09</td> aria-hidden="true"></i>&nbsp;09</td>
</tr> </tr>
<tr class="variety-table__show-row" data-year="2016"> <tr class="variety-table__show-row" hidden data-year="2016">
<td class="variety-table__air-date" data-air-start="2016-05-04" <td class="variety-table__air-date" data-air-start="2016-05-04"
data-air-end="2016-07-20"><span data-air-end="2016-07-20"><span
class="variety-table__date">05/04</span>&nbsp;<i class="variety-table__date">05/04</span>&nbsp;<i
@@ -459,7 +396,7 @@
class="fa-solid fa-circle-right variety-table__range-arrow" class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;12</td> aria-hidden="true"></i>&nbsp;12</td>
</tr> </tr>
<tr class="variety-table__show-row" data-year="2016"> <tr class="variety-table__show-row" hidden data-year="2016">
<td class="variety-table__air-date" data-air-start="2016-06-05" <td class="variety-table__air-date" data-air-start="2016-06-05"
data-air-end="2016-08-21"><span data-air-end="2016-08-21"><span
class="variety-table__date">06/05</span>&nbsp;<i class="variety-table__date">06/05</span>&nbsp;<i
@@ -473,7 +410,7 @@
class="fa-solid fa-circle-right variety-table__range-arrow" class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;12</td> aria-hidden="true"></i>&nbsp;12</td>
</tr> </tr>
<tr class="variety-table__show-row" data-year="2016"> <tr class="variety-table__show-row" hidden data-year="2016">
<td class="variety-table__air-date" data-air-start="2016-09-05" <td class="variety-table__air-date" data-air-start="2016-09-05"
data-air-end="2016-11-21"><span data-air-end="2016-11-21"><span
class="variety-table__date">09/05</span>&nbsp;<i class="variety-table__date">09/05</span>&nbsp;<i
@@ -487,7 +424,7 @@
class="fa-solid fa-circle-right variety-table__range-arrow" class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;12</td> aria-hidden="true"></i>&nbsp;12</td>
</tr> </tr>
<tr class="variety-table__show-row" data-year="2016"> <tr class="variety-table__show-row" hidden data-year="2016">
<td class="variety-table__air-date" data-air-start="2016-10-12" <td class="variety-table__air-date" data-air-start="2016-10-12"
data-air-end="2016-10-21"><span data-air-end="2016-10-21"><span
class="variety-table__date">10/12</span>&nbsp;<i class="variety-table__date">10/12</span>&nbsp;<i
@@ -501,11 +438,6 @@
class="fa-solid fa-circle-right variety-table__range-arrow" class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;02</td> aria-hidden="true"></i>&nbsp;02</td>
</tr> </tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr class="variety-table__year-row" data-year="2017"> <tr class="variety-table__year-row" data-year="2017">
<td colspan="5" class="variety-table__year-bar"> <td colspan="5" class="variety-table__year-bar">
<div class="variety-table__year-bar-inner"> <div class="variety-table__year-bar-inner">
@@ -519,26 +451,14 @@
</div> </div>
</td> </td>
</tr> </tr>
<tr class="variety-table__year-head" data-year="2017" hidden> <tr class="variety-table__show-row variety-table__show-row--labels" data-year="2017" hidden>
<th scope="col">播出日期</th> <td>播出日期</td>
<th scope="col">頻道</th> <td>頻道</td>
<th scope="col">節目名稱</th> <td>節目名稱</td>
<th scope="col">出演成員</th> <td>出演成員</td>
<th scope="col">集數</th> <td>集數</td>
</tr> </tr>
<tr class="variety-table__year-panel-row" data-year="2017" hidden> <tr class="variety-table__show-row" hidden data-year="2017">
<td colspan="5" class="variety-table__year-panel-cell">
<div class="variety-table__year-panel" data-year="2017">
<table class="variety-table variety-table__inner">
<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>
<tbody>
<tr class="variety-table__show-row" data-year="2017">
<td class="variety-table__air-date" data-air-start="2017-01-01" <td class="variety-table__air-date" data-air-start="2017-01-01"
data-air-end="2019-06-02"><span data-air-end="2019-06-02"><span
class="variety-table__date">01/01</span>&nbsp;<i class="variety-table__date">01/01</span>&nbsp;<i
@@ -552,7 +472,7 @@
class="fa-solid fa-circle-right variety-table__range-arrow" class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;280</td> aria-hidden="true"></i>&nbsp;280</td>
</tr> </tr>
<tr class="variety-table__show-row" data-year="2017"> <tr class="variety-table__show-row" hidden data-year="2017">
<td class="variety-table__air-date" data-air-start="2017-01-08" <td class="variety-table__air-date" data-air-start="2017-01-08"
data-air-end="2017-03-12"><span data-air-end="2017-03-12"><span
class="variety-table__date">01/08</span>&nbsp;<i class="variety-table__date">01/08</span>&nbsp;<i
@@ -566,7 +486,7 @@
class="fa-solid fa-circle-right variety-table__range-arrow" class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;09＋導演版</td> aria-hidden="true"></i>&nbsp;09＋導演版</td>
</tr> </tr>
<tr class="variety-table__show-row" data-year="2017"> <tr class="variety-table__show-row" hidden data-year="2017">
<td class="variety-table__air-date" data-air-start="2017-06-13" <td class="variety-table__air-date" data-air-start="2017-06-13"
data-air-end="2017-08-22"><span data-air-end="2017-08-22"><span
class="variety-table__date">06/13</span>&nbsp;<i class="variety-table__date">06/13</span>&nbsp;<i
@@ -580,7 +500,7 @@
class="fa-solid fa-circle-right variety-table__range-arrow" class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;10＋導演版</td> aria-hidden="true"></i>&nbsp;10＋導演版</td>
</tr> </tr>
<tr class="variety-table__show-row" data-year="2017"> <tr class="variety-table__show-row" hidden data-year="2017">
<td class="variety-table__air-date" data-air-start="2017-12-05" <td class="variety-table__air-date" data-air-start="2017-12-05"
data-air-end="2018-01-09"><span data-air-end="2018-01-09"><span
class="variety-table__date">12/05</span>&nbsp;<i class="variety-table__date">12/05</span>&nbsp;<i
@@ -594,11 +514,6 @@
class="fa-solid fa-circle-right variety-table__range-arrow" class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;05＋導演版</td> aria-hidden="true"></i>&nbsp;05＋導演版</td>
</tr> </tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr class="variety-table__year-row" data-year="2018"> <tr class="variety-table__year-row" data-year="2018">
<td colspan="5" class="variety-table__year-bar"> <td colspan="5" class="variety-table__year-bar">
<div class="variety-table__year-bar-inner"> <div class="variety-table__year-bar-inner">
@@ -612,26 +527,14 @@
</div> </div>
</td> </td>
</tr> </tr>
<tr class="variety-table__year-head" data-year="2018" hidden> <tr class="variety-table__show-row variety-table__show-row--labels" data-year="2018" hidden>
<th scope="col">播出日期</th> <td>播出日期</td>
<th scope="col">頻道</th> <td>頻道</td>
<th scope="col">節目名稱</th> <td>節目名稱</td>
<th scope="col">出演成員</th> <td>出演成員</td>
<th scope="col">集數</th> <td>集數</td>
</tr> </tr>
<tr class="variety-table__year-panel-row" data-year="2018" hidden> <tr class="variety-table__show-row" hidden data-year="2018">
<td colspan="5" class="variety-table__year-panel-cell">
<div class="variety-table__year-panel" data-year="2018">
<table class="variety-table variety-table__inner">
<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>
<tbody>
<tr class="variety-table__show-row" data-year="2018">
<td class="variety-table__air-date" data-air-start="2018-05-05" <td class="variety-table__air-date" data-air-start="2018-05-05"
data-air-end="2018-10-27"><span data-air-end="2018-10-27"><span
class="variety-table__date">05/05</span>&nbsp;<i class="variety-table__date">05/05</span>&nbsp;<i
@@ -645,7 +548,7 @@
class="fa-solid fa-circle-right variety-table__range-arrow" class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;25</td> aria-hidden="true"></i>&nbsp;25</td>
</tr> </tr>
<tr class="variety-table__show-row" data-year="2018"> <tr class="variety-table__show-row" hidden data-year="2018">
<td class="variety-table__air-date" data-air-start="2018-09-30" <td class="variety-table__air-date" data-air-start="2018-09-30"
data-air-end="2018-10-28"><span data-air-end="2018-10-28"><span
class="variety-table__date">09/30</span>&nbsp;<i class="variety-table__date">09/30</span>&nbsp;<i
@@ -661,7 +564,7 @@
class="fa-solid fa-circle-right variety-table__range-arrow" class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;05</td> aria-hidden="true"></i>&nbsp;05</td>
</tr> </tr>
<tr class="variety-table__show-row" data-year="2018"> <tr class="variety-table__show-row" hidden data-year="2018">
<td class="variety-table__air-date" data-air-start="2018-10-28" <td class="variety-table__air-date" data-air-start="2018-10-28"
data-air-end="2018-12-02"><span data-air-end="2018-12-02"><span
class="variety-table__date">10/28</span>&nbsp;<i class="variety-table__date">10/28</span>&nbsp;<i
@@ -675,11 +578,6 @@
class="fa-solid fa-circle-right variety-table__range-arrow" class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;05＋導演版</td> aria-hidden="true"></i>&nbsp;05＋導演版</td>
</tr> </tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr class="variety-table__year-row" data-year="2019"> <tr class="variety-table__year-row" data-year="2019">
<td colspan="5" class="variety-table__year-bar"> <td colspan="5" class="variety-table__year-bar">
<div class="variety-table__year-bar-inner"> <div class="variety-table__year-bar-inner">
@@ -693,26 +591,14 @@
</div> </div>
</td> </td>
</tr> </tr>
<tr class="variety-table__year-head" data-year="2019" hidden> <tr class="variety-table__show-row variety-table__show-row--labels" data-year="2019" hidden>
<th scope="col">播出日期</th> <td>播出日期</td>
<th scope="col">頻道</th> <td>頻道</td>
<th scope="col">節目名稱</th> <td>節目名稱</td>
<th scope="col">出演成員</th> <td>出演成員</td>
<th scope="col">集數</th> <td>集數</td>
</tr> </tr>
<tr class="variety-table__year-panel-row" data-year="2019" hidden> <tr class="variety-table__show-row" hidden data-year="2019">
<td colspan="5" class="variety-table__year-panel-cell">
<div class="variety-table__year-panel" data-year="2019">
<table class="variety-table variety-table__inner">
<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>
<tbody>
<tr class="variety-table__show-row" data-year="2019">
<td class="variety-table__air-date" data-air-start="2019-05-31" <td class="variety-table__air-date" data-air-start="2019-05-31"
data-air-end="2019-07-05"><span data-air-end="2019-07-05"><span
class="variety-table__date">05/31</span>&nbsp;<i class="variety-table__date">05/31</span>&nbsp;<i
@@ -726,7 +612,7 @@
class="fa-solid fa-circle-right variety-table__range-arrow" class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;06</td> aria-hidden="true"></i>&nbsp;06</td>
</tr> </tr>
<tr class="variety-table__show-row" data-year="2019"> <tr class="variety-table__show-row" hidden data-year="2019">
<td class="variety-table__air-date" data-air-start="2019-06-08" <td class="variety-table__air-date" data-air-start="2019-06-08"
data-air-end="2019-08-17"><span data-air-end="2019-08-17"><span
class="variety-table__date">06/08</span>&nbsp;<i class="variety-table__date">06/08</span>&nbsp;<i
@@ -740,7 +626,7 @@
class="fa-solid fa-circle-right variety-table__range-arrow" class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;11</td> aria-hidden="true"></i>&nbsp;11</td>
</tr> </tr>
<tr class="variety-table__show-row" data-year="2019"> <tr class="variety-table__show-row" hidden data-year="2019">
<td class="variety-table__air-date" data-air-start="2019-07-05" <td class="variety-table__air-date" data-air-start="2019-07-05"
data-air-end="2019-08-02"><span data-air-end="2019-08-02"><span
class="variety-table__date">07/05</span>&nbsp;<i class="variety-table__date">07/05</span>&nbsp;<i
@@ -754,7 +640,7 @@
class="fa-solid fa-circle-right variety-table__range-arrow" class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;04</td> aria-hidden="true"></i>&nbsp;04</td>
</tr> </tr>
<tr class="variety-table__show-row" data-year="2019"> <tr class="variety-table__show-row" hidden data-year="2019">
<td class="variety-table__air-date" data-air-start="2019-09-20" <td class="variety-table__air-date" data-air-start="2019-09-20"
data-air-end="2019-11-22"><span data-air-end="2019-11-22"><span
class="variety-table__date">09/20</span>&nbsp;<i class="variety-table__date">09/20</span>&nbsp;<i
@@ -768,7 +654,7 @@
class="fa-solid fa-circle-right variety-table__range-arrow" class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;10</td> aria-hidden="true"></i>&nbsp;10</td>
</tr> </tr>
<tr class="variety-table__show-row" data-year="2019"> <tr class="variety-table__show-row" hidden data-year="2019">
<td class="variety-table__air-date" data-air-start="2019-10-25" <td class="variety-table__air-date" data-air-start="2019-10-25"
data-air-end="2020-01-03"><span data-air-end="2020-01-03"><span
class="variety-table__date">10/25</span>&nbsp;<i class="variety-table__date">10/25</span>&nbsp;<i
@@ -782,11 +668,6 @@
class="fa-solid fa-circle-right variety-table__range-arrow" class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;11</td> aria-hidden="true"></i>&nbsp;11</td>
</tr> </tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr class="variety-table__year-row" data-year="2020"> <tr class="variety-table__year-row" data-year="2020">
<td colspan="5" class="variety-table__year-bar"> <td colspan="5" class="variety-table__year-bar">
<div class="variety-table__year-bar-inner"> <div class="variety-table__year-bar-inner">
@@ -800,26 +681,14 @@
</div> </div>
</td> </td>
</tr> </tr>
<tr class="variety-table__year-head" data-year="2020" hidden> <tr class="variety-table__show-row variety-table__show-row--labels" data-year="2020" hidden>
<th scope="col">播出日期</th> <td>播出日期</td>
<th scope="col">頻道</th> <td>頻道</td>
<th scope="col">節目名稱</th> <td>節目名稱</td>
<th scope="col">出演成員</th> <td>出演成員</td>
<th scope="col">集數</th> <td>集數</td>
</tr> </tr>
<tr class="variety-table__year-panel-row" data-year="2020" hidden> <tr class="variety-table__show-row" hidden data-year="2020">
<td colspan="5" class="variety-table__year-panel-cell">
<div class="variety-table__year-panel" data-year="2020">
<table class="variety-table variety-table__inner">
<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>
<tbody>
<tr class="variety-table__show-row" data-year="2020">
<td class="variety-table__air-date" data-air-start="2020-01-10" <td class="variety-table__air-date" data-air-start="2020-01-10"
data-air-end="2020-03-27"><span data-air-end="2020-03-27"><span
class="variety-table__date">01/10</span>&nbsp;<i class="variety-table__date">01/10</span>&nbsp;<i
@@ -833,7 +702,7 @@
class="fa-solid fa-circle-right variety-table__range-arrow" class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;10＋導演版</td> aria-hidden="true"></i>&nbsp;10＋導演版</td>
</tr> </tr>
<tr class="variety-table__show-row" data-year="2020"> <tr class="variety-table__show-row" hidden data-year="2020">
<td class="variety-table__air-date" data-air-start="2020-10-09" <td class="variety-table__air-date" data-air-start="2020-10-09"
data-air-end="2020-12-18"><span data-air-end="2020-12-18"><span
class="variety-table__date">10/09</span>&nbsp;<i class="variety-table__date">10/09</span>&nbsp;<i
@@ -848,11 +717,6 @@
aria-hidden="true"></i>&nbsp;10＋導演版</td> aria-hidden="true"></i>&nbsp;10＋導演版</td>
</tr> </tr>
</tbody> </tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table> </table>
<table class="variety-table" id="each-rampage" data-show-tabs="all solo"> <table class="variety-table" id="each-rampage" data-show-tabs="all solo">
@@ -906,7 +770,9 @@
} }
function rowMatchesSearch(row, q) { 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 air = row.querySelector(".variety-table__air-date");
const airData = air const airData = air
? `${air.dataset.airStart || ""} ${air.dataset.airEnd || ""}` ? `${air.dataset.airStart || ""} ${air.dataset.airEnd || ""}`
@@ -918,83 +784,41 @@
return text.includes(q); return text.includes(q);
} }
function getYearPanelRow(slot, year) { function getYearLabelsRow(slot, year) {
return slot.querySelector( return slot.querySelector(
`.variety-table__year-panel-row[data-year="${year}"]` `.variety-table__show-row--labels[data-year="${year}"]`
); );
} }
function getYearHeadRow(slot, year) { function getYearShowRows(slot, year) {
return slot.querySelector( return slot.querySelectorAll(
`.variety-table__year-head[data-year="${year}"]` `.variety-table__show-row[data-year="${year}"]:not(.variety-table__show-row--labels)`
); );
} }
function getYearPanel(slot, year) { function applyYearDetailVisibility(yearRow, open, q) {
return getYearPanelRow(slot, year)?.querySelector( const year = yearRow.dataset.year;
`.variety-table__year-panel[data-year="${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) { showRows.forEach((row) => {
const head = getYearHeadRow(slot, year); const match = rowMatchesSearch(row, q);
if (!head) return; if (match) anyMatch = true;
head.classList.remove("is-closing"); if (!open) {
head.hidden = !visible; row.hidden = true;
} else {
row.hidden = Boolean(q) && !match;
} }
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`;
}); });
if (labels) {
labels.hidden = !open || (Boolean(q) && !anyMatch);
} }
function closeYearPanel(slot, panelRow, panel, year) { return anyMatch;
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;
}
panel.removeEventListener("transitionend", onEnd);
};
panel.addEventListener("transitionend", onEnd);
}
function isYearAnimating(panel, panelRow) {
return (
panel?.classList.contains("is-open") ||
panelRow?.classList.contains("is-closing")
);
} }
function syncYearRows(slot) { function syncYearRows(slot) {
@@ -1002,41 +826,22 @@
slot.querySelectorAll(".variety-table__year-row").forEach((yearRow) => { slot.querySelectorAll(".variety-table__year-row").forEach((yearRow) => {
const year = yearRow.dataset.year; const year = yearRow.dataset.year;
const btn = yearRow.querySelector(".variety-table__year-toggle"); const btn = yearRow.querySelector(".variety-table__year-toggle");
const panelRow = getYearPanelRow(slot, year); let yearOpen = yearRow.classList.contains("is-open");
const panel = getYearPanel(slot, year); let anyMatch = applyYearDetailVisibility(yearRow, yearOpen, q);
const detailRows = panelRow
? panelRow.querySelectorAll(".variety-table__show-row")
: [];
let anyMatch = false;
const yearOpen = yearRow.classList.contains("is-open");
detailRows.forEach((row) => { if (yearOpen && q && !anyMatch) {
const match = rowMatchesSearch(row, q); yearOpen = false;
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"); yearRow.classList.remove("is-open");
if (btn) btn.setAttribute("aria-expanded", "false"); if (btn) btn.setAttribute("aria-expanded", "false");
} else { applyYearDetailVisibility(yearRow, false, q);
openYearPanel(slot, panelRow, panel, year);
panel.style.maxHeight = `${panel.scrollHeight}px`;
}
} else if (
!yearOpen &&
!isYearAnimating(panel, panelRow) &&
panelRow?.hidden
) {
setYearHeadVisible(slot, year, false);
} }
if (q && anyMatch && !yearOpen && panelRow && panel) { if (q && anyMatch && !yearOpen) {
yearOpen = true;
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(slot, panelRow, panel, year); applyYearDetailVisibility(yearRow, true, q);
anyMatch = true;
} }
yearRow.hidden = Boolean(q) && !anyMatch; yearRow.hidden = Boolean(q) && !anyMatch;
@@ -1045,20 +850,11 @@
function setYearOpen(yearRow, open) { function setYearOpen(yearRow, open) {
const btn = yearRow.querySelector(".variety-table__year-toggle"); const btn = yearRow.querySelector(".variety-table__year-toggle");
const year = yearRow.dataset.year; if (!btn) return;
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;
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) { const q = (input && input.value.trim().toLowerCase()) || "";
openYearPanel(slot, panelRow, panel, year); applyYearDetailVisibility(yearRow, open, q);
} else {
closeYearPanel(slot, panelRow, panel, year);
}
const q = (input && input.value.trim()) || "";
if (slot && q) syncYearRows(slot);
} }
function filterVisibleRows() { function filterVisibleRows() {