nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-30 03:03:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

theme: set theme selector correctly on load #178

Browse source
This commit is contained in:
Sören Weber 2022-02-13 02:30:05 +01:00
parent 874e542222
commit ec053c7c5e
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
2 changed files with 13 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
layouts/partials/menu.html
View file

@ -107,6 +107,7 @@
{{- end }} {{- end }}
{{- end }} {{- end }}
</select> </select>
<script>markTheme( getTheme() );</script>
</div> </div>
</a> </a>
</li> </li>

30
layouts/partials/stylesheet.html
View file

@ -18,8 +18,17 @@
// we need to define this script in the head to avoid flickering an // we need to define this script in the head to avoid flickering an
// page load if the user has selected a non default variant // page load if the user has selected a non default variant
var theme = window.localStorage.getItem( 'theme' ); var theme = window.localStorage.getItem( 'theme' );
changeTheme( theme, true ); changeTheme( theme );
function getTheme(){
var link = document.querySelector( '#variant-style' );
var path = link.getAttribute( 'href' );
var theme = path.match(/^.*\/theme-(.*?)\.css.*$/)[ 1 ];
return theme;
}
function markTheme( theme ){
var select = document.querySelector( '#select-theme' );
select.value = theme;
}
function changeTheme( theme, noanimation ){ function changeTheme( theme, noanimation ){
if( !theme ){ if( !theme ){
return; return;
@ -28,24 +37,9 @@
var old_path = link.getAttribute( 'href' ); var old_path = link.getAttribute( 'href' );
var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' ); var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
if( old_path != new_path ){ if( old_path != new_path ){
var animations = document.querySelectorAll( '.default-animation' );
if( noanimation ){
animations.forEach( function( e ){
e.classList.remove( 'default-animation' );
});
}
window.localStorage.setItem( 'theme', theme ); window.localStorage.setItem( 'theme', theme );
link.setAttribute( 'href', new_path ); link.setAttribute( 'href', new_path );
var select = document.querySelector( '#select-theme' ); markTheme( theme );
select.value = theme;
// we have to wait to reset the animation style
if( noanimation ){
setTimeout( function(){
animations.forEach( function( e ){
e.classList.add( 'default-animation' );
});
}, 525 );
}
// remove selection, because if some uses an arrow navigation // remove selection, because if some uses an arrow navigation
// by pressing the left or right cursor key, we will automatically // by pressing the left or right cursor key, we will automatically
// select a different style // select a different style