diff --git a/modules/wowchemy/assets/js/wowchemy-slides.js b/modules/wowchemy/assets/js/wowchemy-slides.js index a6c74422..4e1a851a 100644 --- a/modules/wowchemy/assets/js/wowchemy-slides.js +++ b/modules/wowchemy/assets/js/wowchemy-slides.js @@ -61,64 +61,6 @@ pluginOptions['plugins'] = enabledPlugins; Reveal.initialize(pluginOptions); -// The following functions are used to render Mermaid diagrams -// after Reveal slides have been successfully loaded -// since content of slides is lazy loaded, if diagrams are -// rendered at start of presentation their sizes will be off -// get all slides that are: -// 1- data loaded -// 2- display set to block -// 3- has a mermaid element that is not processed (data-processed dne) -function mermaidSlidesReadyToRender(mslide) { - var diag = mslide.querySelector('.mermaid'); - if (diag) { - var background = mslide.slideBackgroundElement; - // render if we are 1 slide away horizontally - // current visible slide index - var currentHorizontalIndex = Reveal.getState()['indexh']; - - // mermaid slide index - var diagramSlideIndex = Reveal.getIndices(mslide)['h']; - if ( - // find slides with non-rendered mermaid tags - // these will not have the attribute data-processed - !diag.hasAttribute('data-processed') && - // check also that reveal slide is already loaded - // reveal slides seem to be lazily loaded - // things could be easier if reveal had a slide-loaded event - background.hasAttribute('data-loaded') && - // loaded slides must also have the display attribute set to block - background.style.display === 'block' && - // render diagrams that are 1 slide away - diagramSlideIndex - currentHorizontalIndex <= 1 - ) - return mslide; - } - return null; -} - -function renderMermaidSlides() { - // find all slides with diagrams that are ready to render - var diagramSlides = Reveal.getSlides().filter(mermaidSlidesReadyToRender); - - // render the diagram for each slide with ready to render diagrams - diagramSlides.forEach(function (item) { - mermaid.init(item.querySelector('.mermaid')); - }); -} - -// render mermaid slides for slides that are ready -Reveal.on('slidechanged', function () { - renderMermaidSlides(); -}); - -// render mermaid slides for slides that are ready on startup -Reveal.on('Ready', function () { - if (Reveal.isReady()) { - renderMermaidSlides(); - } -}); - // Disable Mermaid by default. if (typeof params.slides.diagram === 'undefined') { params.slides.diagram = false; @@ -138,4 +80,27 @@ if (params.slides.diagram) { mermaidOptions['startOnLoad'] = false; mermaid.initialize(mermaidOptions); + + // Lazily render Mermaid diagrams within Reveal.JS slides + // See: https://github.com/hakimel/reveal.js/issues/2863#issuecomment-1107444425 + let renderMermaidDiagrams = function renderMermaidDiagrams(event) { + + let mermaidDivs = event.currentSlide.querySelectorAll('.mermaid:not(.done)'); + let indices = Reveal.getIndices(); + let pageno = `${indices.h}-${indices.v}` + + mermaidDivs.forEach(function (mermaidDiv, i) { + + let insertSvg = function (svgCode) { + mermaidDiv.innerHTML = svgCode; + mermaidDiv.classList.add('done'); + }; + let graphDefinition = mermaidDiv.textContent; + mermaid.mermaidAPI.render(`mermaid${pageno}-${i}`, graphDefinition, insertSvg); + }); + Reveal.layout(); + }; + + Reveal.on('ready', event => renderMermaidDiagrams(event)); + Reveal.on('slidechanged', event => renderMermaidDiagrams(event)); } diff --git a/modules/wowchemy/data/assets.toml b/modules/wowchemy/data/assets.toml index 285a0b62..0a0004be 100644 --- a/modules/wowchemy/data/assets.toml +++ b/modules/wowchemy/data/assets.toml @@ -48,9 +48,9 @@ sri = "sha512-I7w3ZdSFzw5j3jU3ZkNikBNeIrl3i+hEuEdwNmqUJvwNcaBUNcijnP2gd9DtGlgVYDplfjGoD8vTNsID+lCjqg==" url = "https://cdn.jsdelivr.net/gh/bryanbraun/anchorjs@%s/anchor.min.js" [js.mermaid] - version = "8.8.4" - sri = "sha512-+TNmhaRJf3jyYHTpzEq/5I6b+aGyhzWb21mGdHAjxSGSYwxN9Grug3Y3B9qVxWfKKY8MscE/6mr9walWvFLFvQ==" - url = "https://cdn.jsdelivr.net/gh/mermaid-js/mermaid@v%s/dist/mermaid.min.js" + version = "9.1.3" + sri = "sha256-TIYL00Rhw/8WaoUhYTLX9SKIEFdXxg+yMWSLVUbhiLg=" + url = "https://cdn.jsdelivr.net/npm/mermaid@%s/dist/mermaid.min.js" [js.cookieconsent] version = "3.1.1" sri = "sha512-yXXqOFjdjHNH1GND+1EO0jbvvebABpzGKD66djnUfiKlYME5HGMUJHoCaeE4D5PTG2YsSJf6dwqyUUvQvS0vaA=="