diff options
author | Martijn Cuppens <martijn.cuppens@gmail.com> | 2020-05-02 12:11:24 +0300 |
---|---|---|
committer | Mark Otto <otto@github.com> | 2020-06-16 05:04:19 +0300 |
commit | 1a0a0858efa0e1e3c6bebd38058df8ad39ca27a5 (patch) | |
tree | 7135351b96e14bda512d175af447eb9201ea737c /js/src | |
parent | 1b2ea5efb1ca3cea21776bc9992a79aee47fba1a (diff) |
Remove checkbox/radio toggle from button plugin in favor of a CSS only solution
Diffstat (limited to 'js/src')
-rw-r--r-- | js/src/button.js | 78 |
1 files changed, 5 insertions, 73 deletions
diff --git a/js/src/button.js b/js/src/button.js index 67f3b96279..fd29e5218b 100644 --- a/js/src/button.js +++ b/js/src/button.js @@ -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() /** |