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: 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 29, 2021
1 parent 3bcb9e7 commit 54eb3f9
Show file tree
Hide file tree
Showing 8 changed files with 338 additions and 388 deletions.
13 changes: 5 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 All @@ -85,6 +84,7 @@ class Modal extends BaseComponent {
this._isShown = false
this._ignoreBackdropClick = false
this._isTransitioning = false
this._scrollBar = new ScrollBarHelper()
}

// Getters
Expand Down Expand Up @@ -122,9 +122,7 @@ class Modal extends BaseComponent {

this._isShown = true

scrollBarHide()

document.body.classList.add(CLASS_NAME_OPEN)
this._scrollBar.hide()

this._adjustDialog()

Expand Down Expand Up @@ -322,9 +320,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()
this._scrollBar.reset()
EventHandler.trigger(this._element, EVENT_HIDDEN)
})
}
Expand Down Expand Up @@ -388,7 +385,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())) {
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
124 changes: 74 additions & 50 deletions js/src/util/scrollbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,75 +7,99 @@

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()) => {
_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)
}
this._element = this._isBody ? document.body : element
}

const _disableOverFlow = () => {
const actualValue = document.body.style.overflow
if (actualValue) {
Manipulator.setDataAttribute(document.body, 'overflow', actualValue)
getWidth() {
if (this._isBody) {
// https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
const documentWidth = document.documentElement.clientWidth
return Math.abs(window.innerWidth - documentWidth)
}

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

document.body.style.overflow = 'hidden'
}
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.overflow
if (actualValue) {
Manipulator.setDataAttribute(this._element, 'overflow', actualValue)
}

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

const calculatedValue = window.getComputedStyle(element)[styleProp]
Manipulator.setDataAttribute(element, styleProp, actualValue)
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')
}

_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(el = document.body) {
const clientHeight = this._isBody ? Math.min(document.body.clientHeight, document.documentElement.clientHeight) : this._element.clientHeight
return el.scrollHeight > clientHeight
}
}

export {
getWidth,
hide,
isBodyOverflowing,
reset
}
export default ScrollBarHelper
Loading

0 comments on commit 54eb3f9

Please sign in to comment.