Hugging Face's logo

Spaces:
Arjunadhithya
/
creep
Running

App Files Community
creep
File size: 3,647 Bytes 
8e11898
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 
/**
 * --------------------------------------------------------------------------
 * Bootstrap (v5.1.3): util/scrollBar.js
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 * --------------------------------------------------------------------------
 */

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'

class ScrollBarHelper {
    constructor() {
        this._element = document.body
    }

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

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

    _disableOverFlow() {
        this._saveInitialAttribute(this._element, 'overflow')
        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
            }

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

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

    _saveInitialAttribute(element, styleProp) {
        const actualValue = element.style[styleProp]
        if (actualValue) {
            Manipulator.setDataAttribute(element, styleProp, actualValue)
        }
    }

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

    _applyManipulationCallback(selector, callBack) {
        if (isElement(selector)) {
            callBack(selector)
        } else {
            SelectorEngine.find(selector, this._element).forEach(callBack)
        }
    }

    isOverflowing() {
        return this.getWidth() > 0
    }
}

export default ScrollBarHelper