src/scss/bootstrap-4.0.0-alpha.6/js/dist/dropdown.js

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