From c02c9c6a047a85c629fc392c7ca4057d58a3c13c Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Mon, 13 Dec 2021 02:37:10 +0800
Subject: [PATCH] Decouple theme-mode toggle & mermaid

---
 _includes/mermaid.html     | 28 ++++++++++++++++++++++++++++
 _includes/mode-toggle.html | 27 ++++++++++-----------------
 2 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/_includes/mermaid.html b/_includes/mermaid.html
index 063d950..b8b6665 100644
--- a/_includes/mermaid.html
+++ b/_includes/mermaid.html
@@ -3,8 +3,34 @@
 -->
 
 <script src="https://cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js"></script>
+
 <script>
   $(function() {
+    function updateMermaid(event) {
+      if (event.source === window && event.data &&
+            event.data.direction === ModeToggle.ID) {
+
+        const mode = event.data.message;
+
+        if (typeof mermaid === "undefined") {
+          return;
+        }
+
+        let expectedTheme = (mode === ModeToggle.DARK_MODE? "dark" : "default");
+        let config = { theme: expectedTheme };
+
+        /* Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
+        $(".mermaid").each(function() {
+          let svgCode = $(this).prev().children().html();
+          $(this).removeAttr("data-processed");
+          $(this).html(svgCode);
+        });
+
+        mermaid.initialize(config);
+        mermaid.init(undefined, ".mermaid");
+      }
+    }
+
     let initTheme = "default";
 
     if ($("html[mode=dark]").length > 0
@@ -25,5 +51,7 @@
     });
 
     mermaid.initialize(mermaidConf);
+
+    window.addEventListener("message", updateMermaid);
   });
 </script>
diff --git a/_includes/mode-toggle.html b/_includes/mode-toggle.html
index e2eb2d7..372b040 100644
--- a/_includes/mode-toggle.html
+++ b/_includes/mode-toggle.html
@@ -7,6 +7,7 @@
     static get MODE_KEY() { return "mode"; }
     static get DARK_MODE() { return "dark"; }
     static get LIGHT_MODE() { return "light"; }
+    static get ID() { return "mode-toggle"; }
 
     constructor() {
       if (this.hasMode) {
@@ -40,7 +41,8 @@
           self.clearMode();
         }
 
-        self.updateMermaid();
+        self.notify();
+
       });
 
     } /* constructor() */
@@ -82,21 +84,12 @@
       sessionStorage.removeItem(ModeToggle.MODE_KEY);
     }
 
-    updateMermaid() {
-      if (typeof mermaid !== "undefined") {
-        let expectedTheme = (this.modeStatus === ModeToggle.DARK_MODE? "dark" : "default");
-        let config = { theme: expectedTheme };
-
-        /* re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
-        $(".mermaid").each(function() {
-          let svgCode = $(this).prev().children().html();
-          $(this).removeAttr("data-processed");
-          $(this).html(svgCode);
-        });
-
-        mermaid.initialize(config);
-        mermaid.init(undefined, ".mermaid");
-      }
+    /* Notify another plugins that the theme mode has changed */
+    notify() {
+      window.postMessage({
+        direction: ModeToggle.ID,
+        message: this.modeStatus
+      }, "*");
     }
 
   } /* ModeToggle */
@@ -128,7 +121,7 @@
       }
     }
 
-    toggle.updateMermaid();
+    toggle.notify();
 
   } /* flipMode() */