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

mermaid: lazy render graph if it is initially hidden #187

Browse source 
works now in initially collapsed expands and initially inactive tabs
This commit is contained in:
Sören Weber 2023-08-26 01:26:37 +02:00
parent 80a7528179
commit 0dd4b34023
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
2 changed files with 24 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
exampleSite/content/shortcodes/mermaid.en.md
View file

@ -15,10 +15,6 @@ graph LR;
This only works in modern browsers. This only works in modern browsers.
{{% /notice %}} {{% /notice %}}
{{% notice warning %}}
Due to limitations with [Mermaid](https://github.com/mermaid-js/mermaid/issues/1846), it is currently not possible to use Mermaid code fences in an initially collapsed `expand` shortcode. This is a know issue and [can't be fixed by this theme](https://github.com/McShelby/hugo-theme-relearn/issues/187).
{{% /notice %}}
## Usage ## Usage
While the examples are using shortcodes with named parameter it is recommended to use codefences instead. This is because more and more other software supports Mermaid codefences (eg. GitHub) and so your markdown becomes more portable. While the examples are using shortcodes with named parameter it is recommended to use codefences instead. This is because more and more other software supports Mermaid codefences (eg. GitHub) and so your markdown becomes more portable.

23
static/js/theme.js
View file

@ -114,6 +114,8 @@ function switchTab(tabGroup, tabId) {
allTabItems && allTabItems.forEach( function( e ){ e.classList.remove( 'active' ); }); allTabItems && allTabItems.forEach( function( e ){ e.classList.remove( 'active' ); });
targetTabItems && targetTabItems.forEach( function( e ){ e.classList.add( 'active' ); }); targetTabItems && targetTabItems.forEach( function( e ){ e.classList.add( 'active' ); });
initMermaid( true );
if(isButtonEvent){ if(isButtonEvent){
// reset screen to the same position relative to clicked button to prevent page jump // reset screen to the same position relative to clicked button to prevent page jump
var yposButtonDiff = event.target.getBoundingClientRect().top - yposButton; var yposButtonDiff = event.target.getBoundingClientRect().top - yposButton;
@ -209,6 +211,9 @@ function initMermaid( update, attrs ) {
var graph = serializeGraph( parse ); var graph = serializeGraph( parse );
element.innerHTML = graph; element.innerHTML = graph;
if( element.offsetParent !== null ){
element.classList.add( 'mermaid-render' );
}
var new_element = document.createElement( 'div' ); var new_element = document.createElement( 'div' );
new_element.classList.add( 'mermaid-container' ); new_element.classList.add( 'mermaid-container' );
new_element.innerHTML = '<div class="mermaid-code">' + graph + '</div>' + element.outerHTML; new_element.innerHTML = '<div class="mermaid-code">' + graph + '</div>' + element.outerHTML;
@ -225,12 +230,21 @@ function initMermaid( update, attrs ) {
var code = e.querySelector( '.mermaid-code' ); var code = e.querySelector( '.mermaid-code' );
var parse = parseGraph( decodeHTML( code.innerHTML ) ); var parse = parseGraph( decodeHTML( code.innerHTML ) );
if( element.classList.contains( 'mermaid-render' ) ){
if( parse.yaml.relearn_user_theme || parse.dir.relearn_user_theme ){ if( parse.yaml.relearn_user_theme || parse.dir.relearn_user_theme ){
return; return;
} }
if( parse.yaml.theme == theme || parse.dir.theme == theme ){ if( parse.yaml.theme == theme || parse.dir.theme == theme ){
return; return;
} }
}
if( element.offsetParent !== null ){
element.classList.add( 'mermaid-render' );
}
else{
element.classList.remove( 'mermaid-render' );
return;
}
is_initialized = true; is_initialized = true;
parse.yaml.theme = theme; parse.yaml.theme = theme;
@ -292,7 +306,7 @@ function initMermaid( update, attrs ) {
svg.call( zoom ); svg.call( zoom );
}); });
}, },
querySelector: '.mermaid', querySelector: '.mermaid.mermaid-render',
suppressErrors: true suppressErrors: true
}); });
} }
@ -987,7 +1001,11 @@ function initSwipeHandler(){
} }
function initImage(){ function initImage(){
document.querySelectorAll( '.lightbox-back' ).forEach( function(e){ e.addEventListener("keydown", imageEscapeHandler); }, false); document.querySelectorAll( '.lightbox-back' ).forEach( function(e){ e.addEventListener( 'keydown', imageEscapeHandler ); });
}
function initExpand(){
document.querySelectorAll( '.expand > input' ).forEach( function(e){ e.addEventListener( 'change', initMermaid.bind( null, true, null ) ); });
} }
function clearHistory() { function clearHistory() {
@ -1355,6 +1373,7 @@ ready( function(){
initHistory(); initHistory();
initSearch(); initSearch();
initImage(); initImage();
initExpand();
initScrollPositionSaver(); initScrollPositionSaver();
scrollToPositions(); scrollToPositions();
}); });