kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

Refactor scrollbar.js to be used as a Class (#33947)

This commit is contained in:
GeoSot 2021-06-06 09:26:36 +03:00 committed by GitHub
parent 08139c2280
commit cb47b8c964
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 141 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
js/src/modal.js
View File

@ -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())) {

6
js/src/offcanvas.js
View File

@ -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)

133
js/src/util/scrollbar.js
View File

@ -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)
}
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)
}
const _disableOverFlow = () => {
const actualValue = document.body.style.overflow
if (actualValue) {
Manipulator.setDataAttribute(document.body, 'overflow', actualValue)
class ScrollBarHelper {
constructor() {
this._element = document.body
}
document.body.style.overflow = 'hidden'
}
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 _setElementAttributes = (selector, styleProp, callback) => {
const scrollbarWidth = getWidth()
SelectorEngine.find(selector)
.forEach(element => {
if (element !== document.body && window.innerWidth > element.clientWidth + scrollbarWidth) {
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)
}
_disableOverFlow() {
this._saveInitialAttribute(this._element, 'overflow')
this._element.style.overflow = 'hidden'
}
_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')
}
const _resetElementAttributes = (selector, styleProp) => {
SelectorEngine.find(selector).forEach(element => {
const value = Manipulator.getDataAttribute(element, styleProp)
if (typeof value === 'undefined') {
element.style.removeProperty(styleProp)
} else {
Manipulator.removeDataAttribute(element, styleProp)
element.style[styleProp] = value
}
})
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
}
}
this._applyManipulationCallback(selector, manipulationCallBack)
}
_applyManipulationCallback(selector, callBack) {
if (isElement(selector)) {
callBack(selector)
} else {
SelectorEngine.find(selector, this._element).forEach(callBack)
}
}
isOverflowing() {
return this.getWidth() > 0
}
}
const isBodyOverflowing = () => {
return getWidth() > 0
}
export {
getWidth,
hide,
isBodyOverflowing,
reset
}
export default ScrollBarHelper

19
js/tests/unit/modal.spec.js
View File

@ -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()
})

19
js/tests/unit/offcanvas.spec.js
View File

@ -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()

73
js/tests/unit/util/scrollbar.spec.js
View File

@ -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()
})
})
})