Compile daux's JavaScript. Lazy load Highlight.js

Dockerfile

@@ -22,6 +22,7 @@ COPY bin/ /daux/bin/
 COPY libs/ /daux/libs/
 COPY templates/ /daux/templates/
 COPY themes/ /daux/themes/
+COPY _libraries/ /daux/_libraries/
 COPY search/ /daux/search/
 COPY global.json /daux/global.json
 COPY index.php /daux/index.php

crafty.config.js

@@ -26,6 +26,11 @@ module.exports = {
             runner: "rollup",
             source: "src/js/search/index.js",
             destination: "search/search.min.js"
+        },
+        theme_daux: {
+            runner: "rollup",
+            source: "src/js/theme_daux/index.js",
+            destination: "themes/daux/js/daux.min.js"
         }
     },
     css: {

libs/Format/HTML/Generator.php

@@ -72,6 +72,11 @@ class Generator implements \Todaymade\Daux\Format\Base\Generator, LiveGenerator
 
         $this->generateRecursive($this->daux->tree, $destination, $params, $output, $width, $params['html']['search']);
 
+        GeneratorHelper::copyRecursive(
+            $this->daux->local_base . DIRECTORY_SEPARATOR . '_libraries' . DIRECTORY_SEPARATOR,
+            $destination . DIRECTORY_SEPARATOR . '_libraries'
+        );
+
         if ($params['html']['search']) {
             GeneratorHelper::copyRecursive(
                 $this->daux->local_base . DIRECTORY_SEPARATOR . 'search' . DIRECTORY_SEPARATOR,

src/js/theme_daux/code_toggle.js

@@ -0,0 +1,153 @@
+const codeBlocks = document.querySelectorAll(".s-content pre");
+const toggleCodeSection = document.querySelector(".CodeToggler");
+
+function setCodeBlockStyle(
+    codeBlockState,
+    toggleCodeBlockBtnList,
+    toggleCodeBlockBtnFloat,
+    toggleCodeBlockBtnBelow,
+    toggleCodeBlockBtnHide,
+    codeBlockView
+) {
+    for (let a = 0; a < toggleCodeBlockBtnList.length; a++) {
+        toggleCodeBlockBtnList[a].classList.remove("Button--active");
+    }
+    let hidden;
+    switch (codeBlockState) {
+        case true: // Show code blocks below (flowed); checkbox
+            hidden = false;
+            break;
+        case false: // Hidden code blocks; checkbox
+            hidden = true;
+            break;
+        case 2: // Show code blocks inline (floated)
+            toggleCodeBlockBtnFloat.classList.add("Button--active");
+            codeBlockView.classList.add("Columns__right--float");
+            codeBlockView.classList.remove("Columns__right--full");
+            hidden = false;
+            break;
+        case 1: // Show code blocks below (flowed)
+        case "checked":
+            toggleCodeBlockBtnBelow.classList.add("Button--active");
+            codeBlockView.classList.remove("Columns__right--float");
+            codeBlockView.classList.add("Columns__right--full");
+            hidden = false;
+            break;
+        case 0: // Hidden code blocks
+        default:
+            toggleCodeBlockBtnHide.classList.add("Button--active");
+            codeBlockView.classList.remove("Columns__right--float");
+            codeBlockView.classList.add("Columns__right--full");
+            hidden = true;
+            break;
+    }
+    for (let a = 0; a < codeBlocks.length; a++) {
+        if (hidden) {
+            codeBlocks[a].classList.add("Hidden");
+        } else {
+            codeBlocks[a].classList.remove("Hidden");
+        }
+    }
+    try {
+        localStorage.setItem("codeBlockState", +codeBlockState);
+    } catch (e) {
+        // local storage operations can fail with the file:// protocol
+    }
+}
+
+function enableToggler() {
+    const toggleCodeBlockBtnList = toggleCodeSection.querySelectorAll(
+        ".CodeToggler__button"
+    );
+    const toggleCodeBlockBtnSet = toggleCodeSection.querySelector(
+        ".CodeToggler__button--main"
+    ); // available when floating is disabled
+    const toggleCodeBlockBtnHide = toggleCodeSection.querySelector(
+        ".CodeToggler__button--hide"
+    );
+    const toggleCodeBlockBtnBelow = toggleCodeSection.querySelector(
+        ".CodeToggler__button--below"
+    );
+    const toggleCodeBlockBtnFloat = toggleCodeSection.querySelector(
+        ".CodeToggler__button--float"
+    );
+    const codeBlockView = document.querySelector(".Columns__right");
+    const floating = document.body.classList.contains("with-float");
+
+    const setStyle = style => {
+        setCodeBlockStyle(
+            style,
+            toggleCodeBlockBtnList,
+            toggleCodeBlockBtnFloat,
+            toggleCodeBlockBtnBelow,
+            toggleCodeBlockBtnHide,
+            codeBlockView
+        );
+    };
+
+    if (floating) {
+        toggleCodeBlockBtnHide.addEventListener(
+            "click",
+            () => {
+                setStyle(0);
+            },
+            false
+        );
+        toggleCodeBlockBtnBelow.addEventListener(
+            "click",
+            () => {
+                setStyle(1);
+            },
+            false
+        );
+        toggleCodeBlockBtnFloat.addEventListener(
+            "click",
+            () => {
+                setStyle(2);
+            },
+            false
+        );
+    } else {
+        toggleCodeBlockBtnSet.addEventListener(
+            "change",
+            ev => {
+                setStyle(ev.target.checked);
+            },
+            false
+        );
+    }
+
+    let codeBlockState = null;
+    try {
+        codeBlockState = localStorage.getItem("codeBlockState");
+    } catch (e) {
+        // local storage operations can fail with the file:// protocol
+    }
+
+    if (codeBlockState) {
+        codeBlockState = parseInt(codeBlockState, 10);
+    } else {
+        codeBlockState = floating ? 2 : 1;
+    }
+
+    if (!floating) {
+        codeBlockState = !!codeBlockState;
+    }
+
+    setCodeBlockStyle(
+        codeBlockState,
+        toggleCodeBlockBtnList,
+        toggleCodeBlockBtnFloat,
+        toggleCodeBlockBtnBelow,
+        toggleCodeBlockBtnHide,
+        codeBlockView
+    );
+}
+
+if (toggleCodeSection) {
+    if (codeBlocks.length) {
+        enableToggler();
+    } else {
+        toggleCodeSection.classList.add("Hidden");
+    }
+}

src/js/theme_daux/hamburger.js

@@ -0,0 +1,19 @@
+const trigger = document.querySelector(".Collapsible__trigger");
+
+if (trigger) {
+    const content = document.querySelector(".Collapsible__content");
+
+    trigger.addEventListener("click", ev => {
+        if (content.classList.contains("Collapsible__content--open")) {
+            content.style.height = 0;
+            content.classList.remove("Collapsible__content--open");
+        } else {
+            content.style.transitionDuration = `${Math.max(
+                content.scrollHeight,
+                150
+            )}ms`;
+            content.style.height = `${content.scrollHeight}px`;
+            content.classList.add("Collapsible__content--open");
+        }
+    });
+}

src/js/theme_daux/highlight.js

@@ -0,0 +1,12 @@
+const codeBlocks = document.querySelectorAll("pre > code:not(.hljs)");
+if (codeBlocks.length) {
+    const head = document.getElementsByTagName("head")[0],
+        script = document.createElement("script");
+    script.type = "text/javascript";
+    script.async = true;
+    script.src = `${window.base_url}_libraries/highlight.pack.js`;
+    script.onload = function(src) {
+        [].forEach.call(codeBlocks, window.hljs.highlightBlock);
+    };
+    head.appendChild(script);
+}

src/js/theme_daux/index.js

@@ -0,0 +1,6 @@
+/** global localStorage, hljs */
+
+import "./code_toggle.js";
+import "./hamburger.js";
+import "./highlight.js";
+import "./menu.js";

src/js/theme_daux/menu.js

@@ -0,0 +1,62 @@
+function setHeightToAuto(ev) {
+    if (ev.target.style.height !== "0px") {
+        ev.target.style.height = "auto";
+    }
+
+    ev.target.removeEventListener("transitionend", setHeightToAuto);
+}
+
+function toggleSubMenu(ev) {
+    if (ev.preventDefault !== undefined) {
+        ev.preventDefault();
+    }
+
+    const parent = ev.target.parentNode.parentNode;
+    const subNav = parent.querySelector("ul.Nav");
+
+    if (
+        ev.preventDefault !== undefined &&
+        parent.classList.contains("Nav__item--open")
+    ) {
+        // Temporarily set the height so the transition can work.
+        subNav.style.height = `${subNav.scrollHeight}px`;
+        subNav.style.transitionDuration = `${Math.max(
+            subNav.scrollHeight,
+            150
+        )}ms`;
+        subNav.style.height = "0px";
+        parent.classList.remove("Nav__item--open");
+    } else {
+        if (ev.preventDefault === undefined) {
+            // When running at page load the transitions don't need to fire and
+            // the classList doesn't need to be altered.
+            subNav.style.height = "auto";
+        } else {
+            subNav.style.transitionDuration = `${Math.max(
+                subNav.scrollHeight,
+                150
+            )}ms`;
+            // After the transition finishes set the height to auto so child
+            // menus can expand properly.
+            subNav.addEventListener("transitionend", setHeightToAuto);
+            subNav.style.height = `${subNav.scrollHeight}px`;
+            parent.classList.add("Nav__item--open");
+        }
+    }
+}
+
+const navItems = document.querySelectorAll(
+    ".Nav__item.has-children i.Nav__arrow"
+);
+
+// Go in reverse here because on page load the child nav items need to be
+// opened first before their parents so the height on the parents can be
+// calculated properly.
+for (let i = navItems.length - 1, cur; i >= 0; i--) {
+    cur = navItems[i];
+    cur.addEventListener("click", toggleSubMenu);
+
+    if (cur.parentNode.parentNode.classList.contains("Nav__item--open")) {
+        toggleSubMenu({ target: cur });
+    }
+}

templates/layout/00_layout.php

@@ -27,7 +27,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <!-- JS -->
-    <script>document.documentElement.classList.remove('no-js');</script>
+    <script>
+        window.base_url = "<?php echo $base_url?>";
+        document.documentElement.classList.remove('no-js');
+    </script>
 
     <!-- Font -->
     <?php foreach ($params['theme']['fonts'] as $font) {

themes/daux/config.json

@@ -1,8 +1,7 @@
 {
     "favicon": "<theme_url>img/favicon.png",
     "js": [
-        "<theme_url>js/highlight.pack.js",
+        "<theme_url>js/daux.min.js"
-        "<theme_url>js/daux.js"
     ],
     "variants": {
         "blue": {

themes/daux/js/daux.js

@@ -1,182 +0,0 @@
-/** global localStorage, hljs */
-
-if (hljs) {
-    hljs.initHighlightingOnLoad();
-}
-
-(function() {
-    var codeBlocks = document.querySelectorAll(".s-content pre");
-    var toggleCodeSection = document.querySelector(".CodeToggler");
-    if (!toggleCodeSection) {
-        return;
-    } else if (!codeBlocks.length) {
-        toggleCodeSection.classList.add("Hidden");
-        return;
-    }
-
-    var toggleCodeBlockBtnList = toggleCodeSection.querySelectorAll(".CodeToggler__button");
-    var toggleCodeBlockBtnSet = toggleCodeSection.querySelector(".CodeToggler__button--main"); // available when floating is disabled
-    var toggleCodeBlockBtnHide = toggleCodeSection.querySelector(".CodeToggler__button--hide");
-    var toggleCodeBlockBtnBelow = toggleCodeSection.querySelector(".CodeToggler__button--below");
-    var toggleCodeBlockBtnFloat = toggleCodeSection.querySelector(".CodeToggler__button--float");
-    var codeBlockView = document.querySelector(".Columns__right");
-    var floating = document.body.classList.contains("with-float");
-
-    function setCodeBlockStyle(codeBlockState) {
-        for (var a = 0; a < toggleCodeBlockBtnList.length; a++) {
-            toggleCodeBlockBtnList[a].classList.remove("Button--active");
-        }
-        switch (codeBlockState) {
-            case true: // Show code blocks below (flowed); checkbox
-                var hidden = false;
-                break;
-            case false: // Hidden code blocks; checkbox
-                var hidden = true;
-                break;
-            case 2: // Show code blocks inline (floated)
-                toggleCodeBlockBtnFloat.classList.add("Button--active");
-                codeBlockView.classList.add("Columns__right--float");
-                codeBlockView.classList.remove("Columns__right--full");
-                var hidden = false;
-                break;
-            case 1: // Show code blocks below (flowed)
-            case "checked":
-                toggleCodeBlockBtnBelow.classList.add("Button--active");
-                codeBlockView.classList.remove("Columns__right--float");
-                codeBlockView.classList.add("Columns__right--full");
-                var hidden = false;
-                break;
-            case 0: // Hidden code blocks
-            default:
-                toggleCodeBlockBtnHide.classList.add("Button--active");
-                codeBlockView.classList.remove("Columns__right--float");
-                codeBlockView.classList.add("Columns__right--full");
-                var hidden = true;
-                break;
-        }
-        for (var a = 0; a < codeBlocks.length; a++) {
-            if (hidden) {
-                codeBlocks[a].classList.add("Hidden");
-            } else {
-                codeBlocks[a].classList.remove("Hidden");
-            }
-        }
-        try {
-            localStorage.setItem("codeBlockState", +codeBlockState);
-        } catch (e) {
-            // local storage operations can fail with the file:// protocol
-        }
-    }
-    if (!floating) {
-        toggleCodeBlockBtnSet.addEventListener("change", function(ev) {setCodeBlockStyle(ev.target.checked);}, false);
-    } else {
-        toggleCodeBlockBtnHide.addEventListener("click", function() {setCodeBlockStyle(0);}, false);
-        toggleCodeBlockBtnBelow.addEventListener("click", function() {setCodeBlockStyle(1);}, false);
-        toggleCodeBlockBtnFloat.addEventListener("click", function() {setCodeBlockStyle(2);}, false);
-    }
-
-    try {
-        var codeBlockState = localStorage.getItem("codeBlockState");
-    } catch (e) {
-        // local storage operations can fail with the file:// protocol
-        var codeBlockState = null;
-    }
-    if (!codeBlockState) {
-        codeBlockState = floating ? 2 : 1;
-    } else {
-        codeBlockState = parseInt(codeBlockState);
-    }
-    if (!floating) {
-        codeBlockState = !!codeBlockState;
-    }
-
-    setCodeBlockStyle(codeBlockState);
-})();
-
-(function() {
-    function debounce(func, wait) {
-        var timeout;
-        return function() {
-            var context = this, args = arguments;
-            var later = function() {
-                timeout = null;
-            };
-
-            clearTimeout(timeout);
-            timeout = setTimeout(later, wait);
-       };
-    };
-
-    var navItems = document.querySelectorAll('.Nav__item.has-children i.Nav__arrow');
-
-    function _toggleSubMenu(ev) {
-        if (ev.preventDefault !== undefined) {
-            ev.preventDefault();
-        }
-
-        var parent = ev.target.parentNode.parentNode;
-        var subNav = parent.querySelector('ul.Nav');
-
-        if (ev.preventDefault !== undefined && parent.classList.contains('Nav__item--open')) {
-            // Temporarily set the height so the transition can work.
-            subNav.style.height = subNav.scrollHeight + 'px';
-            subNav.style.transitionDuration = Math.max(subNav.scrollHeight, 150) + 'ms';
-            subNav.style.height = '0px';
-            parent.classList.remove('Nav__item--open');
-        } else {
-            if (ev.preventDefault !== undefined) {
-                subNav.style.transitionDuration = Math.max(subNav.scrollHeight, 150) + 'ms';
-                // After the transition finishes set the height to auto so child
-                // menus can expand properly.
-                subNav.addEventListener('transitionend', _setHeightToAuto);
-                subNav.style.height = subNav.scrollHeight + 'px';
-                parent.classList.add('Nav__item--open');
-            } else {
-                // When running at page load the transitions don't need to fire and
-                // the classList doesn't need to be altered.
-                subNav.style.height = 'auto';
-            }
-        }
-    }
-
-    function _setHeightToAuto(ev) {
-        if (ev.target.style.height !== '0px') {
-            ev.target.style.height = 'auto';
-        }
-
-        ev.target.removeEventListener('transitionend', _setHeightToAuto);
-    }
-
-    // Go in reverse here because on page load the child nav items need to be
-    // opened first before their parents so the height on the parents can be
-    // calculated properly.
-    for (var i = navItems.length - 1, cur; i >= 0; i--) {
-        cur = navItems[i];
-        cur.addEventListener('click', _toggleSubMenu);
-
-        if (cur.parentNode.parentNode.classList.contains('Nav__item--open')) {
-            _toggleSubMenu({ target: cur });
-        }
-    }
-})();
-
-(function() {
-    var trigger = document.querySelector('.Collapsible__trigger');
-
-    if (!trigger) {
-        return;
-    }
-
-    content = document.querySelector('.Collapsible__content');
-
-    trigger.addEventListener('click', function(ev) {
-        if (content.classList.contains('Collapsible__content--open')) {
-            content.style.height = 0;
-            content.classList.remove('Collapsible__content--open');
-        } else {
-            content.style.transitionDuration = Math.max(content.scrollHeight, 150) + 'ms';
-            content.style.height = content.scrollHeight + 'px';
-            content.classList.add('Collapsible__content--open');
-        }
-    });
-})();

themes/daux/js/daux.min.js

@@ -0,0 +1,2 @@
+var e=document.querySelectorAll(".s-content pre"),t=document.querySelector(".CodeToggler");function a(t,a,o,l,n,s){for(var c=0;c<a.length;c++)a[c].classList.remove("Button--active");var i;switch(t){case!0:i=!1;break;case!1:i=!0;break;case 2:o.classList.add("Button--active"),s.classList.add("Columns__right--float"),s.classList.remove("Columns__right--full"),i=!1;break;case 1:case"checked":l.classList.add("Button--active"),s.classList.remove("Columns__right--float"),s.classList.add("Columns__right--full"),i=!1;break;case 0:default:n.classList.add("Button--active"),s.classList.remove("Columns__right--float"),s.classList.add("Columns__right--full"),i=!0}for(var r=0;r<e.length;r++)i?e[r].classList.add("Hidden"):e[r].classList.remove("Hidden");try{localStorage.setItem("codeBlockState",+t)}catch(e){}}t&&(e.length?function(){var e=t.querySelectorAll(".CodeToggler__button"),o=t.querySelector(".CodeToggler__button--main"),l=t.querySelector(".CodeToggler__button--hide"),n=t.querySelector(".CodeToggler__button--below"),s=t.querySelector(".CodeToggler__button--float"),c=document.querySelector(".Columns__right"),i=document.body.classList.contains("with-float"),r=function(t){a(t,e,s,n,l,c)};i?(l.addEventListener("click",(function(){r(0)}),!1),n.addEventListener("click",(function(){r(1)}),!1),s.addEventListener("click",(function(){r(2)}),!1)):o.addEventListener("change",(function(e){r(e.target.checked)}),!1);var d=null;try{d=localStorage.getItem("codeBlockState")}catch(e){}d=d?parseInt(d,10):i?2:1,i||(d=!!d),a(d,e,s,n,l,c)}():t.classList.add("Hidden"));var o=document.querySelector(".Collapsible__trigger");if(o){var l=document.querySelector(".Collapsible__content");o.addEventListener("click",(function(e){l.classList.contains("Collapsible__content--open")?(l.style.height=0,l.classList.remove("Collapsible__content--open")):(l.style.transitionDuration="".concat(Math.max(l.scrollHeight,150),"ms"),l.style.height="".concat(l.scrollHeight,"px"),l.classList.add("Collapsible__content--open"))}))}var n=document.querySelectorAll("pre > code:not(.hljs)");if(n.length){var s=document.getElementsByTagName("head")[0],c=document.createElement("script");c.type="text/javascript",c.async=!0,c.src="".concat(window.base_url,"_libraries/highlight.pack.js"),c.onload=function(e){[].forEach.call(n,window.hljs.highlightBlock)},s.appendChild(c)}function i(e){"0px"!==e.target.style.height&&(e.target.style.height="auto"),e.target.removeEventListener("transitionend",i)}function r(e){void 0!==e.preventDefault&&e.preventDefault();var t=e.target.parentNode.parentNode,a=t.querySelector("ul.Nav");void 0!==e.preventDefault&&t.classList.contains("Nav__item--open")?(a.style.height="".concat(a.scrollHeight,"px"),a.style.transitionDuration="".concat(Math.max(a.scrollHeight,150),"ms"),a.style.height="0px",t.classList.remove("Nav__item--open")):void 0===e.preventDefault?a.style.height="auto":(a.style.transitionDuration="".concat(Math.max(a.scrollHeight,150),"ms"),a.addEventListener("transitionend",i),a.style.height="".concat(a.scrollHeight,"px"),t.classList.add("Nav__item--open"))}for(var d,u=document.querySelectorAll(".Nav__item.has-children i.Nav__arrow"),h=u.length-1;h>=0;h--)(d=u[h]).addEventListener("click",r),d.parentNode.parentNode.classList.contains("Nav__item--open")&&r({target:d});
+//# sourceMappingURL=daux.min.js.map