15cb89d4bd21c4c60f524834c84147272b6b9374d842a3399946fbba662fb92c1512d52b8904577676df5c7eb20e678e8637019b483dad4a8da7ee38771417 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. import Utils from '../aria-utils';
  2. const SubMenu = function(parent, domNode) {
  3. this.domNode = domNode;
  4. this.parent = parent;
  5. this.subMenuItems = [];
  6. this.subIndex = 0;
  7. this.init();
  8. };
  9. SubMenu.prototype.init = function() {
  10. this.subMenuItems = this.domNode.querySelectorAll('li');
  11. this.addListeners();
  12. };
  13. SubMenu.prototype.gotoSubIndex = function(idx) {
  14. if (idx === this.subMenuItems.length) {
  15. idx = 0;
  16. } else if (idx < 0) {
  17. idx = this.subMenuItems.length - 1;
  18. }
  19. this.subMenuItems[idx].focus();
  20. this.subIndex = idx;
  21. };
  22. SubMenu.prototype.addListeners = function() {
  23. const keys = Utils.keys;
  24. const parentNode = this.parent.domNode;
  25. Array.prototype.forEach.call(this.subMenuItems, el => {
  26. el.addEventListener('keydown', event => {
  27. let prevDef = false;
  28. switch (event.keyCode) {
  29. case keys.down:
  30. this.gotoSubIndex(this.subIndex + 1);
  31. prevDef = true;
  32. break;
  33. case keys.up:
  34. this.gotoSubIndex(this.subIndex - 1);
  35. prevDef = true;
  36. break;
  37. case keys.tab:
  38. Utils.triggerEvent(parentNode, '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. event.stopPropagation();
  49. }
  50. return false;
  51. });
  52. });
  53. };
  54. export default SubMenu;