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

variant: make variant switch work on slow networks #228

Browse source
This commit is contained in:
Sören Weber 2022-03-28 11:56:51 +02:00
parent c673a65c62
commit 1b1d036534
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
2 changed files with 22 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
layouts/partials/stylesheet.html
View file

@ -7,7 +7,7 @@
<link href="{{"css/theme.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"> <link href="{{"css/theme.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
{{- $themevariants := slice | append (.Site.Params.themeVariant | default "relearn-light" ) }} {{- $themevariants := slice | append (.Site.Params.themeVariant | default "relearn-light" ) }}
{{- with index $themevariants 0 }} {{- with index $themevariants 0 }}
<link id="variant-style" href="{{(printf "css/theme-%s.css" .) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"> <link href="{{(printf "css/theme-%s.css" .) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" id="variant-style">
{{- end }} {{- end }}
<link href="{{"css/variant.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"> <link href="{{"css/variant.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
<link href="{{"css/theme-relearn-light.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print"> <link href="{{"css/theme-relearn-light.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print">

25
static/js/variant.js
View file

@ -4,6 +4,7 @@ var variants = {
variant: '', variant: '',
variants: [], variants: [],
customvariantname: 'my-custom-variant', customvariantname: 'my-custom-variant',
isstylesheetloaded: true,
init: function( variants ){ init: function( variants ){
this.variants = variants; this.variants = variants;
@ -25,6 +26,10 @@ var variants = {
window.localStorage.setItem( baseUriFull+'variant', variant ); window.localStorage.setItem( baseUriFull+'variant', variant );
}, },
isVariantLoaded: function(){
return window.theme && this.isstylesheetloaded;
},
markSelectedVariant: function(){ markSelectedVariant: function(){
var variant = this.getVariant(); var variant = this.getVariant();
var select = document.querySelector( '#select-variant' ); var select = document.querySelector( '#select-variant' );
@ -35,8 +40,9 @@ var variants = {
if( variant && select.value != variant ){ if( variant && select.value != variant ){
select.value = variant; select.value = variant;
} }
setTimeout( function(){ var interval_id = setInterval( function(){
if( window.theme ){ if( this.isVariantLoaded() ){
clearInterval( interval_id );
initMermaid( true ); initMermaid( true );
initSwagger( true ); initSwagger( true );
} }
@ -127,7 +133,6 @@ var variants = {
this.saveCustomVariant(); this.saveCustomVariant();
} }
}.bind( this ), 25 ); }.bind( this ), 25 );
}, },
resetVariant: function(){ resetVariant: function(){
@ -142,6 +147,10 @@ var variants = {
} }
}, },
onLoadStylesheet: function(){
variants.isstylesheetloaded = true;
},
switchStylesheet: function( variant, without_check ){ switchStylesheet: function( variant, without_check ){
var link = document.querySelector( '#variant-style' ); var link = document.querySelector( '#variant-style' );
if( !link ){ if( !link ){
@ -149,7 +158,15 @@ var variants = {
} }
var old_path = link.getAttribute( 'href' ); var old_path = link.getAttribute( 'href' );
var new_path = this.generateVariantPath( variant, old_path ); var new_path = this.generateVariantPath( variant, old_path );
link.setAttribute( 'href', new_path ); this.isstylesheetloaded = false;
// Chrome needs a new element to trigger the load callback again
var new_link = document.createElement( 'link' );
new_link.id = 'variant-style';
new_link.rel = 'stylesheet';
new_link.onload = this.onLoadStylesheet;
new_link.setAttribute( 'href', new_path );
link.parentNode.replaceChild( new_link, link );
}, },
changeVariant: function( variant ){ changeVariant: function( variant ){