mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2025-06-15 05:10:31 +00:00
mermaid: support differing themes for color variant switch #219
This commit is contained in:
parent
270027ab0c
commit
938debb1d9
11 changed files with 109 additions and 17 deletions
static/js
|
@ -62,14 +62,34 @@ function restoreTabSelections() {
|
|||
}
|
||||
|
||||
function initMermaid() {
|
||||
$('code.language-mermaid').each(function(index, element) {
|
||||
var content = $(element).html().replace(/&/g, '&');
|
||||
$(element).parent().replaceWith('<div class="mermaid" align="center">' + content + '</div>');
|
||||
});
|
||||
|
||||
if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
|
||||
mermaid.mermaidAPI.initialize( Object.assign( {}, mermaid.mermaidAPI.getSiteConfig(), { startOnLoad: true } ) );
|
||||
mermaid.contentLoaded();
|
||||
document.querySelectorAll('.mermaid').forEach( function( element ){
|
||||
var content = element.innerHTML.replace(/&/g, '&').trim();
|
||||
|
||||
var d = /^(%%\s*\{\s*\w+\s*:([^%]*?)%%\s*\n?)/g;
|
||||
var m = d.exec( content );
|
||||
var dir = {};
|
||||
if( m && m.length == 3 ){
|
||||
dir = JSON.parse( '{ "dummy": ' + m[2] ).dummy;
|
||||
content = content.substring( d.lastIndex );
|
||||
}
|
||||
|
||||
if( dir.theme ){
|
||||
dir.relearn_user_theme = true;
|
||||
}
|
||||
if( !dir.relearn_user_theme ){
|
||||
dir.theme = getComputedStyle( document.documentElement ).getPropertyValue( '--INTERNAL-MERMAID-theme' ).replace( /\s/g, "" );
|
||||
}
|
||||
dir.relearn_initialized = true;
|
||||
content = '%%{init: ' + JSON.stringify( dir ) + '}%%\n' + content;
|
||||
|
||||
element.innerHTML = content;
|
||||
var new_element = document.createElement( 'div' );
|
||||
new_element.classList.add( 'mermaid-container' );
|
||||
new_element.innerHTML = '<div class="mermaid-code">' + content + '</div>' + element.outerHTML;
|
||||
element.parentNode.replaceChild( new_element, element );
|
||||
});
|
||||
mermaid.init();
|
||||
$(".mermaid svg").svgPanZoom({});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -35,6 +35,46 @@ var variants = {
|
|||
if( variant && select.value != variant ){
|
||||
select.value = variant;
|
||||
}
|
||||
setTimeout( function(){
|
||||
if( typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined' && document.querySelector( '.mermaid > svg' ) ){
|
||||
var is_intialized = false;
|
||||
var theme = this.getColorValue( 'MERMAID-theme' );
|
||||
document.querySelectorAll( '.mermaid-container' ).forEach( function( e ){
|
||||
var element = e.querySelector( '.mermaid' );
|
||||
var code = e.querySelector( '.mermaid-code' );
|
||||
var content = this.decodeHTML( code.innerHTML );
|
||||
|
||||
var d = /^(%%\s*\{\s*\w+\s*:([^%]*?)%%\s*\n?)/g;
|
||||
var m = d.exec( content );
|
||||
var dir = {};
|
||||
if( m && m.length == 3 ){
|
||||
dir = JSON.parse( '{ "dummy": ' + m[2] ).dummy;
|
||||
content = content.substring( d.lastIndex );
|
||||
}
|
||||
|
||||
if( !dir.relearn_initialized ){
|
||||
return;
|
||||
}
|
||||
is_initialized = true;
|
||||
if( dir.relearn_user_theme ){
|
||||
return;
|
||||
}
|
||||
|
||||
if( dir.theme != theme ){
|
||||
dir.theme = theme;
|
||||
content = '%%{init: ' + JSON.stringify( dir ) + '}%%\n' + content;
|
||||
element.removeAttribute('data-processed');
|
||||
element.innerHTML = content;
|
||||
code.innerHTML = content;
|
||||
}
|
||||
}.bind( this ) );
|
||||
if( is_initialized ){
|
||||
mermaid.init();
|
||||
$(".mermaid svg").svgPanZoom({});
|
||||
}
|
||||
}
|
||||
}.bind( this ), 25 );
|
||||
|
||||
// remove selection, because if some uses an arrow navigation"
|
||||
// by pressing the left or right cursor key, we will automatically
|
||||
// select a different style
|
||||
|
@ -204,6 +244,12 @@ var variants = {
|
|||
a.click();
|
||||
},
|
||||
|
||||
decodeHTML: function( html ){
|
||||
var txt = document.createElement( 'textarea' );
|
||||
txt.innerHTML = html;
|
||||
return txt.value;
|
||||
},
|
||||
|
||||
getStylesheet: function(){
|
||||
this.download( this.generateStylesheet(), 'text/css', 'theme-' + this.customvariantname + '.css' );
|
||||
},
|
||||
|
@ -469,6 +515,8 @@ var variants = {
|
|||
{ name: 'CODE-INLINE-BG-color', group: 'inline code', default: '#fffae9', tooltip: 'background color of inline code', },
|
||||
{ name: 'CODE-INLINE-BORDER-color', group: 'inline code', default: '#fbf0cb', tooltip: 'border color of inline code', },
|
||||
|
||||
{ name: 'MERMAID-theme', group: 'mermaid', default: 'default', tooltip: 'name of the default mermaid theme for this variant, can be overridden in config.toml', },
|
||||
|
||||
{ name: 'MENU-HEADER-BG-color', group: 'header', default: '#7dc903', tooltip: 'background color of menu header', },
|
||||
{ name: 'MENU-HEADER-BORDER-color', group: 'header', fallback: 'MENU-HEADER-BG-color', tooltip: 'separator color of menu header', },
|
||||
{ name: 'MENU-HOME-LINK-color', group: 'header', default: '#323232', tooltip: 'home button color if configured', },
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue