Skip to content

Commit 2cc0b3a

Browse files
bishaboshajulienrf
bishabosha
and
julienrf
authored
tabs can operate without JS (#1382)
Co-authored-by: Jamie Thompson <bishbashboshjt@gmail.com> Co-authored-by: Julien Richard-Foy <julien@richard-foy.fr> Co-authored-by: Julien Richard-Foy <julien@richard-foy.fr>
1 parent 715a065 commit 2cc0b3a

File tree

7 files changed

+82
-57
lines changed

7 files changed

+82
-57
lines changed

‎_includes/alt-details.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div id="{{include.id}}" class="alt-details">
2-
<input class="alt-details-control" type="checkbox" id="{{include.id}}__control">
2+
<input class="alt-details-control" type="checkbox" id="{{include.id}}__control" hidden aria-hidden="true">
33
<label class="alt-details-toggle" for="{{include.id}}__control">{{include.title}}</label>
44
<div class="alt-details-detail">
55
{{include.detail}}

‎_includes/tabsection.html

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,27 @@
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+
<input
4+
type="radio"
5+
name="{{include.id}}_tabs"
6+
id="{{tabRoot.tabId}}_description"
7+
data-target="{{tabRoot.tabId}}"
8+
hidden
9+
aria-hidden="true"
10+
{% if tabRoot.defaultTab %}checked{% endif %}
11+
>
12+
{% endfor %}
13+
<ul hidden aria-hidden="true" class="nav-tab">
314
{% for tabRoot in include.collection %}
415
<li class="item-tab">
5-
<a class="item-tab-link {% if tabRoot.defaultTab %} active{% endif %}"
6-
data-target="{{tabRoot.tabId}}">{{tabRoot.tabLabel}}</a>
16+
<label class="item-tab-link" for="{{tabRoot.tabId}}_description">{{tabRoot.tabLabel}}</label>
717
</li>
818
{% endfor %}
919
</ul>
10-
{% for tabRoot in include.collection %}
11-
<div class="tabcontent {% if tabRoot.defaultTab %}active{% endif %}" data-tab="{{tabRoot.tabId}}">
12-
{{tabRoot.content}}
20+
<div class="tabcontent">
21+
{% for tabRoot in include.collection %}
22+
<section id="{{tabRoot.tabId}}_content">
23+
{{tabRoot.content}}
24+
</section>
25+
{% endfor %}
1326
</div>
14-
{% endfor %}
1527
</div>

‎_install_tabs/4-other.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<div class="text-step wrap-inline">
77
<div class="wrap">
88
<noscript>
9-
<p><span style="font-style:italic;">JavaScript is disabled, showing the default options.</span></p>
9+
<p><span style="font-style:italic;">JavaScript is disabled, click the tab relevant for your OS.</span></p>
1010
</noscript>
1111
<p>Follow the documentation from Coursier on <a href="https://get-coursier.io/docs/cli-installation" target="_blank">how to install and run <code>cs setup</code></a>.</p>
1212
</div>

‎_sass/components/alt-details.scss

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,14 @@
4141

4242
.alt-details-control + .alt-details-toggle + .alt-details-detail {
4343
// by default, hide the details
44-
display: none;
44+
position: absolute;
45+
top: -999em;
46+
left: -999em;
4547
}
4648

4749
.alt-details-control:checked + .alt-details-toggle + .alt-details-detail {
4850
// show the details when the control is checked
49-
display: block;
51+
position: static;
5052
}
5153

5254
.alt-details-control:checked + .alt-details-toggle:after {

‎_sass/components/tab.scss

Lines changed: 51 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,16 @@
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);
810
@include align-items(center);
911
@include justify-content(flex-start);
1012

1113
.item-tab {
14+
label,
1215
a {
1316
transition: none; // do not animate the transition to active
1417
color: $base-font-color-light;
@@ -26,19 +29,21 @@
2629
&:hover {
2730
cursor: pointer;
2831
}
29-
30-
&.active {
31-
border-bottom: 2px solid $brand-primary;
32-
padding: 0 20px 8px; // so text does not jump up when active
33-
color: $brand-primary;
34-
pointer-events: none;
35-
}
3632
}
3733

34+
label {
35+
-webkit-touch-callout: none;
36+
-webkit-user-select: none;
37+
-khtml-user-select: none;
38+
-moz-user-select: none;
39+
-ms-user-select: none;
40+
user-select: none;
41+
}
3842
}
3943
@include bp(small) {
4044
@include justify-content(space-between);
4145
.item-tab {
46+
label,
4247
a {
4348
transition: none; // do not animate the transition to active
4449
padding: 0 10px 10px;
@@ -48,17 +53,51 @@
4853
}
4954
}
5055

56+
.nav-tab>.item-tab>a.active, // used in the blog
57+
.tabsection>input:nth-child(1):checked~.nav-tab .item-tab:nth-child(1) label,
58+
.tabsection>input:nth-child(2):checked~.nav-tab .item-tab:nth-child(2) label,
59+
.tabsection>input:nth-child(3):checked~.nav-tab .item-tab:nth-child(3) label,
60+
.tabsection>input:nth-child(4):checked~.nav-tab .item-tab:nth-child(4) label,
61+
.tabsection>input:nth-child(5):checked~.nav-tab .item-tab:nth-child(5) label,
62+
.tabsection>input:nth-child(6):checked~.nav-tab .item-tab:nth-child(6) label,
63+
.tabsection>input:nth-child(7):checked~.nav-tab .item-tab:nth-child(7) label,
64+
.tabsection>input:nth-child(8):checked~.nav-tab .item-tab:nth-child(8) label,
65+
.tabsection>input:nth-child(9):checked~.nav-tab .item-tab:nth-child(9) label {
66+
border-bottom: 2px solid $brand-primary;
67+
padding: 0 20px 8px; // so text does not jump up when active
68+
color: $brand-primary;
69+
pointer-events: none;
70+
}
71+
5172
.tabsection {
5273
border-bottom: $base-border-gray;
5374
border-left: $base-border-gray;
5475
border-right: $base-border-gray;
5576
border-radius: $border-radius-medium;
56-
}
5777

58-
.tabcontent {
59-
display: none;
78+
input { // hide the input because they are not interactive
79+
display: block; /* "enable" hidden elements in IE/edge */
80+
position: absolute; /* then hide them off-screen */
81+
left: -100%;
82+
}
6083

61-
&.active {
62-
display: block;
84+
.tabcontent {
85+
section { // by default, hide all sections until the user clicks on the associated label
86+
position: absolute;
87+
top: -999em;
88+
left: -999em;
89+
}
6390
}
6491
}
92+
93+
.tabsection>input:nth-child(1):checked~.tabcontent section:nth-child(1),
94+
.tabsection>input:nth-child(2):checked~.tabcontent section:nth-child(2),
95+
.tabsection>input:nth-child(3):checked~.tabcontent section:nth-child(3),
96+
.tabsection>input:nth-child(4):checked~.tabcontent section:nth-child(4),
97+
.tabsection>input:nth-child(5):checked~.tabcontent section:nth-child(5),
98+
.tabsection>input:nth-child(6):checked~.tabcontent section:nth-child(6),
99+
.tabsection>input:nth-child(7):checked~.tabcontent section:nth-child(7),
100+
.tabsection>input:nth-child(8):checked~.tabcontent section:nth-child(8),
101+
.tabsection>input:nth-child(9):checked~.tabcontent section:nth-child(9) {
102+
position: static;
103+
}

‎_sass/layout/inner-main.scss

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

5+
#inner-main > section:nth-child(2) { // corresponds to area with the content below the title
6+
margin-top: -80px; // have it overlap with the title area
7+
}
8+
59
#inner-main {
610
background: $gray-lighter;
711
padding-bottom: $padding-xlarge;
812

9-
section:nth-child(2) {
10-
margin-top: -80px;
11-
}
12-
1313
.inner-box {
1414
padding: $padding-medium;
1515
background: #fff;

‎resources/js/functions.js

Lines changed: 1 addition & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -312,42 +312,14 @@ $(document).ready(function () {
312312
}
313313
});
314314

315-
$(document).ready(function () {
316-
$('.tabsection').each(function () {
317-
var tabsection = this;
318-
$(tabsection).find('.nav-tab > .item-tab > .item-tab-link').each(function () {
319-
var tabLink = this;
320-
var targetTab = $(tabLink).attr('data-target');
321-
$(tabLink).click(function () {
322-
console.log("clicked on " + targetTab);
323-
$(tabsection).find('.nav-tab > .item-tab > .item-tab-link').each(function() {
324-
var otherTab = this;
325-
var otherTarget = $(otherTab).attr('data-target');
326-
otherTarget === targetTab ? $(otherTab).addClass('active') : $(otherTab).removeClass('active');
327-
})
328-
$(tabsection).children('.tabcontent').each(function() {
329-
var tabContent = this;
330-
var tabId = $(tabContent).attr('data-tab');
331-
targetTab === tabId ? $(tabContent).addClass('active') : $(tabContent).removeClass('active');
332-
});
333-
});
334-
});
335-
});
336-
});
337-
338315
$(document).ready(function () {
339316
// click the get-started tab corresponding to the users OS.
340317
if ($(".main-download").length) {
341318
var os = getOS();
342319
if (os === 'unix') {
343320
os = 'linux';
344321
}
345-
$("#install-cs-setup-tabs").find('.nav-tab > .item-tab > .item-tab-link').each(function () {
346-
var targetTab = $(this).attr("data-target");
347-
if (targetTab === os) {
348-
$(this).click();
349-
}
350-
});
322+
$("#install-cs-setup-tabs").find('input[data-target=' + os + ']').prop("checked", true);
351323
}
352324
});
353325

0 commit comments

Comments
 (0)