nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-27 01:33:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

tabs: remove jQuery #452

Browse source
This commit is contained in:
Sören Weber 2023-01-29 16:45:42 +01:00
parent 551dbfe17e
commit 302ea923ed
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
2 changed files with 18 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
layouts/partials/shortcodes/tabs.html
View file

@ -3,20 +3,23 @@
{{- $groupid := .groupid | default "default" }}
{{- $direction := T "Reading-direction" | default "ltr" }}
{{- with $context }}
<div class="tab-panel">
<div class="tab-panel" data-tab-group="{{ $groupid }}">
<div class="tab-nav">
{{- range $idx, $tab := $tabs }}
<button
data-tab-item="{{ .name }}"
data-tab-group="{{ $groupid }}"
class="tab-nav-button direction-{{ $direction }} {{ cond (eq $idx 0) "active" ""}}"
onclick="switchTab('{{ $groupid }}','{{ .name }}')"
><span>{{ .name }}</span></button>
>
<span>{{ .name }}</span></button>
{{- end }}
</div>
<div class="tab-content">
{{- range $idx, $tab := $tabs }}
<div data-tab-item="{{ .name }}" data-tab-group="{{ $groupid }}" class="tab-item {{ cond (eq $idx 0) "active" ""}}">
<div
data-tab-item="{{ .name }}"
class="tab-item {{ cond (eq $idx 0) "active" ""}}"
>
{{ .content | safeHTML }}
</div>
{{- end }}

16
static/js/theme.js
View file

@ -55,9 +55,15 @@ function adjustContentWidth(){
}
function switchTab(tabGroup, tabId) {
var tabs = jQuery(".tab-panel").has("[data-tab-group='"+tabGroup+"'][data-tab-item='"+tabId+"']");
var allTabItems = tabs.find("[data-tab-group='"+tabGroup+"']");
var targetTabItems = tabs.find("[data-tab-group='"+tabGroup+"'][data-tab-item='"+tabId+"']");
var tabs = Array.from( document.querySelectorAll( '.tab-panel[data-tab-group="'+tabGroup+'"]' ) ).filter( function( e ){
return !!e.querySelector( '[data-tab-item="'+tabId+'"]' );
});
var allTabItems = tabs && tabs.reduce( function( a, e ){
return a.concat( Array.from( e.querySelectorAll( '.tab-nav-button, .tab-item' ) ) );
}, [] );
var targetTabItems = tabs && tabs.reduce( function( a, e ){
return a.concat( Array.from( e.querySelectorAll( '[data-tab-item="'+tabId+'"]' ) ) );
}, [] );
// if event is undefined then switchTab was called from restoreTabSelection
// so it's not a button event and we don't need to safe the selction or
@ -69,8 +75,8 @@ function switchTab(tabGroup, tabId) {
var yposButton = event.target.getBoundingClientRect().top;
}
allTabItems.removeClass("active");
targetTabItems.addClass("active");
allTabItems && allTabItems.forEach( function( e ){ e.classList.remove( 'active' ); });
targetTabItems && targetTabItems.forEach( function( e ){ e.classList.add( 'active' ); });
if(isButtonEvent){
// reset screen to the same position relative to clicked button to prevent page jump