Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Switch to string constants. #30490

Merged
merged 2 commits into from Mar 31, 2020
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions bundlesize.config.json
Expand Up @@ -30,15 +30,15 @@
},
{
"path": "./dist/js/bootstrap.bundle.min.js",
"maxSize": "22.25 kB"
"maxSize": "21.5 kB"
},
{
"path": "./dist/js/bootstrap.js",
"maxSize": "25 kB"
},
{
"path": "./dist/js/bootstrap.min.js",
"maxSize": "15.75 kB"
"maxSize": "14.75 kB"
}
]
}
34 changes: 14 additions & 20 deletions js/src/alert.js
Expand Up @@ -21,21 +21,15 @@ const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
const JQUERY_NO_CONFLICT = $.fn[NAME]

const Selector = {
DISMISS : '[data-dismiss="alert"]'
}
const SELECTOR_DISMISS = '[data-dismiss="alert"]'

const Event = {
CLOSE : `close${EVENT_KEY}`,
CLOSED : `closed${EVENT_KEY}`,
CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`
}
const EVENT_CLOSE = `close${EVENT_KEY}`
const EVENT_CLOSED = `closed${EVENT_KEY}`
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`

const ClassName = {
ALERT : 'alert',
FADE : 'fade',
SHOW : 'show'
}
const CLASS_NAME_ALERT = 'alert'
const CLASS_NAME_FADE = 'fade'
const CLASS_NAME_SHOW = 'show'

/**
* ------------------------------------------------------------------------
Expand Down Expand Up @@ -87,23 +81,23 @@ class Alert {
}

if (!parent) {
parent = $(element).closest(`.${ClassName.ALERT}`)[0]
parent = $(element).closest(`.${CLASS_NAME_ALERT}`)[0]
}

return parent
}

_triggerCloseEvent(element) {
const closeEvent = $.Event(Event.CLOSE)
const closeEvent = $.Event(EVENT_CLOSE)

$(element).trigger(closeEvent)
return closeEvent
}

_removeElement(element) {
$(element).removeClass(ClassName.SHOW)
$(element).removeClass(CLASS_NAME_SHOW)

if (!$(element).hasClass(ClassName.FADE)) {
if (!$(element).hasClass(CLASS_NAME_FADE)) {
this._destroyElement(element)
return
}
Expand All @@ -118,7 +112,7 @@ class Alert {
_destroyElement(element) {
$(element)
.detach()
.trigger(Event.CLOSED)
.trigger(EVENT_CLOSED)
.remove()
}

Expand Down Expand Up @@ -158,8 +152,8 @@ class Alert {
*/

$(document).on(
Event.CLICK_DATA_API,
Selector.DISMISS,
EVENT_CLICK_DATA_API,
SELECTOR_DISMISS,
Alert._handleDismiss(new Alert())
)

Expand Down
84 changes: 39 additions & 45 deletions js/src/button.js
Expand Up @@ -20,28 +20,22 @@ const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
const JQUERY_NO_CONFLICT = $.fn[NAME]

const ClassName = {
ACTIVE : 'active',
BUTTON : 'btn',
FOCUS : 'focus'
}

const Selector = {
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}`,
LOAD_DATA_API : `load${EVENT_KEY}${DATA_API_KEY}`
}
const CLASS_NAME_ACTIVE = 'active'
const CLASS_NAME_BUTTON = 'btn'
const CLASS_NAME_FOCUS = 'focus'

const SELECTOR_DATA_TOGGLE_CARROT = '[data-toggle^="button"]'
const SELECTOR_DATA_TOGGLES = '[data-toggle="buttons"]'
const SELECTOR_DATA_TOGGLE = '[data-toggle="button"]'
const SELECTOR_DATA_TOGGLES_BUTTONS = '[data-toggle="buttons"] .btn'
const SELECTOR_INPUT = 'input:not([type="hidden"])'
const SELECTOR_ACTIVE = '.active'
const SELECTOR_BUTTON = '.btn'

const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
const EVENT_FOCUS_BLUR_DATA_API = `focus${EVENT_KEY}${DATA_API_KEY} ` +
`blur${EVENT_KEY}${DATA_API_KEY}`
const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`

/**
* ------------------------------------------------------------------------
Expand All @@ -66,30 +60,30 @@ class Button {
let triggerChangeEvent = true
let addAriaPressed = true
const rootElement = $(this._element).closest(
Selector.DATA_TOGGLES
SELECTOR_DATA_TOGGLES
)[0]

if (rootElement) {
const input = this._element.querySelector(Selector.INPUT)
const input = this._element.querySelector(SELECTOR_INPUT)

if (input) {
if (input.type === 'radio') {
if (input.checked &&
this._element.classList.contains(ClassName.ACTIVE)) {
this._element.classList.contains(CLASS_NAME_ACTIVE)) {
triggerChangeEvent = false
} else {
const activeElement = rootElement.querySelector(Selector.ACTIVE)
const activeElement = rootElement.querySelector(SELECTOR_ACTIVE)

if (activeElement) {
$(activeElement).removeClass(ClassName.ACTIVE)
$(activeElement).removeClass(CLASS_NAME_ACTIVE)
}
}
}

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(ClassName.ACTIVE)
input.checked = !this._element.classList.contains(CLASS_NAME_ACTIVE)
}
$(input).trigger('change')
}
Expand All @@ -102,11 +96,11 @@ class Button {
if (!(this._element.hasAttribute('disabled') || this._element.classList.contains('disabled'))) {
if (addAriaPressed) {
this._element.setAttribute('aria-pressed',
!this._element.classList.contains(ClassName.ACTIVE))
!this._element.classList.contains(CLASS_NAME_ACTIVE))
}

if (triggerChangeEvent) {
$(this._element).toggleClass(ClassName.ACTIVE)
$(this._element).toggleClass(CLASS_NAME_ACTIVE)
}
}
}
Expand Down Expand Up @@ -141,18 +135,18 @@ class Button {
*/

$(document)
.on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE_CARROT, (event) => {
.on(EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE_CARROT, (event) => {
let button = event.target
const initialButton = button

if (!$(button).hasClass(ClassName.BUTTON)) {
button = $(button).closest(Selector.BUTTON)[0]
if (!$(button).hasClass(CLASS_NAME_BUTTON)) {
button = $(button).closest(SELECTOR_BUTTON)[0]
}

if (!button || button.hasAttribute('disabled') || button.classList.contains('disabled')) {
event.preventDefault() // work around Firefox bug #1540995
} else {
const inputBtn = button.querySelector(Selector.INPUT)
const inputBtn = button.querySelector(SELECTOR_INPUT)

if (inputBtn && (inputBtn.hasAttribute('disabled') || inputBtn.classList.contains('disabled'))) {
event.preventDefault() // work around Firefox bug #1540995
Expand All @@ -165,34 +159,34 @@ $(document)
Button._jQueryInterface.call($(button), 'toggle')
}
})
.on(Event.FOCUS_BLUR_DATA_API, Selector.DATA_TOGGLE_CARROT, (event) => {
const button = $(event.target).closest(Selector.BUTTON)[0]
$(button).toggleClass(ClassName.FOCUS, /^focus(in)?$/.test(event.type))
.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, () => {
$(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))
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)
const input = button.querySelector(SELECTOR_INPUT)
if (input.checked || input.hasAttribute('checked')) {
button.classList.add(ClassName.ACTIVE)
button.classList.add(CLASS_NAME_ACTIVE)
} else {
button.classList.remove(ClassName.ACTIVE)
button.classList.remove(CLASS_NAME_ACTIVE)
}
}

// find all button toggles
buttons = [].slice.call(document.querySelectorAll(Selector.DATA_TOGGLE))
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)
button.classList.add(CLASS_NAME_ACTIVE)
} else {
button.classList.remove(ClassName.ACTIVE)
button.classList.remove(CLASS_NAME_ACTIVE)
}
}
})
Expand Down