aria-submenu.js 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. 'use strict';
  2. exports.__esModule = true;
  3. var _ariaUtils = require('../aria-utils');
  4. var _ariaUtils2 = _interopRequireDefault(_ariaUtils);
  5. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  6. var SubMenu = function SubMenu(parent, domNode) {
  7. this.domNode = domNode;
  8. this.parent = parent;
  9. this.subMenuItems = [];
  10. this.subIndex = 0;
  11. this.init();
  12. };
  13. SubMenu.prototype.init = function () {
  14. this.subMenuItems = this.domNode.querySelectorAll('li');
  15. this.addListeners();
  16. };
  17. SubMenu.prototype.gotoSubIndex = function (idx) {
  18. if (idx === this.subMenuItems.length) {
  19. idx = 0;
  20. } else if (idx < 0) {
  21. idx = this.subMenuItems.length - 1;
  22. }
  23. this.subMenuItems[idx].focus();
  24. this.subIndex = idx;
  25. };
  26. SubMenu.prototype.addListeners = function () {
  27. var _this = this;
  28. var keys = _ariaUtils2.default.keys;
  29. var parentNode = this.parent.domNode;
  30. Array.prototype.forEach.call(this.subMenuItems, function (el) {
  31. el.addEventListener('keydown', function (event) {
  32. var prevDef = false;
  33. switch (event.keyCode) {
  34. case keys.down:
  35. _this.gotoSubIndex(_this.subIndex + 1);
  36. prevDef = true;
  37. break;
  38. case keys.up:
  39. _this.gotoSubIndex(_this.subIndex - 1);
  40. prevDef = true;
  41. break;
  42. case keys.tab:
  43. _ariaUtils2.default.triggerEvent(parentNode, 'mouseleave');
  44. break;
  45. case keys.enter:
  46. case keys.space:
  47. prevDef = true;
  48. event.currentTarget.click();
  49. break;
  50. }
  51. if (prevDef) {
  52. event.preventDefault();
  53. event.stopPropagation();
  54. }
  55. return false;
  56. });
  57. });
  58. };
  59. exports.default = SubMenu;