Skip to content

Commit ec45690

Browse files
lamATnginxlamATnginx
committed
Mainframe: Less complicated Tab solution
1 parent 42dca5b commit ec45690

File tree

4 files changed

+122
-87
lines changed

4 files changed

+122
-87
lines changed

‎assets/css/v2/style.css‎

Lines changed: 48 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1418,44 +1418,38 @@ li:has(> div > blockquote) {
14181418

14191419
/* MARK: Tabs
14201420
*/
1421-
.tabs-container {
1421+
.tab-container {
1422+
position: relative;
1423+
display: flex;
1424+
flex-wrap: wrap;
14221425
width: calc(100% + 2rem);
14231426
margin-left: -1rem;
14241427

1425-
input[type="radio"] {
1428+
& input[type="radio"] {
14261429
display: none;
14271430
}
14281431

1429-
.tab-labels {
1430-
display: flex;
1431-
position: relative;
1432-
flex-wrap: wrap;
1433-
flex-direction: row;
1434-
margin: 0;
1432+
& .tab-label {
1433+
cursor: pointer;
1434+
display: inline-block;
1435+
order: 1;
1436+
padding: 10px;
1437+
border: 1px solid oklch(var(--color-tabs-inactive-border));
1438+
border-bottom: 1px solid oklch(var(--color-foreground));
1439+
color: oklch(var(--color-brand));
14351440

1436-
> :not(:last-child) {
1441+
&:not(:last-of-type) {
14371442
border-right: none;
14381443
}
1439-
1440-
li {
1441-
list-style: none;
1442-
border: 1px solid oklch(var(--color-tabs-inactive-border));
1443-
border-bottom: 1px solid oklch(var(--color-foreground));
1444-
color: oklch(var(--color-brand));
1445-
padding: 10px;
1446-
margin: 0;
1447-
1448-
label {
1449-
cursor: pointer;
1450-
}
1451-
}
14521444
}
14531445

1454-
.tab-content {
1446+
& .tab-content {
14551447
display: none;
1448+
order: 99;
1449+
flex-grow: 1;
14561450
margin-top: 1rem;
1457-
margin-left: 0;
14581451
width: 100%;
1452+
margin-left: 0;
14591453

14601454
padding: 1rem;
14611455
border-bottom: 1px solid oklch(var(--color-foreground));
@@ -1465,20 +1459,42 @@ li:has(> div > blockquote) {
14651459
}
14661460
}
14671461

1468-
.tab-labels:before {
1462+
& input[type="radio"]:checked + .tab-label {
1463+
border: none;
1464+
border-top: 1px solid oklch(var(--color-foreground));
1465+
border-left: 1px solid oklch(var(--color-foreground));
1466+
border-bottom: none;
1467+
color: oklch(var(--color-foreground));
1468+
1469+
& + * + * + .tab-label {
1470+
border-left: 1px solid oklch(var(--color-foreground));
1471+
}
1472+
1473+
&:last-of-type {
1474+
border-right: 1px solid oklch(var(--color-foreground));
1475+
}
1476+
}
1477+
1478+
& input[type="radio"]:checked + .tab-label + .tab-content {
1479+
display: block;
1480+
}
1481+
1482+
&:before {
14691483
content: "";
1470-
position: relative;
1471-
width: 2rem;
1484+
display: block;
1485+
width: 1rem;
1486+
align-self: end;
14721487
border-bottom: 1px solid oklch(var(--color-foreground));
14731488
}
14741489

1475-
.tab-labels:after {
1490+
&:after {
14761491
content: "";
1477-
position: relative;
1478-
bottom: 0;
1479-
left: 0;
1492+
display: block;
1493+
height: 1px;
1494+
background-color: oklch(var(--color-foreground));
14801495
flex-grow: 1;
1481-
border-bottom: 1px solid oklch(var(--color-foreground));
1496+
align-self: end;
1497+
order: 1;
14821498
}
14831499
}
14841500

‎assets/js/tabs.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
window.addEventListener('DOMContentLoaded', () => {
2+
const tabLists = document.querySelectorAll('.tab-container');
3+
4+
tabLists.forEach((tabList) => {
5+
const tabs = tabList.querySelectorAll(':scope > [role="tab"]');
6+
7+
let tabFocus = 0;
8+
let selectedTab =
9+
tabs[0].getAttribute('aria-selected') === 'true' ? tabs[0] : null;
10+
tabList.addEventListener('keyup', (e) => {
11+
if (e.key === 'Enter') {
12+
// Reset existing the aria-selected that is true
13+
selectedTab.setAttribute('aria-selected', 'false');
14+
selectedTab = e.target;
15+
16+
// Change the tabs
17+
changeTabs(e);
18+
}
19+
});
20+
21+
tabList.addEventListener('keydown', (e) => {
22+
if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
23+
tabs[tabFocus].setAttribute('tabindex', -1);
24+
selectedTab =
25+
tabs[tabFocus].getAttribute('aria-selected') === 'true'
26+
? tabs[tabFocus]
27+
: selectedTab;
28+
if (e.key === 'ArrowRight') {
29+
tabFocus = (tabFocus + 1) % tabs.length;
30+
} else if (e.key === 'ArrowLeft') {
31+
tabFocus = tabFocus - 1;
32+
if (tabFocus < 0) {
33+
tabFocus = tabs.length - 1;
34+
}
35+
}
36+
37+
tabs[tabFocus].setAttribute('tabindex', 0);
38+
tabs[tabFocus].focus();
39+
}
40+
});
41+
});
42+
});
43+
44+
function changeTabs(e) {
45+
const toggle = e.target.previousSibling;
46+
const label = e.target;
47+
48+
// Toggle to new content + update Aria attributes
49+
toggle.checked = true;
50+
label.setAttribute('aria-selected', 'true');
51+
}

‎layouts/partials/scripts.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
{{ $codecopyv2 := resources.Get "/js/code-copy-v2.js" | fingerprint "sha512" }}
33
<script src="{{ $codecopyv2.RelPermalink }}" type="text/javascript"></script>
44

5+
<!-- load tabs js -->
6+
{{ $tabs := resources.Get "/js/tabs.js" | fingerprint "sha512" }}
7+
<script src="{{ $tabs.RelPermalink }}" type="text/javascript"></script>
8+
59
<!-- load mermaid.js -->
610
{{ if .Page.Store.Get "hasMermaid" }}
711
{{ $mermaid := resources.Get "js/mermaid.min.js" | fingerprint "sha512" }}

‎layouts/shortcodes/tabs.html‎

Lines changed: 19 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -2,63 +2,27 @@
22
{{- $tab_set_id := .Get "name" | default (printf "tabset-%s-%d" (.Page.RelPermalink) (.Page.Scratch.Get "tabset-counter") ) | anchorize -}}
33
{{- $tabs := .Scratch.Get "tabs" -}}
44
{{- if .Inner -}}
5-
<div class="tabs-container" id="{{ $tab_set_id }}">
5+
<div class="tab-container" id="{{ $tab_set_id }}">
66
{{- range $i, $e := $tabs -}}
7-
{{- $id := printf "%s-tab%d" $tab_set_id $i -}}
87
{{- if eq $i 0 -}}
9-
<input type="radio" name="{{$tab_set_id}}" id="{{$id}}" aria-hidden="true" checked="checked">
8+
<input type="radio" name="{{$tab_set_id}}" id="{{$tab_set_id}}-tab{{$i}}" aria-hidden="true" checked="checked">
109
{{- else -}}
11-
<input type="radio" name="{{$tab_set_id}}" id="{{$id}}" aria-hidden="true">
10+
<input type="radio" name="{{$tab_set_id}}" id="{{$tab_set_id}}-tab{{$i}}" aria-hidden="true">
1211
{{- end -}}
13-
{{- end -}}
14-
<ul class="tab-labels" role="tablist" id="{{ $tab_set_id }}">
15-
{{- range $i, $e := $tabs -}}
16-
{{- $id := printf "%s-tab%d" $tab_set_id $i -}}
17-
<li>
18-
{{- if eq $i 0 -}}
19-
<label class="tab-label" role="tab" id="{{$id}}" for="{{$id}}" aria-controls="{{ $id }}" aria-selected="true" tabindex="0">
20-
{{- trim .name " " -}}
21-
</label>
22-
{{- else -}}
23-
<label class="tab-label" role="tab" id="{{$id}}" for="{{$id}}" aria-controls="{{ $id }}" tabindex="0">
24-
{{- trim .name " " -}}
25-
</label>
26-
{{- end -}}
27-
</li>
28-
{{- end -}}
29-
</ul>
30-
<div class="tabs-content">
31-
{{- range $i, $e := $tabs -}}
32-
{{- $id := printf "%s-panel%d" $tab_set_id $i -}}
33-
<div class="tab-content" role="tabpanel" id="{{ $tab_set_id }}-panel{{ $i }}" aria-labelledby="{{ $id }}">
34-
{{ with .content }}
35-
{{ . }}
36-
{{ end }}
37-
</div>
38-
{{- end -}}
39-
</div>
12+
<label
13+
class="tab-label"
14+
role="tab"
15+
for="{{$tab_set_id}}-tab{{$i}}"
16+
tabindex="{{ if eq $i 0 }}0{{ else }}-1{{ end }}"
17+
aria-selected="{{ if eq $i 0 }}true{{ else }}false{{ end }}"
18+
aria-controls="{{$tab_set_id}}-panel{{$i}}">
19+
{{- trim .name " " -}}
20+
</label>
21+
<div class="tab-content" role="tabpanel" id="{{$tab_set_id}}-panel{{$i}}" aria-labelledby="{{$tab_set_id}}-tab{{$i}}">
22+
{{ with .content }}
23+
{{ . }}
24+
{{ end }}
25+
</div>
26+
{{- end -}}
4027
</div>
41-
{{ end }}
42-
<style>
43-
{{- range $i, $e := $tabs -}}
44-
.tabs-container input[type="radio"]:checked:nth-of-type({{ add $i 1 }}) ~ .tab-labels li:nth-of-type({{ add $i 1 }}) {
45-
border: none;
46-
border-top: 1px solid oklch(var(--color-foreground));
47-
border-left: 1px solid oklch(var(--color-foreground));
48-
border-bottom: none;
49-
color: oklch(var(--color-foreground));
50-
51-
+ li {
52-
border-left: 1px solid oklch(var(--color-foreground));
53-
}
54-
55-
&:last-of-type {
56-
border-right: 1px solid oklch(var(--color-foreground));
57-
}
58-
}
59-
60-
.tabs-container input[type="radio"]:checked:nth-of-type({{ add $i 1 }}) ~ .tabs-content div:nth-of-type({{ add $i 1 }}) {
61-
display: block;
62-
}
63-
{{- end -}}
64-
</style>
28+
{{ end }}

0 commit comments

Comments
 (0)