refactor: fixMermaid() to dedicated vanilla JS module

Refactored from JQuery.
Module can now also be imported for use in Reveal v4 PR.

Also fix Theme Chooser due to 5b7f5da refactor.

See #2018
Fix 5b7f5da

wowchemy/assets/js/wowchemy-init.js

@@ -14,5 +14,5 @@ window.wc = {
   isSiteThemeDark: wcIsSiteThemeDark,
 }
 
-// Initialize theme variation.
+// Initialize theme variation and set body theme class.
 initThemeVariation();

wowchemy/assets/js/wowchemy-theming.js

@@ -3,7 +3,7 @@
  *  https://github.com/wowchemy/wowchemy-hugo-modules
  *
  *  Wowchemy Theming System
- *  Supported Modes: {0: Day, 1: Night, 2: Auto}
+ *  Supported Modes: {0: Light, 1: Dark, 2: Auto}
  **************************************************/
 
 import {fadeIn} from './wowchemy-animation';
@@ -55,7 +55,10 @@ function initThemeVariation() {
     console.debug('Applying Wowchemy light theme');
     document.body.classList.remove("dark");
   }
-  return {isDarkTheme, currentThemeMode};
+  return {
+    isDarkTheme: isDarkTheme,
+    themeMode: currentThemeMode,
+  };
 }
 
 function changeThemeModeClick(newMode) {
@@ -66,11 +69,16 @@ function changeThemeModeClick(newMode) {
   let isDarkTheme;
   switch (newMode) {
     case 0:
+      localStorage.setItem('wcTheme', '0');
+      isDarkTheme = false;
+      console.info('User changed theme variation to Light.');
+      break;
+    case 1:
       localStorage.setItem('wcTheme', '1');
       isDarkTheme = true;
       console.info('User changed theme variation to Dark.');
       break;
-    case 1:
+    default:
       localStorage.setItem('wcTheme', '2');
       if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
         // The visitor prefers dark themes and switching to the dark variation is allowed by admin.
@@ -84,11 +92,6 @@ function changeThemeModeClick(newMode) {
       }
       console.info('User changed theme variation to Auto.');
       break;
-    default:
-      localStorage.setItem('wcTheme', '0');
-      isDarkTheme = false;
-      console.info('User changed theme variation to Light.');
-      break;
   }
   renderThemeVariation(isDarkTheme, newMode);
 }
@@ -99,23 +102,23 @@ function showActiveTheme(mode) {
   let linkAuto = document.querySelector('.js-set-theme-auto');
   switch (mode) {
     case 0:
+      // Light.
+      linkLight.classList.add('dropdown-item-active');
+      linkDark.classList.remove('dropdown-item-active');
+      linkAuto.classList.remove('dropdown-item-active');
+      break;
+    case 1:
       // Dark.
       linkLight.classList.remove('dropdown-item-active');
       linkDark.classList.add('dropdown-item-active');
       linkAuto.classList.remove('dropdown-item-active');
       break;
-    case 1:
+    default:
       // Auto.
       linkLight.classList.remove('dropdown-item-active');
       linkDark.classList.remove('dropdown-item-active');
       linkAuto.classList.add('dropdown-item-active');
       break;
-    default:
-      // Light.
-      linkLight.classList.add('dropdown-item-active');
-      linkDark.classList.remove('dropdown-item-active');
-      linkAuto.classList.remove('dropdown-item-active');
-      break;
   }
 }
 
@@ -123,7 +126,7 @@ function showActiveTheme(mode) {
  * Render theme variation (day or night).
  *
  * @param {boolean} isDarkTheme
- * @param {int} themeMode - {0: Dark, 1: Auto, 2: Light}
+ * @param {int} themeMode - {0: Light, 1: Dark, 2: Auto}
  * @param {boolean} init - true only when called on document ready
  * @returns {undefined}
  */

wowchemy/assets/js/wowchemy-utils.js

@@ -0,0 +1,28 @@
+/*************************************************
+ *  Wowchemy
+ *  https://github.com/wowchemy/wowchemy-hugo-modules
+ *
+ *  Wowchemy Utilities
+ **************************************************/
+
+/**
+ * Fix Mermaid.js clash with Highlight.js.
+ * Refactor Mermaid code blocks as divs to prevent Highlight parsing them and enable Mermaid to parse them.
+ */
+function fixMermaid() {
+  let mermaids = [];
+  // Note that `language-mermaid` class is applied to <code> block within <pre>, so we wish to replace parent node.
+  [].push.apply(mermaids, document.getElementsByClassName('language-mermaid'));
+  for (let i = 0; i < mermaids.length; i++) {
+    // Convert <pre><code></code></pre> block to <div> and add `mermaid` class so that Mermaid will parse it.
+    let mermaidCodeElement = mermaids[i];
+    let newElement = document.createElement('div');
+    newElement.innerHTML = mermaidCodeElement.innerHTML;
+    newElement.classList.add('mermaid');
+    mermaidCodeElement.parentNode.replaceWith(newElement);
+  }
+}
+
+export {
+  fixMermaid,
+};

wowchemy/assets/js/wowchemy.js

@@ -7,6 +7,8 @@
 
 import {hugoEnvironment} from '@params';
 
+import {fixMermaid} from './wowchemy-utils';
+
 import {
   changeThemeModeClick,
   initThemeVariation,
@@ -387,22 +389,6 @@ function fixHugoOutput() {
   $("input[type='checkbox'][disabled]").parents('ul').addClass('task-list');
 }
 
-/**
- * Fix Mermaid.js clash with Highlight.js.
- * Refactor Mermaid code blocks as divs to prevent Highlight parsing them and enable Mermaid to parse them.
- */
-function fixMermaid() {
-  let mermaids = [];
-  [].push.apply(mermaids, document.getElementsByClassName('language-mermaid'));
-  for (let i = 0; i < mermaids.length; i++) {
-    $(mermaids[i]).unwrap('pre');  // Remove <pre> wrapper.
-    $(mermaids[i]).replaceWith(function () {
-      // Convert <code> block to <div> and add `mermaid` class so that Mermaid will parse it.
-      return $("<div />").append($(this).contents()).addClass('mermaid');
-    });
-  }
-}
-
 // Get an element's siblings.
 function getSiblings(elem) {
   // Filter out itself.
@@ -596,15 +582,15 @@ let linkAuto = document.querySelector('.js-set-theme-auto');
 if (linkLight && linkDark && linkAuto) {
   linkLight.addEventListener('click', event => {
     event.preventDefault();
-    changeThemeModeClick(2);
+    changeThemeModeClick(0);
   });
   linkDark.addEventListener('click', event => {
     event.preventDefault();
-    changeThemeModeClick(0);
+    changeThemeModeClick(1);
   });
   linkAuto.addEventListener('click', event => {
     event.preventDefault();
-    changeThemeModeClick(1);
+    changeThemeModeClick(2);
   });
 }