diff options
| -rw-r--r-- | js/src/modal.js | 9 | ||||
| -rw-r--r-- | js/src/offcanvas.js | 6 | ||||
| -rw-r--r-- | js/src/util/scrollbar.js | 121 | ||||
| -rw-r--r-- | js/tests/unit/modal.spec.js | 19 | ||||
| -rw-r--r-- | js/tests/unit/offcanvas.spec.js | 19 | ||||
| -rw-r--r-- | js/tests/unit/util/scrollbar.spec.js | 73 |
6 files changed, 135 insertions, 112 deletions
diff --git a/js/src/modal.js b/js/src/modal.js index 74b608303f..1d23b3d89d 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -16,7 +16,7 @@ import { import EventHandler from './dom/event-handler' import Manipulator from './dom/manipulator' import SelectorEngine from './dom/selector-engine' -import { getWidth as getScrollBarWidth, hide as scrollBarHide, reset as scrollBarReset } from './util/scrollbar' +import ScrollBarHelper from './util/scrollbar' import BaseComponent from './base-component' import Backdrop from './util/backdrop' @@ -83,6 +83,7 @@ class Modal extends BaseComponent { this._isShown = false this._ignoreBackdropClick = false this._isTransitioning = false + this._scrollBar = new ScrollBarHelper() } // Getters @@ -120,7 +121,7 @@ class Modal extends BaseComponent { this._isTransitioning = true } - scrollBarHide() + this._scrollBar.hide() document.body.classList.add(CLASS_NAME_OPEN) @@ -301,7 +302,7 @@ class Modal extends BaseComponent { this._backdrop.hide(() => { document.body.classList.remove(CLASS_NAME_OPEN) this._resetAdjustments() - scrollBarReset() + this._scrollBar.reset() EventHandler.trigger(this._element, EVENT_HIDDEN) }) } @@ -368,7 +369,7 @@ class Modal extends BaseComponent { _adjustDialog() { const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight - const scrollbarWidth = getScrollBarWidth() + const scrollbarWidth = this._scrollBar.getWidth() const isBodyOverflowing = scrollbarWidth > 0 if ((!isBodyOverflowing && isModalOverflowing && !isRTL()) || (isBodyOverflowing && !isModalOverflowing && isRTL())) { diff --git a/js/src/offcanvas.js b/js/src/offcanvas.js index f990ff1998..71e47668f6 100644 --- a/js/src/offcanvas.js +++ b/js/src/offcanvas.js @@ -12,7 +12,7 @@ import { isVisible, typeCheckConfig } from './util/index' -import { hide as scrollBarHide, reset as scrollBarReset } from './util/scrollbar' +import ScrollBarHelper from './util/scrollbar' import EventHandler from './dom/event-handler' import BaseComponent from './base-component' import SelectorEngine from './dom/selector-engine' @@ -108,7 +108,7 @@ class Offcanvas extends BaseComponent { this._backdrop.show() if (!this._config.scroll) { - scrollBarHide() + new ScrollBarHelper().hide() this._enforceFocusOnElement(this._element) } @@ -148,7 +148,7 @@ class Offcanvas extends BaseComponent { this._element.style.visibility = 'hidden' if (!this._config.scroll) { - scrollBarReset() + new ScrollBarHelper().reset() } EventHandler.trigger(this._element, EVENT_HIDDEN) diff --git a/js/src/util/scrollbar.js b/js/src/util/scrollbar.js index 79a3b12c78..e23415f1dc 100644 --- a/js/src/util/scrollbar.js +++ b/js/src/util/scrollbar.js @@ -7,78 +7,91 @@ import SelectorEngine from '../dom/selector-engine' import Manipulator from '../dom/manipulator' +import { isElement } from './index' const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top' const SELECTOR_STICKY_CONTENT = '.sticky-top' -const getWidth = () => { - // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes - const documentWidth = document.documentElement.clientWidth - return Math.abs(window.innerWidth - documentWidth) -} +class ScrollBarHelper { + constructor() { + this._element = document.body + } -const hide = (width = getWidth()) => { - _disableOverFlow() - // give padding to element to balances the hidden scrollbar width - _setElementAttributes('body', 'paddingRight', calculatedValue => calculatedValue + width) - // trick: We adjust positive paddingRight and negative marginRight to sticky-top elements, to keep shown fullwidth - _setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width) - _setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width) -} + getWidth() { + // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes + const documentWidth = document.documentElement.clientWidth + return Math.abs(window.innerWidth - documentWidth) + } -const _disableOverFlow = () => { - const actualValue = document.body.style.overflow - if (actualValue) { - Manipulator.setDataAttribute(document.body, 'overflow', actualValue) + hide() { + const width = this.getWidth() + this._disableOverFlow() + // give padding to element to balance the hidden scrollbar width + this._setElementAttributes(this._element, 'paddingRight', calculatedValue => calculatedValue + width) + // trick: We adjust positive paddingRight and negative marginRight to sticky-top elements to keep showing fullwidth + this._setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width) + this._setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width) } - document.body.style.overflow = 'hidden' -} + _disableOverFlow() { + this._saveInitialAttribute(this._element, 'overflow') + this._element.style.overflow = 'hidden' + } -const _setElementAttributes = (selector, styleProp, callback) => { - const scrollbarWidth = getWidth() - SelectorEngine.find(selector) - .forEach(element => { - if (element !== document.body && window.innerWidth > element.clientWidth + scrollbarWidth) { + _setElementAttributes(selector, styleProp, callback) { + const scrollbarWidth = this.getWidth() + const manipulationCallBack = element => { + if (element !== this._element && window.innerWidth > element.clientWidth + scrollbarWidth) { return } - const actualValue = element.style[styleProp] - if (actualValue) { - Manipulator.setDataAttribute(element, styleProp, actualValue) - } - + this._saveInitialAttribute(element, styleProp) const calculatedValue = window.getComputedStyle(element)[styleProp] element.style[styleProp] = `${callback(Number.parseFloat(calculatedValue))}px` - }) -} + } -const reset = () => { - _resetElementAttributes('body', 'overflow') - _resetElementAttributes('body', 'paddingRight') - _resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight') - _resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight') -} + this._applyManipulationCallback(selector, manipulationCallBack) + } + + reset() { + this._resetElementAttributes(this._element, 'overflow') + this._resetElementAttributes(this._element, 'paddingRight') + this._resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight') + this._resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight') + } + + _saveInitialAttribute(element, styleProp) { + const actualValue = element.style[styleProp] + if (actualValue) { + Manipulator.setDataAttribute(element, styleProp, actualValue) + } + } + + _resetElementAttributes(selector, styleProp) { + const manipulationCallBack = element => { + const value = Manipulator.getDataAttribute(element, styleProp) + if (typeof value === 'undefined') { + element.style.removeProperty(styleProp) + } else { + Manipulator.removeDataAttribute(element, styleProp) + element.style[styleProp] = value + } + } -const _resetElementAttributes = (selector, styleProp) => { - SelectorEngine.find(selector).forEach(element => { - const value = Manipulator.getDataAttribute(element, styleProp) - if (typeof value === 'undefined') { - element.style.removeProperty(styleProp) + this._applyManipulationCallback(selector, manipulationCallBack) + } + + _applyManipulationCallback(selector, callBack) { + if (isElement(selector)) { + callBack(selector) } else { - Manipulator.removeDataAttribute(element, styleProp) - element.style[styleProp] = value + SelectorEngine.find(selector, this._element).forEach(callBack) } - }) -} + } -const isBodyOverflowing = () => { - return getWidth() > 0 + isOverflowing() { + return this.getWidth() > 0 + } } -export { - getWidth, - hide, - isBodyOverflowing, - reset -} +export default ScrollBarHelper diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js index 0056e82f63..e6ef555e70 100644 --- a/js/tests/unit/modal.spec.js +++ b/js/tests/unit/modal.spec.js @@ -1,5 +1,6 @@ import Modal from '../../src/modal' import EventHandler from '../../src/dom/event-handler' +import ScrollBarHelper from '../../src/util/scrollbar' /** Test helpers */ import { clearBodyAndDocument, clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture' @@ -58,25 +59,23 @@ describe('Modal', () => { }) describe('toggle', () => { - it('should toggle a modal', done => { - fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>' + it('should call ScrollBarHelper to handle scrollBar on body', done => { + fixtureEl.innerHTML = [ + '<div class="modal"><div class="modal-dialog"></div></div>' + ].join('') - const initialOverFlow = document.body.style.overflow + spyOn(ScrollBarHelper.prototype, 'hide').and.callThrough() + spyOn(ScrollBarHelper.prototype, 'reset').and.callThrough() const modalEl = fixtureEl.querySelector('.modal') const modal = new Modal(modalEl) - const originalPadding = '10px' - - document.body.style.paddingRight = originalPadding modalEl.addEventListener('shown.bs.modal', () => { - expect(document.body.getAttribute('data-bs-padding-right')).toEqual(originalPadding, 'original body padding should be stored in data-bs-padding-right') - expect(document.body.style.overflow).toEqual('hidden') + expect(ScrollBarHelper.prototype.hide).toHaveBeenCalled() modal.toggle() }) modalEl.addEventListener('hidden.bs.modal', () => { - expect(document.body.getAttribute('data-bs-padding-right')).toBeNull() - expect(document.body.style.overflow).toEqual(initialOverFlow) + expect(ScrollBarHelper.prototype.reset).toHaveBeenCalled() done() }) diff --git a/js/tests/unit/offcanvas.spec.js b/js/tests/unit/offcanvas.spec.js index 0f67fef9d1..a13875b51a 100644 --- a/js/tests/unit/offcanvas.spec.js +++ b/js/tests/unit/offcanvas.spec.js @@ -4,6 +4,7 @@ import EventHandler from '../../src/dom/event-handler' /** Test helpers */ import { clearBodyAndDocument, clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture' import { isVisible } from '../../src/util' +import ScrollBarHelper from '../../src/util/scrollbar' describe('Offcanvas', () => { let fixtureEl @@ -159,36 +160,36 @@ describe('Offcanvas', () => { it('if scroll is enabled, should allow body to scroll while offcanvas is open', done => { fixtureEl.innerHTML = '<div class="offcanvas"></div>' + spyOn(ScrollBarHelper.prototype, 'hide').and.callThrough() + spyOn(ScrollBarHelper.prototype, 'reset').and.callThrough() const offCanvasEl = fixtureEl.querySelector('.offcanvas') const offCanvas = new Offcanvas(offCanvasEl, { scroll: true }) - const initialOverFlow = document.body.style.overflow offCanvasEl.addEventListener('shown.bs.offcanvas', () => { - expect(document.body.style.overflow).toEqual(initialOverFlow) - + expect(ScrollBarHelper.prototype.hide).not.toHaveBeenCalled() offCanvas.hide() }) offCanvasEl.addEventListener('hidden.bs.offcanvas', () => { - expect(document.body.style.overflow).toEqual(initialOverFlow) + expect(ScrollBarHelper.prototype.reset).not.toHaveBeenCalled() done() }) offCanvas.show() }) - it('if scroll is disabled, should not allow body to scroll while offcanvas is open', done => { + it('if scroll is disabled, should call ScrollBarHelper to handle scrollBar on body', done => { fixtureEl.innerHTML = '<div class="offcanvas"></div>' + spyOn(ScrollBarHelper.prototype, 'hide').and.callThrough() + spyOn(ScrollBarHelper.prototype, 'reset').and.callThrough() const offCanvasEl = fixtureEl.querySelector('.offcanvas') const offCanvas = new Offcanvas(offCanvasEl, { scroll: false }) - const initialOverFlow = document.body.style.overflow offCanvasEl.addEventListener('shown.bs.offcanvas', () => { - expect(document.body.style.overflow).toEqual('hidden') - + expect(ScrollBarHelper.prototype.hide).toHaveBeenCalled() offCanvas.hide() }) offCanvasEl.addEventListener('hidden.bs.offcanvas', () => { - expect(document.body.style.overflow).toEqual(initialOverFlow) + expect(ScrollBarHelper.prototype.reset).toHaveBeenCalled() done() }) offCanvas.show() diff --git a/js/tests/unit/util/scrollbar.spec.js b/js/tests/unit/util/scrollbar.spec.js index b51c8a9795..280adb8e5a 100644 --- a/js/tests/unit/util/scrollbar.spec.js +++ b/js/tests/unit/util/scrollbar.spec.js @@ -1,6 +1,6 @@ -import * as Scrollbar from '../../../src/util/scrollbar' import { clearBodyAndDocument, clearFixture, getFixture } from '../../helpers/fixture' import Manipulator from '../../../src/dom/manipulator' +import ScrollBarHelper from '../../../src/util/scrollbar' describe('ScrollBar', () => { let fixtureEl @@ -55,7 +55,7 @@ describe('ScrollBar', () => { fixtureEl.innerHTML = [ '<div style="height: 110vh; width: 100%"></div>' ].join('') - const result = Scrollbar.isBodyOverflowing() + const result = new ScrollBarHelper().isOverflowing() if (isScrollBarHidden()) { expect(result).toEqual(false) @@ -70,7 +70,8 @@ describe('ScrollBar', () => { fixtureEl.innerHTML = [ '<div style="height: 110vh; width: 100%"></div>' ].join('') - const result = Scrollbar.isBodyOverflowing() + const scrollBar = new ScrollBarHelper() + const result = scrollBar.isOverflowing() expect(result).toEqual(false) }) @@ -83,7 +84,7 @@ describe('ScrollBar', () => { fixtureEl.innerHTML = [ '<div style="height: 110vh; width: 100%"></div>' ].join('') - const result = Scrollbar.getWidth() + const result = new ScrollBarHelper().getWidth() if (isScrollBarHidden()) { expect(result).toBe(0) @@ -99,7 +100,7 @@ describe('ScrollBar', () => { '<div style="height: 110vh; width: 100%"></div>' ].join('') - const result = Scrollbar.getWidth() + const result = new ScrollBarHelper().getWidth() expect(result).toEqual(0) }) @@ -119,10 +120,11 @@ describe('ScrollBar', () => { const fixedEl2 = fixtureEl.querySelector('#fixed2') const originalPadding = getPaddingX(fixedEl) const originalPadding2 = getPaddingX(fixedEl2) - const expectedPadding = originalPadding + Scrollbar.getWidth() - const expectedPadding2 = originalPadding2 + Scrollbar.getWidth() + const scrollBar = new ScrollBarHelper() + const expectedPadding = originalPadding + scrollBar.getWidth() + const expectedPadding2 = originalPadding2 + scrollBar.getWidth() - Scrollbar.hide() + scrollBar.hide() let currentPadding = getPaddingX(fixedEl) let currentPadding2 = getPaddingX(fixedEl2) @@ -131,7 +133,7 @@ describe('ScrollBar', () => { expect(currentPadding).toEqual(expectedPadding, 'fixed element padding should be adjusted while opening') expect(currentPadding2).toEqual(expectedPadding2, 'fixed element padding should be adjusted while opening') - Scrollbar.reset() + scrollBar.reset() currentPadding = getPaddingX(fixedEl) currentPadding2 = getPaddingX(fixedEl2) expect(getPaddingAttr(fixedEl)).toEqual(null, 'data-bs-padding-right should be cleared after closing') @@ -152,17 +154,17 @@ describe('ScrollBar', () => { const stickyTopEl = fixtureEl.querySelector('.sticky-top') const originalMargin = getMarginX(stickyTopEl) const originalPadding = getPaddingX(stickyTopEl) - - const expectedMargin = originalMargin - Scrollbar.getWidth() - const expectedPadding = originalPadding + Scrollbar.getWidth() - Scrollbar.hide() + const scrollBar = new ScrollBarHelper() + const expectedMargin = originalMargin - scrollBar.getWidth() + const expectedPadding = originalPadding + scrollBar.getWidth() + scrollBar.hide() expect(getMarginAttr(stickyTopEl)).toEqual(`${originalMargin}px`, 'original sticky element margin should be stored in data-bs-margin-right') expect(getMarginX(stickyTopEl)).toEqual(expectedMargin, 'sticky element margin should be adjusted while opening') expect(getPaddingAttr(stickyTopEl)).toEqual(`${originalPadding}px`, 'original sticky element margin should be stored in data-bs-margin-right') expect(getPaddingX(stickyTopEl)).toEqual(expectedPadding, 'sticky element margin should be adjusted while opening') - Scrollbar.reset() + scrollBar.reset() expect(getMarginAttr(stickyTopEl)).toEqual(null, 'data-bs-margin-right should be cleared after closing') expect(getMarginX(stickyTopEl)).toEqual(originalMargin, 'sticky element margin should be reset after closing') expect(getPaddingAttr(stickyTopEl)).toEqual(null, 'data-bs-margin-right should be cleared after closing') @@ -179,7 +181,8 @@ describe('ScrollBar', () => { const originalMargin = getMarginX(stickyTopEl) const originalPadding = getPaddingX(stickyTopEl) - Scrollbar.hide() + const scrollBar = new ScrollBarHelper() + scrollBar.hide() const currentMargin = getMarginX(stickyTopEl) const currentPadding = getPaddingX(stickyTopEl) @@ -187,7 +190,7 @@ describe('ScrollBar', () => { 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') - Scrollbar.reset() + scrollBar.reset() }) it('should not put data-attribute if element doesn\'t have the proper style property, should just remove style property if element didn\'t had one', () => { @@ -198,15 +201,16 @@ describe('ScrollBar', () => { ].join('') document.body.style.overflowY = 'scroll' + const scrollBar = new ScrollBarHelper() const hasPaddingAttr = el => el.hasAttribute('data-bs-padding-right') const hasMarginAttr = el => el.hasAttribute('data-bs-margin-right') const stickyEl = fixtureEl.querySelector('#sticky') const originalPadding = getPaddingX(stickyEl) const originalMargin = getMarginX(stickyEl) - const scrollBarWidth = Scrollbar.getWidth() + const scrollBarWidth = scrollBar.getWidth() - Scrollbar.hide() + scrollBar.hide() expect(getPaddingX(stickyEl)).toEqual(scrollBarWidth + originalPadding) const expectedMargin = scrollBarWidth + originalMargin @@ -214,7 +218,7 @@ describe('ScrollBar', () => { expect(hasMarginAttr(stickyEl)).toBeFalse() // We do not have to keep css margin expect(hasPaddingAttr(stickyEl)).toBeFalse() // We do not have to keep css padding - Scrollbar.reset() + scrollBar.reset() expect(getPaddingX(stickyEl)).toEqual(originalPadding) expect(getPaddingX(stickyEl)).toEqual(originalPadding) @@ -224,13 +228,14 @@ describe('ScrollBar', () => { it('should ignore other inline styles when trying to restore body defaults ', () => { document.body.style.color = 'red' - const scrollBarWidth = Scrollbar.getWidth() - Scrollbar.hide() + const scrollBar = new ScrollBarHelper() + const scrollBarWidth = scrollBar.getWidth() + scrollBar.hide() expect(getPaddingX(document.body)).toEqual(scrollBarWidth, 'body does not have inline padding set') expect(document.body.style.color).toEqual('red', 'body still has other inline styles set') - Scrollbar.reset() + scrollBar.reset() }) it('should hide scrollbar and reset it to its initial value', () => { @@ -251,9 +256,10 @@ describe('ScrollBar', () => { expect(originalPadding).toEqual(parseInt(inlineStylePadding)) // Respect only the inline style as it has prevails this of css const originalOverFlow = 'auto' el.style.overflow = originalOverFlow - const scrollBarWidth = Scrollbar.getWidth() + const scrollBar = new ScrollBarHelper() + const scrollBarWidth = scrollBar.getWidth() - Scrollbar.hide() + scrollBar.hide() const currentPadding = getPaddingX(el) @@ -263,7 +269,7 @@ describe('ScrollBar', () => { expect(getOverFlow(el)).toEqual('hidden') expect(getOverFlowAttr(el)).toEqual(originalOverFlow) - Scrollbar.reset() + scrollBar.reset() const currentPadding1 = getPaddingX(el) expect(currentPadding1).toEqual(originalPadding) @@ -285,9 +291,10 @@ describe('ScrollBar', () => { const originalPadding = getPaddingX(el) const originalOverFlow = 'scroll' el.style.overflow = originalOverFlow - const scrollBarWidth = Scrollbar.getWidth() + const scrollBar = new ScrollBarHelper() + const scrollBarWidth = scrollBar.getWidth() - Scrollbar.hide() + scrollBar.hide() const currentPadding = getPaddingX(el) @@ -297,7 +304,7 @@ describe('ScrollBar', () => { expect(getOverFlow(el)).toEqual('hidden') expect(getOverFlowAttr(el)).toEqual(originalOverFlow) - Scrollbar.reset() + scrollBar.reset() const currentPadding1 = getPaddingX(el) expect(currentPadding1).toEqual(originalPadding) @@ -308,20 +315,22 @@ describe('ScrollBar', () => { it('should not adjust the inline body padding when it does not overflow', () => { const originalPadding = getPaddingX(document.body) + const scrollBar = new ScrollBarHelper() // Hide scrollbars to prevent the body overflowing doc.style.overflowY = 'hidden' doc.style.paddingRight = '0px' - Scrollbar.hide() + scrollBar.hide() const currentPadding = getPaddingX(document.body) expect(currentPadding).toEqual(originalPadding, 'body padding should not be adjusted') - Scrollbar.reset() + scrollBar.reset() }) it('should not adjust the inline body padding when it does not overflow, even on a scaled display', () => { const originalPadding = getPaddingX(document.body) + const scrollBar = new ScrollBarHelper() // Remove body margins as would be done by Bootstrap css document.body.style.margin = '0' @@ -331,13 +340,13 @@ describe('ScrollBar', () => { // Simulate a discrepancy between exact, i.e. floating point body width, and rounded body width // as it can occur when zooming or scaling the display to something else than 100% doc.style.paddingRight = '.48px' - Scrollbar.hide() + scrollBar.hide() const currentPadding = getPaddingX(document.body) expect(currentPadding).toEqual(originalPadding, 'body padding should not be adjusted') - Scrollbar.reset() + scrollBar.reset() }) }) }) |