first commit

media/mod_menu/js/admin-menu.js

@@ -0,0 +1,127 @@
+/**
+ * @copyright  (C) 2019 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license    GNU General Public License version 2 or later; see LICENSE.txt
+ */
+const allMenus = document.querySelectorAll('ul.main-nav');
+allMenus.forEach(menu => {
+  // eslint-disable-next-line no-new, no-undef
+  new MetisMenu(menu);
+});
+const wrapper = document.getElementById('wrapper');
+const sidebar = document.getElementById('sidebar-wrapper');
+const menuToggleIcon = document.getElementById('menu-collapse-icon');
+
+// If the sidebar doesn't exist, for example, on edit views, then remove the "closed" class
+if (!sidebar) {
+  wrapper.classList.remove('closed');
+}
+if (sidebar && !sidebar.getAttribute('data-hidden')) {
+  // Sidebar
+  const menuToggle = document.getElementById('menu-collapse');
+  const firsts = [].slice.call(sidebar.querySelectorAll('.collapse-level-1'));
+
+  // Apply 2nd level collapse
+  firsts.forEach(first => {
+    const seconds = [].slice.call(first.querySelectorAll('.collapse-level-1'));
+    seconds.forEach(second => {
+      if (second) {
+        second.classList.remove('collapse-level-1');
+        second.classList.add('collapse-level-2');
+      }
+    });
+  });
+
+  // Toggle menu
+  menuToggle.addEventListener('click', event => {
+    event.preventDefault();
+    wrapper.classList.toggle('closed');
+    menuToggleIcon.classList.toggle('icon-toggle-on');
+    menuToggleIcon.classList.toggle('icon-toggle-off');
+    const listItems = [].slice.call(document.querySelectorAll('.main-nav > li'));
+    listItems.forEach(item => {
+      item.classList.remove('open');
+    });
+    const elem = document.querySelector('.child-open');
+    if (elem) {
+      elem.classList.remove('child-open');
+    }
+    window.dispatchEvent(new CustomEvent('joomla:menu-toggle', {
+      detail: wrapper.classList.contains('closed') ? 'closed' : 'open',
+      bubbles: true,
+      cancelable: true
+    }));
+  });
+
+  // Sidebar Nav
+  const allLinks = wrapper.querySelectorAll('a.no-dropdown, a.collapse-arrow, .menu-dashboard > a');
+  const currentUrl = window.location.href;
+  const mainNav = document.querySelector('ul.main-nav');
+  const menuParents = [].slice.call(mainNav.querySelectorAll('li.parent > a'));
+  const subMenusClose = [].slice.call(mainNav.querySelectorAll('li.parent .close'));
+
+  // Set active class
+  allLinks.forEach(link => {
+    if (!link.href.match(/index\.php$/) && currentUrl.indexOf(link.href) === 0 || link.href.match(/index\.php$/) && currentUrl.match(/index\.php$/)) {
+      link.setAttribute('aria-current', 'page');
+      link.classList.add('mm-active');
+
+      // Auto Expand Levels
+      if (!link.parentNode.classList.contains('parent')) {
+        const firstLevel = link.closest('.collapse-level-1');
+        const secondLevel = link.closest('.collapse-level-2');
+        if (firstLevel) firstLevel.parentNode.classList.add('mm-active');
+        if (firstLevel) firstLevel.classList.add('mm-show');
+        if (secondLevel) secondLevel.parentNode.classList.add('mm-active');
+        if (secondLevel) secondLevel.classList.add('mm-show');
+      }
+    }
+  });
+
+  // Child open toggle
+  const openToggle = ({
+    currentTarget
+  }) => {
+    let menuItem = currentTarget.parentNode;
+    if (menuItem.tagName.toLowerCase() === 'span') {
+      menuItem = currentTarget.parentNode.parentNode;
+    }
+    if (menuItem.classList.contains('open')) {
+      mainNav.classList.remove('child-open');
+      menuItem.classList.remove('open');
+    } else {
+      const siblings = [].slice.call(menuItem.parentNode.children);
+      siblings.forEach(sibling => {
+        sibling.classList.remove('open');
+      });
+      wrapper.classList.remove('closed');
+      if (menuToggleIcon.classList.contains('icon-toggle-off')) {
+        menuToggleIcon.classList.toggle('icon-toggle-off');
+        menuToggleIcon.classList.toggle('icon-toggle-on');
+      }
+      mainNav.classList.add('child-open');
+      if (menuItem.parentNode.classList.contains('main-nav')) {
+        menuItem.classList.add('open');
+      }
+    }
+    window.dispatchEvent(new CustomEvent('joomla:menu-toggle', {
+      detail: 'open',
+      bubbles: true,
+      cancelable: true
+    }));
+  };
+  menuParents.forEach(parent => {
+    parent.addEventListener('click', openToggle);
+    parent.addEventListener('keyup', openToggle);
+  });
+
+  // Menu close
+  subMenusClose.forEach(subMenu => {
+    subMenu.addEventListener('click', () => {
+      const menuChildsOpen = [].slice.call(mainNav.querySelectorAll('.open'));
+      menuChildsOpen.forEach(menuChild => {
+        menuChild.classList.remove('open');
+      });
+      mainNav.classList.remove('child-open');
+    });
+  });
+}

media/mod_menu/js/admin-menu.min.js

@@ -0,0 +1 @@
+const allMenus=document.querySelectorAll("ul.main-nav");allMenus.forEach((e=>{new MetisMenu(e)}));const wrapper=document.getElementById("wrapper"),sidebar=document.getElementById("sidebar-wrapper"),menuToggleIcon=document.getElementById("menu-collapse-icon");if(sidebar||wrapper.classList.remove("closed"),sidebar&&!sidebar.getAttribute("data-hidden")){const e=document.getElementById("menu-collapse");[].slice.call(sidebar.querySelectorAll(".collapse-level-1")).forEach((e=>{[].slice.call(e.querySelectorAll(".collapse-level-1")).forEach((e=>{e&&(e.classList.remove("collapse-level-1"),e.classList.add("collapse-level-2"))}))})),e.addEventListener("click",(e=>{e.preventDefault(),wrapper.classList.toggle("closed"),menuToggleIcon.classList.toggle("icon-toggle-on"),menuToggleIcon.classList.toggle("icon-toggle-off");[].slice.call(document.querySelectorAll(".main-nav > li")).forEach((e=>{e.classList.remove("open")}));const l=document.querySelector(".child-open");l&&l.classList.remove("child-open"),window.dispatchEvent(new CustomEvent("joomla:menu-toggle",{detail:wrapper.classList.contains("closed")?"closed":"open",bubbles:!0,cancelable:!0}))}));const l=wrapper.querySelectorAll("a.no-dropdown, a.collapse-arrow, .menu-dashboard > a"),s=window.location.href,o=document.querySelector("ul.main-nav"),a=[].slice.call(o.querySelectorAll("li.parent > a")),c=[].slice.call(o.querySelectorAll("li.parent .close"));l.forEach((e=>{if((!e.href.match(/index\.php$/)&&0===s.indexOf(e.href)||e.href.match(/index\.php$/)&&s.match(/index\.php$/))&&(e.setAttribute("aria-current","page"),e.classList.add("mm-active"),!e.parentNode.classList.contains("parent"))){const l=e.closest(".collapse-level-1"),s=e.closest(".collapse-level-2");l&&l.parentNode.classList.add("mm-active"),l&&l.classList.add("mm-show"),s&&s.parentNode.classList.add("mm-active"),s&&s.classList.add("mm-show")}}));const t=({currentTarget:e})=>{let l=e.parentNode;if("span"===l.tagName.toLowerCase()&&(l=e.parentNode.parentNode),l.classList.contains("open"))o.classList.remove("child-open"),l.classList.remove("open");else{[].slice.call(l.parentNode.children).forEach((e=>{e.classList.remove("open")})),wrapper.classList.remove("closed"),menuToggleIcon.classList.contains("icon-toggle-off")&&(menuToggleIcon.classList.toggle("icon-toggle-off"),menuToggleIcon.classList.toggle("icon-toggle-on")),o.classList.add("child-open"),l.parentNode.classList.contains("main-nav")&&l.classList.add("open")}window.dispatchEvent(new CustomEvent("joomla:menu-toggle",{detail:"open",bubbles:!0,cancelable:!0}))};a.forEach((e=>{e.addEventListener("click",t),e.addEventListener("keyup",t)})),c.forEach((e=>{e.addEventListener("click",(()=>{[].slice.call(o.querySelectorAll(".open")).forEach((e=>{e.classList.remove("open")})),o.classList.remove("child-open")}))}))}

media/mod_menu/js/menu.js

@@ -0,0 +1,144 @@
+/**
+ * @copyright  (C) 2019 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license    GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+(() => {
+
+  function topLevelMouseOver(el, settings) {
+    const ulChild = el.querySelector('ul');
+    if (ulChild) {
+      ulChild.setAttribute('aria-hidden', 'false');
+      ulChild.classList.add(settings.menuHoverClass);
+    }
+  }
+  function topLevelMouseOut(el, settings) {
+    const ulChild = el.querySelector('ul');
+    if (ulChild) {
+      ulChild.setAttribute('aria-hidden', 'true');
+      ulChild.classList.remove(settings.menuHoverClass);
+    }
+  }
+  function setupNavigation(nav) {
+    const settings = {
+      menuHoverClass: 'show-menu',
+      dir: 'ltr'
+    };
+    const topLevelChilds = nav.querySelectorAll(':scope > li');
+
+    // Set tabIndex to -1 so that top_level_childs can't receive focus until menu is open
+    topLevelChilds.forEach(topLevelEl => {
+      const linkEl = topLevelEl.querySelector('a');
+      if (linkEl) {
+        linkEl.tabIndex = '0';
+        linkEl.addEventListener('mouseover', topLevelMouseOver(topLevelEl, settings));
+        linkEl.addEventListener('mouseout', topLevelMouseOut(topLevelEl, settings));
+      }
+      const spanEl = topLevelEl.querySelector('span');
+      if (spanEl) {
+        spanEl.tabIndex = '0';
+        spanEl.addEventListener('mouseover', topLevelMouseOver(topLevelEl, settings));
+        spanEl.addEventListener('mouseout', topLevelMouseOut(topLevelEl, settings));
+      }
+      topLevelEl.addEventListener('mouseover', ({
+        target
+      }) => {
+        const ulChild = target.querySelector('ul');
+        if (ulChild) {
+          ulChild.setAttribute('aria-hidden', 'false');
+          ulChild.classList.add(settings.menuHoverClass);
+        }
+      });
+      topLevelEl.addEventListener('mouseout', ({
+        target
+      }) => {
+        const ulChild = target.querySelector('ul');
+        if (ulChild) {
+          ulChild.setAttribute('aria-hidden', 'true');
+          ulChild.classList.remove(settings.menuHoverClass);
+        }
+      });
+      topLevelEl.addEventListener('focus', ({
+        target
+      }) => {
+        const ulChild = target.querySelector('ul');
+        if (ulChild) {
+          ulChild.setAttribute('aria-hidden', 'true');
+          ulChild.classList.add(settings.menuHoverClass);
+        }
+      });
+      topLevelEl.addEventListener('blur', ({
+        target
+      }) => {
+        const ulChild = target.querySelector('ul');
+        if (ulChild) {
+          ulChild.setAttribute('aria-hidden', 'false');
+          ulChild.classList.remove(settings.menuHoverClass);
+        }
+      });
+      topLevelEl.addEventListener('keydown', event => {
+        const keyName = event.key;
+        const curEl = event.target;
+        const curLiEl = curEl.parentElement;
+        const curUlEl = curLiEl.parentElement;
+        let prevLiEl = curLiEl.previousElementSibling;
+        let nextLiEl = curLiEl.nextElementSibling;
+        if (!prevLiEl) {
+          prevLiEl = curUlEl.children[curUlEl.children.length - 1];
+        }
+        if (!nextLiEl) {
+          [nextLiEl] = curUlEl.children;
+        }
+        switch (keyName) {
+          case 'ArrowLeft':
+            event.preventDefault();
+            if (settings.dir === 'rtl') {
+              nextLiEl.children[0].focus();
+            } else {
+              prevLiEl.children[0].focus();
+            }
+            break;
+          case 'ArrowRight':
+            event.preventDefault();
+            if (settings.dir === 'rtl') {
+              prevLiEl.children[0].focus();
+            } else {
+              nextLiEl.children[0].focus();
+            }
+            break;
+          case 'ArrowUp':
+            {
+              event.preventDefault();
+              const parent = curLiEl.parentElement.parentElement;
+              if (parent.nodeName === 'LI') {
+                parent.children[0].focus();
+              } else {
+                prevLiEl.children[0].focus();
+              }
+              break;
+            }
+          case 'ArrowDown':
+            event.preventDefault();
+            if (curLiEl.classList.contains('parent')) {
+              const child = curLiEl.querySelector('ul');
+              if (child != null) {
+                const childLi = child.querySelector('li');
+                childLi.children[0].focus();
+              } else {
+                nextLiEl.children[0].focus();
+              }
+            } else {
+              nextLiEl.children[0].focus();
+            }
+            break;
+        }
+      });
+    });
+  }
+  document.addEventListener('DOMContentLoaded', () => {
+    const navs = document.querySelectorAll('.nav');
+    [].forEach.call(navs, nav => {
+      setupNavigation(nav);
+    });
+  });
+})();

media/mod_menu/js/menu.min.js

@@ -0,0 +1 @@
+(()=>{function e(e,t){const r=e.querySelector("ul");r&&(r.setAttribute("aria-hidden","false"),r.classList.add(t.menuHoverClass))}function t(e,t){const r=e.querySelector("ul");r&&(r.setAttribute("aria-hidden","true"),r.classList.remove(t.menuHoverClass))}document.addEventListener("DOMContentLoaded",(()=>{const r=document.querySelectorAll(".nav");[].forEach.call(r,(r=>{!function(r){const n={menuHoverClass:"show-menu",dir:"ltr"};r.querySelectorAll(":scope > li").forEach((r=>{const s=r.querySelector("a");s&&(s.tabIndex="0",s.addEventListener("mouseover",e(r,n)),s.addEventListener("mouseout",t(r,n)));const l=r.querySelector("span");l&&(l.tabIndex="0",l.addEventListener("mouseover",e(r,n)),l.addEventListener("mouseout",t(r,n))),r.addEventListener("mouseover",(({target:e})=>{const t=e.querySelector("ul");t&&(t.setAttribute("aria-hidden","false"),t.classList.add(n.menuHoverClass))})),r.addEventListener("mouseout",(({target:e})=>{const t=e.querySelector("ul");t&&(t.setAttribute("aria-hidden","true"),t.classList.remove(n.menuHoverClass))})),r.addEventListener("focus",(({target:e})=>{const t=e.querySelector("ul");t&&(t.setAttribute("aria-hidden","true"),t.classList.add(n.menuHoverClass))})),r.addEventListener("blur",(({target:e})=>{const t=e.querySelector("ul");t&&(t.setAttribute("aria-hidden","false"),t.classList.remove(n.menuHoverClass))})),r.addEventListener("keydown",(e=>{const t=e.key,r=e.target.parentElement,s=r.parentElement;let l=r.previousElementSibling,o=r.nextElementSibling;switch(l||(l=s.children[s.children.length-1]),o||([o]=s.children),t){case"ArrowLeft":e.preventDefault(),"rtl"===n.dir?o.children[0].focus():l.children[0].focus();break;case"ArrowRight":e.preventDefault(),"rtl"===n.dir?l.children[0].focus():o.children[0].focus();break;case"ArrowUp":{e.preventDefault();const t=r.parentElement.parentElement;"LI"===t.nodeName?t.children[0].focus():l.children[0].focus();break}case"ArrowDown":if(e.preventDefault(),r.classList.contains("parent")){const e=r.querySelector("ul");null!=e?e.querySelector("li").children[0].focus():o.children[0].focus()}else o.children[0].focus()}}))}))}(r)}))}))})();