Skip to content

Commit

Permalink
Scrollbar.js Sanitizations
Browse files Browse the repository at this point in the history 
* Remove `.modal-open` class as it is already handled by scrollbar.js
* _modal.scss make modal `overflowY: auto` by default (was on ``.modal-open`, which is the same)
* scrollbar.js: keep initial body `overflowY` value as attribute and re-set it properly & test
* scrollbar.js: avoid to create data-bs attributes for null values & test
* Revisit modal, offcanvas, scrollbar tests
* set the base to support different rootElement (than body)
  • Loading branch information
@GeoSot
GeoSot committed Apr 20, 2021
1 parent 079f2cd commit 40f5a33
Show file tree
Hide file tree
Showing 9 changed files with 287 additions and 356 deletions.
12 changes: 4 additions & 8 deletions js/src/modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,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'

Expand Down Expand Up @@ -59,7 +59,6 @@ const EVENT_MOUSEUP_DISMISS = `mouseup.dismiss${EVENT_KEY}`
const EVENT_MOUSEDOWN_DISMISS = `mousedown.dismiss${EVENT_KEY}`
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`

const CLASS_NAME_OPEN = 'modal-open'
const CLASS_NAME_FADE = 'fade'
const CLASS_NAME_SHOW = 'show'
const CLASS_NAME_STATIC = 'modal-static'
Expand Down Expand Up @@ -122,9 +121,7 @@ class Modal extends BaseComponent {

this._isShown = true

scrollBarHide()

document.body.classList.add(CLASS_NAME_OPEN)
new ScrollBarHelper().hide()

this._adjustDialog()

Expand Down Expand Up @@ -322,9 +319,8 @@ class Modal extends BaseComponent {
this._element.removeAttribute('role')
this._isTransitioning = false
this._backdrop.hide(() => {
document.body.classList.remove(CLASS_NAME_OPEN)
this._resetAdjustments()
scrollBarReset()
new ScrollBarHelper().reset()
EventHandler.trigger(this._element, EVENT_HIDDEN)
})
}
Expand Down Expand Up @@ -388,7 +384,7 @@ class Modal extends BaseComponent {

_adjustDialog() {
const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight
const scrollbarWidth = getScrollBarWidth()
const scrollbarWidth = new ScrollBarHelper().getWidth()
const isBodyOverflowing = scrollbarWidth > 0

if ((!isBodyOverflowing && isModalOverflowing && !isRTL()) || (isBodyOverflowing && !isModalOverflowing && isRTL())) {
Expand Down
6 changes: 3 additions & 3 deletions js/src/offcanvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
isVisible,
typeCheckConfig
} from './util/index'
import { hide as scrollBarHide, reset as scrollBarReset } from './util/scrollbar'
import ScrollBarHelper from './util/scrollbar'
import Data from './dom/data'
import EventHandler from './dom/event-handler'
import BaseComponent from './base-component'
Expand Down Expand Up @@ -111,7 +111,7 @@ class Offcanvas extends BaseComponent {
this._backdrop.show()

if (!this._config.scroll) {
scrollBarHide()
new ScrollBarHelper().hide()
this._enforceFocusOnElement(this._element)
}

Expand Down Expand Up @@ -153,7 +153,7 @@ class Offcanvas extends BaseComponent {
this._element.style.visibility = 'hidden'

if (!this._config.scroll) {
scrollBarReset()
new ScrollBarHelper().reset()
}

EventHandler.trigger(this._element, EVENT_HIDDEN)
Expand Down
119 changes: 76 additions & 43 deletions js/src/util/scrollbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,65 +7,98 @@

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(element = document.documentElement) {
this._isBody = [document.body, document.documentElement].includes(element)

const hide = (width = getWidth()) => {
document.body.style.overflow = 'hidden'
// 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)
_setElementAttributes('body', 'paddingRight', calculatedValue => calculatedValue + width)
}
this._element = this._isBody ? document.documentElement : element
}

getWidth() {
if (this._isBody) {
// https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
const documentWidth = this._element.clientWidth
return Math.abs(window.innerWidth - documentWidth)
}

return Math.abs(this._element.offsetWidth - this._element.clientWidth)
}

hide() {
const width = this.getWidth()
this._disableOverFlow()
// give padding to element to balances 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 shown fullwidth
this._setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width)
this._setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width)
}

const _setElementAttributes = (selector, styleProp, callback) => {
const scrollbarWidth = getWidth()
SelectorEngine.find(selector)
.forEach(element => {
if (element !== document.body && window.innerWidth > element.clientWidth + scrollbarWidth) {
_disableOverFlow() {
const actualValue = this._element.style.overflowY
if (actualValue.length) {
Manipulator.setDataAttribute(this._element, 'overflowY', actualValue)
}

this._element.style.overflowY = '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.length) {
Manipulator.setDataAttribute(element, styleProp, actualValue)
}

const calculatedValue = window.getComputedStyle(element)[styleProp]
Manipulator.setDataAttribute(element, styleProp, actualValue)
element.style[styleProp] = `${callback(Number.parseFloat(calculatedValue))}px`
})
}
}

const reset = () => {
document.body.style.overflow = 'auto'
_resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight')
_resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight')
_resetElementAttributes('body', 'paddingRight')
}
this._applyManipulationCallback(selector, manipulationCallBack)
}

reset() {
this._resetElementAttributes(this._element, 'overflowY')
this._resetElementAttributes(this._element, 'paddingRight')
this._resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight')
this._resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight')
}

_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)
}

const _resetElementAttributes = (selector, styleProp) => {
SelectorEngine.find(selector).forEach(element => {
const value = Manipulator.getDataAttribute(element, styleProp)
if (typeof value === 'undefined') {
element.style.removeProperty(styleProp)
_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
7 changes: 7 additions & 0 deletions js/tests/helpers/fixture.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,3 +39,10 @@ export const jQueryMock = {
})
}
}

export const clearBodyAndDocument = () => {
document.documentElement.removeAttribute('style')
document.body.removeAttribute('style')
document.documentElement.removeAttribute('data-bs-padding-right')
document.body.removeAttribute('data-bs-padding-right')
}
Loading

0 comments on commit 40f5a33

Please sign in to comment.