@aurigma/design-atoms/Viewer/ScrollbarStyleHandler.js

Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.

export class ScrollbarStyleHandler {
    constructor() {
        this._styleElementId = "scrollStyle";
        this._isCustomScrollbarStyleEnabled = false;
        this._scrollbarEnabled = false;
        this._updateScrollbarStyle();
    }
    get scrollbarEnabled() {
        return this._scrollbarEnabled;
    }
    set scrollbarEnabled(value) {
        this._scrollbarEnabled = value;
        this._updateScrollbarStyle();
    }
    get isCustomScrollbarStyleEnabled() {
        return this._isCustomScrollbarStyleEnabled;
    }
    set isCustomScrollbarStyleEnabled(value) {
        this._isCustomScrollbarStyleEnabled = value;
        this._updateScrollbarStyle();
    }
    _updateScrollbarStyle() {
        if (!this.scrollbarEnabled) {
            this._setNoScrollStyle();
        }
        else if (this.isCustomScrollbarStyleEnabled) {
            this._setCustomScrollStyle();
        }
        else {
            this._setDefaultScrollStyle();
        }
    }
    _setNoScrollStyle() {
        const styleElement = this._buildNoScrollStyleElement();
        this._ensureStyleTagIsInDOM(styleElement);
    }
    _setCustomScrollStyle() {
        const styleElement = this._buildCustomScrollStyleElement();
        this._ensureStyleTagIsInDOM(styleElement);
    }
    _setDefaultScrollStyle() {
        this._ensureStyleTagRemovedFromDOM();
    }
    _ensureStyleTagIsInDOM(style) {
        this._ensureStyleTagRemovedFromDOM();
        document.head.appendChild(style);
    }
    _ensureStyleTagRemovedFromDOM() {
        const styleElement = document.head.querySelector(`#${this._styleElementId}`);
        if (styleElement == null) {
            return;
        }
        document.head.removeChild(styleElement);
    }
    _buildNoScrollStyleElement() {
        const styleElement = this._buildEmptyStyleElement();
        styleElement.innerHTML = ` 
            ::-webkit-scrollbar { 
                display: none; 
            } 
            * { 
                scrollbar-width: none !important; 
                -ms-overflow-style: none !important; 
            } 
            `;
        return styleElement;
    }
    _buildCustomScrollStyleElement() {
        const styleElement = this._buildEmptyStyleElement();
        styleElement.innerHTML = ` 
            ::-webkit-scrollbar { 
                width: 8px; 
                height: 8px; 
                background: transparent; 
            } 

            ::-webkit-scrollbar-track { 
                background: transparent;      
            } 

            ::-webkit-scrollbar-thumb { 
                background: rgba(0,0,0,0.1); 
                border-radius: 4px 
            } 

            ::-webkit-scrollbar-thumb:hover { 
                background: rgba(0,0,0,0.2); 
            } 

            ::-webkit-scrollbar-thumb:active { 
                background: rgba(0,0,0,0.3); 
            } 

            #Content * { 
                scrollbar-color: rgba(0,0,0,0.2) !important transparent; 
                scrollbar-width: thin  !important; 
            } 
        `;
        return styleElement;
    }
    _buildEmptyStyleElement() {
        const styleElement = document.createElement("style");
        styleElement.id = this._styleElementId;
        return styleElement;
    }
}
//# sourceMappingURL=ScrollbarStyleHandler.js.map