@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
81 lines • 4.25 kB
JavaScript
var ScrollbarStyleHandler = /** @class */ (function () {
function ScrollbarStyleHandler() {
this._styleElementId = "scrollStyle";
this._isCustomScrollbarStyleEnabled = false;
this._scrollbarEnabled = false;
this._updateScrollbarStyle();
}
Object.defineProperty(ScrollbarStyleHandler.prototype, "scrollbarEnabled", {
get: function () {
return this._scrollbarEnabled;
},
set: function (value) {
this._scrollbarEnabled = value;
this._updateScrollbarStyle();
},
enumerable: true,
configurable: true
});
Object.defineProperty(ScrollbarStyleHandler.prototype, "isCustomScrollbarStyleEnabled", {
get: function () {
return this._isCustomScrollbarStyleEnabled;
},
set: function (value) {
this._isCustomScrollbarStyleEnabled = value;
this._updateScrollbarStyle();
},
enumerable: true,
configurable: true
});
ScrollbarStyleHandler.prototype._updateScrollbarStyle = function () {
if (!this.scrollbarEnabled) {
this._setNoScrollStyle();
}
else if (this.isCustomScrollbarStyleEnabled) {
this._setCustomScrollStyle();
}
else {
this._setDefaultScrollStyle();
}
};
ScrollbarStyleHandler.prototype._setNoScrollStyle = function () {
var styleElement = this._buildNoScrollStyleElement();
this._ensureStyleTagIsInDOM(styleElement);
};
ScrollbarStyleHandler.prototype._setCustomScrollStyle = function () {
var styleElement = this._buildCustomScrollStyleElement();
this._ensureStyleTagIsInDOM(styleElement);
};
ScrollbarStyleHandler.prototype._setDefaultScrollStyle = function () {
this._ensureStyleTagRemovedFromDOM();
};
ScrollbarStyleHandler.prototype._ensureStyleTagIsInDOM = function (style) {
this._ensureStyleTagRemovedFromDOM();
document.head.appendChild(style);
};
ScrollbarStyleHandler.prototype._ensureStyleTagRemovedFromDOM = function () {
var styleElement = document.head.querySelector("#" + this._styleElementId);
if (styleElement == null) {
return;
}
document.head.removeChild(styleElement);
};
ScrollbarStyleHandler.prototype._buildNoScrollStyleElement = function () {
var styleElement = this._buildEmptyStyleElement();
styleElement.innerHTML = " \n ::-webkit-scrollbar { \n display: none; \n } \n * { \n scrollbar-width: none !important; \n -ms-overflow-style: none !important; \n } \n ";
return styleElement;
};
ScrollbarStyleHandler.prototype._buildCustomScrollStyleElement = function () {
var styleElement = this._buildEmptyStyleElement();
styleElement.innerHTML = " \n ::-webkit-scrollbar { \n width: 8px; \n height: 8px; \n background: transparent; \n } \n\n ::-webkit-scrollbar-track { \n background: transparent; \n } \n\n ::-webkit-scrollbar-thumb { \n background: rgba(0,0,0,0.1); \n border-radius: 4px \n } \n\n ::-webkit-scrollbar-thumb:hover { \n background: rgba(0,0,0,0.2); \n } \n\n ::-webkit-scrollbar-thumb:active { \n background: rgba(0,0,0,0.3); \n } \n\n #Content * { \n scrollbar-color: rgba(0,0,0,0.2) !important transparent; \n scrollbar-width: thin !important; \n } \n ";
return styleElement;
};
ScrollbarStyleHandler.prototype._buildEmptyStyleElement = function () {
var styleElement = document.createElement("style");
styleElement.id = this._styleElementId;
return styleElement;
};
return ScrollbarStyleHandler;
}());
export { ScrollbarStyleHandler };
//# sourceMappingURL=ScrollbarStyleHandler.js.map