Skip to content

Commit 95133b1

Browse files
authored
Merge pull request #2395 from bishabosha/no-js-tab-alt-details
JS not required to operate tabs or alt-details
2 parents 659f076 + 70ef263 commit 95133b1

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+
}

_sass/layout/inner-main.scss

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

5+
#inner-main>section:nth-child(2) {
6+
// corresponds to area with the content below the title
7+
position: relative;
8+
margin-top: -80px; // have it overlap with the title area
9+
}
10+
511
#inner-main {
612
background: $gray-lighter;
713
padding-bottom: $padding-xlarge;
814

9-
10-
section:nth-child(2) {
11-
position: relative;
12-
top: -80px;
13-
}
14-
1515
.inner-box {
1616
padding: $padding-medium;
1717
background: #fff;

resources/js/functions.js

Lines changed: 1 addition & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -392,21 +392,6 @@ function getOS() {
392392
return osname;
393393
}
394394

395-
$(document).ready(function () {
396-
// for each .alt-details div, find the .alt-details-toggle button,
397-
// and add a click handler to toggle the visibility of the .alt-details-detail
398-
399-
$('.alt-details').each(function () {
400-
var toggle = $(this).find('.alt-details-toggle');
401-
var details = $(this).find('.alt-details-detail');
402-
toggle.click(function () {
403-
details.css('display') === 'none' ? details.show() : details.hide();
404-
toggle.toggleClass('alt-details-closed');
405-
});
406-
toggle.click();
407-
});
408-
});
409-
410395
$(document).ready(function () {
411396
// for each code snippet area, find the copy button,
412397
// and add a click listener that will copy text from
@@ -420,42 +405,14 @@ $(document).ready(function () {
420405
});
421406
});
422407

423-
$(document).ready(function () {
424-
$('.tabsection').each(function () {
425-
var tabsection = this;
426-
$(tabsection).find('.nav-tab > .item-tab > .item-tab-link').each(function () {
427-
var tabLink = this;
428-
var targetTab = $(tabLink).attr('data-target');
429-
$(tabLink).click(function () {
430-
console.log("clicked on " + targetTab);
431-
$(tabsection).find('.nav-tab > .item-tab > .item-tab-link').each(function () {
432-
var otherTab = this;
433-
var otherTarget = $(otherTab).attr('data-target');
434-
otherTarget === targetTab ? $(otherTab).addClass('active') : $(otherTab).removeClass('active');
435-
})
436-
$(tabsection).children('.tabcontent').each(function () {
437-
var tabContent = this;
438-
var tabId = $(tabContent).attr('data-tab');
439-
targetTab === tabId ? $(tabContent).addClass('active') : $(tabContent).removeClass('active');
440-
});
441-
});
442-
});
443-
});
444-
});
445-
446408
$(document).ready(function () {
447409
// click the get-started tab corresponding to the users OS.
448410
if ($(".main-download").length) {
449411
var os = getOS();
450412
if (os === 'unix') {
451413
os = 'linux';
452414
}
453-
$("#install-cs-setup-tabs").find('.nav-tab > .item-tab > .item-tab-link').each(function () {
454-
var targetTab = $(this).attr("data-target");
455-
if (targetTab === os) {
456-
$(this).click();
457-
}
458-
});
415+
$("#install-cs-setup-tabs").find('input[data-target=' + os + ']').prop("checked", true);
459416
}
460417
});
461418

0 commit comments

Comments
 (0)