Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
button.js 5.60 KiB
1 
/**
2 
 * --------------------------------------------------------------------------
3 
 * Bootstrap (v4.6.0): button.js
4 
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
5 
 * --------------------------------------------------------------------------
6 
 */
7
8 
import $ from 'jquery'
9
10 
/**
11 
 * Constants
12 
 */
13
14 
const NAME = 'button'
15 
const VERSION = '4.6.0'
16 
const DATA_KEY = 'bs.button'
17 
const EVENT_KEY = `.${DATA_KEY}`
18 
const DATA_API_KEY = '.data-api'
19 
const JQUERY_NO_CONFLICT = $.fn[NAME]
20
21 
const CLASS_NAME_ACTIVE = 'active'
22 
const CLASS_NAME_BUTTON = 'btn'
23 
const CLASS_NAME_FOCUS = 'focus'
24
25 
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
26 
const EVENT_FOCUS_BLUR_DATA_API = `focus${EVENT_KEY}${DATA_API_KEY} ` +
27 
                          `blur${EVENT_KEY}${DATA_API_KEY}`
28 
const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
29
30 
const SELECTOR_DATA_TOGGLE_CARROT = '[data-toggle^="button"]'
31 
const SELECTOR_DATA_TOGGLES = '[data-toggle="buttons"]'
32 
const SELECTOR_DATA_TOGGLE = '[data-toggle="button"]'
33 
const SELECTOR_DATA_TOGGLES_BUTTONS = '[data-toggle="buttons"] .btn'
34 
const SELECTOR_INPUT = 'input:not([type="hidden"])'
35 
const SELECTOR_ACTIVE = '.active'
36 
const SELECTOR_BUTTON = '.btn'
37
38 
/**
39 
 * Class definition
40 
 */
41
42 
class Button {
43 
  constructor(element) {
44 
    this._element = element
45 
    this.shouldAvoidTriggerChange = false
46 
  }
47
48 
  // Getters
49 
  static get VERSION() {
50 
    return VERSION
51 
  }
52
53 
  // Public
54 
  toggle() {
55 
    let triggerChangeEvent = true
56 
    let addAriaPressed = true
57 
    const rootElement = $(this._element).closest(SELECTOR_DATA_TOGGLES)[0]
58
59 
    if (rootElement) {
60 
      const input = this._element.querySelector(SELECTOR_INPUT)
61
62 
      if (input) {
63 
        if (input.type === 'radio') {
64 
          if (input.checked && this._element.classList.contains(CLASS_NAME_ACTIVE)) {
65 
            triggerChangeEvent = false
66 
          } else {
67 
            const activeElement = rootElement.querySelector(SELECTOR_ACTIVE)
68
69 
            if (activeElement) {
70 
              $(activeElement).removeClass(CLASS_NAME_ACTIVE)
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
} } } if (triggerChangeEvent) { // if it's not a radio button or checkbox don't add a pointless/invalid checked property to the input if (input.type === 'checkbox' || input.type === 'radio') { input.checked = !this._element.classList.contains(CLASS_NAME_ACTIVE) } if (!this.shouldAvoidTriggerChange) { $(input).trigger('change') } } input.focus() addAriaPressed = false } } if (!(this._element.hasAttribute('disabled') || this._element.classList.contains('disabled'))) { if (addAriaPressed) { this._element.setAttribute('aria-pressed', !this._element.classList.contains(CLASS_NAME_ACTIVE)) } if (triggerChangeEvent) { $(this._element).toggleClass(CLASS_NAME_ACTIVE) } } } dispose() { $.removeData(this._element, DATA_KEY) this._element = null } // Static static _jQueryInterface(config, avoidTriggerChange) { return this.each(function () { const $element = $(this) let data = $element.data(DATA_KEY) if (!data) { data = new Button(this) $element.data(DATA_KEY, data) } data.shouldAvoidTriggerChange = avoidTriggerChange if (config === 'toggle') { data[config]() } }) } } /** * Data API implementation */ $(document) .on(EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE_CARROT, event => { let button = event.target const initialButton = button if (!$(button).hasClass(CLASS_NAME_BUTTON)) { button = $(button).closest(SELECTOR_BUTTON)[0] } if (!button || button.hasAttribute('disabled') || button.classList.contains('disabled')) {
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
event.preventDefault() // work around Firefox bug #1540995 } else { const inputBtn = button.querySelector(SELECTOR_INPUT) if (inputBtn && (inputBtn.hasAttribute('disabled') || inputBtn.classList.contains('disabled'))) { event.preventDefault() // work around Firefox bug #1540995 return } if (initialButton.tagName === 'INPUT' || button.tagName !== 'LABEL') { Button._jQueryInterface.call($(button), 'toggle', initialButton.tagName === 'INPUT') } } }) .on(EVENT_FOCUS_BLUR_DATA_API, SELECTOR_DATA_TOGGLE_CARROT, event => { const button = $(event.target).closest(SELECTOR_BUTTON)[0] $(button).toggleClass(CLASS_NAME_FOCUS, /^focus(in)?$/.test(event.type)) }) $(window).on(EVENT_LOAD_DATA_API, () => { // ensure correct active class is set to match the controls' actual values/states // find all checkboxes/readio buttons inside data-toggle groups let buttons = [].slice.call(document.querySelectorAll(SELECTOR_DATA_TOGGLES_BUTTONS)) for (let i = 0, len = buttons.length; i < len; i++) { const button = buttons[i] const input = button.querySelector(SELECTOR_INPUT) if (input.checked || input.hasAttribute('checked')) { button.classList.add(CLASS_NAME_ACTIVE) } else { button.classList.remove(CLASS_NAME_ACTIVE) } } // find all button toggles buttons = [].slice.call(document.querySelectorAll(SELECTOR_DATA_TOGGLE)) for (let i = 0, len = buttons.length; i < len; i++) { const button = buttons[i] if (button.getAttribute('aria-pressed') === 'true') { button.classList.add(CLASS_NAME_ACTIVE) } else { button.classList.remove(CLASS_NAME_ACTIVE) } } }) /** * jQuery */ $.fn[NAME] = Button._jQueryInterface $.fn[NAME].Constructor = Button $.fn[NAME].noConflict = () => { $.fn[NAME] = JQUERY_NO_CONFLICT return Button._jQueryInterface } export default Button