@soyfri/template 1.0.1 → 1.0.3

package/dist/assets/ts/components/_ScrollComponent.js

@@ -1,262 +1,254 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultScrollOptions = exports.ScrollComponent = void 0;
-var index_1 = require("../_utils/index");
-var _CookieComponent_1 = require("./_CookieComponent");
-var defaultScrollOptions = {
+import { DataUtil, getObjectPropertyValueByKey, stringSnakeToCamel, getAttributeValueByBreakpoint, getViewPort, isVisibleElement, throttle, getCSS, ElementStyleUtil, } from '../_utils/index';
+import { CookieComponent } from './_CookieComponent';
+const defaultScrollOptions = {
     saveState: true,
 };
-exports.defaultScrollOptions = defaultScrollOptions;
-var ScrollComponent = /** @class */ (function () {
-    function ScrollComponent(_element, options) {
-        var _this = this;
-        this.getOption = function (name) {
-            if (_this.element.hasAttribute('data-kt-scroll-' + name) === true) {
-                var attr = _this.element.getAttribute('data-kt-scroll-' + name) || '';
-                var value = (0, index_1.getAttributeValueByBreakpoint)(attr);
-                if (value !== null && String(value) === 'true') {
-                    value = true;
-                }
-                else if (value !== null && String(value) === 'false') {
-                    value = false;
-                }
-                return value;
-            }
-            else {
-                var optionName = (0, index_1.stringSnakeToCamel)(name);
-                var option = (0, index_1.getObjectPropertyValueByKey)(_this.options, optionName);
-                if (option) {
-                    return (0, index_1.getAttributeValueByBreakpoint)(option);
-                }
-                else {
-                    return null;
-                }
+class ScrollComponent {
+    element;
+    options;
+    id;
+    constructor(_element, options) {
+        this.element = _element;
+        this.options = Object.assign(defaultScrollOptions, options);
+        this.id = this.element.getAttribute('id') || '';
+        this.update();
+        // this.element.setAttribute('data-kt-scrolltop', 'true')
+        DataUtil.set(this.element, 'scroll', this);
+    }
+    getOption = (name) => {
+        if (this.element.hasAttribute('data-kt-scroll-' + name) === true) {
+            const attr = this.element.getAttribute('data-kt-scroll-' + name) || '';
+            let value = getAttributeValueByBreakpoint(attr);
+            if (value !== null && String(value) === 'true') {
+                value = true;
             }
-        };
-        this.getHeightType = function () {
-            if (_this.getOption('height')) {
-                return 'height';
+            else if (value !== null && String(value) === 'false') {
+                value = false;
             }
-            if (_this.getOption('min-height')) {
-                return 'min-height';
+            return value;
+        }
+        else {
+            const optionName = stringSnakeToCamel(name);
+            const option = getObjectPropertyValueByKey(this.options, optionName);
+            if (option) {
+                return getAttributeValueByBreakpoint(option);
             }
-            if (_this.getOption('max-height')) {
-                return 'max-height';
+            else {
+                return null;
             }
-        };
-        this.getAutoHeight = function () {
-            var height = (0, index_1.getViewPort)().height;
-            var dependencies = _this.getOption('dependencies');
-            var wrappers = _this.getOption('wrappers');
-            var offset = _this.getOption('offset');
-            // Height dependencies
-            if (dependencies !== null) {
-                var elements = document.querySelectorAll(dependencies);
-                if (elements && elements.length > 0) {
-                    for (var i = 0, len = elements.length; i < len; i++) {
-                        var element = elements[i];
-                        if ((0, index_1.isVisibleElement)(element) === false) {
-                            continue;
-                        }
-                        height = height - parseInt((0, index_1.getCSS)(element, 'height'));
-                        height = height - parseInt((0, index_1.getCSS)(element, 'margin-top'));
-                        height = height - parseInt((0, index_1.getCSS)(element, 'margin-bottom'));
-                        var borderTop_1 = (0, index_1.getCSS)(element, 'border-top');
-                        if (borderTop_1) {
-                            height = height - parseInt(borderTop_1);
-                        }
-                        var borderBottom_1 = (0, index_1.getCSS)(element, 'border-bottom');
-                        if (borderBottom_1) {
-                            height = height - parseInt(borderBottom_1);
-                        }
+        }
+    };
+    getHeightType = () => {
+        if (this.getOption('height')) {
+            return 'height';
+        }
+        if (this.getOption('min-height')) {
+            return 'min-height';
+        }
+        if (this.getOption('max-height')) {
+            return 'max-height';
+        }
+    };
+    getAutoHeight = () => {
+        let height = getViewPort().height;
+        const dependencies = this.getOption('dependencies');
+        const wrappers = this.getOption('wrappers');
+        const offset = this.getOption('offset');
+        // Height dependencies
+        if (dependencies !== null) {
+            const elements = document.querySelectorAll(dependencies);
+            if (elements && elements.length > 0) {
+                for (let i = 0, len = elements.length; i < len; i++) {
+                    const element = elements[i];
+                    if (isVisibleElement(element) === false) {
+                        continue;
                     }
-                }
-            }
-            // Wrappers
-            if (wrappers !== null) {
-                var elements = document.querySelectorAll(wrappers);
-                if (elements && elements.length > 0) {
-                    for (var i = 0, len = elements.length; i < len; i++) {
-                        var element = elements[i];
-                        if (!(0, index_1.isVisibleElement)(element)) {
-                            continue;
-                        }
-                        height = height - parseInt((0, index_1.getCSS)(element, 'margin-top'));
-                        height = height - parseInt((0, index_1.getCSS)(element, 'margin-bottom'));
-                        height = height - parseInt((0, index_1.getCSS)(element, 'padding-top'));
-                        height = height - parseInt((0, index_1.getCSS)(element, 'padding-bottom'));
-                        var borderTop_2 = (0, index_1.getCSS)(element, 'border-top');
-                        if (borderTop_2) {
-                            height = height - parseInt(borderTop_2);
-                        }
-                        var borderBottom_2 = (0, index_1.getCSS)(element, 'border-bottom');
-                        if (borderBottom_2) {
-                            height = height - parseInt(borderBottom_2);
-                        }
+                    height = height - parseInt(getCSS(element, 'height'));
+                    height = height - parseInt(getCSS(element, 'margin-top'));
+                    height = height - parseInt(getCSS(element, 'margin-bottom'));
+                    const borderTop = getCSS(element, 'border-top');
+                    if (borderTop) {
+                        height = height - parseInt(borderTop);
+                    }
+                    const borderBottom = getCSS(element, 'border-bottom');
+                    if (borderBottom) {
+                        height = height - parseInt(borderBottom);
                     }
                 }
             }
-            // Custom offset
-            if (offset !== null) {
-                height = height - parseInt(offset);
-            }
-            height = height - parseInt((0, index_1.getCSS)(_this.element, 'margin-top'));
-            height = height - parseInt((0, index_1.getCSS)(_this.element, 'margin-bottom'));
-            var borderTop = (0, index_1.getCSS)(_this.element, 'border-top');
-            if (borderTop) {
-                height = height - parseInt(borderTop);
-            }
-            var borderBottom = (0, index_1.getCSS)(_this.element, 'border-bottom');
-            if (borderBottom) {
-                height = height - parseInt(borderBottom);
-            }
-            height = String(height) + 'px';
-            return height;
-        };
-        this.setupHeight = function () {
-            var height = _this.getHeight();
-            var heightType = _this.getHeightType();
-            // Set height
-            if (height !== null && height.length > 0) {
-                index_1.ElementStyleUtil.set(_this.element, heightType, height);
-            }
-            else {
-                index_1.ElementStyleUtil.set(_this.element, heightType, '');
-            }
-        };
-        this.setupState = function () {
-            if (_this.getOption('save-state') === true && _this.id) {
-                var cookie = _CookieComponent_1.CookieComponent.get(_this.id + 'st');
-                if (cookie) {
-                    var pos = parseInt(cookie);
-                    if (pos > 0) {
-                        _this.element.scrollTop = pos;
+        }
+        // Wrappers
+        if (wrappers !== null) {
+            const elements = document.querySelectorAll(wrappers);
+            if (elements && elements.length > 0) {
+                for (let i = 0, len = elements.length; i < len; i++) {
+                    const element = elements[i];
+                    if (!isVisibleElement(element)) {
+                        continue;
+                    }
+                    height = height - parseInt(getCSS(element, 'margin-top'));
+                    height = height - parseInt(getCSS(element, 'margin-bottom'));
+                    height = height - parseInt(getCSS(element, 'padding-top'));
+                    height = height - parseInt(getCSS(element, 'padding-bottom'));
+                    const borderTop = getCSS(element, 'border-top');
+                    if (borderTop) {
+                        height = height - parseInt(borderTop);
+                    }
+                    const borderBottom = getCSS(element, 'border-bottom');
+                    if (borderBottom) {
+                        height = height - parseInt(borderBottom);
                     }
                 }
             }
-        };
-        this.setupScrollHandler = function () {
-            if (_this.getOption('save-state') === true && _this.id) {
-                _this.element.addEventListener('scroll', _this.scrollHandler);
-            }
-            else {
-                _this.element.removeEventListener('scroll', _this.scrollHandler);
-            }
-        };
-        this.scrollHandler = function () {
-            var cookieId = _this.id + 'st';
-            _CookieComponent_1.CookieComponent.set(cookieId, _this.element.scrollTop, {});
-        };
-        this.destroyScrollHandler = function () {
-            _this.element.removeEventListener('scroll', _this.scrollHandler);
-        };
-        this.resetHeight = function () {
-            var heghtType = _this.getHeightType();
-            if (heghtType) {
-                index_1.ElementStyleUtil.set(_this.element, heghtType, '');
-            }
-        };
-        ///////////////////////
-        // ** Public API  ** //
-        ///////////////////////
-        this.update = function () {
-            // Activate/deactivate
-            if (_this.getOption('activate') === true ||
-                !_this.element.hasAttribute('data-kt-scroll-activate')) {
-                _this.setupHeight();
-                _this.setupScrollHandler();
-                _this.setupState();
-            }
-            else {
-                _this.resetHeight();
-                _this.destroyScrollHandler();
-            }
-        };
-        this.getHeight = function () {
-            var heightType = _this.getHeightType();
-            var height = _this.getOption(heightType || '');
-            if (height instanceof Function) {
-                return height.call(height);
-            }
-            else if (height !== null && typeof height === 'string' && height.toLowerCase() === 'auto') {
-                return _this.getAutoHeight();
-            }
-            else {
-                return height;
+        }
+        // Custom offset
+        if (offset !== null) {
+            height = height - parseInt(offset);
+        }
+        height = height - parseInt(getCSS(this.element, 'margin-top'));
+        height = height - parseInt(getCSS(this.element, 'margin-bottom'));
+        const borderTop = getCSS(this.element, 'border-top');
+        if (borderTop) {
+            height = height - parseInt(borderTop);
+        }
+        const borderBottom = getCSS(this.element, 'border-bottom');
+        if (borderBottom) {
+            height = height - parseInt(borderBottom);
+        }
+        height = String(height) + 'px';
+        return height;
+    };
+    setupHeight = () => {
+        const height = this.getHeight();
+        const heightType = this.getHeightType();
+        // Set height
+        if (height !== null && height.length > 0) {
+            ElementStyleUtil.set(this.element, heightType, height);
+        }
+        else {
+            ElementStyleUtil.set(this.element, heightType, '');
+        }
+    };
+    setupState = () => {
+        if (this.getOption('save-state') === true && this.id) {
+            const cookie = CookieComponent.get(this.id + 'st');
+            if (cookie) {
+                const pos = parseInt(cookie);
+                if (pos > 0) {
+                    this.element.scrollTop = pos;
+                }
             }
-        };
-        this.getElement = function () {
-            return _this.element;
-        };
-        this.element = _element;
-        this.options = Object.assign(defaultScrollOptions, options);
-        this.id = this.element.getAttribute('id') || '';
-        this.update();
-        // this.element.setAttribute('data-kt-scrolltop', 'true')
-        index_1.DataUtil.set(this.element, 'scroll', this);
-    }
-    // Static methods
-    ScrollComponent.hasInstace = function (element) {
-        return index_1.DataUtil.has(element, 'scroll');
+        }
+    };
+    setupScrollHandler = () => {
+        if (this.getOption('save-state') === true && this.id) {
+            this.element.addEventListener('scroll', this.scrollHandler);
+        }
+        else {
+            this.element.removeEventListener('scroll', this.scrollHandler);
+        }
+    };
+    scrollHandler = () => {
+        const cookieId = this.id + 'st';
+        CookieComponent.set(cookieId, this.element.scrollTop, {});
+    };
+    destroyScrollHandler = () => {
+        this.element.removeEventListener('scroll', this.scrollHandler);
+    };
+    resetHeight = () => {
+        const heghtType = this.getHeightType();
+        if (heghtType) {
+            ElementStyleUtil.set(this.element, heghtType, '');
+        }
+    };
+    ///////////////////////
+    // ** Public API  ** //
+    ///////////////////////
+    update = () => {
+        // Activate/deactivate
+        if (this.getOption('activate') === true ||
+            !this.element.hasAttribute('data-kt-scroll-activate')) {
+            this.setupHeight();
+            this.setupScrollHandler();
+            this.setupState();
+        }
+        else {
+            this.resetHeight();
+            this.destroyScrollHandler();
+        }
+    };
+    getHeight = () => {
+        const heightType = this.getHeightType();
+        const height = this.getOption(heightType || '');
+        if (height instanceof Function) {
+            return height.call(height);
+        }
+        else if (height !== null && typeof height === 'string' && height.toLowerCase() === 'auto') {
+            return this.getAutoHeight();
+        }
+        else {
+            return height;
+        }
     };
-    ScrollComponent.getInstance = function (element) {
+    getElement = () => {
+        return this.element;
+    };
+    // Static methods
+    static hasInstace(element) {
+        return DataUtil.has(element, 'scroll');
+    }
+    static getInstance(element) {
         if (element !== null && ScrollComponent.hasInstace(element)) {
-            var data = index_1.DataUtil.get(element, 'scroll');
+            const data = DataUtil.get(element, 'scroll');
             if (data) {
                 return data;
             }
         }
-    };
+    }
     // Create Instances
-    ScrollComponent.createInstances = function (selector) {
-        var elements = document.body.querySelectorAll(selector);
-        elements.forEach(function (element) {
-            var item = element;
-            var scroll = ScrollComponent.getInstance(item);
+    static createInstances(selector) {
+        const elements = document.body.querySelectorAll(selector);
+        elements.forEach((element) => {
+            const item = element;
+            let scroll = ScrollComponent.getInstance(item);
             if (!scroll) {
                 scroll = new ScrollComponent(item, defaultScrollOptions);
             }
         });
-    };
-    ScrollComponent.destroyAll = function (attr) {
-        if (attr === void 0) { attr = '[data-kt-scroll="true"]'; }
-    };
-    ScrollComponent.bootstrap = function (attr) {
-        if (attr === void 0) { attr = '[data-kt-scroll="true"]'; }
+    }
+    static destroyAll(attr = '[data-kt-scroll="true"]') { }
+    static bootstrap(attr = '[data-kt-scroll="true"]') {
         ScrollComponent.createInstances(attr);
         ScrollComponent.resize();
+    }
+    static createInstance = (element, options = defaultScrollOptions) => {
+        let scroll = ScrollComponent.getInstance(element);
+        if (!scroll) {
+            scroll = new ScrollComponent(element, options);
+        }
+        return scroll;
     };
-    ScrollComponent.reinitialization = function (attr) {
-        if (attr === void 0) { attr = '[data-kt-scroll="true"]'; }
+    static reinitialization(attr = '[data-kt-scroll="true"]') {
         ScrollComponent.createInstances(attr);
-    };
-    ScrollComponent.updateAll = function () {
-        var elements = document.body.querySelectorAll('[data-kt-scroll="true"]');
-        elements.forEach(function (element) {
-            var instance = ScrollComponent.getInstance(element);
+    }
+    static updateAll() {
+        const elements = document.body.querySelectorAll('[data-kt-scroll="true"]');
+        elements.forEach((element) => {
+            const instance = ScrollComponent.getInstance(element);
             if (instance) {
                 instance.update();
             }
         });
-    };
-    ScrollComponent.resize = function () {
+    }
+    static resize() {
         // Window Resize Handling
         window.addEventListener('resize', function () {
-            var timer;
-            (0, index_1.throttle)(timer, function () {
+            let timer;
+            throttle(timer, () => {
                 // Locate and update Drawer instances on window resize
                 ScrollComponent.updateAll();
             }, 200);
         });
-    };
-    ScrollComponent.createInstance = function (element, options) {
-        if (options === void 0) { options = defaultScrollOptions; }
-        var scroll = ScrollComponent.getInstance(element);
-        if (!scroll) {
-            scroll = new ScrollComponent(element, options);
-        }
-        return scroll;
-    };
-    return ScrollComponent;
-}());
-exports.ScrollComponent = ScrollComponent;
+    }
+}
+export { ScrollComponent, defaultScrollOptions };