| 1 |
/** |
| 2 |
* Internal dependencies |
| 3 |
*/ |
| 4 |
import { exposeComponent } from "./utils"; |
| 5 |
|
| 6 |
/** |
| 7 |
* Scrollbar helper |
| 8 |
*/ |
| 9 |
|
| 10 |
const PROPERTY_PADDING = "padding-right"; |
| 11 |
class ScrollBarHelper { |
| 12 |
constructor() { |
| 13 |
this._element = document.body; |
| 14 |
} |
| 15 |
|
| 16 |
// Public |
| 17 |
getWidth() { |
| 18 |
// https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes |
| 19 |
const documentWidth = document.documentElement.clientWidth; |
| 20 |
return Math.abs(window.innerWidth - documentWidth); |
| 21 |
} |
| 22 |
|
| 23 |
hide() { |
| 24 |
const width = this.getWidth(); |
| 25 |
this._disableOverFlow(); |
| 26 |
// give padding to element to balance the hidden scrollbar width |
| 27 |
this._setElementAttributes( |
| 28 |
this._element, |
| 29 |
PROPERTY_PADDING, |
| 30 |
(calculatedValue) => calculatedValue + width |
| 31 |
); |
| 32 |
} |
| 33 |
|
| 34 |
reset() { |
| 35 |
this._resetElementAttributes("overflow"); |
| 36 |
this._resetElementAttributes(PROPERTY_PADDING); |
| 37 |
} |
| 38 |
|
| 39 |
isOverflowing() { |
| 40 |
return this.getWidth() > 0; |
| 41 |
} |
| 42 |
|
| 43 |
// Private |
| 44 |
_disableOverFlow() { |
| 45 |
this._saveInitialAttribute(this._element, "overflow"); |
| 46 |
this._element.style.overflow = "hidden"; |
| 47 |
} |
| 48 |
|
| 49 |
_setElementAttributes(selector, styleProperty, callback) { |
| 50 |
const scrollbarWidth = this.getWidth(); |
| 51 |
const manipulationCallBack = (element) => { |
| 52 |
if (window.innerWidth > element.clientWidth + scrollbarWidth) { |
| 53 |
return; |
| 54 |
} |
| 55 |
|
| 56 |
this._saveInitialAttribute(element, styleProperty); |
| 57 |
const calculatedValue = window |
| 58 |
.getComputedStyle(element) |
| 59 |
.getPropertyValue(styleProperty); |
| 60 |
element.style.setProperty( |
| 61 |
styleProperty, |
| 62 |
`${callback(Number.parseFloat(calculatedValue))}px` |
| 63 |
); |
| 64 |
}; |
| 65 |
|
| 66 |
this._applyManipulationCallback(selector, manipulationCallBack); |
| 67 |
} |
| 68 |
|
| 69 |
_saveInitialAttribute(element, styleProperty) { |
| 70 |
const actualValue = element.style.getPropertyValue(styleProperty); |
| 71 |
if (actualValue) { |
| 72 |
element.setAttribute(`data-${styleProperty}`, actualValue); |
| 73 |
} |
| 74 |
} |
| 75 |
|
| 76 |
_resetElementAttributes(styleProperty) { |
| 77 |
const value = this._element?.dataset |
| 78 |
? this._element.dataset[styleProperty] |
| 79 |
: null; |
| 80 |
|
| 81 |
this._element.removeAttribute(`data-${styleProperty}`); |
| 82 |
|
| 83 |
if (value) { |
| 84 |
this._element.style.setProperty(styleProperty, value); |
| 85 |
} else { |
| 86 |
this._element.style.removeProperty(styleProperty); |
| 87 |
} |
| 88 |
} |
| 89 |
|
| 90 |
_applyManipulationCallback(selector, callBack) { |
| 91 |
callBack(selector); |
| 92 |
} |
| 93 |
} |
| 94 |
|
| 95 |
exposeComponent("ScrollBarHelper", ScrollBarHelper); |
| 96 |
|
| 97 |
export { ScrollBarHelper }; |
| 98 |
|
