From 1a6fdfae6be09b09eaced8f0e442ca6f7680a61e Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Sat, 9 Oct 2021 09:33:12 +0300 Subject: Bump version to 5.1.3. --- js/src/modal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/src/modal.js') diff --git a/js/src/modal.js b/js/src/modal.js index ec67f1fa1..00df5c482 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -1,6 +1,6 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.1.2): modal.js + * Bootstrap (v5.1.3): modal.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -- cgit v1.2.3 From e8f702666f285a3e69866ed1f8d29fa6eaaaeabb Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 13 Oct 2021 15:19:28 +0300 Subject: JS: minor refactoring (#35183) * add missing comments * shorten block comments * reorder constants * reorder public/private methods * sort exports alphabetically in util/index.js * fix a couple of typos --- js/src/modal.js | 47 +++++++++++++++++------------------------------ 1 file changed, 17 insertions(+), 30 deletions(-) (limited to 'js/src/modal.js') diff --git a/js/src/modal.js b/js/src/modal.js index 2efbaa4b3..bfb980236 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -23,9 +23,7 @@ import FocusTrap from './util/focustrap' import { enableDismissTrigger } from './util/component-functions' /** - * ------------------------------------------------------------------------ * Constants - * ------------------------------------------------------------------------ */ const NAME = 'modal' @@ -34,18 +32,6 @@ const EVENT_KEY = `.${DATA_KEY}` const DATA_API_KEY = '.data-api' const ESCAPE_KEY = 'Escape' -const Default = { - backdrop: true, - keyboard: true, - focus: true -} - -const DefaultType = { - backdrop: '(boolean|string)', - keyboard: 'boolean', - focus: 'boolean' -} - const EVENT_HIDE = `hide${EVENT_KEY}` const EVENT_HIDE_PREVENTED = `hidePrevented${EVENT_KEY}` const EVENT_HIDDEN = `hidden${EVENT_KEY}` @@ -68,10 +54,20 @@ const SELECTOR_DIALOG = '.modal-dialog' const SELECTOR_MODAL_BODY = '.modal-body' const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="modal"]' +const Default = { + backdrop: true, + keyboard: true, + focus: true +} + +const DefaultType = { + backdrop: '(boolean|string)', + keyboard: 'boolean', + focus: 'boolean' +} + /** - * ------------------------------------------------------------------------ - * Class Definition - * ------------------------------------------------------------------------ + * Class definition */ class Modal extends BaseComponent { @@ -89,7 +85,6 @@ class Modal extends BaseComponent { } // Getters - static get Default() { return Default } @@ -99,7 +94,6 @@ class Modal extends BaseComponent { } // Public - toggle(relatedTarget) { return this._isShown ? this.hide() : this.show(relatedTarget) } @@ -189,7 +183,6 @@ class Modal extends BaseComponent { } // Private - _initializeBackDrop() { return new Backdrop({ isVisible: Boolean(this._config.backdrop), // 'static' option will be translated to true, and booleans will keep their value @@ -345,9 +338,9 @@ class Modal extends BaseComponent { this._element.focus() } - // ---------------------------------------------------------------------- - // the following methods are used to handle overflowing modals - // ---------------------------------------------------------------------- + /** + * The following methods are used to handle overflowing modals + */ _adjustDialog() { const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight @@ -369,7 +362,6 @@ class Modal extends BaseComponent { } // Static - static jQueryInterface(config, relatedTarget) { return this.each(function () { const data = Modal.getOrCreateInstance(this, config) @@ -388,9 +380,7 @@ class Modal extends BaseComponent { } /** - * ------------------------------------------------------------------------ - * Data Api implementation - * ------------------------------------------------------------------------ + * Data API implementation */ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) { @@ -427,10 +417,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function ( enableDismissTrigger(Modal) /** - * ------------------------------------------------------------------------ * jQuery - * ------------------------------------------------------------------------ - * add .Modal to jQuery only if jQuery is present */ defineJQueryPlugin(Modal) -- cgit v1.2.3 From 79e01c3bad6b7376cf7dc1ea9c6551dce9fdd10e Mon Sep 17 00:00:00 2001 From: GeoSot Date: Fri, 8 Oct 2021 02:19:19 +0300 Subject: Some refactoring on modal, to improve readability and generic functionality --- js/src/modal.js | 60 ++++++++++++++++++++++++++++----------------------------- 1 file changed, 30 insertions(+), 30 deletions(-) (limited to 'js/src/modal.js') diff --git a/js/src/modal.js b/js/src/modal.js index bfb980236..1c7a96adc 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -112,10 +112,7 @@ class Modal extends BaseComponent { } this._isShown = true - - if (this._isAnimated()) { - this._isTransitioning = true - } + this._isTransitioning = true this._scrollBar.hide() @@ -149,11 +146,7 @@ class Modal extends BaseComponent { } this._isShown = false - const isAnimated = this._isAnimated() - - if (isAnimated) { - this._isTransitioning = true - } + this._isTransitioning = true this._setEscapeEvent() this._setResizeEvent() @@ -165,7 +158,7 @@ class Modal extends BaseComponent { EventHandler.off(this._element, EVENT_CLICK_DISMISS) EventHandler.off(this._dialog, EVENT_MOUSEDOWN_DISMISS) - this._queueCallback(() => this._hideModal(), this._element, isAnimated) + this._queueCallback(() => this._hideModal(), this._element, this._isAnimated()) } dispose() { @@ -207,9 +200,6 @@ class Modal extends BaseComponent { } _showElement(relatedTarget) { - const isAnimated = this._isAnimated() - const modalBody = SelectorEngine.findOne(SELECTOR_MODAL_BODY, this._dialog) - if (!this._element.parentNode || this._element.parentNode.nodeType !== Node.ELEMENT_NODE) { // Don't move modal's DOM position document.body.append(this._element) @@ -221,13 +211,12 @@ class Modal extends BaseComponent { this._element.setAttribute('role', 'dialog') this._element.scrollTop = 0 + const modalBody = SelectorEngine.findOne(SELECTOR_MODAL_BODY, this._dialog) if (modalBody) { modalBody.scrollTop = 0 } - if (isAnimated) { - reflow(this._element) - } + reflow(this._element) this._element.classList.add(CLASS_NAME_SHOW) @@ -242,30 +231,37 @@ class Modal extends BaseComponent { }) } - this._queueCallback(transitionComplete, this._dialog, isAnimated) + this._queueCallback(transitionComplete, this._dialog, this._isAnimated()) } _setEscapeEvent() { - if (this._isShown) { - EventHandler.on(this._element, EVENT_KEYDOWN_DISMISS, event => { - if (this._config.keyboard && event.key === ESCAPE_KEY) { - event.preventDefault() - this.hide() - } else if (!this._config.keyboard && event.key === ESCAPE_KEY) { - this._triggerBackdropTransition() - } - }) - } else { + if (!this._isShown) { EventHandler.off(this._element, EVENT_KEYDOWN_DISMISS) + return } + + EventHandler.on(this._element, EVENT_KEYDOWN_DISMISS, event => { + if (event.key !== ESCAPE_KEY) { + return + } + + if (this._config.keyboard) { + event.preventDefault() + this.hide() + return + } + + this._triggerBackdropTransition() + }) } _setResizeEvent() { if (this._isShown) { EventHandler.on(window, EVENT_RESIZE, () => this._adjustDialog()) - } else { - EventHandler.off(window, EVENT_RESIZE) + return } + + EventHandler.off(window, EVENT_RESIZE) } _hideModal() { @@ -274,6 +270,7 @@ class Modal extends BaseComponent { this._element.removeAttribute('aria-modal') this._element.removeAttribute('role') this._isTransitioning = false + this._backdrop.hide(() => { document.body.classList.remove(CLASS_NAME_OPEN) this._resetAdjustments() @@ -295,7 +292,10 @@ class Modal extends BaseComponent { if (this._config.backdrop === true) { this.hide() - } else if (this._config.backdrop === 'static') { + return + } + + if (this._config.backdrop === 'static') { this._triggerBackdropTransition() } }) -- cgit v1.2.3 From fc33ce4b4682edff6ade324bd24abe89f0782158 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Fri, 8 Oct 2021 02:27:00 +0300 Subject: Tweak methods Name them to be more descriptive and have agnostic functionality --- js/src/modal.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'js/src/modal.js') diff --git a/js/src/modal.js b/js/src/modal.js index 1c7a96adc..455d395f7 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -120,8 +120,8 @@ class Modal extends BaseComponent { this._adjustDialog() - this._setEscapeEvent() - this._setResizeEvent() + this._toggleEscapeEventListener(true) + this._toggleResizeEventListener(true) EventHandler.on(this._dialog, EVENT_MOUSEDOWN_DISMISS, () => { EventHandler.one(this._element, EVENT_MOUSEUP_DISMISS, event => { @@ -148,8 +148,8 @@ class Modal extends BaseComponent { this._isShown = false this._isTransitioning = true - this._setEscapeEvent() - this._setResizeEvent() + this._toggleEscapeEventListener(false) + this._toggleResizeEventListener(false) this._focustrap.deactivate() @@ -234,8 +234,8 @@ class Modal extends BaseComponent { this._queueCallback(transitionComplete, this._dialog, this._isAnimated()) } - _setEscapeEvent() { - if (!this._isShown) { + _toggleEscapeEventListener(enable) { + if (!enable) { EventHandler.off(this._element, EVENT_KEYDOWN_DISMISS) return } @@ -255,8 +255,8 @@ class Modal extends BaseComponent { }) } - _setResizeEvent() { - if (this._isShown) { + _toggleResizeEventListener(enable) { + if (enable) { EventHandler.on(window, EVENT_RESIZE, () => this._adjustDialog()) return } -- cgit v1.2.3 From 92e664c921ad6b39d9addd7d991a88f3ea6ea7bc Mon Sep 17 00:00:00 2001 From: GeoSot Date: Fri, 8 Oct 2021 02:46:11 +0300 Subject: Change check for dynamic modal --- js/src/modal.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/src/modal.js') diff --git a/js/src/modal.js b/js/src/modal.js index 455d395f7..16181775a 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -200,8 +200,8 @@ class Modal extends BaseComponent { } _showElement(relatedTarget) { - if (!this._element.parentNode || this._element.parentNode.nodeType !== Node.ELEMENT_NODE) { - // Don't move modal's DOM position + // try to append dynamic modal + if (!document.body.contains(this._element)) { document.body.append(this._element) } -- cgit v1.2.3 From cc3e5789ecba18ccf759b60d90946a1a88ea0fa5 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Fri, 8 Oct 2021 02:55:11 +0300 Subject: Remove some uncovered code that seems to be unused --- js/src/modal.js | 19 ------------------- 1 file changed, 19 deletions(-) (limited to 'js/src/modal.js') diff --git a/js/src/modal.js b/js/src/modal.js index 16181775a..c96ad388c 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -40,8 +40,6 @@ const EVENT_SHOWN = `shown${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_OPEN = 'modal-open' @@ -79,7 +77,6 @@ class Modal extends BaseComponent { this._backdrop = this._initializeBackDrop() this._focustrap = this._initializeFocusTrap() this._isShown = false - this._ignoreBackdropClick = false this._isTransitioning = false this._scrollBar = new ScrollBarHelper() } @@ -123,14 +120,6 @@ class Modal extends BaseComponent { this._toggleEscapeEventListener(true) this._toggleResizeEventListener(true) - EventHandler.on(this._dialog, EVENT_MOUSEDOWN_DISMISS, () => { - EventHandler.one(this._element, EVENT_MOUSEUP_DISMISS, event => { - if (event.target === this._element) { - this._ignoreBackdropClick = true - } - }) - }) - this._showBackdrop(() => this._showElement(relatedTarget)) } @@ -155,9 +144,6 @@ class Modal extends BaseComponent { this._element.classList.remove(CLASS_NAME_SHOW) - EventHandler.off(this._element, EVENT_CLICK_DISMISS) - EventHandler.off(this._dialog, EVENT_MOUSEDOWN_DISMISS) - this._queueCallback(() => this._hideModal(), this._element, this._isAnimated()) } @@ -281,11 +267,6 @@ class Modal extends BaseComponent { _showBackdrop(callback) { EventHandler.on(this._element, EVENT_CLICK_DISMISS, event => { - if (this._ignoreBackdropClick) { - this._ignoreBackdropClick = false - return - } - if (event.target !== event.currentTarget) { return } -- cgit v1.2.3 From 0f9fd75d6c7bfd850f50d6a587c54b8e1227830c Mon Sep 17 00:00:00 2001 From: GeoSot Date: Fri, 8 Oct 2021 03:19:18 +0300 Subject: Respect modal's initial overflowY --- js/src/modal.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) (limited to 'js/src/modal.js') diff --git a/js/src/modal.js b/js/src/modal.js index c96ad388c..ecbf5cadc 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -296,9 +296,9 @@ class Modal extends BaseComponent { const { classList, scrollHeight, style } = this._element const isModalOverflowing = scrollHeight > document.documentElement.clientHeight - + const initialOverflowY = style.overflowY // return if the following background transition hasn't yet completed - if ((!isModalOverflowing && style.overflowY === 'hidden') || classList.contains(CLASS_NAME_STATIC)) { + if (initialOverflowY === 'hidden' || classList.contains(CLASS_NAME_STATIC)) { return } @@ -309,11 +309,9 @@ class Modal extends BaseComponent { classList.add(CLASS_NAME_STATIC) this._queueCallback(() => { classList.remove(CLASS_NAME_STATIC) - if (!isModalOverflowing) { - this._queueCallback(() => { - style.overflowY = '' - }, this._dialog) - } + this._queueCallback(() => { + style.overflowY = initialOverflowY + }, this._dialog) }, this._dialog) this._element.focus() -- cgit v1.2.3 From 91ad255e07d3d16f2ea88ca5b49bbe569ea5e2b4 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Fri, 8 Oct 2021 12:14:45 +0300 Subject: Change adjustDialog's if conditions to improve readability --- js/src/modal.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'js/src/modal.js') diff --git a/js/src/modal.js b/js/src/modal.js index ecbf5cadc..b8b144774 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -326,12 +326,14 @@ class Modal extends BaseComponent { const scrollbarWidth = this._scrollBar.getWidth() const isBodyOverflowing = scrollbarWidth > 0 - if ((!isBodyOverflowing && isModalOverflowing && !isRTL()) || (isBodyOverflowing && !isModalOverflowing && isRTL())) { - this._element.style.paddingLeft = `${scrollbarWidth}px` + if (isBodyOverflowing && !isModalOverflowing) { + const property = isRTL() ? 'paddingLeft' : 'paddingRight' + this._element.style[property] = `${scrollbarWidth}px` } - if ((isBodyOverflowing && !isModalOverflowing && !isRTL()) || (!isBodyOverflowing && isModalOverflowing && isRTL())) { - this._element.style.paddingRight = `${scrollbarWidth}px` + if (!isBodyOverflowing && isModalOverflowing) { + const property = isRTL() ? 'paddingRight' : 'paddingLeft' + this._element.style[property] = `${scrollbarWidth}px` } } -- cgit v1.2.3