Fine tune menus
Cette révision appartient à :
Stéphane Goetz
Parent
b0339a32b8
révision
d02b46e883
@ -133,9 +133,9 @@ class Template
|
||||
$icon = '<i class="Nav__arrow"> </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']);
|
||||
|
||||
@ -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']);
|
||||
|
||||
@ -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");
|
||||
}
|
||||
|
||||
@ -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
externe
2
themes/daux/js/daux.min.js
externe
@ -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
|
||||
|
||||
Diff de fichier supprimé car une ou plusieurs lignes sont trop longues
Chargement…
Référencer dans un nouveau ticket
Block a user