bootstrap-submenu.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. (function (factory) {
  2. if (typeof define === 'function' && define.amd) {
  3. // AMD. Register as an anonymous module
  4. define(['jquery'], factory);
  5. } else if (typeof exports === 'object') {
  6. // Node/CommonJS
  7. module.exports = factory(require('jquery'));
  8. } else {
  9. // Browser globals
  10. factory(jQuery);
  11. }
  12. })(function ($) {
  13. var DropdownSubmenu =
  14. /*#__PURE__*/
  15. function () {
  16. function DropdownSubmenu(element) {
  17. this.element = element.parentElement;
  18. this.menuElement = this.element.querySelector('.dropdown-menu');
  19. this.init();
  20. }
  21. var _proto = DropdownSubmenu.prototype;
  22. _proto.init = function init() {
  23. var _this = this;
  24. $(this.element).off('keydown.bs.dropdown.data-api');
  25. this.menuElement.addEventListener('keydown', this.itemKeydown.bind(this));
  26. var dropdownItemNodeList = this.menuElement.querySelectorAll('.dropdown-item');
  27. Array.from(dropdownItemNodeList).forEach(function (element) {
  28. element.addEventListener('keydown', _this.handleKeydownDropdownItem.bind(_this));
  29. });
  30. $(this.menuElement).on('keydown', '.dropdown-submenu > .dropdown-item', this.handleKeydownSubmenuDropdownItem.bind(this));
  31. $(this.menuElement).on('click', '.dropdown-submenu > .dropdown-item', this.handleClickSubmenuDropdownItem.bind(this));
  32. $(this.element).on('hidden.bs.dropdown', function () {
  33. _this.close(_this.menuElement);
  34. });
  35. };
  36. _proto.handleKeydownDropdownItem = function handleKeydownDropdownItem(event) {
  37. // 27: Esc
  38. if (event.keyCode !== 27) {
  39. return;
  40. }
  41. event.target.closest('.dropdown-menu').previousElementSibling.focus();
  42. event.target.closest('.dropdown-menu').classList.remove('show');
  43. };
  44. _proto.handleKeydownSubmenuDropdownItem = function handleKeydownSubmenuDropdownItem(event) {
  45. // 32: Spacebar
  46. if (event.keyCode !== 32) {
  47. return;
  48. } // NOTE: Off vertical scrolling
  49. event.preventDefault();
  50. this.toggle(event.target);
  51. };
  52. _proto.handleClickSubmenuDropdownItem = function handleClickSubmenuDropdownItem(event) {
  53. event.stopPropagation();
  54. this.toggle(event.target);
  55. };
  56. _proto.itemKeydown = function itemKeydown(event) {
  57. // 38: Arrow up, 40: Arrow down
  58. if (![38, 40].includes(event.keyCode)) {
  59. return;
  60. } // NOTE: Off vertical scrolling
  61. event.preventDefault();
  62. event.stopPropagation();
  63. var itemNodeList = this.element.querySelectorAll('.show > .dropdown-item:not(:disabled):not(.disabled), .show > .dropdown > .dropdown-item');
  64. var index = Array.from(itemNodeList).indexOf(event.target);
  65. if (event.keyCode === 38 && index !== 0) {
  66. index--;
  67. } else if (event.keyCode === 40 && index !== itemNodeList.length - 1) {
  68. index++;
  69. } else {
  70. return;
  71. }
  72. itemNodeList[index].focus();
  73. };
  74. _proto.toggle = function toggle(element) {
  75. var dropdownElement = element.closest('.dropdown');
  76. var parentMenuElement = dropdownElement.closest('.dropdown-menu');
  77. var menuElement = dropdownElement.querySelector('.dropdown-menu');
  78. var isOpen = menuElement.classList.contains('show');
  79. this.close(parentMenuElement);
  80. menuElement.classList.toggle('show', !isOpen);
  81. };
  82. _proto.close = function close(menuElement) {
  83. var menuNodeList = menuElement.querySelectorAll('.dropdown-menu.show');
  84. Array.from(menuNodeList).forEach(function (element) {
  85. element.classList.remove('show');
  86. });
  87. };
  88. return DropdownSubmenu;
  89. }(); // For AMD/Node/CommonJS used elements (optional)
  90. // http://learn.jquery.com/jquery-ui/environments/amd/
  91. $.fn.submenupicker = function (elements) {
  92. var $elements = this instanceof $ ? this : $(elements);
  93. return $elements.each(function () {
  94. var data = $.data(this, 'bs.submenu');
  95. if (!data) {
  96. data = new DropdownSubmenu(this);
  97. $.data(this, 'bs.submenu', data);
  98. }
  99. });
  100. };
  101. return DropdownSubmenu;
  102. });