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'
this._isShown = false
this._ignoreBackdropClick = false
this._isTransitioning = false
+ this._scrollBar = new ScrollBarHelper()
}
// Getters
this._isTransitioning = true
}
- scrollBarHide()
+ this._scrollBar.hide()
document.body.classList.add(CLASS_NAME_OPEN)
this._backdrop.hide(() => {
document.body.classList.remove(CLASS_NAME_OPEN)
this._resetAdjustments()
- scrollBarReset()
+ this._scrollBar.reset()
EventHandler.trigger(this._element, EVENT_HIDDEN)
})
}
_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())) {
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'
this._backdrop.show()
if (!this._config.scroll) {
- scrollBarHide()
+ new ScrollBarHelper().hide()
this._enforceFocusOnElement(this._element)
}
this._element.style.visibility = 'hidden'
if (!this._config.scroll) {
- scrollBarReset()
+ new ScrollBarHelper().reset()
}
EventHandler.trigger(this._element, EVENT_HIDDEN)
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
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'
})
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()
})
/** 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
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()
-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
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)
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)
})
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)
'<div style="height: 110vh; width: 100%"></div>'
].join('')
- const result = Scrollbar.getWidth()
+ const result = new ScrollBarHelper().getWidth()
expect(result).toEqual(0)
})
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)
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')
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')
const originalMargin = getMarginX(stickyTopEl)
const originalPadding = getPaddingX(stickyTopEl)
- Scrollbar.hide()
+ const scrollBar = new ScrollBarHelper()
+ scrollBar.hide()
const currentMargin = getMarginX(stickyTopEl)
const currentPadding = getPaddingX(stickyTopEl)
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', () => {
].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
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)
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', () => {
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)
expect(getOverFlow(el)).toEqual('hidden')
expect(getOverFlowAttr(el)).toEqual(originalOverFlow)
- Scrollbar.reset()
+ scrollBar.reset()
const currentPadding1 = getPaddingX(el)
expect(currentPadding1).toEqual(originalPadding)
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)
expect(getOverFlow(el)).toEqual('hidden')
expect(getOverFlowAttr(el)).toEqual(originalOverFlow)
- Scrollbar.reset()
+ scrollBar.reset()
const currentPadding1 = getPaddingX(el)
expect(currentPadding1).toEqual(originalPadding)
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'
// 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()
})
})
})
projects / thirdparty / bootstrap.git / commitdiff
