diff options
| -rw-r--r-- | js/src/modal.js | 53 | ||||
| -rw-r--r-- | js/tests/unit/modal.spec.js | 24 |
2 files changed, 51 insertions, 26 deletions
diff --git a/js/src/modal.js b/js/src/modal.js index 87c22943a..ea79420c8 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -461,21 +461,11 @@ class Modal extends BaseComponent { // Adjust fixed content padding SelectorEngine.find(SELECTOR_FIXED_CONTENT) - .forEach(element => { - const actualPadding = element.style.paddingRight - const calculatedPadding = window.getComputedStyle(element)['padding-right'] - Manipulator.setDataAttribute(element, 'padding-right', actualPadding) - element.style.paddingRight = `${Number.parseFloat(calculatedPadding) + this._scrollbarWidth}px` - }) + .forEach(element => this._setElementAttributes(element, 'paddingRight')) // Adjust sticky content margin SelectorEngine.find(SELECTOR_STICKY_CONTENT) - .forEach(element => { - const actualMargin = element.style.marginRight - const calculatedMargin = window.getComputedStyle(element)['margin-right'] - Manipulator.setDataAttribute(element, 'margin-right', actualMargin) - element.style.marginRight = `${Number.parseFloat(calculatedMargin) - this._scrollbarWidth}px` - }) + .forEach(element => this._setElementAttributes(element, 'marginRight')) // Adjust body padding const actualPadding = document.body.style.paddingRight @@ -491,23 +481,11 @@ class Modal extends BaseComponent { _resetScrollbar() { // Restore fixed content padding SelectorEngine.find(SELECTOR_FIXED_CONTENT) - .forEach(element => { - const padding = Manipulator.getDataAttribute(element, 'padding-right') - if (typeof padding !== 'undefined') { - Manipulator.removeDataAttribute(element, 'padding-right') - element.style.paddingRight = padding - } - }) + .forEach(element => this._removeElementAttributes(element, 'paddingRight')) // Restore sticky content and navbar-toggler margin SelectorEngine.find(`${SELECTOR_STICKY_CONTENT}`) - .forEach(element => { - const margin = Manipulator.getDataAttribute(element, 'margin-right') - if (typeof margin !== 'undefined') { - Manipulator.removeDataAttribute(element, 'margin-right') - element.style.marginRight = margin - } - }) + .forEach(element => this._removeElementAttributes(element, 'marginRight')) // Restore body padding const padding = Manipulator.getDataAttribute(document.body, 'padding-right') @@ -528,6 +506,29 @@ class Modal extends BaseComponent { return scrollbarWidth } + _setElementAttributes(element, cssProp) { + if (window.innerWidth > element.clientWidth + this._scrollbarWidth) { + return + } + + const actualValue = element.style[cssProp] + const computedValue = window.getComputedStyle(element)[cssProp] + + Manipulator.setDataAttribute(element, cssProp, actualValue) + + element.style[cssProp] = cssProp === 'marginRight' ? + `${Number.parseFloat(computedValue) - this._scrollbarWidth}px` : + `${Number.parseFloat(computedValue) + this._scrollbarWidth}px` + } + + _removeElementAttributes(element, cssProp) { + const cssValue = Manipulator.getDataAttribute(element, cssProp) + if (typeof cssValue !== 'undefined') { + Manipulator.removeDataAttribute(element, cssProp) + element.style[cssProp] = cssValue + } + } + // Static static jQueryInterface(config, relatedTarget) { diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js index f645e9892..ca76439eb 100644 --- a/js/tests/unit/modal.spec.js +++ b/js/tests/unit/modal.spec.js @@ -142,6 +142,30 @@ describe('Modal', () => { modal.toggle() }) + it('should not adjust the inline margin and padding of sticky and fixed elements when element do not have full width', done => { + fixtureEl.innerHTML = [ + '<div class="sticky-top" style="margin-right: 0px; padding-right: 0px; width: calc(100vw - 50%)"></div>', + '<div class="modal"><div class="modal-dialog"></div></div>' + ].join('') + + const stickyTopEl = fixtureEl.querySelector('.sticky-top') + const originalMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10) + const originalPadding = Number.parseInt(window.getComputedStyle(stickyTopEl).paddingRight, 10) + const modalEl = fixtureEl.querySelector('.modal') + const modal = new Modal(modalEl) + + modalEl.addEventListener('shown.bs.modal', () => { + const currentMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10) + const currentPadding = Number.parseInt(window.getComputedStyle(stickyTopEl).paddingRight, 10) + + expect(currentMargin).toEqual(originalMargin, 'sticky element\'s margin should not be adjusted while opening') + expect(currentPadding).toEqual(originalPadding, 'sticky element\'s padding should not be adjusted while opening') + done() + }) + + modal.show() + }) + it('should ignore values set via CSS when trying to restore body padding after closing', done => { fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>' const styleTest = document.createElement('style') |