Fine tune menus

libs/Format/HTML/Template.php

@@ -133,9 +133,9 @@ class Template
                 $icon = '<i class="Nav__arrow">&nbsp;</i>';
 
                 if (array_key_exists('href', $entry)) {
-                    $link = '<a href="' . $entry['href'] . '" class="folder">' . $icon . $entry['title'] . '</a>';
+                    $link = '<a href="' . $entry['href'] . '" class="Nav__item__link">' . $icon . $entry['title'] . '</a>';
                 } else {
-                    $link = '<a href="#" class="aj-nav folder">' . $icon . $entry['title'] . '</a>';
+                    $link = '<a href="#" class="Nav__item__link Nav__item__link--nopage">' . $icon . $entry['title'] . '</a>';
                 }
 
                 $link .= $this->renderNavigation($entry['children']);

libs/Format/HTMLFile/Book.php

@@ -64,9 +64,9 @@ class Book
         foreach ($entries as $entry) {
             if (array_key_exists('children', $entry)) {
                 if (array_key_exists('href', $entry)) {
-                    $link = '<a href="' . $entry['href'] . '" class="folder">' . $entry['title'] . '</a>';
+                    $link = '<a href="' . $entry['href'] . '" class="Nav__item__link--nopage">' . $entry['title'] . '</a>';
                 } else {
-                    $link = '<a href="#" class="aj-nav folder">' . $entry['title'] . '</a>';
+                    $link = '<a href="#" class="Nav__item__link Nav__item__link--nopage">' . $entry['title'] . '</a>';
                 }
 
                 $link .= $this->renderNavigation($entry['children']);

src/js/theme_daux/hamburger.js

@@ -10,10 +10,7 @@ if (trigger) {
             trigger.setAttribute("aria-expanded", "false");
         } else {
             trigger.setAttribute("aria-expanded", "true");
-            content.style.transitionDuration = `${Math.max(
+            content.style.transitionDuration = "150ms";
-                content.scrollHeight,
-                150
-            )}ms`;
             content.style.height = `${content.scrollHeight}px`;
             content.classList.add("Collapsible__content--open");
         }

src/js/theme_daux/menu.js

@@ -1,46 +1,57 @@
-function setHeightToAuto(ev) {
+/**
+ * After the transition finishes set the height to auto so child
+ * menus can expand properly.
+ * @param {Element} item
+ */
+function resetHeightAfterAnimation(item) {
+    const setHeightToAuto = ev => {
         if (ev.target.style.height !== "0px") {
             ev.target.style.height = "auto";
         }
 
         ev.target.removeEventListener("transitionend", setHeightToAuto);
+    };
+
+    item.addEventListener("transitionend", setHeightToAuto);
+}
+
+function findNavItem(start) {
+    let elem = start;
+    while ((elem = elem.parentNode) && elem.nodeType !== 9) {
+        if (elem.nodeType === 1 && elem.classList.contains("Nav__item")) {
+            return elem;
+        }
+    }
+
+    throw new Error("Could not find a NavItem...");
 }
 
 function toggleSubMenu(ev) {
-    if (ev.preventDefault !== undefined) {
+    const isEvent = ev.preventDefault !== undefined;
+
+    if (isEvent) {
         ev.preventDefault();
     }
 
-    const parent = ev.target.parentNode.parentNode;
+    const parent = findNavItem(ev.target);
     const subNav = parent.querySelector("ul.Nav");
 
-    if (
+    if (isEvent && parent.classList.contains("Nav__item--open")) {
-        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.style.transitionDuration = "150ms";
-            subNav.scrollHeight,
-            150
-        )}ms`;
         subNav.style.height = "0px";
         parent.classList.remove("Nav__item--open");
     } else {
-        if (ev.preventDefault === undefined) {
+        if (isEvent) {
+            subNav.style.transitionDuration = "150ms";
+            resetHeightAfterAnimation(subNav);
+            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";
-        } 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");
         }
     }
 }
@@ -52,11 +63,17 @@ const navItems = document.querySelectorAll(
 // 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--) {
+for (let i = navItems.length - 1, target; i >= 0; i--) {
-    cur = navItems[i];
+    target = navItems[i];
-    cur.addEventListener("click", toggleSubMenu);
+    target.addEventListener("click", toggleSubMenu);
 
-    if (cur.parentNode.parentNode.classList.contains("Nav__item--open")) {
+    if (target.parentNode.parentNode.classList.contains("Nav__item--open")) {
-        toggleSubMenu({ target: cur });
+        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);
+}

themes/daux/js/daux.min.js

@@ -1,2 +1,2 @@
-var e=document.querySelectorAll(".s-content pre"),t=document.querySelector(".CodeToggler"),a="daux_code_blocks_hidden";function n(t){for(var n=0;n<e.length;n++)e[n].classList.toggle("Hidden",t);try{localStorage.setItem(a,t)}catch(e){}}t&&(e.length?function(){var e=t.querySelector(".CodeToggler__button--main");e.addEventListener("change",(function(e){n(!e.target.checked)}),!1);var o=!1;try{"false"===(o=localStorage.getItem(a))?o=!1:"true"===o&&(o=!0),o&&(n(!!o),e.checked=!o)}catch(e){}}():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"),o.setAttribute("aria-expanded","false")):(o.setAttribute("aria-expanded","true"),l.style.transitionDuration="".concat(Math.max(l.scrollHeight,150),"ms"),l.style.height="".concat(l.scrollHeight,"px"),l.classList.add("Collapsible__content--open"))}))}var r=document.querySelectorAll("pre > code:not(.hljs)");if(r.length){var i=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(r,window.hljs.highlightBlock)},i.appendChild(c)}function s(e){"0px"!==e.target.style.height&&(e.target.style.height="auto"),e.target.removeEventListener("transitionend",s)}function d(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",s),a.style.height="".concat(a.scrollHeight,"px"),t.classList.add("Nav__item--open"))}for(var h,g=document.querySelectorAll(".Nav__item.has-children i.Nav__arrow"),u=g.length-1;u>=0;u--)(h=g[u]).addEventListener("click",d),h.parentNode.parentNode.classList.contains("Nav__item--open")&&d({target:h});
+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,"_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 _}}
 //# sourceMappingURL=daux.min.js.map