Use _jQueryInterface for Dropdown to call toggle method

This commit is contained in:
Johann-S 2017-05-11 11:29:46 +02:00
parent 0ae9d28ba3
commit 0cdf176f7a
1 changed files with 26 additions and 28 deletions

View File

@ -114,51 +114,43 @@ const Dropdown = (($) => {
return DefaultType return DefaultType
} }
// public // public
toggle() { toggle() {
let context = $(this).data(DATA_KEY) if (this._element.disabled || $(this._element).hasClass(ClassName.DISABLED)) {
if (!context) { return
context = new Dropdown(this)
$(this).data(DATA_KEY, context)
} }
if (context.disabled || $(this).hasClass(ClassName.DISABLED)) { const parent = Dropdown._getParentFromElement(this._element)
return false const isActive = $(this._menu).hasClass(ClassName.SHOW)
}
const parent = Dropdown._getParentFromElement(this)
const isActive = $(context._menu).hasClass(ClassName.SHOW)
Dropdown._clearMenus() Dropdown._clearMenus()
if (isActive) { if (isActive) {
return false return
} }
const relatedTarget = { const relatedTarget = {
relatedTarget : this relatedTarget : this._element
} }
const showEvent = $.Event(Event.SHOW, relatedTarget) const showEvent = $.Event(Event.SHOW, relatedTarget)
$(parent).trigger(showEvent) $(parent).trigger(showEvent)
if (showEvent.isDefaultPrevented()) { if (showEvent.isDefaultPrevented()) {
return false return
} }
// Handle dropup // Handle dropup
const dropdownPlacement = $(this).parent().hasClass('dropup') ? AttachmentMap.TOP : context._config.placement const dropdownPlacement = $(this._element).parent().hasClass('dropup') ? AttachmentMap.TOP : this._config.placement
this._popper = new Popper(this, context._menu, { this._popper = new Popper(this._element, this._menu, {
placement : dropdownPlacement, placement : dropdownPlacement,
modifiers : { modifiers : {
offset : { offset : {
offset : context._config.offset offset : this._config.offset
}, },
flip : { flip : {
enabled : context._config.flip, enabled : this._config.flip
behavior : [AttachmentMap.TOP, AttachmentMap.BOTTOM]
} }
} }
}) })
@ -172,15 +164,13 @@ const Dropdown = (($) => {
$('body').children().on('mouseover', null, $.noop) $('body').children().on('mouseover', null, $.noop)
} }
this.focus() this._element.focus()
this.setAttribute('aria-expanded', true) this._element.setAttribute('aria-expanded', true)
$(context._menu).toggleClass(ClassName.SHOW) $(this._menu).toggleClass(ClassName.SHOW)
$(parent) $(parent)
.toggleClass(ClassName.SHOW) .toggleClass(ClassName.SHOW)
.trigger($.Event(Event.SHOWN, relatedTarget)) .trigger($.Event(Event.SHOWN, relatedTarget))
return false
} }
dispose() { dispose() {
@ -203,7 +193,11 @@ const Dropdown = (($) => {
// private // private
_addEventListeners() { _addEventListeners() {
$(this._element).on(Event.CLICK, this.toggle) $(this._element).on(Event.CLICK, (event) => {
event.preventDefault()
event.stopPropagation()
this.toggle()
})
} }
_getConfig(config) { _getConfig(config) {
@ -252,7 +246,7 @@ const Dropdown = (($) => {
if (data[config] === undefined) { if (data[config] === undefined) {
throw new Error(`No method named "${config}"`) throw new Error(`No method named "${config}"`)
} }
data[config].call(this) data[config]()
} }
}) })
} }
@ -266,7 +260,7 @@ const Dropdown = (($) => {
const toggles = $.makeArray($(Selector.DATA_TOGGLE)) const toggles = $.makeArray($(Selector.DATA_TOGGLE))
for (let i = 0; i < toggles.length; i++) { for (let i = 0; i < toggles.length; i++) {
const parent = Dropdown._getParentFromElement(toggles[i]) const parent = Dropdown._getParentFromElement(toggles[i])
const context = $(toggles[i]).data(DATA_KEY) const context = $(toggles[i]).data(DATA_KEY)
const relatedTarget = { const relatedTarget = {
relatedTarget : toggles[i] relatedTarget : toggles[i]
} }
@ -382,7 +376,11 @@ const Dropdown = (($) => {
.on(Event.KEYDOWN_DATA_API, Selector.DATA_TOGGLE, Dropdown._dataApiKeydownHandler) .on(Event.KEYDOWN_DATA_API, Selector.DATA_TOGGLE, Dropdown._dataApiKeydownHandler)
.on(Event.KEYDOWN_DATA_API, Selector.MENU, Dropdown._dataApiKeydownHandler) .on(Event.KEYDOWN_DATA_API, Selector.MENU, Dropdown._dataApiKeydownHandler)
.on(`${Event.CLICK_DATA_API} ${Event.KEYUP_DATA_API}`, Dropdown._clearMenus) .on(`${Event.CLICK_DATA_API} ${Event.KEYUP_DATA_API}`, Dropdown._clearMenus)
.on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, Dropdown.prototype.toggle) .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
event.preventDefault()
event.stopPropagation()
Dropdown._jQueryInterface.call($(this), 'toggle')
})
.on(Event.CLICK_DATA_API, Selector.FORM_CHILD, (e) => { .on(Event.CLICK_DATA_API, Selector.FORM_CHILD, (e) => {
e.stopPropagation() e.stopPropagation()
}) })