Skip to content

Commit 70ef263

Browse files
bishaboshabishabosha
committed
JS not required to operate tabs or alt-details
1 parent 659f076 commit 70ef263

File tree

12 files changed

+118
-84
lines changed

12 files changed

+118
-84
lines changed

‎_includes/alt-details.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
<div {% if include.id %} id="{{include.id}}" {% endif %} class="alt-details">
2-
<button class="alt-details-toggle">{{include.title}}</button>
1+
<div id="{{include.id}}" class="alt-details">
2+
<input class="alt-details-control" type="checkbox" id="{{include.id}}__control" hidden aria-hidden="true">
3+
<label class="alt-details-toggle" for="{{include.id}}__control">{{include.title}}</label>
34
<div class="alt-details-detail">
45
{{include.detail}}
56
</div>

‎_includes/tabsection.html‎

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,32 @@
1-
<div {% if include.id %} id="{{include.id}}" {% endif %} class="tabsection">
2-
<ul class="nav-tab">
1+
<div id="{{include.id}}" class="tabsection">
2+
{% for tabRoot in include.collection %}
3+
{% if tabRoot.language == include.language %}
4+
<input
5+
type="radio"
6+
name="{{include.id}}_tabs"
7+
id="{{tabRoot.tabId}}_description"
8+
data-target="{{tabRoot.tabId}}"
9+
hidden aria-hidden="true"
10+
{% if tabRoot.defaultTab %}checked{% endif %}
11+
>
12+
{% endif %}
13+
{% endfor %}
14+
<ul hidden aria-hidden="true" class="nav-tab">
315
{% for tabRoot in include.collection %}
416
{% if tabRoot.language == include.language %}
517
<li class="item-tab">
6-
<a class="item-tab-link {% if tabRoot.defaultTab %} active{% endif %}"
7-
data-target="{{tabRoot.tabId}}">{{tabRoot.tabLabel}}</a>
18+
<label class="item-tab-link" for="{{tabRoot.tabId}}_description">{{tabRoot.tabLabel}}</label>
819
</li>
920
{% endif %}
1021
{% endfor %}
1122
</ul>
12-
{% for tabRoot in include.collection %}
13-
{% if tabRoot.language == include.language %}
14-
<div class="tabcontent {% if tabRoot.defaultTab %}active{% endif %}" data-tab="{{tabRoot.tabId}}">
15-
{{tabRoot.content}}
23+
<div class="tabcontent">
24+
{% for tabRoot in include.collection %}
25+
{% if tabRoot.language == include.language %}
26+
<section id="{{tabRoot.tabId}}_content">
27+
{{tabRoot.content}}
28+
</section>
29+
{% endif %}
30+
{% endfor %}
1631
</div>
17-
{% endif %}
18-
{% endfor %}
1932
</div>

‎_install_tabs/1-macos.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
</div>
1414
{% endcapture %}
1515
{% include alt-details.html
16+
id='cs-setup-macos-nobrew'
1617
title="Alternatively, if you don't use Homebrew:"
1718
detail=homebrewDetail
1819
%}

‎_install_tabs/4-other.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
---
22
tabId: other
33
tabLabel: Other
4-
fallbackNoJS: true
4+
defaultTab: true
55
language: en
66
---
77
<div class="wrap-inline">
88
<div class="wrap">
99
<noscript>
10-
<p><span style="font-style:italic;">JavaScript is disabled, showing the default options.</span></p>
10+
<p><span style="font-style:italic;">JavaScript is disabled, click the tab relevant for your OS.</span></p>
1111
</noscript>
1212
<p>Follow the documentation from Coursier on <a href="https://get-coursier.io/docs/cli-installation"
1313
target="_blank">how to install and run <code>cs setup</code></a>.</p>

‎_install_tabs/fr-1-macos.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
</div>
1313
{% endcapture %}
1414
{% include alt-details.html
15+
id='cs-setup-macos-nobrew'
1516
title="Alternativement, si vous n'utilisez pas Homebrew:"
1617
detail=homebrewDetail
1718
%}

‎_install_tabs/fr-4-other.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
---
22
tabId: other
33
tabLabel: Other
4-
fallbackNoJS: true
4+
defaultTab: true
55
language: fr
66
---
77
<div class="wrap-inline">
88
<div class="wrap">
99
<noscript>
10-
<p><span style="font-style:italic;">JavaScript is disabled, showing the default options.</span></p>
10+
<p><span style="font-style:italic;">JavaScript est désacivé. Cliquez sur l'onglet correspondant à votre système d'exploitation.</span></p>
1111
</noscript>
1212
<p>Suivez <a href="https://get-coursier.io/docs/cli-installation" target="_blank">les instructions pour installer la commande
1313
<code>cs</code></a>puis exécutez <code>./cs setup</code>.</p>

‎_install_tabs/ja-1-macos.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
</div>
1313
{% endcapture %}
1414
{% include alt-details.html
15+
id='cs-setup-macos-nobrew'
1516
title="または、Homebrewを使用しない場合は"
1617
detail=homebrewDetail
1718
%}

‎_install_tabs/ja-4-other.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
---
22
tabId: other
33
tabLabel: Other
4-
fallbackNoJS: true
4+
defaultTab: true
55
language: ja
66
---
77
<div class="wrap-inline">
88
<div class="wrap">
99
<noscript>
10-
<p><span style="font-style:italic;">JavaScript is disabled, showing the default options.</span></p>
10+
<p><span style="font-style:italic;">JavaScript is disabled, click the tab relevant for your OS.</span></p>
1111
</noscript>
1212
<p><a href="https://get-coursier.io/docs/cli-installation" target="_blank">手順に従って <code>cs</code> ランチャーをインストール</a>し、その次に以下を実行します。<code>./cs setup</code></p>
1313
</div>

‎_sass/components/alt-details.scss‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@
77

88
.alt-details-toggle {
99
@include span-columns(12);
10+
font-family: $base-font-family;
11+
line-height: normal;
12+
text-align: center;
1013
border: none;
1114
background-color: $brand-tertiary;
1215
padding: 5px 10px;
@@ -21,23 +24,40 @@
2124
}
2225

2326
&:after {
24-
content: "\f13a"; // <i class="fa-solid fa-circle-chevron-down"></i>
27+
// show a right arrow at the end of the toggle element
28+
content: "\f138"; // <i class="fa-solid fa-circle-chevron-right"></i>
2529
font-family: "Font Awesome 5 Free";
2630
font-weight: 900;
2731
font-size: 15px;
2832
float: right;
2933
margin-top: 2px;
3034
}
3135

32-
&.alt-details-closed:after {
33-
content: "\f138"; // <i class="fa-solid fa-circle-chevron-right"></i>
34-
}
36+
}
37+
38+
.alt-details-control+.alt-details-toggle+.alt-details-detail {
39+
// by default, hide the details
40+
position: absolute;
41+
top: -999em;
42+
left: -999em;
43+
}
44+
45+
.alt-details-control:checked+.alt-details-toggle+.alt-details-detail {
46+
// show the details when the control is checked
47+
position: static;
48+
}
49+
50+
.alt-details-control:checked+.alt-details-toggle:after {
51+
// change the marker on the toggle label to a down arrow
52+
content: "\f13a"; // <i class="fa-solid fa-circle-chevron-down"></i>
3553
}
3654

3755
.alt-details-detail {
3856
// The detail box appears to be underneath the toggle button
3957
// so we add a padding to the top and push it up.
40-
border: $base-border-gray;
58+
border-bottom: $base-border-gray;
59+
border-left: $base-border-gray;
60+
border-right: $base-border-gray;
4161
padding-top: 15px;
4262
margin-top: 15px;
4363
}

‎_sass/components/tab.scss‎

Lines changed: 51 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
//------------------------------------------------
33
//------------------------------------------------
44

5+
// dynamic tab switching based on https: //levelup.gitconnected.com/tabbed-interfaces-without-javascript-661bab1eaec8
6+
57
.nav-tab {
68
border-bottom: $base-border-gray;
79
@include display(flex);
@@ -10,6 +12,7 @@
1012

1113
.item-tab {
1214

15+
label,
1316
a {
1417
transition: none; // do not animate the transition to active
1518
color: $base-font-color-light;
@@ -27,13 +30,15 @@
2730
&:hover {
2831
cursor: pointer;
2932
}
33+
}
3034

31-
&.active {
32-
border-bottom: 2px solid $brand-primary;
33-
padding: 0 20px 8px; // so text does not jump up when active
34-
color: $brand-primary;
35-
pointer-events: none;
36-
}
35+
label {
36+
-webkit-touch-callout: none;
37+
-webkit-user-select: none;
38+
-khtml-user-select: none;
39+
-moz-user-select: none;
40+
-ms-user-select: none;
41+
user-select: none;
3742
}
3843

3944
}
@@ -42,6 +47,7 @@
4247
@include justify-content(space-between);
4348

4449
.item-tab {
50+
label,
4551
a {
4652
transition: none; // do not animate the transition to active
4753
padding: 0 10px 10px;
@@ -51,6 +57,22 @@
5157
}
5258
}
5359

60+
.nav-tab>.item-tab>a.active, // used in the blog
61+
.tabsection>input:nth-child(1):checked~.nav-tab .item-tab:nth-child(1) label,
62+
.tabsection>input:nth-child(2):checked~.nav-tab .item-tab:nth-child(2) label,
63+
.tabsection>input:nth-child(3):checked~.nav-tab .item-tab:nth-child(3) label,
64+
.tabsection>input:nth-child(4):checked~.nav-tab .item-tab:nth-child(4) label,
65+
.tabsection>input:nth-child(5):checked~.nav-tab .item-tab:nth-child(5) label,
66+
.tabsection>input:nth-child(6):checked~.nav-tab .item-tab:nth-child(6) label,
67+
.tabsection>input:nth-child(7):checked~.nav-tab .item-tab:nth-child(7) label,
68+
.tabsection>input:nth-child(8):checked~.nav-tab .item-tab:nth-child(8) label,
69+
.tabsection>input:nth-child(9):checked~.nav-tab .item-tab:nth-child(9) label {
70+
border-bottom: 2px solid $brand-primary;
71+
padding: 0 20px 8px; // so text does not jump up when active
72+
color: $brand-primary;
73+
pointer-events: none;
74+
}
75+
5476
.tabsection {
5577
border-bottom: $base-border-gray;
5678
border-left: $base-border-gray;
@@ -67,12 +89,30 @@
6789
list-style: none;
6890
}
6991
}
70-
}
7192

72-
.tabcontent {
73-
display: none;
93+
input { // hide the input because they are not interactive
94+
display: block; /* "enable" hidden elements in IE/edge */
95+
position: absolute; /* then hide them off-screen */
96+
left: -100%;
97+
}
7498

75-
&.active {
76-
display: block;
99+
.tabcontent {
100+
section { // by default, hide all sections until the user clicks on the associated label
101+
position: absolute;
102+
top: -999em;
103+
left: -999em;
104+
}
77105
}
78106
}
107+
108+
.tabsection>input:nth-child(1):checked~.tabcontent section:nth-child(1),
109+
.tabsection>input:nth-child(2):checked~.tabcontent section:nth-child(2),
110+
.tabsection>input:nth-child(3):checked~.tabcontent section:nth-child(3),
111+
.tabsection>input:nth-child(4):checked~.tabcontent section:nth-child(4),
112+
.tabsection>input:nth-child(5):checked~.tabcontent section:nth-child(5),
113+
.tabsection>input:nth-child(6):checked~.tabcontent section:nth-child(6),
114+
.tabsection>input:nth-child(7):checked~.tabcontent section:nth-child(7),
115+
.tabsection>input:nth-child(8):checked~.tabcontent section:nth-child(8),
116+
.tabsection>input:nth-child(9):checked~.tabcontent section:nth-child(9) {
117+
position: static;
118+
}

0 commit comments

Comments
 (0)