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

theme: avoid flickering on page load #178

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

41
layouts/partials/stylesheet.html
View file

@ -14,6 +14,47 @@
{{- range .Site.Params.custom_css }} {{- range .Site.Params.custom_css }}
<link href="{{(printf "%s" .) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"> <link href="{{(printf "%s" .) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
{{- end }} {{- end }}
<script>
// we need to define this script in the head to avoid flickering an
// page load if the user has selected a non default variant
var theme = window.localStorage.getItem( 'theme' );
changeTheme( theme, true );
function changeTheme( theme, noanimation ){
if( !theme ){
return;
}
var link = document.querySelector( '#variant-style' );
var old_path = link.getAttribute( 'href' );
var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
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 );
link.setAttribute( 'href', new_path );
var select = document.querySelector( '#select-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
// by pressing the left or right cursor key, we will automatically
// select a different style
if( document.activeElement ){
document.activeElement.blur();
}
}
}
</script>
<style> <style>
:root #header + #content > #left > #rlblock_left{ :root #header + #content > #left > #rlblock_left{
display:none !important; display:none !important;

38
static/js/relearn.js
View file

@ -1,41 +1,3 @@
var theme = window.localStorage.getItem( 'theme' );
changeTheme( theme, true );
function changeTheme( theme, noanimation ){
if( !theme ){
return;
}
var link = document.querySelector( '#variant-style' );
var old_path = link.getAttribute( 'href' );
var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
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 );
link.setAttribute( 'href', new_path );
var select = document.querySelector( '#select-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
// by pressing the left or right cursor key, we will automatically
// select a different style
if( document.activeElement ){
document.activeElement.blur();
}
}
}
// Scrollbar Width function // Scrollbar Width function
function getScrollBarWidth() { function getScrollBarWidth() {
var inner = document.createElement('p'); var inner = document.createElement('p');