mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-27 14:46:01 +03:00
Code Activity

Ensure button plugin sets/removes active class correctly on page load (#28952)

Browse Source 
* 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...
This commit is contained in:
Patrick H. Lauke
2019-06-24 21:01:44 +01:00
committed by XhmikosR
parent 22f6b373f9
commit be80d26cdb
5 changed files with 120 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/src/button.js
+37 -7
View File
@@ -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