Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
dropdown.js 7.22 KiB
1 
import Util from './util'
2
3
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
11 
const Dropdown = (($) => {
12
13
14 
  /**
15 
   * ------------------------------------------------------------------------
16 
   * Constants
17 
   * ------------------------------------------------------------------------
18 
   */
19
20 
  const NAME                = 'dropdown'
21 
  const VERSION             = '4.0.0-alpha.2'
22 
  const DATA_KEY            = 'bs.dropdown'
23 
  const EVENT_KEY           = `.${DATA_KEY}`
24 
  const DATA_API_KEY        = '.data-api'
25 
  const JQUERY_NO_CONFLICT  = $.fn[NAME]
26
27 
  const Event = {
28 
    HIDE             : `hide${EVENT_KEY}`,
29 
    HIDDEN           : `hidden${EVENT_KEY}`,
30 
    SHOW             : `show${EVENT_KEY}`,
31 
    SHOWN            : `shown${EVENT_KEY}`,
32 
    CLICK            : `click${EVENT_KEY}`,
33 
    CLICK_DATA_API   : `click${EVENT_KEY}${DATA_API_KEY}`,
34 
    KEYDOWN_DATA_API : `keydown${EVENT_KEY}${DATA_API_KEY}`
35 
  }
36
37 
  const ClassName = {
38 
    BACKDROP : 'dropdown-backdrop',
39 
    DISABLED : 'disabled',
40 
    OPEN     : 'open'
41 
  }
42
43 
  const Selector = {
44 
    BACKDROP      : '.dropdown-backdrop',
45 
    DATA_TOGGLE   : '[data-toggle="dropdown"]',
46 
    FORM_CHILD    : '.dropdown form',
47 
    MENU          : '.dropdown-menu',
48 
    NAVBAR_NAV    : '.navbar-nav',
49 
    VISIBLE_ITEMS : '.dropdown-menu .dropdown-item:not(.disabled)'
50 
  }
51
52
53 
  /**
54 
   * ------------------------------------------------------------------------
55 
   * Class Definition
56 
   * ------------------------------------------------------------------------
57 
   */
58
59 
  class Dropdown {
60
61 
    constructor(element) {
62 
      this._element = element
63
64 
      this._addEventListeners()
65 
    }
66
67
68 
    // getters
69
70 
    static get VERSION() {
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
return VERSION } // public toggle() { if (this.disabled || $(this).hasClass(ClassName.DISABLED)) { return false } let parent = Dropdown._getParentFromElement(this) let isActive = $(parent).hasClass(ClassName.OPEN) Dropdown._clearMenus() if (isActive) { return false } if ('ontouchstart' in document.documentElement && (!$(parent).closest(Selector.NAVBAR_NAV).length)) { // if mobile we use a backdrop because click events don't delegate let dropdown = document.createElement('div') dropdown.className = ClassName.BACKDROP $(dropdown).insertBefore(this) $(dropdown).on('click', Dropdown._clearMenus) } let relatedTarget = { relatedTarget : this } let showEvent = $.Event(Event.SHOW, relatedTarget) $(parent).trigger(showEvent) if (showEvent.isDefaultPrevented()) { return false } this.focus() this.setAttribute('aria-expanded', 'true') $(parent).toggleClass(ClassName.OPEN) $(parent).trigger($.Event(Event.SHOWN, relatedTarget)) return false } dispose() { $.removeData(this._element, DATA_KEY) $(this._element).off(EVENT_KEY) this._element = null } // private _addEventListeners() { $(this._element).on(Event.CLICK, this.toggle) } // static static _jQueryInterface(config) { return this.each(function () { let data = $(this).data(DATA_KEY) if (!data) { $(this).data(DATA_KEY, (data = new Dropdown(this)))
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
} if (typeof config === 'string') { if (data[config] === undefined) { throw new Error(`No method named "${config}"`) } data[config].call(this) } }) } static _clearMenus(event) { if (event && event.which === 3) { return } let backdrop = $(Selector.BACKDROP)[0] if (backdrop) { backdrop.parentNode.removeChild(backdrop) } let toggles = $.makeArray($(Selector.DATA_TOGGLE)) for (let i = 0; i < toggles.length; i++) { let parent = Dropdown._getParentFromElement(toggles[i]) let relatedTarget = { relatedTarget : toggles[i] } if (!$(parent).hasClass(ClassName.OPEN)) { continue } if (event && event.type === 'click' && (/input|textarea/i.test(event.target.tagName)) && ($.contains(parent, event.target))) { continue } let hideEvent = $.Event(Event.HIDE, relatedTarget) $(parent).trigger(hideEvent) if (hideEvent.isDefaultPrevented()) { continue } toggles[i].setAttribute('aria-expanded', 'false') $(parent) .removeClass(ClassName.OPEN) .trigger($.Event(Event.HIDDEN, relatedTarget)) } } static _getParentFromElement(element) { let parent let selector = Util.getSelectorFromElement(element) if (selector) { parent = $(selector)[0] } return parent || element.parentNode } static _dataApiKeydownHandler(event) { if (!/(38|40|27|32)/.test(event.which) || /input|textarea/i.test(event.target.tagName)) { return } event.preventDefault() event.stopPropagation()
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
if (this.disabled || $(this).hasClass(ClassName.DISABLED)) { return } let parent = Dropdown._getParentFromElement(this) let isActive = $(parent).hasClass(ClassName.OPEN) if ((!isActive && event.which !== 27) || (isActive && event.which === 27)) { if (event.which === 27) { let toggle = $(parent).find(Selector.DATA_TOGGLE)[0] $(toggle).trigger('focus') } $(this).trigger('click') return } let items = $.makeArray($(Selector.VISIBLE_ITEMS)) items = items.filter((item) => { return item.offsetWidth || item.offsetHeight }) if (!items.length) { return } let index = items.indexOf(event.target) if (event.which === 38 && index > 0) { // up index-- } if (event.which === 40 && index < items.length - 1) { // down index++ } if (index < 0) { index = 0 } items[index].focus() } } /** * ------------------------------------------------------------------------ * Data Api implementation * ------------------------------------------------------------------------ */ $(document) .on(Event.KEYDOWN_DATA_API, Selector.DATA_TOGGLE, Dropdown._dataApiKeydownHandler) .on(Event.KEYDOWN_DATA_API, Selector.MENU, 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, (e) => { e.stopPropagation() }) /** * ------------------------------------------------------------------------ * jQuery * ------------------------------------------------------------------------
281282283284285286287288289290291292293294295
*/ $.fn[NAME] = Dropdown._jQueryInterface $.fn[NAME].Constructor = Dropdown $.fn[NAME].noConflict = function () { $.fn[NAME] = JQUERY_NO_CONFLICT return Dropdown._jQueryInterface } return Dropdown })(jQuery) export default Dropdown