diff options
| author | XhmikosR <[email protected]> | 2020-03-07 11:31:42 +0200 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2020-03-18 12:58:54 +0200 |
| commit | 38333feda548fa973e034de03d34429a1f214089 (patch) | |
| tree | 5626c4eb68f38bc03a4b26498d110ac150a24d2d /js/src/modal.js | |
| parent | cece839fc98caa12e73715a2351845580f74c51b (diff) | |
| download | bootstrap-38333feda548fa973e034de03d34429a1f214089.tar.xz bootstrap-38333feda548fa973e034de03d34429a1f214089.zip | |
Switch to strings constants.
This allows the minifier to mangle the constants. It also allows the linter to find unused strings properly.
While at it, remove a few unused properties.
File Before After Diff
--------------------------------------------------------
bootstrap.bundle.min.js 23.61 kB 22.61 kB -1.00 kB (-4.23 %)
bootstrap.min.js 17.04 kB 16.08 kB -0.96 kB (-5.63 %)
Diffstat (limited to 'js/src/modal.js')
| -rw-r--r-- | js/src/modal.js | 156 |
1 files changed, 75 insertions, 81 deletions
diff --git a/js/src/modal.js b/js/src/modal.js index 48ff5b854..bcf13454f 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -48,39 +48,33 @@ const DefaultType = { show: 'boolean' } -const Event = { - HIDE: `hide${EVENT_KEY}`, - HIDE_PREVENTED: `hidePrevented${EVENT_KEY}`, - HIDDEN: `hidden${EVENT_KEY}`, - SHOW: `show${EVENT_KEY}`, - SHOWN: `shown${EVENT_KEY}`, - FOCUSIN: `focusin${EVENT_KEY}`, - RESIZE: `resize${EVENT_KEY}`, - CLICK_DISMISS: `click.dismiss${EVENT_KEY}`, - KEYDOWN_DISMISS: `keydown.dismiss${EVENT_KEY}`, - MOUSEUP_DISMISS: `mouseup.dismiss${EVENT_KEY}`, - MOUSEDOWN_DISMISS: `mousedown.dismiss${EVENT_KEY}`, - CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}` -} - -const ClassName = { - SCROLLABLE: 'modal-dialog-scrollable', - SCROLLBAR_MEASURER: 'modal-scrollbar-measure', - BACKDROP: 'modal-backdrop', - OPEN: 'modal-open', - FADE: 'fade', - SHOW: 'show', - STATIC: 'modal-static' -} - -const Selector = { - DIALOG: '.modal-dialog', - MODAL_BODY: '.modal-body', - DATA_TOGGLE: '[data-toggle="modal"]', - DATA_DISMISS: '[data-dismiss="modal"]', - FIXED_CONTENT: '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top', - STICKY_CONTENT: '.sticky-top' -} +const EVENT_HIDE = `hide${EVENT_KEY}` +const EVENT_HIDE_PREVENTED = `hidePrevented${EVENT_KEY}` +const EVENT_HIDDEN = `hidden${EVENT_KEY}` +const EVENT_SHOW = `show${EVENT_KEY}` +const EVENT_SHOWN = `shown${EVENT_KEY}` +const EVENT_FOCUSIN = `focusin${EVENT_KEY}` +const EVENT_RESIZE = `resize${EVENT_KEY}` +const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY}` +const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}` +const EVENT_MOUSEUP_DISMISS = `mouseup.dismiss${EVENT_KEY}` +const EVENT_MOUSEDOWN_DISMISS = `mousedown.dismiss${EVENT_KEY}` +const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}` + +const CLASS_NAME_SCROLLABLE = 'modal-dialog-scrollable' +const CLASS_NAME_SCROLLBAR_MEASURER = 'modal-scrollbar-measure' +const CLASS_NAME_BACKDROP = 'modal-backdrop' +const CLASS_NAME_OPEN = 'modal-open' +const CLASS_NAME_FADE = 'fade' +const CLASS_NAME_SHOW = 'show' +const CLASS_NAME_STATIC = 'modal-static' + +const SELECTOR_DIALOG = '.modal-dialog' +const SELECTOR_MODAL_BODY = '.modal-body' +const SELECTOR_DATA_TOGGLE = '[data-toggle="modal"]' +const SELECTOR_DATA_DISMISS = '[data-dismiss="modal"]' +const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top' +const SELECTOR_STICKY_CONTENT = '.sticky-top' /** * ------------------------------------------------------------------------ @@ -92,7 +86,7 @@ class Modal { constructor(element, config) { this._config = this._getConfig(config) this._element = element - this._dialog = SelectorEngine.findOne(Selector.DIALOG, element) + this._dialog = SelectorEngine.findOne(SELECTOR_DIALOG, element) this._backdrop = null this._isShown = false this._isBodyOverflowing = false @@ -123,11 +117,11 @@ class Modal { return } - if (this._element.classList.contains(ClassName.FADE)) { + if (this._element.classList.contains(CLASS_NAME_FADE)) { this._isTransitioning = true } - const showEvent = EventHandler.trigger(this._element, Event.SHOW, { + const showEvent = EventHandler.trigger(this._element, EVENT_SHOW, { relatedTarget }) @@ -146,13 +140,13 @@ class Modal { this._setResizeEvent() EventHandler.on(this._element, - Event.CLICK_DISMISS, - Selector.DATA_DISMISS, + EVENT_CLICK_DISMISS, + SELECTOR_DATA_DISMISS, event => this.hide(event) ) - EventHandler.on(this._dialog, Event.MOUSEDOWN_DISMISS, () => { - EventHandler.one(this._element, Event.MOUSEUP_DISMISS, event => { + EventHandler.on(this._dialog, EVENT_MOUSEDOWN_DISMISS, () => { + EventHandler.one(this._element, EVENT_MOUSEUP_DISMISS, event => { if (event.target === this._element) { this._ignoreBackdropClick = true } @@ -171,14 +165,14 @@ class Modal { return } - const hideEvent = EventHandler.trigger(this._element, Event.HIDE) + const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE) if (hideEvent.defaultPrevented) { return } this._isShown = false - const transition = this._element.classList.contains(ClassName.FADE) + const transition = this._element.classList.contains(CLASS_NAME_FADE) if (transition) { this._isTransitioning = true @@ -187,12 +181,12 @@ class Modal { this._setEscapeEvent() this._setResizeEvent() - EventHandler.off(document, Event.FOCUSIN) + EventHandler.off(document, EVENT_FOCUSIN) - this._element.classList.remove(ClassName.SHOW) + this._element.classList.remove(CLASS_NAME_SHOW) - EventHandler.off(this._element, Event.CLICK_DISMISS) - EventHandler.off(this._dialog, Event.MOUSEDOWN_DISMISS) + EventHandler.off(this._element, EVENT_CLICK_DISMISS) + EventHandler.off(this._dialog, EVENT_MOUSEDOWN_DISMISS) if (transition) { const transitionDuration = getTransitionDurationFromElement(this._element) @@ -209,11 +203,11 @@ class Modal { .forEach(htmlElement => EventHandler.off(htmlElement, EVENT_KEY)) /** - * `document` has 2 events `Event.FOCUSIN` and `Event.CLICK_DATA_API` + * `document` has 2 events `EVENT_FOCUSIN` and `EVENT_CLICK_DATA_API` * Do not move `document` in `htmlElements` array - * It will remove `Event.CLICK_DATA_API` event that should remain + * It will remove `EVENT_CLICK_DATA_API` event that should remain */ - EventHandler.off(document, Event.FOCUSIN) + EventHandler.off(document, EVENT_FOCUSIN) Data.removeData(this._element, DATA_KEY) @@ -244,8 +238,8 @@ class Modal { } _showElement(relatedTarget) { - const transition = this._element.classList.contains(ClassName.FADE) - const modalBody = SelectorEngine.findOne(Selector.MODAL_BODY, this._dialog) + const transition = this._element.classList.contains(CLASS_NAME_FADE) + const modalBody = SelectorEngine.findOne(SELECTOR_MODAL_BODY, this._dialog) if (!this._element.parentNode || this._element.parentNode.nodeType !== Node.ELEMENT_NODE) { @@ -257,7 +251,7 @@ class Modal { this._element.removeAttribute('aria-hidden') this._element.setAttribute('aria-modal', true) - if (this._dialog.classList.contains(ClassName.SCROLLABLE) && modalBody) { + if (this._dialog.classList.contains(CLASS_NAME_SCROLLABLE) && modalBody) { modalBody.scrollTop = 0 } else { this._element.scrollTop = 0 @@ -267,7 +261,7 @@ class Modal { reflow(this._element) } - this._element.classList.add(ClassName.SHOW) + this._element.classList.add(CLASS_NAME_SHOW) if (this._config.focus) { this._enforceFocus() @@ -279,7 +273,7 @@ class Modal { } this._isTransitioning = false - EventHandler.trigger(this._element, Event.SHOWN, { + EventHandler.trigger(this._element, EVENT_SHOWN, { relatedTarget }) } @@ -295,8 +289,8 @@ class Modal { } _enforceFocus() { - EventHandler.off(document, Event.FOCUSIN) // guard against infinite focus loop - EventHandler.on(document, Event.FOCUSIN, event => { + EventHandler.off(document, EVENT_FOCUSIN) // guard against infinite focus loop + EventHandler.on(document, EVENT_FOCUSIN, event => { if (document !== event.target && this._element !== event.target && !this._element.contains(event.target)) { @@ -307,7 +301,7 @@ class Modal { _setEscapeEvent() { if (this._isShown) { - EventHandler.on(this._element, Event.KEYDOWN_DISMISS, event => { + EventHandler.on(this._element, EVENT_KEYDOWN_DISMISS, event => { if (this._config.keyboard && event.which === ESCAPE_KEYCODE) { event.preventDefault() this.hide() @@ -316,15 +310,15 @@ class Modal { } }) } else { - EventHandler.off(this._element, Event.KEYDOWN_DISMISS) + EventHandler.off(this._element, EVENT_KEYDOWN_DISMISS) } } _setResizeEvent() { if (this._isShown) { - EventHandler.on(window, Event.RESIZE, () => this._adjustDialog()) + EventHandler.on(window, EVENT_RESIZE, () => this._adjustDialog()) } else { - EventHandler.off(window, Event.RESIZE) + EventHandler.off(window, EVENT_RESIZE) } } @@ -334,10 +328,10 @@ class Modal { this._element.removeAttribute('aria-modal') this._isTransitioning = false this._showBackdrop(() => { - document.body.classList.remove(ClassName.OPEN) + document.body.classList.remove(CLASS_NAME_OPEN) this._resetAdjustments() this._resetScrollbar() - EventHandler.trigger(this._element, Event.HIDDEN) + EventHandler.trigger(this._element, EVENT_HIDDEN) }) } @@ -347,13 +341,13 @@ class Modal { } _showBackdrop(callback) { - const animate = this._element.classList.contains(ClassName.FADE) ? - ClassName.FADE : + const animate = this._element.classList.contains(CLASS_NAME_FADE) ? + CLASS_NAME_FADE : '' if (this._isShown && this._config.backdrop) { this._backdrop = document.createElement('div') - this._backdrop.className = ClassName.BACKDROP + this._backdrop.className = CLASS_NAME_BACKDROP if (animate) { this._backdrop.classList.add(animate) @@ -361,7 +355,7 @@ class Modal { document.body.appendChild(this._backdrop) - EventHandler.on(this._element, Event.CLICK_DISMISS, event => { + EventHandler.on(this._element, EVENT_CLICK_DISMISS, event => { if (this._ignoreBackdropClick) { this._ignoreBackdropClick = false return @@ -378,7 +372,7 @@ class Modal { reflow(this._backdrop) } - this._backdrop.classList.add(ClassName.SHOW) + this._backdrop.classList.add(CLASS_NAME_SHOW) if (!animate) { callback() @@ -390,14 +384,14 @@ class Modal { EventHandler.one(this._backdrop, TRANSITION_END, callback) emulateTransitionEnd(this._backdrop, backdropTransitionDuration) } else if (!this._isShown && this._backdrop) { - this._backdrop.classList.remove(ClassName.SHOW) + this._backdrop.classList.remove(CLASS_NAME_SHOW) const callbackRemove = () => { this._removeBackdrop() callback() } - if (this._element.classList.contains(ClassName.FADE)) { + if (this._element.classList.contains(CLASS_NAME_FADE)) { const backdropTransitionDuration = getTransitionDurationFromElement(this._backdrop) EventHandler.one(this._backdrop, TRANSITION_END, callbackRemove) emulateTransitionEnd(this._backdrop, backdropTransitionDuration) @@ -411,15 +405,15 @@ class Modal { _triggerBackdropTransition() { if (this._config.backdrop === 'static') { - const hideEvent = EventHandler.trigger(this._element, Event.HIDE_PREVENTED) + const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED) if (hideEvent.defaultPrevented) { return } - this._element.classList.add(ClassName.STATIC) + this._element.classList.add(CLASS_NAME_STATIC) const modalTransitionDuration = getTransitionDurationFromElement(this._element) EventHandler.one(this._element, TRANSITION_END, () => { - this._element.classList.remove(ClassName.STATIC) + this._element.classList.remove(CLASS_NAME_STATIC) }) emulateTransitionEnd(this._element, modalTransitionDuration) this._element.focus() @@ -462,7 +456,7 @@ class Modal { // while $(DOMNode).css('padding-right') returns the calculated value or 0 if not set // Adjust fixed content padding - makeArray(SelectorEngine.find(Selector.FIXED_CONTENT)) + makeArray(SelectorEngine.find(SELECTOR_FIXED_CONTENT)) .forEach(element => { const actualPadding = element.style.paddingRight const calculatedPadding = window.getComputedStyle(element)['padding-right'] @@ -471,7 +465,7 @@ class Modal { }) // Adjust sticky content margin - makeArray(SelectorEngine.find(Selector.STICKY_CONTENT)) + makeArray(SelectorEngine.find(SELECTOR_STICKY_CONTENT)) .forEach(element => { const actualMargin = element.style.marginRight const calculatedMargin = window.getComputedStyle(element)['margin-right'] @@ -487,12 +481,12 @@ class Modal { document.body.style.paddingRight = `${parseFloat(calculatedPadding) + this._scrollbarWidth}px` } - document.body.classList.add(ClassName.OPEN) + document.body.classList.add(CLASS_NAME_OPEN) } _resetScrollbar() { // Restore fixed content padding - makeArray(SelectorEngine.find(Selector.FIXED_CONTENT)) + makeArray(SelectorEngine.find(SELECTOR_FIXED_CONTENT)) .forEach(element => { const padding = Manipulator.getDataAttribute(element, 'padding-right') if (typeof padding !== 'undefined') { @@ -502,7 +496,7 @@ class Modal { }) // Restore sticky content and navbar-toggler margin - makeArray(SelectorEngine.find(`${Selector.STICKY_CONTENT}`)) + makeArray(SelectorEngine.find(`${SELECTOR_STICKY_CONTENT}`)) .forEach(element => { const margin = Manipulator.getDataAttribute(element, 'margin-right') if (typeof margin !== 'undefined') { @@ -523,7 +517,7 @@ class Modal { _getScrollbarWidth() { // thx d.walsh const scrollDiv = document.createElement('div') - scrollDiv.className = ClassName.SCROLLBAR_MEASURER + scrollDiv.className = CLASS_NAME_SCROLLBAR_MEASURER document.body.appendChild(scrollDiv) const scrollbarWidth = scrollDiv.getBoundingClientRect().width - scrollDiv.clientWidth document.body.removeChild(scrollDiv) @@ -568,20 +562,20 @@ class Modal { * ------------------------------------------------------------------------ */ -EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) { +EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) { const target = getElementFromSelector(this) if (this.tagName === 'A' || this.tagName === 'AREA') { event.preventDefault() } - EventHandler.one(target, Event.SHOW, showEvent => { + EventHandler.one(target, EVENT_SHOW, showEvent => { if (showEvent.defaultPrevented) { // only register focus restorer if modal will actually get shown return } - EventHandler.one(target, Event.HIDDEN, () => { + EventHandler.one(target, EVENT_HIDDEN, () => { if (isVisible(this)) { this.focus() } |
