primo commit

media/mod_menu/js/admin-menu.js

@@ -0,0 +1,116 @@
+/**
+ * @copyright  (C) 2019 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license    GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+document.querySelectorAll('ul.main-nav').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');
+
+  // Apply 2nd level collapse
+  sidebar.querySelectorAll('.collapse-level-1').forEach(first => {
+    first.querySelectorAll('.collapse-level-1').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');
+    document.querySelectorAll('.main-nav > li').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 currentUrl = window.location.href;
+  const mainNav = document.querySelector('ul.main-nav');
+
+  // Set active class
+  wrapper.querySelectorAll('a.no-dropdown, a.collapse-arrow, .menu-dashboard > a').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
+    }));
+  };
+  document.querySelectorAll('ul.main-nav li.parent > a').forEach(parent => {
+    parent.addEventListener('click', openToggle);
+    parent.addEventListener('keyup', openToggle);
+  });
+
+  // Menu close
+  document.querySelectorAll('ul.main-nav li.parent .close').forEach(subMenu => {
+    subMenu.addEventListener('click', () => {
+      mainNav.querySelectorAll('.open').forEach(menuChild => menuChild.classList.remove('open'));
+      mainNav.classList.remove('child-open');
+    });
+  });
+}

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

@@ -0,0 +1,4 @@
+/**
+ * @copyright  (C) 2019 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license    GNU General Public License version 2 or later; see LICENSE.txt
+ */document.querySelectorAll("ul.main-nav").forEach(o=>{new MetisMenu(o)});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 o=document.getElementById("menu-collapse");sidebar.querySelectorAll(".collapse-level-1").forEach(s=>{s.querySelectorAll(".collapse-level-1").forEach(e=>{e&&(e.classList.remove("collapse-level-1"),e.classList.add("collapse-level-2"))})}),o.addEventListener("click",s=>{s.preventDefault(),wrapper.classList.toggle("closed"),menuToggleIcon.classList.toggle("icon-toggle-on"),menuToggleIcon.classList.toggle("icon-toggle-off"),document.querySelectorAll(".main-nav > li").forEach(l=>l.classList.remove("open"));const e=document.querySelector(".child-open");e&&e.classList.remove("child-open"),window.dispatchEvent(new CustomEvent("joomla:menu-toggle",{detail:wrapper.classList.contains("closed")?"closed":"open",bubbles:!0,cancelable:!0}))});const a=window.location.href,t=document.querySelector("ul.main-nav");wrapper.querySelectorAll("a.no-dropdown, a.collapse-arrow, .menu-dashboard > a").forEach(s=>{if((!s.href.match(/index\.php$/)&&a.indexOf(s.href)===0||s.href.match(/index\.php$/)&&a.match(/index\.php$/))&&(s.setAttribute("aria-current","page"),s.classList.add("mm-active"),!s.parentNode.classList.contains("parent"))){const e=s.closest(".collapse-level-1"),l=s.closest(".collapse-level-2");e&&e.parentNode.classList.add("mm-active"),e&&e.classList.add("mm-show"),l&&l.parentNode.classList.add("mm-active"),l&&l.classList.add("mm-show")}});const c=({currentTarget:s})=>{let e=s.parentNode;e.tagName.toLowerCase()==="span"&&(e=s.parentNode.parentNode),e.classList.contains("open")?(t.classList.remove("child-open"),e.classList.remove("open")):([].slice.call(e.parentNode.children).forEach(n=>{n.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")),t.classList.add("child-open"),e.parentNode.classList.contains("main-nav")&&e.classList.add("open")),window.dispatchEvent(new CustomEvent("joomla:menu-toggle",{detail:"open",bubbles:!0,cancelable:!0}))};document.querySelectorAll("ul.main-nav li.parent > a").forEach(s=>{s.addEventListener("click",c),s.addEventListener("keyup",c)}),document.querySelectorAll("ul.main-nav li.parent .close").forEach(s=>{s.addEventListener("click",()=>{t.querySelectorAll(".open").forEach(e=>e.classList.remove("open")),t.classList.remove("child-open")})})}

media/mod_menu/js/menu.js

@@ -0,0 +1,142 @@
+/**
+ * @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'
+    };
+
+    // Set tabIndex to -1 so that top_level_childs can't receive focus until menu is open
+    nav.querySelectorAll(':scope > li').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) {
+        if (spanEl.parentNode.nodeName !== 'A') {
+          spanEl.tabIndex = '0';
+        }
+        spanEl.addEventListener('mouseover', topLevelMouseOver(topLevelEl, settings));
+        spanEl.addEventListener('mouseout', topLevelMouseOut(topLevelEl, settings));
+      }
+      topLevelEl.addEventListener('mouseover', ({
+        currentTarget
+      }) => {
+        const ulChild = currentTarget.querySelector('ul');
+        if (ulChild) {
+          ulChild.setAttribute('aria-hidden', 'false');
+          ulChild.classList.add(settings.menuHoverClass);
+        }
+      });
+      topLevelEl.addEventListener('mouseout', ({
+        currentTarget
+      }) => {
+        const ulChild = currentTarget.querySelector('ul');
+        if (ulChild) {
+          ulChild.setAttribute('aria-hidden', 'true');
+          ulChild.classList.remove(settings.menuHoverClass);
+        }
+      });
+      topLevelEl.addEventListener('focus', ({
+        currentTarget
+      }) => {
+        const ulChild = currentTarget.querySelector('ul');
+        if (ulChild) {
+          ulChild.setAttribute('aria-hidden', 'true');
+          ulChild.classList.add(settings.menuHoverClass);
+        }
+      });
+      topLevelEl.addEventListener('blur', ({
+        currentTarget
+      }) => {
+        const ulChild = currentTarget.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', () => {
+    document.querySelectorAll('.nav').forEach(nav => setupNavigation(nav));
+  });
+})();

media/mod_menu/js/menu.min.js

@@ -0,0 +1,4 @@
+/**
+ * @copyright  (C) 2019 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license    GNU General Public License version 2 or later; see LICENSE.txt
+ */(()=>{function f(n,r){const e=n.querySelector("ul");e&&(e.setAttribute("aria-hidden","false"),e.classList.add(r.menuHoverClass))}function h(n,r){const e=n.querySelector("ul");e&&(e.setAttribute("aria-hidden","true"),e.classList.remove(r.menuHoverClass))}function m(n){const r={menuHoverClass:"show-menu",dir:"ltr"};n.querySelectorAll(":scope > li").forEach(e=>{const o=e.querySelector("a");o&&(o.tabIndex="0",o.addEventListener("mouseover",f(e,r)),o.addEventListener("mouseout",h(e,r)));const u=e.querySelector("span");u&&(u.parentNode.nodeName!=="A"&&(u.tabIndex="0"),u.addEventListener("mouseover",f(e,r)),u.addEventListener("mouseout",h(e,r))),e.addEventListener("mouseover",({currentTarget:s})=>{const t=s.querySelector("ul");t&&(t.setAttribute("aria-hidden","false"),t.classList.add(r.menuHoverClass))}),e.addEventListener("mouseout",({currentTarget:s})=>{const t=s.querySelector("ul");t&&(t.setAttribute("aria-hidden","true"),t.classList.remove(r.menuHoverClass))}),e.addEventListener("focus",({currentTarget:s})=>{const t=s.querySelector("ul");t&&(t.setAttribute("aria-hidden","true"),t.classList.add(r.menuHoverClass))}),e.addEventListener("blur",({currentTarget:s})=>{const t=s.querySelector("ul");t&&(t.setAttribute("aria-hidden","false"),t.classList.remove(r.menuHoverClass))}),e.addEventListener("keydown",s=>{const t=s.key,i=s.target.parentElement,d=i.parentElement;let c=i.previousElementSibling,l=i.nextElementSibling;switch(c||(c=d.children[d.children.length-1]),l||([l]=d.children),t){case"ArrowLeft":s.preventDefault(),r.dir==="rtl"?l.children[0].focus():c.children[0].focus();break;case"ArrowRight":s.preventDefault(),r.dir==="rtl"?c.children[0].focus():l.children[0].focus();break;case"ArrowUp":{s.preventDefault();const a=i.parentElement.parentElement;a.nodeName==="LI"?a.children[0].focus():c.children[0].focus();break}case"ArrowDown":if(s.preventDefault(),i.classList.contains("parent")){const a=i.querySelector("ul");a!=null?a.querySelector("li").children[0].focus():l.children[0].focus()}else l.children[0].focus();break}})})}document.addEventListener("DOMContentLoaded",()=>{document.querySelectorAll(".nav").forEach(n=>m(n))})})();