Decouple theme-mode toggle & mermaid
This commit is contained in:
parent
09e8eb4274
commit
c02c9c6a04
2 changed files with 38 additions and 17 deletions
|
@ -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>
|
||||
|
|
|
@ -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() */
|
||||
|
||||
|
|
Loading…
Reference in a new issue