Update dependencies, fix page readiness issues (#190)

src/css/theme_daux/_components.scss

@@ -99,7 +99,8 @@ Components
 }
 
 /* stylelint-disable-next-line selector-class-pattern */
-.no-js .CodeToggler {
+.no-js .CodeToggler,
+.CodeToggler--hidden {
     display: none;
 }
 
@@ -477,7 +478,3 @@ ul.TableOfContents {
         border-color: var(--checkbox-disabled-tick-color);
     }
 }
-
-.Hidden {
-    display: none;
-}

src/js/theme_daux/code_toggle.js

@@ -1,11 +1,10 @@
-const codeBlocks = document.querySelectorAll(".s-content pre");
-const toggleCodeSection = document.querySelector(".CodeToggler");
+import { ready } from "./utils";
 
 const LOCAL_STORAGE_KEY = "daux_code_blocks_hidden";
 
-function setCodeBlockStyle(hidden) {
+function setCodeBlockStyle(codeBlocks, hidden) {
     for (let a = 0; a < codeBlocks.length; a++) {
-        codeBlocks[a].classList.toggle("Hidden", hidden);
+        codeBlocks[a].classList.toggle("CodeToggler--hidden", hidden);
     }
     try {
         localStorage.setItem(LOCAL_STORAGE_KEY, hidden);
@@ -14,7 +13,7 @@ function setCodeBlockStyle(hidden) {
     }
 }
 
-function enableToggler() {
+function enableToggler(toggleCodeSection, codeBlocks) {
     const toggleCodeBlockBtnSet = toggleCodeSection.querySelector(
         ".CodeToggler__button--main"
     ); // available when floating is disabled
@@ -22,7 +21,7 @@ function enableToggler() {
     toggleCodeBlockBtnSet.addEventListener(
         "change",
         ev => {
-            setCodeBlockStyle(!ev.target.checked);
+            setCodeBlockStyle(codeBlocks, !ev.target.checked);
         },
         false
     );
@@ -38,7 +37,7 @@ function enableToggler() {
         }
 
         if (hidden) {
-            setCodeBlockStyle(!!hidden);
+            setCodeBlockStyle(codeBlocks, !!hidden);
             toggleCodeBlockBtnSet.checked = !hidden;
         }
     } catch (e) {
@@ -46,10 +45,17 @@ function enableToggler() {
     }
 }
 
-if (toggleCodeSection) {
-    if (codeBlocks.length) {
-        enableToggler();
-    } else {
-        toggleCodeSection.classList.add("Hidden");
+ready(() => {
+    const codeBlocks = document.querySelectorAll(".s-content pre");
+    const toggleCodeSection = document.querySelector(".CodeToggler");
+
+    if (!toggleCodeSection) {
+        return;
     }
-}
+
+    if (codeBlocks.length) {
+        enableToggler(toggleCodeSection, codeBlocks);
+    } else {
+        toggleCodeSection.classList.add("CodeToggler--hidden");
+    }
+});

src/js/theme_daux/hamburger.js

@@ -1,18 +1,22 @@
-const trigger = document.querySelector(".Collapsible__trigger");
+import { ready } from "./utils";
 
-if (trigger) {
-    const content = document.querySelector(".Collapsible__content");
+ready(() => {
+    const trigger = document.querySelector(".Collapsible__trigger");
 
-    trigger.addEventListener("click", ev => {
-        if (content.classList.contains("Collapsible__content--open")) {
-            content.style.height = 0;
-            content.classList.remove("Collapsible__content--open");
-            trigger.setAttribute("aria-expanded", "false");
-        } else {
-            trigger.setAttribute("aria-expanded", "true");
-            content.style.transitionDuration = "150ms";
-            content.style.height = `${content.scrollHeight}px`;
-            content.classList.add("Collapsible__content--open");
-        }
-    });
-}
+    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");
+                trigger.setAttribute("aria-expanded", "false");
+            } else {
+                trigger.setAttribute("aria-expanded", "true");
+                content.style.transitionDuration = "150ms";
+                content.style.height = `${content.scrollHeight}px`;
+                content.classList.add("Collapsible__content--open");
+            }
+        });
+    }
+});

src/js/theme_daux/highlight.js

@@ -1,12 +1,16 @@
-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}daux_libraries/highlight.pack.js`;
-    script.onload = function(src) {
-        [].forEach.call(codeBlocks, window.hljs.highlightBlock);
-    };
-    head.appendChild(script);
-}
+import { ready } from "./utils";
+
+ready(() => {
+    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}daux_libraries/highlight.pack.js`;
+        script.onload = function(src) {
+            [].forEach.call(codeBlocks, window.hljs.highlightBlock);
+        };
+        head.appendChild(script);
+    }
+});

src/js/theme_daux/menu.js

@@ -1,3 +1,5 @@
+import { ready } from "./utils";
+
 /**
  * After the transition finishes set the height to auto so child
  * menus can expand properly.
@@ -56,24 +58,28 @@ function toggleSubMenu(ev) {
     }
 }
 
-const navItems = document.querySelectorAll(
-    ".Nav__item.has-children i.Nav__arrow"
-);
+ready(() => {
+    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, target; i >= 0; i--) {
-    target = navItems[i];
-    target.addEventListener("click", toggleSubMenu);
+    // 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, target; i >= 0; i--) {
+        target = navItems[i];
+        target.addEventListener("click", toggleSubMenu);
 
-    if (target.parentNode.parentNode.classList.contains("Nav__item--open")) {
-        toggleSubMenu({ target });
+        if (
+            target.parentNode.parentNode.classList.contains("Nav__item--open")
+        ) {
+            toggleSubMenu({ target });
+        }
     }
-}
 
-// Some navigations just have sub-pages without having a page by themselves
-const ajNav = document.querySelectorAll(".Nav__item__link--nopage");
-for (const navItem of ajNav) {
-    navItem.addEventListener("click", toggleSubMenu);
-}
+    // Some navigations just have sub-pages without having a page by themselves
+    const ajNav = document.querySelectorAll(".Nav__item__link--nopage");
+    for (const navItem of ajNav) {
+        navItem.addEventListener("click", toggleSubMenu);
+    }
+});

src/js/theme_daux/utils.js

@@ -0,0 +1,9 @@
+/* eslint-disable @swissquote/swissquote/import/prefer-default-export */
+
+export function ready(fn) {
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", fn);
+    } else {
+        fn();
+    }
+}

themes/daux/js/daux.min.js

@@ -1,2 +1,2 @@
-var e=document.querySelectorAll(".s-content pre"),t=document.querySelector(".CodeToggler"),n="daux_code_blocks_hidden";function a(t){for(var a=0;a<e.length;a++)e[a].classList.toggle("Hidden",t);try{localStorage.setItem(n,t)}catch(e){}}t&&(e.length?function(){var e=t.querySelector(".CodeToggler__button--main");e.addEventListener("change",(function(e){a(!e.target.checked)}),!1);var r=!1;try{"false"===(r=localStorage.getItem(n))?r=!1:"true"===r&&(r=!0),r&&(a(!!r),e.checked=!r)}catch(e){}}():t.classList.add("Hidden"));var r=document.querySelector(".Collapsible__trigger");if(r){var o=document.querySelector(".Collapsible__content");r.addEventListener("click",(function(e){o.classList.contains("Collapsible__content--open")?(o.style.height=0,o.classList.remove("Collapsible__content--open"),r.setAttribute("aria-expanded","false")):(r.setAttribute("aria-expanded","true"),o.style.transitionDuration="150ms",o.style.height="".concat(o.scrollHeight,"px"),o.classList.add("Collapsible__content--open"))}))}var l=document.querySelectorAll("pre > code:not(.hljs)");if(l.length){var i=document.getElementsByTagName("head")[0],c=document.createElement("script");c.type="text/javascript",c.async=!0,c.src="".concat(window.base_url,"daux_libraries/highlight.pack.js"),c.onload=function(e){[].forEach.call(l,window.hljs.highlightBlock)},i.appendChild(c)}function s(e){var t=void 0!==e.preventDefault;t&&e.preventDefault();var n=function(e){for(var t=e;(t=t.parentNode)&&9!==t.nodeType;)if(1===t.nodeType&&t.classList.contains("Nav__item"))return t;throw new Error("Could not find a NavItem...")}(e.target),a=n.querySelector("ul.Nav");t&&n.classList.contains("Nav__item--open")?(a.style.height="".concat(a.scrollHeight,"px"),a.style.transitionDuration="150ms",a.style.height="0px",n.classList.remove("Nav__item--open")):t?(a.style.transitionDuration="150ms",a.addEventListener("transitionend",(function e(t){"0px"!==t.target.style.height&&(t.target.style.height="auto"),t.target.removeEventListener("transitionend",e)})),a.style.height="".concat(a.scrollHeight,"px"),n.classList.add("Nav__item--open")):a.style.height="auto"}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",s),d.parentNode.parentNode.classList.contains("Nav__item--open")&&s({target:d});var g=document.querySelectorAll(".Nav__item__link--nopage"),v=!0,p=!1,_=void 0;try{for(var y,m=g[Symbol.iterator]();!(v=(y=m.next()).done);v=!0){y.value.addEventListener("click",s)}}catch(e){p=!0,_=e}finally{try{v||null==m.return||m.return()}finally{if(p)throw _}}
+function e(e){"loading"===document.readyState?document.addEventListener("DOMContentLoaded",e):e()}function t(e,t){for(var n=0;n<e.length;n++)e[n].classList.toggle("CodeToggler--hidden",t);try{localStorage.setItem("daux_code_blocks_hidden",t)}catch(e){}}function n(e){var t=void 0!==e.preventDefault;t&&e.preventDefault();var n=function(e){for(var t=e;(t=t.parentNode)&&9!==t.nodeType;)if(1===t.nodeType&&t.classList.contains("Nav__item"))return t;throw new Error("Could not find a NavItem...")}(e.target),o=n.querySelector("ul.Nav");t&&n.classList.contains("Nav__item--open")?(o.style.height="".concat(o.scrollHeight,"px"),o.style.transitionDuration="150ms",o.style.height="0px",n.classList.remove("Nav__item--open")):t?(o.style.transitionDuration="150ms",o.addEventListener("transitionend",(function e(t){"0px"!==t.target.style.height&&(t.target.style.height="auto"),t.target.removeEventListener("transitionend",e)})),o.style.height="".concat(o.scrollHeight,"px"),n.classList.add("Nav__item--open")):o.style.height="auto"}e((function(){var e=document.querySelectorAll(".s-content pre"),n=document.querySelector(".CodeToggler");n&&(e.length?function(e,n){var o=e.querySelector(".CodeToggler__button--main");o.addEventListener("change",(function(e){t(n,!e.target.checked)}),!1);var a=!1;try{"false"===(a=localStorage.getItem("daux_code_blocks_hidden"))?a=!1:"true"===a&&(a=!0),a&&(t(n,!!a),o.checked=!a)}catch(e){}}(n,e):n.classList.add("CodeToggler--hidden"))})),e((function(){var e=document.querySelector(".Collapsible__trigger");if(e){var t=document.querySelector(".Collapsible__content");e.addEventListener("click",(function(n){t.classList.contains("Collapsible__content--open")?(t.style.height=0,t.classList.remove("Collapsible__content--open"),e.setAttribute("aria-expanded","false")):(e.setAttribute("aria-expanded","true"),t.style.transitionDuration="150ms",t.style.height="".concat(t.scrollHeight,"px"),t.classList.add("Collapsible__content--open"))}))}})),e((function(){var e=document.querySelectorAll("pre > code:not(.hljs)");if(e.length){var t=document.getElementsByTagName("head")[0],n=document.createElement("script");n.type="text/javascript",n.async=!0,n.src="".concat(window.base_url,"daux_libraries/highlight.pack.js"),n.onload=function(t){[].forEach.call(e,window.hljs.highlightBlock)},t.appendChild(n)}})),e((function(){for(var e,t=document.querySelectorAll(".Nav__item.has-children i.Nav__arrow"),o=t.length-1;o>=0;o--)(e=t[o]).addEventListener("click",n),e.parentNode.parentNode.classList.contains("Nav__item--open")&&n({target:e});var a=document.querySelectorAll(".Nav__item__link--nopage"),r=!0,i=!1,l=void 0;try{for(var c,s=a[Symbol.iterator]();!(r=(c=s.next()).done);r=!0){c.value.addEventListener("click",n)}}catch(e){i=!0,l=e}finally{try{r||null==s.return||s.return()}finally{if(i)throw l}}}));
 //# sourceMappingURL=daux.min.js.map