0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-02 14:24:19 +01:00
Bootstrap/js/src/button.js

172 lines
4.3 KiB
JavaScript
Raw Normal View History

2015-05-08 02:07:38 +02:00
/**
* --------------------------------------------------------------------------
2019-02-13 17:01:40 +01:00
* Bootstrap (v4.3.1): button.js
2015-05-08 02:07:38 +02:00
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
import $ from 'jquery'
2018-09-26 10:39:01 +02:00
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
2015-05-08 02:07:38 +02:00
2018-09-26 10:39:01 +02:00
const NAME = 'button'
2019-02-13 17:01:40 +01:00
const VERSION = '4.3.1'
2018-09-26 10:39:01 +02:00
const DATA_KEY = 'bs.button'
const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
const JQUERY_NO_CONFLICT = $.fn[NAME]
const ClassName = {
ACTIVE : 'active',
BUTTON : 'btn',
FOCUS : 'focus'
}
const Selector = {
DATA_TOGGLE_CARROT : '[data-toggle^="button"]',
DATA_TOGGLE : '[data-toggle="buttons"]',
INPUT : 'input:not([type="hidden"])',
2018-09-26 10:39:01 +02:00
ACTIVE : '.active',
BUTTON : '.btn'
}
const Event = {
CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`,
FOCUS_BLUR_DATA_API : `focus${EVENT_KEY}${DATA_API_KEY} ` +
`blur${EVENT_KEY}${DATA_API_KEY}`
}
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
class Button {
constructor(element) {
this._element = element
2015-05-08 02:07:38 +02:00
}
2018-09-26 10:39:01 +02:00
// Getters
static get VERSION() {
return VERSION
2015-05-08 02:07:38 +02:00
}
2018-09-26 10:39:01 +02:00
// Public
2015-05-08 02:07:38 +02:00
2018-09-26 10:39:01 +02:00
toggle() {
let triggerChangeEvent = true
let addAriaPressed = true
const rootElement = $(this._element).closest(
Selector.DATA_TOGGLE
)[0]
2015-05-08 02:07:38 +02:00
2018-09-26 10:39:01 +02:00
if (rootElement) {
const input = this._element.querySelector(Selector.INPUT)
2018-09-26 10:39:01 +02:00
if (input) {
if (input.type === 'radio') {
if (input.checked &&
this._element.classList.contains(ClassName.ACTIVE)) {
triggerChangeEvent = false
} else {
const activeElement = rootElement.querySelector(Selector.ACTIVE)
2018-09-26 10:39:01 +02:00
if (activeElement) {
$(activeElement).removeClass(ClassName.ACTIVE)
2015-05-08 02:07:38 +02:00
}
}
2018-09-26 10:39:01 +02:00
}
2015-05-08 02:07:38 +02:00
2018-09-26 10:39:01 +02:00
if (triggerChangeEvent) {
if (input.hasAttribute('disabled') ||
rootElement.hasAttribute('disabled') ||
input.classList.contains('disabled') ||
rootElement.classList.contains('disabled')) {
return
2015-05-08 02:07:38 +02:00
}
2018-09-26 10:39:01 +02:00
input.checked = !this._element.classList.contains(ClassName.ACTIVE)
$(input).trigger('change')
2015-05-08 02:07:38 +02:00
}
2018-09-26 10:39:01 +02:00
input.focus()
addAriaPressed = false
}
2018-09-26 10:39:01 +02:00
}
2018-09-26 10:39:01 +02:00
if (addAriaPressed) {
this._element.setAttribute('aria-pressed',
!this._element.classList.contains(ClassName.ACTIVE))
2015-05-08 02:07:38 +02:00
}
2018-09-26 10:39:01 +02:00
if (triggerChangeEvent) {
$(this._element).toggleClass(ClassName.ACTIVE)
2015-05-13 21:48:34 +02:00
}
2018-09-26 10:39:01 +02:00
}
2015-05-13 21:48:34 +02:00
2018-09-26 10:39:01 +02:00
dispose() {
$.removeData(this._element, DATA_KEY)
this._element = null
}
2015-05-08 02:07:38 +02:00
2018-09-26 10:39:01 +02:00
// Static
2015-05-08 02:07:38 +02:00
2018-09-26 10:39:01 +02:00
static _jQueryInterface(config) {
return this.each(function () {
let data = $(this).data(DATA_KEY)
2015-05-08 02:07:38 +02:00
2018-09-26 10:39:01 +02:00
if (!data) {
data = new Button(this)
$(this).data(DATA_KEY, data)
}
if (config === 'toggle') {
data[config]()
}
})
2015-05-08 02:07:38 +02:00
}
2018-09-26 10:39:01 +02:00
}
2015-05-08 02:07:38 +02:00
2018-09-26 10:39:01 +02:00
/**
* ------------------------------------------------------------------------
* Data Api implementation
* ------------------------------------------------------------------------
*/
2015-05-08 02:07:38 +02:00
2018-09-26 10:39:01 +02:00
$(document)
.on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE_CARROT, (event) => {
event.preventDefault()
2015-05-08 02:07:38 +02:00
2018-09-26 10:39:01 +02:00
let button = event.target
2015-05-08 02:07:38 +02:00
2018-09-26 10:39:01 +02:00
if (!$(button).hasClass(ClassName.BUTTON)) {
button = $(button).closest(Selector.BUTTON)
}
2015-05-08 02:07:38 +02:00
2018-09-26 10:39:01 +02:00
Button._jQueryInterface.call($(button), 'toggle')
})
.on(Event.FOCUS_BLUR_DATA_API, Selector.DATA_TOGGLE_CARROT, (event) => {
const button = $(event.target).closest(Selector.BUTTON)[0]
$(button).toggleClass(ClassName.FOCUS, /^focus(in)?$/.test(event.type))
})
2015-05-08 02:07:38 +02:00
2018-09-26 10:39:01 +02:00
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
*/
2015-05-08 02:07:38 +02:00
2018-09-26 10:39:01 +02:00
$.fn[NAME] = Button._jQueryInterface
$.fn[NAME].Constructor = Button
$.fn[NAME].noConflict = () => {
$.fn[NAME] = JQUERY_NO_CONFLICT
return Button._jQueryInterface
}
2015-05-08 02:07:38 +02:00
export default Button