dropdown.js 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293
  1. 'use strict';
  2. var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
  3. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
  4. /**
  5. * --------------------------------------------------------------------------
  6. * Bootstrap (v4.0.0-alpha.2): dropdown.js
  7. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  8. * --------------------------------------------------------------------------
  9. */
  10. var Dropdown = (function ($) {
  11. /**
  12. * ------------------------------------------------------------------------
  13. * Constants
  14. * ------------------------------------------------------------------------
  15. */
  16. var NAME = 'dropdown';
  17. var VERSION = '4.0.0-alpha';
  18. var DATA_KEY = 'bs.dropdown';
  19. var EVENT_KEY = '.' + DATA_KEY;
  20. var DATA_API_KEY = '.data-api';
  21. var JQUERY_NO_CONFLICT = $.fn[NAME];
  22. var Event = {
  23. HIDE: 'hide' + EVENT_KEY,
  24. HIDDEN: 'hidden' + EVENT_KEY,
  25. SHOW: 'show' + EVENT_KEY,
  26. SHOWN: 'shown' + EVENT_KEY,
  27. CLICK: 'click' + EVENT_KEY,
  28. CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY,
  29. KEYDOWN_DATA_API: 'keydown' + EVENT_KEY + DATA_API_KEY
  30. };
  31. var ClassName = {
  32. BACKDROP: 'dropdown-backdrop',
  33. DISABLED: 'disabled',
  34. OPEN: 'open'
  35. };
  36. var Selector = {
  37. BACKDROP: '.dropdown-backdrop',
  38. DATA_TOGGLE: '[data-toggle="dropdown"]',
  39. FORM_CHILD: '.dropdown form',
  40. ROLE_MENU: '[role="menu"]',
  41. ROLE_LISTBOX: '[role="listbox"]',
  42. NAVBAR_NAV: '.navbar-nav',
  43. VISIBLE_ITEMS: '[role="menu"] li:not(.disabled) a, ' + '[role="listbox"] li:not(.disabled) a'
  44. };
  45. /**
  46. * ------------------------------------------------------------------------
  47. * Class Definition
  48. * ------------------------------------------------------------------------
  49. */
  50. var Dropdown = (function () {
  51. function Dropdown(element) {
  52. _classCallCheck(this, Dropdown);
  53. this._element = element;
  54. this._addEventListeners();
  55. }
  56. /**
  57. * ------------------------------------------------------------------------
  58. * Data Api implementation
  59. * ------------------------------------------------------------------------
  60. */
  61. // getters
  62. _createClass(Dropdown, [{
  63. key: 'toggle',
  64. // public
  65. value: function toggle() {
  66. if (this.disabled || $(this).hasClass(ClassName.DISABLED)) {
  67. return false;
  68. }
  69. var parent = Dropdown._getParentFromElement(this);
  70. var isActive = $(parent).hasClass(ClassName.OPEN);
  71. Dropdown._clearMenus();
  72. if (isActive) {
  73. return false;
  74. }
  75. if ('ontouchstart' in document.documentElement && !$(parent).closest(Selector.NAVBAR_NAV).length) {
  76. // if mobile we use a backdrop because click events don't delegate
  77. var dropdown = document.createElement('div');
  78. dropdown.className = ClassName.BACKDROP;
  79. $(dropdown).insertBefore(this);
  80. $(dropdown).on('click', Dropdown._clearMenus);
  81. }
  82. var relatedTarget = { relatedTarget: this };
  83. var showEvent = $.Event(Event.SHOW, relatedTarget);
  84. $(parent).trigger(showEvent);
  85. if (showEvent.isDefaultPrevented()) {
  86. return false;
  87. }
  88. this.focus();
  89. this.setAttribute('aria-expanded', 'true');
  90. $(parent).toggleClass(ClassName.OPEN);
  91. $(parent).trigger($.Event(Event.SHOWN, relatedTarget));
  92. return false;
  93. }
  94. }, {
  95. key: 'dispose',
  96. value: function dispose() {
  97. $.removeData(this._element, DATA_KEY);
  98. $(this._element).off(EVENT_KEY);
  99. this._element = null;
  100. }
  101. // private
  102. }, {
  103. key: '_addEventListeners',
  104. value: function _addEventListeners() {
  105. $(this._element).on(Event.CLICK, this.toggle);
  106. }
  107. // static
  108. }], [{
  109. key: '_jQueryInterface',
  110. value: function _jQueryInterface(config) {
  111. return this.each(function () {
  112. var data = $(this).data(DATA_KEY);
  113. if (!data) {
  114. $(this).data(DATA_KEY, data = new Dropdown(this));
  115. }
  116. if (typeof config === 'string') {
  117. if (data[config] === undefined) {
  118. throw new Error('No method named "' + config + '"');
  119. }
  120. data[config].call(this);
  121. }
  122. });
  123. }
  124. }, {
  125. key: '_clearMenus',
  126. value: function _clearMenus(event) {
  127. if (event && event.which === 3) {
  128. return;
  129. }
  130. var backdrop = $(Selector.BACKDROP)[0];
  131. if (backdrop) {
  132. backdrop.parentNode.removeChild(backdrop);
  133. }
  134. var toggles = $.makeArray($(Selector.DATA_TOGGLE));
  135. for (var i = 0; i < toggles.length; i++) {
  136. var _parent = Dropdown._getParentFromElement(toggles[i]);
  137. var relatedTarget = { relatedTarget: toggles[i] };
  138. if (!$(_parent).hasClass(ClassName.OPEN)) {
  139. continue;
  140. }
  141. if (event && event.type === 'click' && /input|textarea/i.test(event.target.tagName) && $.contains(_parent, event.target)) {
  142. continue;
  143. }
  144. var hideEvent = $.Event(Event.HIDE, relatedTarget);
  145. $(_parent).trigger(hideEvent);
  146. if (hideEvent.isDefaultPrevented()) {
  147. continue;
  148. }
  149. toggles[i].setAttribute('aria-expanded', 'false');
  150. $(_parent).removeClass(ClassName.OPEN).trigger($.Event(Event.HIDDEN, relatedTarget));
  151. }
  152. }
  153. }, {
  154. key: '_getParentFromElement',
  155. value: function _getParentFromElement(element) {
  156. var parent = undefined;
  157. var selector = Util.getSelectorFromElement(element);
  158. if (selector) {
  159. parent = $(selector)[0];
  160. }
  161. return parent || element.parentNode;
  162. }
  163. }, {
  164. key: '_dataApiKeydownHandler',
  165. value: function _dataApiKeydownHandler(event) {
  166. if (!/(38|40|27|32)/.test(event.which) || /input|textarea/i.test(event.target.tagName)) {
  167. return;
  168. }
  169. event.preventDefault();
  170. event.stopPropagation();
  171. if (this.disabled || $(this).hasClass(ClassName.DISABLED)) {
  172. return;
  173. }
  174. var parent = Dropdown._getParentFromElement(this);
  175. var isActive = $(parent).hasClass(ClassName.OPEN);
  176. if (!isActive && event.which !== 27 || isActive && event.which === 27) {
  177. if (event.which === 27) {
  178. var toggle = $(parent).find(Selector.DATA_TOGGLE)[0];
  179. $(toggle).trigger('focus');
  180. }
  181. $(this).trigger('click');
  182. return;
  183. }
  184. var items = $.makeArray($(Selector.VISIBLE_ITEMS));
  185. items = items.filter(function (item) {
  186. return item.offsetWidth || item.offsetHeight;
  187. });
  188. if (!items.length) {
  189. return;
  190. }
  191. var index = items.indexOf(event.target);
  192. if (event.which === 38 && index > 0) {
  193. // up
  194. index--;
  195. }
  196. if (event.which === 40 && index < items.length - 1) {
  197. // down
  198. index++;
  199. }
  200. if (! ~index) {
  201. index = 0;
  202. }
  203. items[index].focus();
  204. }
  205. }, {
  206. key: 'VERSION',
  207. get: function get() {
  208. return VERSION;
  209. }
  210. }]);
  211. return Dropdown;
  212. })();
  213. $(document).on(Event.KEYDOWN_DATA_API, Selector.DATA_TOGGLE, Dropdown._dataApiKeydownHandler).on(Event.KEYDOWN_DATA_API, Selector.ROLE_MENU, Dropdown._dataApiKeydownHandler).on(Event.KEYDOWN_DATA_API, Selector.ROLE_LISTBOX, Dropdown._dataApiKeydownHandler).on(Event.CLICK_DATA_API, Dropdown._clearMenus).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, Dropdown.prototype.toggle).on(Event.CLICK_DATA_API, Selector.FORM_CHILD, function (e) {
  214. e.stopPropagation();
  215. });
  216. /**
  217. * ------------------------------------------------------------------------
  218. * jQuery
  219. * ------------------------------------------------------------------------
  220. */
  221. $.fn[NAME] = Dropdown._jQueryInterface;
  222. $.fn[NAME].Constructor = Dropdown;
  223. $.fn[NAME].noConflict = function () {
  224. $.fn[NAME] = JQUERY_NO_CONFLICT;
  225. return Dropdown._jQueryInterface;
  226. };
  227. return Dropdown;
  228. })(jQuery);
  229. //# sourceMappingURL=dropdown.js.map