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

print: switch mermaid and swagger style before print #316

Browse source
This commit is contained in:
Sören Weber 2022-07-29 21:55:06 +02:00
parent ff67228579
commit 1f7df3e37f
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
2 changed files with 66 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
static/css/variant.css
View file

@ -37,8 +37,8 @@
--INTERNAL-CODE-font: var(--CODE-font, "Consolas", menlo, monospace); --INTERNAL-CODE-font: var(--CODE-font, "Consolas", menlo, monospace);
--INTERNAL-MERMAID-theme: var(--CONFIG-MERMAID-theme, var(--MERMAID-theme, default)); --INTERNAL-MERMAID-theme: var(--CONFIG-MERMAID-theme, var(--MERMAID-theme, var(--INTERNAL-PRINT-MERMAID-theme)));
--INTERNAL-SWAGGER-theme: var(--CONFIG-SWAGGER-theme, var(--SWAGGER-theme, light)); --INTERNAL-SWAGGER-theme: var(--CONFIG-SWAGGER-theme, var(--SWAGGER-theme, var(--INTERNAL-PRINT-SWAGGER-theme)));
--INTERNAL-TAG-BG-color: var(--TAG-BG-color, var(--INTERNAL-PRIMARY-color)); --INTERNAL-TAG-BG-color: var(--TAG-BG-color, var(--INTERNAL-PRIMARY-color));
@ -89,6 +89,15 @@
--INTERNAL-BOX-NOTE-TEXT-color: var(--BOX-NOTE-TEXT-color, var(--INTERNAL-BOX-ORANGE-TEXT-color)); --INTERNAL-BOX-NOTE-TEXT-color: var(--BOX-NOTE-TEXT-color, var(--INTERNAL-BOX-ORANGE-TEXT-color));
--INTERNAL-BOX-TIP-TEXT-color: var(--BOX-TIP-TEXT-color, var(--INTERNAL-BOX-GREEN-TEXT-color)); --INTERNAL-BOX-TIP-TEXT-color: var(--BOX-TIP-TEXT-color, var(--INTERNAL-BOX-GREEN-TEXT-color));
--INTERNAL-BOX-WARNING-TEXT-color: var(--BOX-WARNING-TEXT-color, var(--INTERNAL-BOX-RED-TEXT-color)); --INTERNAL-BOX-WARNING-TEXT-color: var(--BOX-WARNING-TEXT-color, var(--INTERNAL-BOX-RED-TEXT-color));
/* print style, values taken from relearn-light as it is used as a default print style */
--INTERNAL-PRINT-MERMAID-theme: var(--PRINT-MERMAID-theme, default);
--INTERNAL-PRINT-MAIN-BG-color: var(--PRINT-MAIN-BG-color, #ffffff);
--INTERNAL-PRINT-CODE-font: var(--PRINT-CODE-font, "Consolas", menlo, monospace);
--INTERNAL-PRINT-TAG-BG-color: var(--PRINT-TAG-BG-color, #7dc903);
--INTERNAL-PRINT-MAIN-font: var(--PRINT-MAIN-font, "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif);
--INTERNAL-PRINT-MAIN-TEXT-color: var(--PRINT-MAIN-TEXT-color, #101010);
--INTERNAL-PRINT-SWAGGER-theme: var(--PRINT-SWAGGER-theme, light);
} }
body { body {

73
static/js/theme.js
View file

@ -87,7 +87,7 @@ function restoreTabSelections() {
} }
} }
function initMermaid( update ) { function initMermaid( update, attrs ) {
// we are either in update or initialization mode; // we are either in update or initialization mode;
// during initialization, we want to edit the DOM; // during initialization, we want to edit the DOM;
// during update we only want to execute if something changed // during update we only want to execute if something changed
@ -113,10 +113,9 @@ function initMermaid( update ) {
return '%%{init: ' + JSON.stringify( graph.dir ) + '}%%\n' + graph.content; return '%%{init: ' + JSON.stringify( graph.dir ) + '}%%\n' + graph.content;
}; };
var init_func = function(){ var init_func = function( attrs ){
state.is_initialized = true;
var is_initialized = false; var is_initialized = false;
var theme = variants.getColorValue( 'MERMAID-theme' ); var theme = attrs.theme;
document.querySelectorAll('.mermaid').forEach( function( element ){ document.querySelectorAll('.mermaid').forEach( function( element ){
var parse = parseGraph( decodeHTML( element.innerHTML ) ); var parse = parseGraph( decodeHTML( element.innerHTML ) );
@ -138,9 +137,9 @@ function initMermaid( update ) {
return is_initialized; return is_initialized;
} }
var update_func = function(){ var update_func = function( attrs ){
var is_initialized = false; var is_initialized = false;
var theme = variants.getColorValue( 'MERMAID-theme' ); var theme = attrs.theme;
document.querySelectorAll( '.mermaid-container' ).forEach( function( e ){ document.querySelectorAll( '.mermaid-container' ).forEach( function( e ){
var element = e.querySelector( '.mermaid' ); var element = e.querySelector( '.mermaid' );
var code = e.querySelector( '.mermaid-code' ); var code = e.querySelector( '.mermaid-code' );
@ -174,28 +173,66 @@ function initMermaid( update ) {
return; return;
} }
var is_initialized = ( update ? update_func() : init_func() ); if( !state.is_initialized ){
state.is_initialized = true;
window.addEventListener( 'beforeprint', function(){
initMermaid( true, {
'theme': variants.getColorValue( 'PRINT-MERMAID-theme' ),
});
}.bind( this ) );
window.addEventListener( 'afterprint', function(){
initMermaid( true );
}.bind( this ) );
}
attrs = attrs || {
'theme': variants.getColorValue( 'MERMAID-theme' ),
};
var is_initialized = ( update ? update_func( attrs ) : init_func( attrs ) );
if( is_initialized ){ if( is_initialized ){
mermaid.init(); mermaid.init();
$(".mermaid svg").svgPanZoom({}); $(".mermaid svg").svgPanZoom({});
} }
} }
function initSwagger( update ){ function initSwagger( update, attrs ){
var state = this;
if( update && !state.is_initialized ){
return;
}
if( typeof variants == 'undefined' ){ if( typeof variants == 'undefined' ){
return; return;
} }
var attrs = [
[ 'bg-color', variants.getColorValue( 'MAIN-BG-color' ) ], if( !state.is_initialized ){
[ 'mono-font', variants.getColorValue( 'CODE-font' ) ], state.is_initialized = true;
[ 'primary-color', variants.getColorValue( 'TAG-BG-color' ) ], window.addEventListener( 'beforeprint', function(){
[ 'regular-font', variants.getColorValue( 'MAIN-font' ) ], initSwagger( true, {
[ 'text-color', variants.getColorValue( 'MAIN-TEXT-color' ) ], 'bg-color': variants.getColorValue( 'PRINT-MAIN-BG-color' ),
[ 'theme', variants.getColorValue( 'SWAGGER-theme' ) ], 'mono-font': variants.getColorValue( 'PRINT-CODE-font' ),
]; 'primary-color': variants.getColorValue( 'PRINT-TAG-BG-color' ),
'regular-font': variants.getColorValue( 'PRINT-MAIN-font' ),
'text-color': variants.getColorValue( 'PRINT-MAIN-TEXT-color' ),
'theme': variants.getColorValue( 'PRINT-SWAGGER-theme' ),
});
}.bind( this ) );
window.addEventListener( 'afterprint', function(){
initSwagger( true );
}.bind( this ) );
}
attrs = attrs || {
'bg-color': variants.getColorValue( 'MAIN-BG-color' ),
'mono-font': variants.getColorValue( 'CODE-font' ),
'primary-color': variants.getColorValue( 'TAG-BG-color' ),
'regular-font': variants.getColorValue( 'MAIN-font' ),
'text-color': variants.getColorValue( 'MAIN-TEXT-color' ),
'theme': variants.getColorValue( 'SWAGGER-theme' ),
};
document.querySelectorAll( 'rapi-doc' ).forEach( function( e ){ document.querySelectorAll( 'rapi-doc' ).forEach( function( e ){
attrs.forEach( function( attr ){ Object.keys( attrs ).forEach( function( key ){
e.setAttribute( attr[0], attr[1] ); /* this doesn't work for FF 102, maybe related to custom elements? */
e.setAttribute( key, attrs[key] );
}); });
}); });
} }