D3Public
/
daux.io
8
0
Fork 0
Code Pull Requests Releases Activity

Fine tune menus

This commit is contained in:
Stéphane Goetz 2019-09-22 21:42:03 +02:00
parent b0339a32b8
commit d02b46e883
6 changed files with 54 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
libs/Format/HTML/Template.php
View File

@ -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']);

4
libs/Format/HTMLFile/Book.php
View File

@ -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']);

5
src/js/theme_daux/hamburger.js
View File

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

77
src/js/theme_daux/menu.js
View File

@ -1,46 +1,57 @@
function setHeightToAuto(ev) {
if (ev.target.style.height !== "0px") {
ev.target.style.height = "auto";
/**
* 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;
}
}
ev.target.removeEventListener("transitionend", setHeightToAuto);
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 (
ev.preventDefault !== undefined &&
parent.classList.contains("Nav__item--open")
) {
if (isEvent && 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.transitionDuration = "150ms";
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--) {
cur = navItems[i];
cur.addEventListener("click", toggleSubMenu);
for (let i = navItems.length - 1, target; i >= 0; i--) {
target = navItems[i];
target.addEventListener("click", toggleSubMenu);
if (cur.parentNode.parentNode.classList.contains("Nav__item--open")) {
toggleSubMenu({ target: cur });
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);
}

2
themes/daux/js/daux.min.js vendored
View File

@ -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

2
themes/daux/js/daux.min.js.map
View File

File diff suppressed because one or more lines are too long