mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-02 14:24:19 +01:00
159 lines
3.9 KiB
JavaScript
159 lines
3.9 KiB
JavaScript
|
/**
|
||
|
* --------------------------------------------------------------------------
|
||
|
* Bootstrap (v4.0.0): button.js
|
||
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||
|
* --------------------------------------------------------------------------
|
||
|
*/
|
||
|
|
||
|
const Button = (($) => {
|
||
|
|
||
|
|
||
|
/**
|
||
|
* ------------------------------------------------------------------------
|
||
|
* Constants
|
||
|
* ------------------------------------------------------------------------
|
||
|
*/
|
||
|
|
||
|
const NAME = 'button'
|
||
|
const VERSION = '4.0.0'
|
||
|
const DATA_KEY = 'bs.button'
|
||
|
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||
|
const TRANSITION_DURATION = 150
|
||
|
|
||
|
const ClassName = {
|
||
|
ACTIVE : 'active',
|
||
|
BUTTON : 'btn',
|
||
|
FOCUS : 'focus'
|
||
|
}
|
||
|
|
||
|
const Selector = {
|
||
|
DATA_TOGGLE_CARROT : '[data-toggle^="button"]',
|
||
|
DATA_TOGGLE : '[data-toggle="buttons"]',
|
||
|
INPUT : 'input',
|
||
|
ACTIVE : '.active',
|
||
|
BUTTON : '.btn'
|
||
|
}
|
||
|
|
||
|
const Event = {
|
||
|
CLICK : 'click.bs.button.data-api',
|
||
|
FOCUS_BLUR : 'focus.bs.button.data-api blur.bs.button.data-api'
|
||
|
}
|
||
|
|
||
|
|
||
|
/**
|
||
|
* ------------------------------------------------------------------------
|
||
|
* Class Definition
|
||
|
* ------------------------------------------------------------------------
|
||
|
*/
|
||
|
|
||
|
class Button {
|
||
|
|
||
|
constructor(element) {
|
||
|
this.element = element
|
||
|
}
|
||
|
|
||
|
// public
|
||
|
|
||
|
toggle() {
|
||
|
let triggerChangeEvent = true
|
||
|
let rootElement = $(this.element).closest(
|
||
|
Selector.DATA_TOGGLE
|
||
|
)[0]
|
||
|
|
||
|
if (rootElement) {
|
||
|
let input = $(this.element).find(Selector.INPUT)[0]
|
||
|
|
||
|
if (input) {
|
||
|
if (input.type === 'radio') {
|
||
|
if (input.checked &&
|
||
|
$(this.element).hasClass(ClassName.ACTIVE)) {
|
||
|
triggerChangeEvent = false
|
||
|
|
||
|
} else {
|
||
|
let activeElement = $(rootElement).find(Selector.ACTIVE)[0]
|
||
|
|
||
|
if (activeElement) {
|
||
|
$(activeElement).removeClass(ClassName.ACTIVE)
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
if (triggerChangeEvent) {
|
||
|
input.checked = !$(this.element).hasClass(ClassName.ACTIVE)
|
||
|
$(this.element).trigger('change')
|
||
|
}
|
||
|
}
|
||
|
} else {
|
||
|
this.element.setAttribute('aria-pressed',
|
||
|
!$(this.element).hasClass(ClassName.ACTIVE))
|
||
|
}
|
||
|
|
||
|
if (triggerChangeEvent) {
|
||
|
$(this.element).toggleClass(ClassName.ACTIVE)
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
// static
|
||
|
|
||
|
static _jQueryInterface(config) {
|
||
|
return this.each(function () {
|
||
|
let data = $(this).data(DATA_KEY)
|
||
|
|
||
|
if (!data) {
|
||
|
data = new Button(this)
|
||
|
$(this).data(DATA_KEY, data)
|
||
|
}
|
||
|
|
||
|
if (config === 'toggle') {
|
||
|
data[config]()
|
||
|
}
|
||
|
})
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
|
||
|
/**
|
||
|
* ------------------------------------------------------------------------
|
||
|
* Data Api implementation
|
||
|
* ------------------------------------------------------------------------
|
||
|
*/
|
||
|
|
||
|
$(document)
|
||
|
.on(Event.CLICK, Selector.DATA_TOGGLE_CARROT, function (event) {
|
||
|
event.preventDefault()
|
||
|
|
||
|
let button = event.target
|
||
|
|
||
|
if (!$(button).hasClass(ClassName.BUTTON)) {
|
||
|
button = $(button).closest(Selector.BUTTON)
|
||
|
}
|
||
|
|
||
|
Button._jQueryInterface.call($(button), 'toggle')
|
||
|
})
|
||
|
.on(Event.FOCUS_BLUR, Selector.DATA_TOGGLE_CARROT, function (event) {
|
||
|
var button = $(event.target).closest(Selector.BUTTON)[0]
|
||
|
$(button).toggleClass(ClassName.FOCUS, /^focus(in)?$/.test(event.type))
|
||
|
})
|
||
|
|
||
|
|
||
|
/**
|
||
|
* ------------------------------------------------------------------------
|
||
|
* jQuery
|
||
|
* ------------------------------------------------------------------------
|
||
|
*/
|
||
|
|
||
|
$.fn[NAME] = Button._jQueryInterface
|
||
|
$.fn[NAME].Constructor = Button
|
||
|
$.fn[NAME].noConflict = function () {
|
||
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||
|
return Button._jQueryInterface
|
||
|
}
|
||
|
|
||
|
return Button
|
||
|
|
||
|
})(jQuery)
|
||
|
|
||
|
export default Button
|