diff options
author | Patrick H. Lauke <redux@splintered.co.uk> | 2019-06-24 23:01:44 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2019-07-10 11:03:54 +0300 |
commit | be80d26cdbb7e7a0210889d91ac8036c396abb26 (patch) | |
tree | 4025d6cde1e3b20a661672b06ee53e37f64ea844 /js/src | |
parent | 22f6b373f9b9e0e7ce4582f8ebac32efeb9046e3 (diff) |
Ensure button plugin sets/removes active class correctly on page load (#28952)
* Ensure correct active class is set on button toggles/checkboxes/radios on page load
Sanity check, ensures that the UI visually matches the actual values/states of controls. Also ensures that if any autocomplete/autofill happened, this is visually accounted for
by having the correct class set.
Includes unit tests (and `autocomplete` has been removed from these as it's no longer necessary)
* Remove now unnecessary autocomplete attribute
As the attribute was there to force/ensure that the visual presentation matched the state, and this is now taken care of programmatically, there's no need to unnecessarily suppress autocomplete...let them autocomplete if they want to...
Diffstat (limited to 'js/src')
-rw-r--r-- | js/src/button.js | 44 |
1 files changed, 37 insertions, 7 deletions
diff --git a/js/src/button.js b/js/src/button.js index 6225137019..70e6d37994 100644 --- a/js/src/button.js +++ b/js/src/button.js @@ -27,17 +27,20 @@ const ClassName = { } const Selector = { - DATA_TOGGLE_CARROT : '[data-toggle^="button"]', - DATA_TOGGLE : '[data-toggle="buttons"]', - INPUT : 'input:not([type="hidden"])', - ACTIVE : '.active', - BUTTON : '.btn' + DATA_TOGGLE_CARROT : '[data-toggle^="button"]', + DATA_TOGGLES : '[data-toggle="buttons"]', + DATA_TOGGLE : '[data-toggle="button"]', + DATA_TOGGLES_BUTTONS : '[data-toggle="buttons"] .btn', + INPUT : 'input:not([type="hidden"])', + 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}` + `blur${EVENT_KEY}${DATA_API_KEY}`, + LOAD_DATA_API : `load${EVENT_KEY}${DATA_API_KEY}` } /** @@ -63,7 +66,7 @@ class Button { let triggerChangeEvent = true let addAriaPressed = true const rootElement = $(this._element).closest( - Selector.DATA_TOGGLE + Selector.DATA_TOGGLES )[0] if (rootElement) { @@ -167,6 +170,33 @@ $(document) $(button).toggleClass(ClassName.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(ClassName.ACTIVE) + } else { + button.classList.remove(ClassName.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(ClassName.ACTIVE) + } else { + button.classList.remove(ClassName.ACTIVE) + } + } +}) + /** * ------------------------------------------------------------------------ * jQuery |