merge theme js scripts into one file and fix mermaid init #5

exampleSite/config.toml

@@ -19,7 +19,6 @@ relativeURLs = true
   disableLandingPageButton = true
   disableMermaid = false
   customMermaidURL = "https://unpkg.com/mermaid@8.8.0/dist/mermaid.min.js"
-  mermaidInitialize = "{ \"securityLevel\": \"loose\", \"startOnLoad\": true }"
   titleSeparator = "::"
   themeVariant = "relearn"
 

layouts/partials/footer.html

@@ -64,8 +64,6 @@
     <script src="{{"js/highlight.pack.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
     <script>hljs.initHighlightingOnLoad();</script>
     <script src="{{"js/modernizr.custom-3.6.0.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
-    <script src="{{"js/relearn.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
-    <script src="{{"js/hugo-relearn.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
     {{ if (or (and (ne .Params.disableMermaid nil) (not .Params.disableMermaid)) (not .Site.Params.disableMermaid)) }}
         {{ if isset .Params "custommermaidurl" }}
             <script src="{{ .Params.customMermaidURL }}"></script>
@@ -83,11 +81,11 @@
         {{ end }}
         <script>
             if (mermaid) {
-                mermaid.startOnLoad = false;
+                mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse({{ $.Scratch.Get "mermaidInitialize" }}), { startOnLoad: false } ) );
-                mermaid.initialize(JSON.parse({{ $.Scratch.Get "mermaidInitialize" }}));
             }
         </script>
     {{ end }}
+    <script src="{{"js/relearn.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
     {{ partial "custom-footer.html" . }}
   </body>
 </html>

static/js/hugo-relearn.js

@@ -1,98 +0,0 @@
-// Get Parameters from some url
-var getUrlParameter = function getUrlParameter(sPageURL) {
-    var url = sPageURL.split('?');
-    var obj = {};
-    if (url.length == 2) {
-      var sURLVariables = url[1].split('&'),
-          sParameterName,
-          i;
-      for (i = 0; i < sURLVariables.length; i++) {
-          sParameterName = sURLVariables[i].split('=');
-          obj[sParameterName[0]] = sParameterName[1];
-      }
-    }
-    return obj;
-};
-
-// Execute actions on images generated from Markdown pages
-var images = $("div#body-inner img").not(".inline");
-// Wrap image inside a featherlight (to get a full size view in a popup)
-images.wrap(function(){
-  var image =$(this);
-  var o = getUrlParameter(image[0].src);
-  var f = o['featherlight'];
-  // IF featherlight is false, do not use feather light
-  if (f != 'false') {
-    if (!image.parent("a").length) {
-      return "<a href='" + image[0].src + "' data-featherlight='image'></a>";
-    }
-  }
-});
-
-// Change styles, depending on parameters set to the image
-images.each(function(index){
-  var image = $(this)
-  var o = getUrlParameter(image[0].src);
-  if (typeof o !== "undefined") {
-    var h = o["height"];
-    var w = o["width"];
-    var c = o["classes"];
-    image.css("width", function() {
-      if (typeof w !== "undefined") {
-        return w;
-      } else {
-        return "auto";
-      }
-    });
-    image.css("height", function() {
-      if (typeof h !== "undefined") {
-        return h;
-      } else {
-        return "auto";
-      }
-    });
-    if (typeof c !== "undefined") {
-      var classes = c.split(',');
-      for (i = 0; i < classes.length; i++) {
-        image.addClass(classes[i]);
-      }
-    }
-  }
-});
-
-// Stick the top to the top of the screen when  scrolling
-$(document).ready(function(){
-  $("#top-bar").sticky({topSpacing:0, zIndex: 1000});
-});
-
-
-jQuery(document).ready(function() {
-  // Add link button for every
-  var text, clip = new ClipboardJS('.anchor');
-  $("h1~h2,h1~h3,h1~h4,h1~h5,h1~h6").append(function(index, html){
-    var element = $(this);
-    var url = encodeURI(document.location.origin + document.location.pathname);
-    var link = url + "#"+element[0].id;
-    return " <span class='anchor' data-clipboard-text='"+link+"'>" +
-      "<i class='fas fa-link fa-lg'></i>" +
-      "</span>"
-    ;
-  });
-
-  $(".anchor").on('mouseleave', function(e) {
-    $(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w');
-  });
-
-  clip.on('success', function(e) {
-      e.clearSelection();
-      $(e.trigger).attr('aria-label', 'Link copied to clipboard!').addClass('tooltipped tooltipped-s');
-  });
-
-  $('code.language-mermaid').each(function(index, element) {
-    var content = $(element).html().replace(/&amp;/g, '&');
-    $(element).parent().replaceWith('<div class="mermaid" align="center">' + content + '</div>');
-  });
-  if (mermaid) {
-    mermaid.init(undefined, $('.mermaid'));
-  }
-});

static/js/relearn.js

@@ -98,6 +98,80 @@ function restoreTabSelections() {
     }
 }
 
+function initMermaid() {
+    $('code.language-mermaid').each(function(index, element) {
+        var content = $(element).html().replace(/&/g, '&');
+        $(element).parent().replaceWith('<div class="mermaid" align="center">' + content + '</div>');
+    });
+
+    if (mermaid) {
+        mermaid.mermaidAPI.initialize( Object.assign( {}, mermaid.mermaidAPI.getSiteConfig(), { startOnLoad: true } ) );
+        mermaid.contentLoaded();
+    }
+}
+
+// Get Parameters from some url
+var getUrlParameter = function getUrlParameter(sPageURL) {
+    var url = sPageURL.split('?');
+    var obj = {};
+    if (url.length == 2) {
+      var sURLVariables = url[1].split('&'),
+          sParameterName,
+          i;
+      for (i = 0; i < sURLVariables.length; i++) {
+          sParameterName = sURLVariables[i].split('=');
+          obj[sParameterName[0]] = sParameterName[1];
+      }
+    }
+    return obj;
+};
+
+// Execute actions on images generated from Markdown pages
+var images = $("div#body-inner img").not(".inline");
+// Wrap image inside a featherlight (to get a full size view in a popup)
+images.wrap(function(){
+    var image =$(this);
+    var o = getUrlParameter(image[0].src);
+    var f = o['featherlight'];
+    // IF featherlight is false, do not use feather light
+    if (f != 'false') {
+        if (!image.parent("a").length) {
+            return "<a href='" + image[0].src + "' data-featherlight='image'></a>";
+        }
+    }
+});
+
+// Change styles, depending on parameters set to the image
+images.each(function(index){
+    var image = $(this)
+    var o = getUrlParameter(image[0].src);
+    if (typeof o !== "undefined") {
+        var h = o["height"];
+        var w = o["width"];
+        var c = o["classes"];
+        image.css("width", function() {
+            if (typeof w !== "undefined") {
+                return w;
+            } else {
+                return "auto";
+            }
+        });
+        image.css("height", function() {
+            if (typeof h !== "undefined") {
+                return h;
+            } else {
+                return "auto";
+            }
+        });
+        if (typeof c !== "undefined") {
+            var classes = c.split(',');
+            for (i = 0; i < classes.length; i++) {
+                image.addClass(classes[i]);
+            }
+        }
+    }
+});
+
 // for the window resize
 $(window).resize(function() {
     setMenuHeight();
@@ -133,8 +207,9 @@ $(window).resize(function() {
 })(jQuery, 'smartresize');
 
 
-jQuery(document).ready(function() {
+jQuery(function() {
     restoreTabSelections();
+    initMermaid();
 
     jQuery('#sidebar .category-icon').on('click', function() {
         $( this ).toggleClass("fa-angle-down fa-angle-right") ;
@@ -226,6 +301,8 @@ jQuery(document).ready(function() {
         }
     }
 
+    $(".highlightable").highlight(sessionStorage.getItem('search-value'), { element: 'mark' });
+
     // clipboard
     var clipInit = false;
     $('code').each(function() {
@@ -400,25 +477,40 @@ jQuery(document).ready(function() {
         $(document).ready($.proxy(anchorScrolls, 'init'));
     })(window.document, window.history, window.location);
 
-});
+    // Stick the top to the top of the screen when    scrolling
+    jQuery("#top-bar").sticky({topSpacing:0, zIndex: 1000});
+
+    // Add link button for every
+    var text, clip = new ClipboardJS('.anchor');
+    $("h1~h2,h1~h3,h1~h4,h1~h5,h1~h6").append(function(index, html){
+        var element = $(this);
+        var url = encodeURI(document.location.origin + document.location.pathname);
+        var link = url + "#"+element[0].id;
+        return " <span class='anchor' data-clipboard-text='"+link+"'>" +
+            "<i class='fas fa-link fa-lg'></i>" +
+            "</span>"
+        ;
+    });
+
+    $(".anchor").on('mouseleave', function(e) {
+        $(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w');
+    });
+
+    clip.on('success', function(e) {
+            e.clearSelection();
+            $(e.trigger).attr('aria-label', 'Link copied to clipboard!').addClass('tooltipped tooltipped-s');
+    });
+
+    $('a[rel="lightbox"]').featherlight({
+        root: 'section#body'
+    });
 
-jQuery(window).on('load', function() {
-    // store this page in session
     sessionStorage.setItem(jQuery('body').data('url'), 1);
 
     // loop through the sessionStorage and see if something should be marked as visited
     for (var url in sessionStorage) {
         if (sessionStorage.getItem(url) == 1) jQuery('[data-nav-id="' + url + '"]').addClass('visited');
     }
-
-
-    $(".highlightable").highlight(sessionStorage.getItem('search-value'), { element: 'mark' });
-});
-
-$(function() {
-    $('a[rel="lightbox"]').featherlight({
-        root: 'section#body'
-    });
 });
 
 jQuery.extend({