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

variant: add reset functionality #188

Browse source
This commit is contained in:
Sören Weber 2022-02-21 01:00:23 +01:00
parent 9f7a4b035d
commit f2b09e0980
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
2 changed files with 40 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
exampleSite/content/basics/generator/_index.en.md
View file

@ -26,7 +26,8 @@ This only works in modern browsers.
<div id="vargenerator" class="mermaid" style="background-color: var(--INTERNAL-MAIN-TEXT-color);" align="center">Graph</div> <div id="vargenerator" class="mermaid" style="background-color: var(--INTERNAL-MAIN-TEXT-color);" align="center">Graph</div>
<a class="vardownload btn btn-default">Download color variant</a> <a class="vardownload btn btn-default">Download color variant</a>
<a class="varreset btn btn-default">Reset variant</a>
<script> <script>
variants.generator( '#vargenerator', '.vardownload' ); variants.generator( '#vargenerator', '.vardownload', '.varreset' );
</script> </script>

57
static/js/variant.js
View file

@ -42,6 +42,18 @@ var variants = {
if( select.value != variant ){ if( select.value != variant ){
select.value = variant; select.value = variant;
} }
// 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();
}
},
generateVariantPath( old_path ){
var variant = this.getVariant();
var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + variant + '$2' );
return new_path;
}, },
changeVariant: function( variant ){ changeVariant: function( variant ){
@ -57,20 +69,24 @@ var variants = {
return; return;
} }
var old_path = link.getAttribute( 'href' ); var old_path = link.getAttribute( 'href' );
var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + variant + '$2' ); var new_path = this.generateVariantPath( old_path );
if( old_path != new_path ){ if( old_path != new_path ){
link.setAttribute( 'href', new_path ); link.setAttribute( 'href', new_path );
this.markSelectedVariant( variant ); this.markSelectedVariant( variant );
// 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();
}
} }
}, },
generator: function( vargenerator, vardownload ){ resetVariant: function(){
var link = document.querySelector( '#variant-style' );
if( !link ){
return;
}
var old_path = link.getAttribute( 'href' );
var new_path = this.generateVariantPath( old_path );
link.setAttribute( 'href', new_path );
},
generator: function( vargenerator, vardownload, varreset ){
var graphDefinition = this.generateGraph(); var graphDefinition = this.generateGraph();
var element = document.querySelector( vargenerator ); var element = document.querySelector( vargenerator );
element.innerHTML = graphDefinition; element.innerHTML = graphDefinition;
@ -82,8 +98,11 @@ var variants = {
} }
}.bind( this ), 100 ); }.bind( this ), 100 );
var btn = document.querySelector( vardownload ); var download = document.querySelector( vardownload );
btn.addEventListener('click', this.getStylesheet.bind( this ) ); download.addEventListener('click', this.getStylesheet.bind( this ) );
var reset = document.querySelector( varreset );
reset.addEventListener('click', this.resetVariant.bind( this ) );
}, },
download: function(data, mimetype, filename){ download: function(data, mimetype, filename){
@ -238,14 +257,14 @@ var variants = {
this.variantvariables.forEach( function( e ){ this.variantvariables.forEach( function( e ){
this.styleGraphGroup( '.'+e.name, e.name ); this.styleGraphGroup( '.'+e.name, e.name );
}.bind( this ) ); }.bind( this ) );
this.styleGraphGroup( '#maincontent', 'MAIN-BG-color' ) this.styleGraphGroup( '#maincontent', 'MAIN-BG-color' );
this.styleGraphGroup( '#mainheadings', 'MAIN-BG-color' ) this.styleGraphGroup( '#mainheadings', 'MAIN-BG-color' );
this.styleGraphGroup( '#inlinecode', 'CODE-INLINE-BG-color' ) this.styleGraphGroup( '#inlinecode', 'CODE-INLINE-BG-color' );
this.styleGraphGroup( '#blockcode', 'CODE-BLOCK-BG-color' ) this.styleGraphGroup( '#blockcode', 'CODE-BLOCK-BG-color' );
this.styleGraphGroup( '#coloredboxes', 'BOX-BG-color' ); this.styleGraphGroup( '#coloredboxes', 'BOX-BG-color' );
this.styleGraphGroup( '#menu', 'MENU-SECTIONS-BG-color' ) this.styleGraphGroup( '#menu', 'MENU-SECTIONS-BG-color' );
this.styleGraphGroup( '#menuheader', 'MENU-HEADER-BG-color' ) this.styleGraphGroup( '#menuheader', 'MENU-HEADER-BG-color' );
this.styleGraphGroup( '#menusections', 'MENU-SECTIONS-ACTIVE-BG-color' ) this.styleGraphGroup( '#menusections', 'MENU-SECTIONS-ACTIVE-BG-color' );
}, },
generateGraphGroupedEdge: function( e ){ generateGraphGroupedEdge: function( e ){
@ -262,7 +281,7 @@ var variants = {
generateGraphVarGroupedEdge: function( e ){ generateGraphVarGroupedEdge: function( e ){
var edge = ''; var edge = '';
if( e.fallback && e.group != this.findColor( e.fallback ).group ){ if( e.fallback && e.group != this.findColor( e.fallback ).group ){
edge += e.fallback+':::'+e.fallback+' --> '+e.name+':::'+e.name; edge += ' ' + e.fallback+':::'+e.fallback+' --> '+e.name+':::'+e.name + '\n';
} }
return edge; return edge;
}, },
@ -310,7 +329,7 @@ var variants = {
g_groups[ 'colored boxes' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) + g_groups[ 'colored boxes' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) +
' end\n' + ' end\n' +
' end\n' + ' end\n' +
this.variantvariables.reduce( function( a, e ){ return a + ' ' + this.generateGraphVarGroupedEdge( e ) + '\n'; }.bind( this ), '' ) + this.variantvariables.reduce( function( a, e ){ return a + this.generateGraphVarGroupedEdge( e ); }.bind( this ), '' ) +
g_handler; g_handler;
console.log( graph ); console.log( graph );