mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-29 14:59:16 +02:00
Code Issues Releases Wiki Activity

Remove checkbox/radio toggle from button plugin in favor of a CSS only solution

Browse Source
This commit is contained in:
Martijn Cuppens
2020-05-02 11:11:24 +02:00
committed by Mark Otto
parent 1b2ea5efb1
commit 1a0a0858ef
10 changed files with 122 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
js/src/button.js
View File

@@ -8,7 +8,6 @@
import { getjQuery } from './util/index'
import Data from './dom/data'
import EventHandler from './dom/event-handler'
import SelectorEngine from './dom/selector-engine'
/**
* ------------------------------------------------------------------------
@@ -23,18 +22,10 @@ const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
const CLASS_NAME_ACTIVE = 'active'
const CLASS_NAME_DISABLED = 'disabled'
const CLASS_NAME_FOCUS = 'focus'
const SELECTOR_DATA_TOGGLE_CARROT = '[data-toggle^="button"]'
const SELECTOR_DATA_TOGGLE = '[data-toggle="buttons"]'
const SELECTOR_INPUT = 'input:not([type="hidden"])'
const SELECTOR_ACTIVE = '.active'
const SELECTOR_BUTTON = '.btn'
const SELECTOR_DATA_TOGGLE = '[data-toggle="button"]'
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
const EVENT_FOCUS_DATA_API = `focus${EVENT_KEY}${DATA_API_KEY}`
const EVENT_BLUR_DATA_API = `blur${EVENT_KEY}${DATA_API_KEY}`
/**
* ------------------------------------------------------------------------
@@ -57,51 +48,8 @@ class Button {
// Public
toggle() {
let triggerChangeEvent = true
let addAriaPressed = true
const rootElement = this._element.closest(SELECTOR_DATA_TOGGLE)
if (rootElement) {
const input = SelectorEngine.findOne(SELECTOR_INPUT, this._element)
if (input && input.type === 'radio') {
if (input.checked &&
this._element.classList.contains(CLASS_NAME_ACTIVE)) {
triggerChangeEvent = false
} else {
const activeElement = SelectorEngine.findOne(SELECTOR_ACTIVE, rootElement)
if (activeElement) {
activeElement.classList.remove(CLASS_NAME_ACTIVE)
}
}
if (triggerChangeEvent) {
if (input.hasAttribute('disabled') ||
rootElement.hasAttribute('disabled') ||
input.classList.contains(CLASS_NAME_DISABLED) ||
rootElement.classList.contains(CLASS_NAME_DISABLED)) {
return
}
input.checked = !this._element.classList.contains(CLASS_NAME_ACTIVE)
EventHandler.trigger(input, 'change')
}
input.focus()
addAriaPressed = false
}
}
if (addAriaPressed) {
this._element.setAttribute('aria-pressed',
!this._element.classList.contains(CLASS_NAME_ACTIVE))
}
if (triggerChangeEvent) {
this._element.classList.toggle(CLASS_NAME_ACTIVE)
}
// Toggle class and sync the `aria-pressed` attribute with the return value of the `.toggle()` method
this._element.setAttribute('aria-pressed', this._element.classList.toggle(CLASS_NAME_ACTIVE))
}
dispose() {
@@ -136,10 +84,10 @@ class Button {
* ------------------------------------------------------------------------
*/
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE_CARROT, event => {
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, event => {
event.preventDefault()
const button = event.target.closest(SELECTOR_BUTTON)
const button = event.target.closest(SELECTOR_DATA_TOGGLE)
let data = Data.getData(button, DATA_KEY)
if (!data) {
@@ -149,22 +97,6 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE_CARROT, eve
data.toggle()
})
EventHandler.on(document, EVENT_FOCUS_DATA_API, SELECTOR_DATA_TOGGLE_CARROT, event => {
const button = event.target.closest(SELECTOR_BUTTON)
if (button) {
button.classList.add(CLASS_NAME_FOCUS)
}
})
EventHandler.on(document, EVENT_BLUR_DATA_API, SELECTOR_DATA_TOGGLE_CARROT, event => {
const button = event.target.closest(SELECTOR_BUTTON)
if (button) {
button.classList.remove(CLASS_NAME_FOCUS)
}
})
const $ = getjQuery()
/**