From 275821bbb081890ffe232d50d4778eb15bdb1d7b Mon Sep 17 00:00:00 2001 From: Pierre Vanduynslager Date: Sat, 18 Mar 2017 21:24:54 -0400 Subject: HTMLElement.offset* by getBoundingClientRect() (#21788) * Replace element.offet* by getBoundingClientRect() * Use variable to store BoundingClientRect * Fix cc issue... --- 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 213434f77..9263efd53 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -450,7 +450,7 @@ const Modal = (($) => { const scrollDiv = document.createElement('div') scrollDiv.className = ClassName.SCROLLBAR_MEASURER document.body.appendChild(scrollDiv) - const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth + const scrollbarWidth = scrollDiv.getBoundingClientRect().width - scrollDiv.clientWidth document.body.removeChild(scrollDiv) return scrollbarWidth } -- cgit v1.2.3 From 3f247a42f2a113f9e04184987eae9019abcac778 Mon Sep 17 00:00:00 2001 From: Johann Date: Thu, 23 Mar 2017 22:22:09 +0100 Subject: Fix Modal documentation about _handleUpdate method + move to public scope (#21877) Fix Modal documentation about _handleUpdate method + move to public scope --- js/src/modal.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) (limited to 'js/src/modal.js') diff --git a/js/src/modal.js b/js/src/modal.js index 9263efd53..7f010b8e0 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -215,6 +215,9 @@ const Modal = (($) => { this._scrollbarWidth = null } + handleUpdate() { + this._adjustDialog() + } // private @@ -296,7 +299,7 @@ const Modal = (($) => { _setResizeEvent() { if (this._isShown) { - $(window).on(Event.RESIZE, (event) => this._handleUpdate(event)) + $(window).on(Event.RESIZE, (event) => this.handleUpdate(event)) } else { $(window).off(Event.RESIZE) } @@ -401,10 +404,6 @@ const Modal = (($) => { // todo (fat): these should probably be refactored out of modal.js // ---------------------------------------------------------------------- - _handleUpdate() { - this._adjustDialog() - } - _adjustDialog() { const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight -- cgit v1.2.3 From 48c5efa4c3c439d8720b8475ec3e372c6974a12a Mon Sep 17 00:00:00 2001 From: Pierre Vanduynslager Date: Tue, 28 Mar 2017 17:43:16 -0400 Subject: Fix JS components console error "Error: is transitioning" --- js/src/modal.js | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) (limited to 'js/src/modal.js') diff --git a/js/src/modal.js b/js/src/modal.js index 7f010b8e0..5e9941444 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -87,7 +87,6 @@ const Modal = (($) => { this._isShown = false this._isBodyOverflowing = false this._ignoreBackdropClick = false - this._isTransitioning = false this._originalBodyPadding = 0 this._scrollbarWidth = 0 } @@ -112,13 +111,13 @@ const Modal = (($) => { show(relatedTarget) { if (this._isTransitioning) { - throw new Error('Modal is transitioning') + return } - if (Util.supportsTransitionEnd() && - $(this._element).hasClass(ClassName.FADE)) { + if (Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE)) { this._isTransitioning = true } + const showEvent = $.Event(Event.SHOW, { relatedTarget }) @@ -161,17 +160,18 @@ const Modal = (($) => { event.preventDefault() } - if (this._isTransitioning) { - throw new Error('Modal is transitioning') + if (this._isTransitioning || !this._isShown) { + return } - const transition = Util.supportsTransitionEnd() && - $(this._element).hasClass(ClassName.FADE) + 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()) { @@ -191,6 +191,7 @@ const Modal = (($) => { $(this._dialog).off(Event.MOUSEDOWN_DISMISS) if (transition) { + $(this._element) .one(Util.TRANSITION_END, (event) => this._hideModal(event)) .emulateTransitionEnd(TRANSITION_DURATION) @@ -307,7 +308,7 @@ 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) -- cgit v1.2.3 From a14451deb3b8368de76aad6e728b27032bf8097a Mon Sep 17 00:00:00 2001 From: Ilias Date: Sun, 2 Apr 2017 14:26:25 +0300 Subject: Fix #18373: properly adjust padding-right of body and fixed elements when opening or closing modal --- js/src/modal.js | 54 +++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 43 insertions(+), 11 deletions(-) (limited to 'js/src/modal.js') diff --git a/js/src/modal.js b/js/src/modal.js index 5e9941444..779b9a402 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -67,7 +67,8 @@ const Modal = (($) => { DIALOG : '.modal-dialog', DATA_TOGGLE : '[data-toggle="modal"]', DATA_DISMISS : '[data-dismiss="modal"]', - FIXED_CONTENT : '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top' + FIXED_CONTENT : '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top', + NAVBAR_TOGGLER : '.navbar-toggler' } @@ -212,7 +213,6 @@ const Modal = (($) => { this._isShown = null this._isBodyOverflowing = null this._ignoreBackdropClick = null - this._originalBodyPadding = null this._scrollbarWidth = null } @@ -429,21 +429,53 @@ const Modal = (($) => { } _setScrollbar() { - const bodyPadding = parseInt( - $(Selector.FIXED_CONTENT).css('padding-right') || 0, - 10 - ) + if (this._isBodyOverflowing) { + // Note: DOMNode.style.paddingRight returns the actual value or '' if not set + // while $(DOMNode).css('padding-right') returns the calculated value or 0 if not set + + // Adjust fixed content padding + $(Selector.FIXED_CONTENT).each((index, element) => { + const actualPadding = $(element)[0].style.paddingRight + const calculatedPadding = $(element).css('padding-right') + $(element).data('padding-right', actualPadding).css('padding-right', `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`) + }) - this._originalBodyPadding = document.body.style.paddingRight || '' + // Adjust navbar-toggler margin + $(Selector.NAVBAR_TOGGLER).each((index, element) => { + const actualMargin = $(element)[0].style.marginRight + const calculatedMargin = $(element).css('margin-right') + $(element).data('margin-right', actualMargin).css('margin-right', `${parseFloat(calculatedMargin) + this._scrollbarWidth}px`) + }) - if (this._isBodyOverflowing) { - document.body.style.paddingRight = - `${bodyPadding + this._scrollbarWidth}px` + // Adjust body padding + const actualPadding = document.body.style.paddingRight + const calculatedPadding = $('body').css('padding-right') + $('body').data('padding-right', actualPadding).css('padding-right', `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`) } } _resetScrollbar() { - document.body.style.paddingRight = this._originalBodyPadding + // Restore fixed content padding + $(Selector.FIXED_CONTENT).each((index, element) => { + const padding = $(element).data('padding-right') + if (typeof padding !== 'undefined') { + $(element).css('padding-right', padding).removeData('padding-right') + } + }) + + // Restore navbar-toggler margin + $(Selector.NAVBAR_TOGGLER).each((index, element) => { + const margin = $(element).data('margin-right') + if (typeof margin !== 'undefined') { + $(element).css('margin-right', margin).removeData('margin-right') + } + }) + + // Restore body padding + const padding = $('body').data('padding-right') + if (typeof padding !== 'undefined') { + $('body').css('padding-right', padding).removeData('padding-right') + } } _getScrollbarWidth() { // thx d.walsh -- cgit v1.2.3