aria-menuitem.js 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. 'use strict';
  2. exports.__esModule = true;
  3. var _ariaUtils = require('../aria-utils');
  4. var _ariaUtils2 = _interopRequireDefault(_ariaUtils);
  5. var _ariaSubmenu = require('./aria-submenu');
  6. var _ariaSubmenu2 = _interopRequireDefault(_ariaSubmenu);
  7. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  8. var MenuItem = function MenuItem(domNode) {
  9. this.domNode = domNode;
  10. this.submenu = null;
  11. this.init();
  12. };
  13. MenuItem.prototype.init = function () {
  14. this.domNode.setAttribute('tabindex', '0');
  15. var menuChild = this.domNode.querySelector('.el-menu');
  16. if (menuChild) {
  17. this.submenu = new _ariaSubmenu2.default(this, menuChild);
  18. }
  19. this.addListeners();
  20. };
  21. MenuItem.prototype.addListeners = function () {
  22. var _this = this;
  23. var keys = _ariaUtils2.default.keys;
  24. this.domNode.addEventListener('keydown', function (event) {
  25. var prevDef = false;
  26. switch (event.keyCode) {
  27. case keys.down:
  28. _ariaUtils2.default.triggerEvent(event.currentTarget, 'mouseenter');
  29. _this.submenu && _this.submenu.gotoSubIndex(0);
  30. prevDef = true;
  31. break;
  32. case keys.up:
  33. _ariaUtils2.default.triggerEvent(event.currentTarget, 'mouseenter');
  34. _this.submenu && _this.submenu.gotoSubIndex(_this.submenu.subMenuItems.length - 1);
  35. prevDef = true;
  36. break;
  37. case keys.tab:
  38. _ariaUtils2.default.triggerEvent(event.currentTarget, 'mouseleave');
  39. break;
  40. case keys.enter:
  41. case keys.space:
  42. prevDef = true;
  43. event.currentTarget.click();
  44. break;
  45. }
  46. if (prevDef) {
  47. event.preventDefault();
  48. }
  49. });
  50. };
  51. exports.default = MenuItem;