1 | /**
|
---|
2 | * --------------------------------------------------------------------------
|
---|
3 | * Bootstrap (v5.1.3): util/scrollBar.js
|
---|
4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
---|
5 | * --------------------------------------------------------------------------
|
---|
6 | */
|
---|
7 |
|
---|
8 | import SelectorEngine from '../dom/selector-engine'
|
---|
9 | import Manipulator from '../dom/manipulator'
|
---|
10 | import { isElement } from './index'
|
---|
11 |
|
---|
12 | const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top'
|
---|
13 | const SELECTOR_STICKY_CONTENT = '.sticky-top'
|
---|
14 |
|
---|
15 | class ScrollBarHelper {
|
---|
16 | constructor() {
|
---|
17 | this._element = document.body
|
---|
18 | }
|
---|
19 |
|
---|
20 | getWidth() {
|
---|
21 | // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
|
---|
22 | const documentWidth = document.documentElement.clientWidth
|
---|
23 | return Math.abs(window.innerWidth - documentWidth)
|
---|
24 | }
|
---|
25 |
|
---|
26 | hide() {
|
---|
27 | const width = this.getWidth()
|
---|
28 | this._disableOverFlow()
|
---|
29 | // give padding to element to balance the hidden scrollbar width
|
---|
30 | this._setElementAttributes(this._element, 'paddingRight', calculatedValue => calculatedValue + width)
|
---|
31 | // trick: We adjust positive paddingRight and negative marginRight to sticky-top elements to keep showing fullwidth
|
---|
32 | this._setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width)
|
---|
33 | this._setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width)
|
---|
34 | }
|
---|
35 |
|
---|
36 | _disableOverFlow() {
|
---|
37 | this._saveInitialAttribute(this._element, 'overflow')
|
---|
38 | this._element.style.overflow = 'hidden'
|
---|
39 | }
|
---|
40 |
|
---|
41 | _setElementAttributes(selector, styleProp, callback) {
|
---|
42 | const scrollbarWidth = this.getWidth()
|
---|
43 | const manipulationCallBack = element => {
|
---|
44 | if (element !== this._element && window.innerWidth > element.clientWidth + scrollbarWidth) {
|
---|
45 | return
|
---|
46 | }
|
---|
47 |
|
---|
48 | this._saveInitialAttribute(element, styleProp)
|
---|
49 | const calculatedValue = window.getComputedStyle(element)[styleProp]
|
---|
50 | element.style[styleProp] = `${callback(Number.parseFloat(calculatedValue))}px`
|
---|
51 | }
|
---|
52 |
|
---|
53 | this._applyManipulationCallback(selector, manipulationCallBack)
|
---|
54 | }
|
---|
55 |
|
---|
56 | reset() {
|
---|
57 | this._resetElementAttributes(this._element, 'overflow')
|
---|
58 | this._resetElementAttributes(this._element, 'paddingRight')
|
---|
59 | this._resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight')
|
---|
60 | this._resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight')
|
---|
61 | }
|
---|
62 |
|
---|
63 | _saveInitialAttribute(element, styleProp) {
|
---|
64 | const actualValue = element.style[styleProp]
|
---|
65 | if (actualValue) {
|
---|
66 | Manipulator.setDataAttribute(element, styleProp, actualValue)
|
---|
67 | }
|
---|
68 | }
|
---|
69 |
|
---|
70 | _resetElementAttributes(selector, styleProp) {
|
---|
71 | const manipulationCallBack = element => {
|
---|
72 | const value = Manipulator.getDataAttribute(element, styleProp)
|
---|
73 | if (typeof value === 'undefined') {
|
---|
74 | element.style.removeProperty(styleProp)
|
---|
75 | } else {
|
---|
76 | Manipulator.removeDataAttribute(element, styleProp)
|
---|
77 | element.style[styleProp] = value
|
---|
78 | }
|
---|
79 | }
|
---|
80 |
|
---|
81 | this._applyManipulationCallback(selector, manipulationCallBack)
|
---|
82 | }
|
---|
83 |
|
---|
84 | _applyManipulationCallback(selector, callBack) {
|
---|
85 | if (isElement(selector)) {
|
---|
86 | callBack(selector)
|
---|
87 | } else {
|
---|
88 | SelectorEngine.find(selector, this._element).forEach(callBack)
|
---|
89 | }
|
---|
90 | }
|
---|
91 |
|
---|
92 | isOverflowing() {
|
---|
93 | return this.getWidth() > 0
|
---|
94 | }
|
---|
95 | }
|
---|
96 |
|
---|
97 | export default ScrollBarHelper
|
---|