mermaid: support differing themes for color variant switch

This commit is contained in:
Sören Weber 2022-03-19 20:18:21 +01:00
parent 270027ab0c
commit 938debb1d9
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
11 changed files with 109 additions and 17 deletions

View file

@ -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(/&amp;/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({});
}
}

View file

@ -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', },