Use _jQueryInterface for Dropdown to call toggle method
This commit is contained in:
parent
0ae9d28ba3
commit
0cdf176f7a
|
@ -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()
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue