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

16
static/js/theme.js
View file

@ -55,9 +55,15 @@ function adjustContentWidth(){
} }
function switchTab(tabGroup, tabId) { function switchTab(tabGroup, tabId) {
var tabs = jQuery(".tab-panel").has("[data-tab-group='"+tabGroup+"'][data-tab-item='"+tabId+"']"); var tabs = Array.from( document.querySelectorAll( '.tab-panel[data-tab-group="'+tabGroup+'"]' ) ).filter( function( e ){
var allTabItems = tabs.find("[data-tab-group='"+tabGroup+"']"); return !!e.querySelector( '[data-tab-item="'+tabId+'"]' );
var targetTabItems = tabs.find("[data-tab-group='"+tabGroup+"'][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 // 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 // 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; var yposButton = event.target.getBoundingClientRect().top;
} }
allTabItems.removeClass("active"); allTabItems && allTabItems.forEach( function( e ){ e.classList.remove( 'active' ); });
targetTabItems.addClass("active"); targetTabItems && targetTabItems.forEach( function( e ){ e.classList.add( 'active' ); });
if(isButtonEvent){ if(isButtonEvent){
// reset screen to the same position relative to clicked button to prevent page jump // reset screen to the same position relative to clicked button to prevent page jump