92 lines
No EOL
2.6 KiB
JavaScript
92 lines
No EOL
2.6 KiB
JavaScript
import mermaid from 'mermaid'
|
|
import * as params from '@params'
|
|
|
|
const elementCode = '.mermaid'
|
|
|
|
initMermaid();
|
|
|
|
// Save original mermaid code to data attribute
|
|
function saveOriginalData() {
|
|
return new Promise((resolve, reject) => {
|
|
try {
|
|
const elements = document.querySelectorAll(elementCode);
|
|
let count = elements.length;
|
|
|
|
if (count === 0) {
|
|
resolve();
|
|
return;
|
|
}
|
|
|
|
elements.forEach(element => {
|
|
element.setAttribute('data-original-code', element.innerHTML);
|
|
count--;
|
|
if (count === 0) {
|
|
resolve();
|
|
}
|
|
});
|
|
} catch (error) {
|
|
reject(error);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Reset processed diagrams to original state
|
|
function resetProcessed() {
|
|
return new Promise((resolve, reject) => {
|
|
try {
|
|
const elements = document.querySelectorAll(elementCode);
|
|
let count = elements.length;
|
|
|
|
if (count === 0) {
|
|
resolve();
|
|
return;
|
|
}
|
|
|
|
elements.forEach(element => {
|
|
if (element.getAttribute('data-original-code') != null) {
|
|
element.removeAttribute('data-processed');
|
|
element.innerHTML = element.getAttribute('data-original-code');
|
|
}
|
|
count--;
|
|
if (count === 0) {
|
|
resolve();
|
|
}
|
|
});
|
|
} catch (error) {
|
|
reject(error);
|
|
}
|
|
});
|
|
}
|
|
|
|
function setMermaidTheme(siteTheme) {
|
|
let themeName = 'default';
|
|
|
|
if (siteTheme === 'dark') themeName = 'dark';
|
|
|
|
// Set custom theme
|
|
if (themeName === 'default' && params.flowchart?.mermaid.theme) {
|
|
themeName = params.flowchart?.mermaid.theme;
|
|
}
|
|
else if (themeName === 'dark' && params.flowchart?.mermaid.darktheme) {
|
|
themeName = params.flowchart?.mermaid.darktheme;
|
|
}
|
|
const mermaidOptions = { theme: themeName };
|
|
const options = Object.assign({}, mermaidOptions, { startOnLoad: true });
|
|
|
|
// Initialize mermaid with the new options
|
|
mermaid.initialize(options);
|
|
|
|
// Reload diagrams if they exist on the page
|
|
resetProcessed()
|
|
.then(() => {
|
|
mermaid.init(options, document.querySelectorAll(elementCode));
|
|
})
|
|
.catch(console.error);
|
|
}
|
|
|
|
function initMermaid() {
|
|
setMermaidTheme("light");
|
|
saveOriginalData().catch(console.error);
|
|
}
|
|
|
|
export { setMermaidTheme } |