[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  (() => {
   6  
   7    function topLevelMouseOver(el, settings) {
   8      const ulChild = el.querySelector('ul');
   9  
  10      if (ulChild) {
  11        ulChild.setAttribute('aria-hidden', 'false');
  12        ulChild.classList.add(settings.menuHoverClass);
  13      }
  14    }
  15  
  16    function topLevelMouseOut(el, settings) {
  17      const ulChild = el.querySelector('ul');
  18  
  19      if (ulChild) {
  20        ulChild.setAttribute('aria-hidden', 'true');
  21        ulChild.classList.remove(settings.menuHoverClass);
  22      }
  23    }
  24  
  25    function setupNavigation(nav) {
  26      const settings = {
  27        menuHoverClass: 'show-menu',
  28        dir: 'ltr'
  29      };
  30      const topLevelChilds = nav.querySelectorAll(':scope > li'); // Set tabIndex to -1 so that top_level_childs can't receive focus until menu is open
  31  
  32      topLevelChilds.forEach(topLevelEl => {
  33        const linkEl = topLevelEl.querySelector('a');
  34  
  35        if (linkEl) {
  36          linkEl.tabIndex = '0';
  37          linkEl.addEventListener('mouseover', topLevelMouseOver(topLevelEl, settings));
  38          linkEl.addEventListener('mouseout', topLevelMouseOut(topLevelEl, settings));
  39        }
  40  
  41        const spanEl = topLevelEl.querySelector('span');
  42  
  43        if (spanEl) {
  44          spanEl.tabIndex = '0';
  45          spanEl.addEventListener('mouseover', topLevelMouseOver(topLevelEl, settings));
  46          spanEl.addEventListener('mouseout', topLevelMouseOut(topLevelEl, settings));
  47        }
  48  
  49        topLevelEl.addEventListener('mouseover', ({
  50          target
  51        }) => {
  52          const ulChild = target.querySelector('ul');
  53  
  54          if (ulChild) {
  55            ulChild.setAttribute('aria-hidden', 'false');
  56            ulChild.classList.add(settings.menuHoverClass);
  57          }
  58        });
  59        topLevelEl.addEventListener('mouseout', ({
  60          target
  61        }) => {
  62          const ulChild = target.querySelector('ul');
  63  
  64          if (ulChild) {
  65            ulChild.setAttribute('aria-hidden', 'true');
  66            ulChild.classList.remove(settings.menuHoverClass);
  67          }
  68        });
  69        topLevelEl.addEventListener('focus', ({
  70          target
  71        }) => {
  72          const ulChild = target.querySelector('ul');
  73  
  74          if (ulChild) {
  75            ulChild.setAttribute('aria-hidden', 'true');
  76            ulChild.classList.add(settings.menuHoverClass);
  77          }
  78        });
  79        topLevelEl.addEventListener('blur', ({
  80          target
  81        }) => {
  82          const ulChild = target.querySelector('ul');
  83  
  84          if (ulChild) {
  85            ulChild.setAttribute('aria-hidden', 'false');
  86            ulChild.classList.remove(settings.menuHoverClass);
  87          }
  88        });
  89        topLevelEl.addEventListener('keydown', event => {
  90          const keyName = event.key;
  91          const curEl = event.target;
  92          const curLiEl = curEl.parentElement;
  93          const curUlEl = curLiEl.parentElement;
  94          let prevLiEl = curLiEl.previousElementSibling;
  95          let nextLiEl = curLiEl.nextElementSibling;
  96  
  97          if (!prevLiEl) {
  98            prevLiEl = curUlEl.children[curUlEl.children.length - 1];
  99          }
 100  
 101          if (!nextLiEl) {
 102            [nextLiEl] = curUlEl.children;
 103          }
 104  
 105          switch (keyName) {
 106            case 'ArrowLeft':
 107              event.preventDefault();
 108  
 109              if (settings.dir === 'rtl') {
 110                nextLiEl.children[0].focus();
 111              } else {
 112                prevLiEl.children[0].focus();
 113              }
 114  
 115              break;
 116  
 117            case 'ArrowRight':
 118              event.preventDefault();
 119  
 120              if (settings.dir === 'rtl') {
 121                prevLiEl.children[0].focus();
 122              } else {
 123                nextLiEl.children[0].focus();
 124              }
 125  
 126              break;
 127  
 128            case 'ArrowUp':
 129              {
 130                event.preventDefault();
 131                const parent = curLiEl.parentElement.parentElement;
 132  
 133                if (parent.nodeName === 'LI') {
 134                  parent.children[0].focus();
 135                } else {
 136                  prevLiEl.children[0].focus();
 137                }
 138  
 139                break;
 140              }
 141  
 142            case 'ArrowDown':
 143              event.preventDefault();
 144  
 145              if (curLiEl.classList.contains('parent')) {
 146                const child = curLiEl.querySelector('ul');
 147  
 148                if (child != null) {
 149                  const childLi = child.querySelector('li');
 150                  childLi.children[0].focus();
 151                } else {
 152                  nextLiEl.children[0].focus();
 153                }
 154              } else {
 155                nextLiEl.children[0].focus();
 156              }
 157  
 158              break;
 159          }
 160        });
 161      });
 162    }
 163  
 164    document.addEventListener('DOMContentLoaded', () => {
 165      const navs = document.querySelectorAll('.nav');
 166      [].forEach.call(navs, nav => {
 167        setupNavigation(nav);
 168      });
 169    });
 170  })();