[Summary view] [Print] [Text view]

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