[Summary view] [Print] [Text view]

   1  /**
   2   * @copyright  (C) 2019 Open Source Matters, Inc. <https://www.joomla.org>
   3   * @license    GNU General Public License version 2 or later; see LICENSE.txt
   4   */
   5  const allMenus = document.querySelectorAll('ul.main-nav');
   6  allMenus.forEach(menu => {
   7    // eslint-disable-next-line no-new, no-undef
   8    new MetisMenu(menu);
   9  });
  10  const wrapper = document.getElementById('wrapper');
  11  const sidebar = document.getElementById('sidebar-wrapper');
  12  const menuToggleIcon = document.getElementById('menu-collapse-icon'); // If the sidebar doesn't exist, for example, on edit views, then remove the "closed" class
  13  
  14  if (!sidebar) {
  15    wrapper.classList.remove('closed');
  16  }
  17  
  18  if (sidebar && !sidebar.getAttribute('data-hidden')) {
  19    // Sidebar
  20    const menuToggle = document.getElementById('menu-collapse');
  21    const firsts = [].slice.call(sidebar.querySelectorAll('.collapse-level-1')); // Apply 2nd level collapse
  22  
  23    firsts.forEach(first => {
  24      const seconds = [].slice.call(first.querySelectorAll('.collapse-level-1'));
  25      seconds.forEach(second => {
  26        if (second) {
  27          second.classList.remove('collapse-level-1');
  28          second.classList.add('collapse-level-2');
  29        }
  30      });
  31    }); // Toggle menu
  32  
  33    menuToggle.addEventListener('click', event => {
  34      event.preventDefault();
  35      wrapper.classList.toggle('closed');
  36      menuToggleIcon.classList.toggle('icon-toggle-on');
  37      menuToggleIcon.classList.toggle('icon-toggle-off');
  38      const listItems = [].slice.call(document.querySelectorAll('.main-nav > li'));
  39      listItems.forEach(item => {
  40        item.classList.remove('open');
  41      });
  42      const elem = document.querySelector('.child-open');
  43  
  44      if (elem) {
  45        elem.classList.remove('child-open');
  46      }
  47  
  48      window.dispatchEvent(new CustomEvent('joomla:menu-toggle', {
  49        detail: wrapper.classList.contains('closed') ? 'closed' : 'open',
  50        bubbles: true,
  51        cancelable: true
  52      }));
  53    }); // Sidebar Nav
  54  
  55    const allLinks = wrapper.querySelectorAll('a.no-dropdown, a.collapse-arrow, .menu-dashboard > a');
  56    const currentUrl = window.location.href;
  57    const mainNav = document.querySelector('ul.main-nav');
  58    const menuParents = [].slice.call(mainNav.querySelectorAll('li.parent > a'));
  59    const subMenusClose = [].slice.call(mainNav.querySelectorAll('li.parent .close')); // Set active class
  60  
  61    allLinks.forEach(link => {
  62      if (!link.href.match(/index\.php$/) && currentUrl.indexOf(link.href) === 0 || link.href.match(/index\.php$/) && currentUrl.match(/index\.php$/)) {
  63        link.setAttribute('aria-current', 'page');
  64        link.classList.add('mm-active'); // Auto Expand Levels
  65  
  66        if (!link.parentNode.classList.contains('parent')) {
  67          const firstLevel = link.closest('.collapse-level-1');
  68          const secondLevel = link.closest('.collapse-level-2');
  69          if (firstLevel) firstLevel.parentNode.classList.add('mm-active');
  70          if (firstLevel) firstLevel.classList.add('mm-show');
  71          if (secondLevel) secondLevel.parentNode.classList.add('mm-active');
  72          if (secondLevel) secondLevel.classList.add('mm-show');
  73        }
  74      }
  75    }); // Child open toggle
  76  
  77    const openToggle = ({
  78      currentTarget
  79    }) => {
  80      let menuItem = currentTarget.parentNode;
  81  
  82      if (menuItem.tagName.toLowerCase() === 'span') {
  83        menuItem = currentTarget.parentNode.parentNode;
  84      }
  85  
  86      if (menuItem.classList.contains('open')) {
  87        mainNav.classList.remove('child-open');
  88        menuItem.classList.remove('open');
  89      } else {
  90        const siblings = [].slice.call(menuItem.parentNode.children);
  91        siblings.forEach(sibling => {
  92          sibling.classList.remove('open');
  93        });
  94        wrapper.classList.remove('closed');
  95  
  96        if (menuToggleIcon.classList.contains('icon-toggle-off')) {
  97          menuToggleIcon.classList.toggle('icon-toggle-off');
  98          menuToggleIcon.classList.toggle('icon-toggle-on');
  99        }
 100  
 101        mainNav.classList.add('child-open');
 102  
 103        if (menuItem.parentNode.classList.contains('main-nav')) {
 104          menuItem.classList.add('open');
 105        }
 106      }
 107  
 108      window.dispatchEvent(new CustomEvent('joomla:menu-toggle', {
 109        detail: 'open',
 110        bubbles: true,
 111        cancelable: true
 112      }));
 113    };
 114  
 115    menuParents.forEach(parent => {
 116      parent.addEventListener('click', openToggle);
 117      parent.addEventListener('keyup', openToggle);
 118    }); // Menu close
 119  
 120    subMenusClose.forEach(subMenu => {
 121      subMenu.addEventListener('click', () => {
 122        const menuChildsOpen = [].slice.call(mainNav.querySelectorAll('.open'));
 123        menuChildsOpen.forEach(menuChild => {
 124          menuChild.classList.remove('open');
 125        });
 126        mainNav.classList.remove('child-open');
 127      });
 128    });
 129  }