From 0dd4b340237b0cf4eebb3b4fe9b0101fbc2a6b6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Sat, 26 Aug 2023 01:26:37 +0200
Subject: [PATCH] mermaid: lazy render graph if it is initially hidden #187

works now in initially collapsed expands and initially inactive tabs
---
 exampleSite/content/shortcodes/mermaid.en.md |  4 ---
 static/js/theme.js                           | 29 ++++++++++++++++----
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/exampleSite/content/shortcodes/mermaid.en.md b/exampleSite/content/shortcodes/mermaid.en.md
index 8fdae8b733..9b98e0879b 100644
--- a/exampleSite/content/shortcodes/mermaid.en.md
+++ b/exampleSite/content/shortcodes/mermaid.en.md
@@ -15,10 +15,6 @@ graph LR;
 This only works in modern browsers.
 {{% /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
 
 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.
diff --git a/static/js/theme.js b/static/js/theme.js
index c188ff024e..d736654298 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -114,6 +114,8 @@ function switchTab(tabGroup, tabId) {
     allTabItems && allTabItems.forEach( function( e ){ e.classList.remove( 'active' ); });
     targetTabItems && targetTabItems.forEach( function( e ){ e.classList.add( 'active' ); });
 
+    initMermaid( true );
+
     if(isButtonEvent){
       // reset screen to the same position relative to clicked button to prevent page jump
       var yposButtonDiff = event.target.getBoundingClientRect().top - yposButton;
@@ -209,6 +211,9 @@ function initMermaid( update, attrs ) {
 
             var graph = serializeGraph( parse );
             element.innerHTML = graph;
+            if( element.offsetParent !== null ){
+                element.classList.add( 'mermaid-render' );
+            }
             var new_element = document.createElement( 'div' );
             new_element.classList.add( 'mermaid-container' );
             new_element.innerHTML = '<div class="mermaid-code">' + graph + '</div>' + element.outerHTML;
@@ -225,10 +230,19 @@ function initMermaid( update, attrs ) {
             var code = e.querySelector( '.mermaid-code' );
             var parse = parseGraph( decodeHTML( code.innerHTML ) );
 
-            if( parse.yaml.relearn_user_theme || parse.dir.relearn_user_theme ){
-                return;
+            if( element.classList.contains( 'mermaid-render' ) ){
+                if( parse.yaml.relearn_user_theme || parse.dir.relearn_user_theme ){
+                    return;
+                }
+                if( parse.yaml.theme == theme || parse.dir.theme == theme ){
+                    return;
+                }
             }
-            if( parse.yaml.theme == theme || parse.dir.theme == theme ){
+            if( element.offsetParent !== null ){
+                element.classList.add( 'mermaid-render' );
+            }
+            else{
+                element.classList.remove( 'mermaid-render' );
                 return;
             }
             is_initialized = true;
@@ -292,7 +306,7 @@ function initMermaid( update, attrs ) {
                     svg.call( zoom );
                 });
             },
-            querySelector: '.mermaid',
+            querySelector: '.mermaid.mermaid-render',
             suppressErrors: true
         });
     }
@@ -987,7 +1001,11 @@ function initSwipeHandler(){
 }
 
 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() {
@@ -1355,6 +1373,7 @@ ready( function(){
     initHistory();
     initSearch();
     initImage();
+    initExpand();
     initScrollPositionSaver();
     scrollToPositions();
 });