rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-15 15:29:22 +01:00
Code Issues Actions Packages Releases Activity

ScrollBar.js. Minor refactoring and add test (#35492)

Browse Source
This commit is contained in:
GeoSot 2021-12-09 15:05:50 +02:00 committed by GitHub
parent 2a7015e630
commit 4fd5539c75
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,6 +15,8 @@ import { isElement } from './index'
const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top' const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top'
const SELECTOR_STICKY_CONTENT = '.sticky-top' const SELECTOR_STICKY_CONTENT = '.sticky-top'
const PROPERTY_PADDING = 'paddingRight'
const PROPERTY_MARGIN = 'marginRight'
/** /**
* Class definition * Class definition
@ -36,17 +38,17 @@ class ScrollBarHelper {
const width = this.getWidth() const width = this.getWidth()
this._disableOverFlow() this._disableOverFlow()
// give padding to element to balance the hidden scrollbar width // give padding to element to balance the hidden scrollbar width
this._setElementAttributes(this._element, 'paddingRight', calculatedValue => calculatedValue + width) this._setElementAttributes(this._element, PROPERTY_PADDING, calculatedValue => calculatedValue + width)
// trick: We adjust positive paddingRight and negative marginRight to sticky-top elements to keep showing fullwidth // 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_FIXED_CONTENT, PROPERTY_PADDING, calculatedValue => calculatedValue + width)
this._setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width) this._setElementAttributes(SELECTOR_STICKY_CONTENT, PROPERTY_MARGIN, calculatedValue => calculatedValue - width)
} }
reset() { reset() {
this._resetElementAttributes(this._element, 'overflow') this._resetElementAttributes(this._element, 'overflow')
this._resetElementAttributes(this._element, 'paddingRight') this._resetElementAttributes(this._element, PROPERTY_PADDING)
this._resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight') this._resetElementAttributes(SELECTOR_FIXED_CONTENT, PROPERTY_PADDING)
this._resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight') this._resetElementAttributes(SELECTOR_STICKY_CONTENT, PROPERTY_MARGIN)
} }
isOverflowing() { isOverflowing() {
@ -86,10 +88,11 @@ class ScrollBarHelper {
const value = Manipulator.getDataAttribute(element, styleProp) const value = Manipulator.getDataAttribute(element, styleProp)
if (typeof value === 'undefined') { if (typeof value === 'undefined') {
element.style.removeProperty(styleProp) element.style.removeProperty(styleProp)
} else { return
Manipulator.removeDataAttribute(element, styleProp)
element.style[styleProp] = value
} }
Manipulator.removeDataAttribute(element, styleProp)
element.style[styleProp] = value
} }
this._applyManipulationCallback(selector, manipulationCallBack) this._applyManipulationCallback(selector, manipulationCallBack)
@ -98,10 +101,11 @@ class ScrollBarHelper {
_applyManipulationCallback(selector, callBack) { _applyManipulationCallback(selector, callBack) {
if (isElement(selector)) { if (isElement(selector)) {
callBack(selector) callBack(selector)
} else { return
for (const sel of SelectorEngine.find(selector, this._element)) { }
callBack(sel)
} for (const sel of SelectorEngine.find(selector, this._element)) {
callBack(sel)
} }
} }
} }

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

@ -137,6 +137,27 @@ describe('ScrollBar', () => {
done() done()
}) })
it('should remove padding & margin if not existed before adjustment', done => {
fixtureEl.innerHTML = [
'<div style="height: 110vh; width: 100%">',
' <div class="fixed" id="fixed" style="width: 100vw;"></div>',
' <div class="sticky-top" id="sticky" style=" width: 100vw;"></div>',
'</div>'
].join('')
doc.style.overflowY = 'scroll'
const fixedEl = fixtureEl.querySelector('#fixed')
const stickyEl = fixtureEl.querySelector('#sticky')
const scrollBar = new ScrollBarHelper()
scrollBar.hide()
scrollBar.reset()
expect(fixedEl.getAttribute('style').includes('padding-right')).toBeFalse()
expect(stickyEl.getAttribute('style').includes('margin-right')).toBeFalse()
done()
})
it('should adjust the inline margin and padding of sticky elements', done => { it('should adjust the inline margin and padding of sticky elements', done => {
fixtureEl.innerHTML = [ fixtureEl.innerHTML = [
'<div style="height: 110vh">', '<div style="height: 110vh">',