From bfa714ae1e91e2f77017d02489cbc39fada032c7 Mon Sep 17 00:00:00 2001 From: Max Beatty Date: Thu, 4 Aug 2016 13:47:30 -0700 Subject: prevent navigating to area href when modal target. fixes #18796 --- 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 9b3a99ddd..fd13a687c 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -491,7 +491,7 @@ const Modal = (($) => { let config = $(target).data(DATA_KEY) ? 'toggle' : $.extend({}, $(target).data(), $(this).data()) - if (this.tagName === 'A') { + if (this.tagName === 'A' || this.tagName === 'AREA') { event.preventDefault() } -- cgit v1.2.3 From 8ff7edaab4f55b6612df3fe670aa9b9ac0984eae Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 19 Oct 2016 08:27:41 -0700 Subject: version bump to alpha 5 --- 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 ebd3e4a34..ee78070dd 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -3,7 +3,7 @@ import Util from './util' /** * -------------------------------------------------------------------------- - * Bootstrap (v4.0.0-alpha.4): modal.js + * Bootstrap (v4.0.0-alpha.5): modal.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * -------------------------------------------------------------------------- */ @@ -18,7 +18,7 @@ const Modal = (($) => { */ const NAME = 'modal' - const VERSION = '4.0.0-alpha.4' + const VERSION = '4.0.0-alpha.5' const DATA_KEY = 'bs.modal' const EVENT_KEY = `.${DATA_KEY}` const DATA_API_KEY = '.data-api' -- cgit v1.2.3 From 9d129a43d6c24d9e60cc8fc7cfbddaaa4c586fdf Mon Sep 17 00:00:00 2001 From: Johann-S Date: Mon, 24 Oct 2016 10:57:32 +0200 Subject: Use a single class name for opened/expanded/shown state of widgets --- js/src/modal.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'js/src/modal.js') diff --git a/js/src/modal.js b/js/src/modal.js index ee78070dd..252637428 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -60,7 +60,7 @@ const Modal = (($) => { BACKDROP : 'modal-backdrop', OPEN : 'modal-open', FADE : 'fade', - IN : 'in' + ACTIVE : 'active' } const Selector = { @@ -169,7 +169,7 @@ const Modal = (($) => { $(document).off(Event.FOCUSIN) - $(this._element).removeClass(ClassName.IN) + $(this._element).removeClass(ClassName.ACTIVE) $(this._element).off(Event.CLICK_DISMISS) $(this._dialog).off(Event.MOUSEDOWN_DISMISS) @@ -231,7 +231,7 @@ const Modal = (($) => { Util.reflow(this._element) } - $(this._element).addClass(ClassName.IN) + $(this._element).addClass(ClassName.ACTIVE) if (this._config.focus) { this._enforceFocus() @@ -343,7 +343,7 @@ const Modal = (($) => { Util.reflow(this._backdrop) } - $(this._backdrop).addClass(ClassName.IN) + $(this._backdrop).addClass(ClassName.ACTIVE) if (!callback) { return @@ -359,7 +359,7 @@ const Modal = (($) => { .emulateTransitionEnd(BACKDROP_TRANSITION_DURATION) } else if (!this._isShown && this._backdrop) { - $(this._backdrop).removeClass(ClassName.IN) + $(this._backdrop).removeClass(ClassName.ACTIVE) let callbackRemove = () => { this._removeBackdrop() -- cgit v1.2.3 From 0974267b8c2b137d563d36c2390b4491fb1e0309 Mon Sep 17 00:00:00 2001 From: Bardi Harborow Date: Tue, 1 Nov 2016 14:32:36 +1100 Subject: Move from $.proxy to es6 arrow functions. (#21049) --- js/src/modal.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) (limited to 'js/src/modal.js') diff --git a/js/src/modal.js b/js/src/modal.js index 252637428..a52dcb07f 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -133,7 +133,7 @@ const Modal = (($) => { $(this._element).on( Event.CLICK_DISMISS, Selector.DATA_DISMISS, - $.proxy(this.hide, this) + (event) => this.hide(event) ) $(this._dialog).on(Event.MOUSEDOWN_DISMISS, () => { @@ -144,9 +144,7 @@ const Modal = (($) => { }) }) - this._showBackdrop( - $.proxy(this._showElement, this, relatedTarget) - ) + this._showBackdrop(() => this._showElement(relatedTarget)) } hide(event) { @@ -178,7 +176,7 @@ const Modal = (($) => { ($(this._element).hasClass(ClassName.FADE))) { $(this._element) - .one(Util.TRANSITION_END, $.proxy(this._hideModal, this)) + .one(Util.TRANSITION_END, (event) => this._hideModal(event)) .emulateTransitionEnd(TRANSITION_DURATION) } else { this._hideModal() @@ -284,7 +282,7 @@ const Modal = (($) => { _setResizeEvent() { if (this._isShown) { - $(window).on(Event.RESIZE, $.proxy(this._handleUpdate, this)) + $(window).on(Event.RESIZE, (event) => this._handleUpdate(event)) } else { $(window).off(Event.RESIZE) } -- cgit v1.2.3 From c2616fb74e6bdc0cd46a5678a2c5cffcbe422106 Mon Sep 17 00:00:00 2001 From: Bardi Harborow Date: Tue, 22 Nov 2016 01:36:00 +1100 Subject: Make JS compliant with the new ESLint rules. --- js/src/modal.js | 44 ++++++++++++++++++++++---------------------- 1 file changed, 22 insertions(+), 22 deletions(-) (limited to 'js/src/modal.js') diff --git a/js/src/modal.js b/js/src/modal.js index a52dcb07f..5c2c0208a 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -110,7 +110,7 @@ const Modal = (($) => { } show(relatedTarget) { - let showEvent = $.Event(Event.SHOW, { + const showEvent = $.Event(Event.SHOW, { relatedTarget }) @@ -152,7 +152,7 @@ const Modal = (($) => { event.preventDefault() } - let hideEvent = $.Event(Event.HIDE) + const hideEvent = $.Event(Event.HIDE) $(this._element).trigger(hideEvent) @@ -173,7 +173,7 @@ const Modal = (($) => { $(this._dialog).off(Event.MOUSEDOWN_DISMISS) if (Util.supportsTransitionEnd() && - ($(this._element).hasClass(ClassName.FADE))) { + $(this._element).hasClass(ClassName.FADE)) { $(this._element) .one(Util.TRANSITION_END, (event) => this._hideModal(event)) @@ -212,11 +212,11 @@ const Modal = (($) => { } _showElement(relatedTarget) { - let transition = Util.supportsTransitionEnd() && + const transition = Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE) if (!this._element.parentNode || - (this._element.parentNode.nodeType !== Node.ELEMENT_NODE)) { + this._element.parentNode.nodeType !== Node.ELEMENT_NODE) { // don't move modals dom position document.body.appendChild(this._element) } @@ -235,11 +235,11 @@ const Modal = (($) => { this._enforceFocus() } - let shownEvent = $.Event(Event.SHOWN, { + const shownEvent = $.Event(Event.SHOWN, { relatedTarget }) - let transitionComplete = () => { + const transitionComplete = () => { if (this._config.focus) { this._element.focus() } @@ -261,7 +261,7 @@ const Modal = (($) => { .on(Event.FOCUSIN, (event) => { if (document !== event.target && this._element !== event.target && - (!$(this._element).has(event.target).length)) { + !$(this._element).has(event.target).length) { this._element.focus() } }) @@ -290,7 +290,7 @@ const Modal = (($) => { _hideModal() { this._element.style.display = 'none' - this._element.setAttribute('aria-hidden', 'true') + this._element.setAttribute('aria-hidden', true) this._showBackdrop(() => { $(document.body).removeClass(ClassName.OPEN) this._resetAdjustments() @@ -307,11 +307,11 @@ const Modal = (($) => { } _showBackdrop(callback) { - let animate = $(this._element).hasClass(ClassName.FADE) ? + const animate = $(this._element).hasClass(ClassName.FADE) ? ClassName.FADE : '' if (this._isShown && this._config.backdrop) { - let doAnimate = Util.supportsTransitionEnd() && animate + const doAnimate = Util.supportsTransitionEnd() && animate this._backdrop = document.createElement('div') this._backdrop.className = ClassName.BACKDROP @@ -359,7 +359,7 @@ const Modal = (($) => { } else if (!this._isShown && this._backdrop) { $(this._backdrop).removeClass(ClassName.ACTIVE) - let callbackRemove = () => { + const callbackRemove = () => { this._removeBackdrop() if (callback) { callback() @@ -367,7 +367,7 @@ const Modal = (($) => { } if (Util.supportsTransitionEnd() && - ($(this._element).hasClass(ClassName.FADE))) { + $(this._element).hasClass(ClassName.FADE)) { $(this._backdrop) .one(Util.TRANSITION_END, callbackRemove) .emulateTransitionEnd(BACKDROP_TRANSITION_DURATION) @@ -391,7 +391,7 @@ const Modal = (($) => { } _adjustDialog() { - let isModalOverflowing = + const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight if (!this._isBodyOverflowing && isModalOverflowing) { @@ -414,7 +414,7 @@ const Modal = (($) => { } _setScrollbar() { - let bodyPadding = parseInt( + const bodyPadding = parseInt( $(Selector.FIXED_CONTENT).css('padding-right') || 0, 10 ) @@ -432,10 +432,10 @@ const Modal = (($) => { } _getScrollbarWidth() { // thx d.walsh - let scrollDiv = document.createElement('div') + const scrollDiv = document.createElement('div') scrollDiv.className = ClassName.SCROLLBAR_MEASURER document.body.appendChild(scrollDiv) - let scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth + const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth document.body.removeChild(scrollDiv) return scrollbarWidth } @@ -445,8 +445,8 @@ const Modal = (($) => { static _jQueryInterface(config, relatedTarget) { return this.each(function () { - let data = $(this).data(DATA_KEY) - let _config = $.extend( + let data = $(this).data(DATA_KEY) + const _config = $.extend( {}, Modal.Default, $(this).data(), @@ -480,20 +480,20 @@ const Modal = (($) => { $(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) { let target - let selector = Util.getSelectorFromElement(this) + const selector = Util.getSelectorFromElement(this) if (selector) { target = $(selector)[0] } - let config = $(target).data(DATA_KEY) ? + const config = $(target).data(DATA_KEY) ? 'toggle' : $.extend({}, $(target).data(), $(this).data()) if (this.tagName === 'A') { event.preventDefault() } - let $target = $(target).one(Event.SHOW, (showEvent) => { + const $target = $(target).one(Event.SHOW, (showEvent) => { if (showEvent.isDefaultPrevented()) { // only register focus restorer if modal will actually get shown return -- cgit v1.2.3 From 8c17e5fb3c77da66a682355effe9ce336ead690e Mon Sep 17 00:00:00 2001 From: Juno_okyo Date: Tue, 29 Nov 2016 04:42:32 +0700 Subject: Use multi-selector to remove the same event handler (#20642) --- js/src/modal.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) (limited to 'js/src/modal.js') diff --git a/js/src/modal.js b/js/src/modal.js index 447e32acf..61a28dbf5 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -186,10 +186,7 @@ const Modal = (($) => { dispose() { $.removeData(this._element, DATA_KEY) - $(window).off(EVENT_KEY) - $(document).off(EVENT_KEY) - $(this._element).off(EVENT_KEY) - $(this._backdrop).off(EVENT_KEY) + $(window, document, this._element, this._backdrop).off(EVENT_KEY) this._config = null this._element = null -- cgit v1.2.3 From 297c47c3fdbb58e3d9824afdee83ef3c4b9d141a Mon Sep 17 00:00:00 2001 From: Johann Date: Fri, 2 Dec 2016 18:52:19 +0100 Subject: [V4] Throw error when a plugin is in transition (#17823) * Throw error when a plugin is in transition * Add unit tests about plugins in transition --- js/src/modal.js | 28 +++++++++++++++++++++++----- 1 file changed, 23 insertions(+), 5 deletions(-) (limited to 'js/src/modal.js') diff --git a/js/src/modal.js b/js/src/modal.js index 61a28dbf5..70bb68e42 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -87,6 +87,7 @@ const Modal = (($) => { this._isShown = false this._isBodyOverflowing = false this._ignoreBackdropClick = false + this._isTransitioning = false this._originalBodyPadding = 0 this._scrollbarWidth = 0 } @@ -110,6 +111,14 @@ const Modal = (($) => { } show(relatedTarget) { + if (this._isTransitioning) { + throw new Error('Modal is transitioning') + } + + if (Util.supportsTransitionEnd() && + $(this._element).hasClass(ClassName.FADE)) { + this._isTransitioning = true + } const showEvent = $.Event(Event.SHOW, { relatedTarget }) @@ -152,8 +161,17 @@ const Modal = (($) => { event.preventDefault() } - const hideEvent = $.Event(Event.HIDE) + if (this._isTransitioning) { + throw new Error('Modal is transitioning') + } + const transition = Util.supportsTransitionEnd() && + $(this._element).hasClass(ClassName.FADE) + if (transition) { + this._isTransitioning = true + } + + const hideEvent = $.Event(Event.HIDE) $(this._element).trigger(hideEvent) if (!this._isShown || hideEvent.isDefaultPrevented()) { @@ -172,9 +190,7 @@ const Modal = (($) => { $(this._element).off(Event.CLICK_DISMISS) $(this._dialog).off(Event.MOUSEDOWN_DISMISS) - if (Util.supportsTransitionEnd() && - $(this._element).hasClass(ClassName.FADE)) { - + if (transition) { $(this._element) .one(Util.TRANSITION_END, (event) => this._hideModal(event)) .emulateTransitionEnd(TRANSITION_DURATION) @@ -240,6 +256,7 @@ const Modal = (($) => { if (this._config.focus) { this._element.focus() } + this._isTransitioning = false $(this._element).trigger(shownEvent) } @@ -287,7 +304,8 @@ const Modal = (($) => { _hideModal() { this._element.style.display = 'none' - this._element.setAttribute('aria-hidden', true) + this._element.setAttribute('aria-hidden', 'true') + this._isTransitioning = false this._showBackdrop(() => { $(document.body).removeClass(ClassName.OPEN) this._resetAdjustments() -- cgit v1.2.3 From bf39bb3ac3d2aef4687b3cd4762015d5f218e2bc Mon Sep 17 00:00:00 2001 From: Starsam80 Date: Thu, 27 Oct 2016 16:13:17 -0600 Subject: Rename `.active` to `.show` --- js/src/modal.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'js/src/modal.js') diff --git a/js/src/modal.js b/js/src/modal.js index 70bb68e42..94abd19f4 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -60,7 +60,7 @@ const Modal = (($) => { BACKDROP : 'modal-backdrop', OPEN : 'modal-open', FADE : 'fade', - ACTIVE : 'active' + SHOW : 'show' } const Selector = { @@ -185,7 +185,7 @@ const Modal = (($) => { $(document).off(Event.FOCUSIN) - $(this._element).removeClass(ClassName.ACTIVE) + $(this._element).removeClass(ClassName.SHOW) $(this._element).off(Event.CLICK_DISMISS) $(this._dialog).off(Event.MOUSEDOWN_DISMISS) @@ -242,7 +242,7 @@ const Modal = (($) => { Util.reflow(this._element) } - $(this._element).addClass(ClassName.ACTIVE) + $(this._element).addClass(ClassName.SHOW) if (this._config.focus) { this._enforceFocus() @@ -356,7 +356,7 @@ const Modal = (($) => { Util.reflow(this._backdrop) } - $(this._backdrop).addClass(ClassName.ACTIVE) + $(this._backdrop).addClass(ClassName.SHOW) if (!callback) { return @@ -372,7 +372,7 @@ const Modal = (($) => { .emulateTransitionEnd(BACKDROP_TRANSITION_DURATION) } else if (!this._isShown && this._backdrop) { - $(this._backdrop).removeClass(ClassName.ACTIVE) + $(this._backdrop).removeClass(ClassName.SHOW) const callbackRemove = () => { this._removeBackdrop() -- cgit v1.2.3