@soyfri/template 1.0.1 → 1.0.3

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

@@ -0,0 +1,312 @@
+import {
+  DataUtil,
+  getObjectPropertyValueByKey,
+  stringSnakeToCamel,
+  getAttributeValueByBreakpoint,
+  getViewPort,
+  isVisibleElement,
+  throttle,
+  getCSS,
+  ElementStyleUtil,
+} from '../_utils/index'
+import {CookieComponent} from './_CookieComponent'
+
+export interface ScrollOptions {
+  saveState?: boolean
+}
+
+const defaultScrollOptions: ScrollOptions = {
+  saveState: true,
+}
+
+class ScrollComponent {
+  element: HTMLElement
+  options: ScrollOptions
+  id: string
+
+  constructor(_element: HTMLElement, options: ScrollOptions) {
+    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)
+  }
+
+  private getOption = (name: string) => {
+    if (this.element.hasAttribute('data-kt-scroll-' + name) === true) {
+      const attr = this.element.getAttribute('data-kt-scroll-' + name) || ''
+      let value: string | JSON | boolean = getAttributeValueByBreakpoint(attr)
+      if (value !== null && String(value) === 'true') {
+        value = true
+      } else if (value !== null && String(value) === 'false') {
+        value = false
+      }
+
+      return value
+    } else {
+      const optionName = stringSnakeToCamel(name)
+      const option = getObjectPropertyValueByKey(this.options, optionName)
+      if (option) {
+        return getAttributeValueByBreakpoint(option)
+      } else {
+        return null
+      }
+    }
+  }
+
+  private getHeightType = () => {
+    if (this.getOption('height')) {
+      return 'height'
+    }
+    if (this.getOption('min-height')) {
+      return 'min-height'
+    }
+    if (this.getOption('max-height')) {
+      return 'max-height'
+    }
+  }
+
+  private getAutoHeight = () => {
+    let height: number | string = 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 as string)
+      if (elements && elements.length > 0) {
+        for (let i = 0, len = elements.length; i < len; i++) {
+          const element = elements[i] as HTMLElement
+          if (isVisibleElement(element) === false) {
+            continue
+          }
+
+          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)
+          }
+        }
+      }
+    }
+
+    // Wrappers
+    if (wrappers !== null) {
+      const elements = document.querySelectorAll(wrappers as string)
+      if (elements && elements.length > 0) {
+        for (let i = 0, len = elements.length; i < len; i++) {
+          const element = elements[i] as HTMLElement
+
+          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)
+          }
+        }
+      }
+    }
+
+    // Custom offset
+    if (offset !== null) {
+      height = height - parseInt(offset as string)
+    }
+
+    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
+  }
+
+  private setupHeight = () => {
+    const height = this.getHeight()
+    const heightType = this.getHeightType() as string
+
+    // Set height
+    if (height !== null && height.length > 0) {
+      ElementStyleUtil.set(this.element, heightType, height)
+    } else {
+      ElementStyleUtil.set(this.element, heightType, '')
+    }
+  }
+
+  private 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
+        }
+      }
+    }
+  }
+
+  private setupScrollHandler = () => {
+    if (this.getOption('save-state') === true && this.id) {
+      this.element.addEventListener('scroll', this.scrollHandler)
+    } else {
+      this.element.removeEventListener('scroll', this.scrollHandler)
+    }
+  }
+
+  private scrollHandler = () => {
+    const cookieId = this.id + 'st'
+    CookieComponent.set(cookieId, this.element.scrollTop, {})
+  }
+
+  private destroyScrollHandler = () => {
+    this.element.removeEventListener('scroll', this.scrollHandler)
+  }
+
+  private resetHeight = () => {
+    const heghtType = this.getHeightType()
+    if (heghtType) {
+      ElementStyleUtil.set(this.element, heghtType, '')
+    }
+  }
+
+  ///////////////////////
+  // ** Public API  ** //
+  ///////////////////////
+  public 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()
+    }
+  }
+
+  public 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
+    }
+  }
+
+  public getElement = () => {
+    return this.element
+  }
+
+  // Static methods
+  public static hasInstace(element: HTMLElement) {
+    return DataUtil.has(element, 'scroll')
+  }
+
+  public static getInstance(element: HTMLElement): ScrollComponent | undefined {
+    if (element !== null && ScrollComponent.hasInstace(element)) {
+      const data = DataUtil.get(element, 'scroll')
+      if (data) {
+        return data as ScrollComponent
+      }
+    }
+  }
+
+  // Create Instances
+  public static createInstances(selector: string) {
+    const elements = document.body.querySelectorAll(selector)
+    elements.forEach((element: Element) => {
+      const item = element as HTMLElement
+      let scroll = ScrollComponent.getInstance(item)
+      if (!scroll) {
+        scroll = new ScrollComponent(item, defaultScrollOptions)
+      }
+    })
+  }
+
+  public static destroyAll(attr: string = '[data-kt-scroll="true"]') {}
+
+  public static bootstrap(attr: string = '[data-kt-scroll="true"]') {
+    ScrollComponent.createInstances(attr)
+    ScrollComponent.resize()
+  }
+
+  public static createInstance = (
+    element: HTMLElement,
+    options: ScrollOptions = defaultScrollOptions
+  ): ScrollComponent | undefined => {
+    let scroll = ScrollComponent.getInstance(element)
+    if (!scroll) {
+      scroll = new ScrollComponent(element, options)
+    }
+    return scroll
+  }
+
+  public static reinitialization(attr: string = '[data-kt-scroll="true"]') {
+    ScrollComponent.createInstances(attr)
+  }
+
+  public static updateAll() {
+    const elements = document.body.querySelectorAll('[data-kt-scroll="true"]')
+    elements.forEach((element: Element) => {
+      const instance = ScrollComponent.getInstance(element as HTMLElement)
+      if (instance) {
+        instance.update()
+      }
+    })
+  }
+
+  public static resize() {
+    // Window Resize Handling
+    window.addEventListener('resize', function () {
+      let timer
+      throttle(
+        timer,
+        () => {
+          // Locate and update Drawer instances on window resize
+          ScrollComponent.updateAll()
+        },
+        200
+      )
+    })
+  }
+}
+
+export {ScrollComponent, defaultScrollOptions}

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

@@ -1,115 +1,111 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultScrollTopOptions = exports.ScrollTopComponent = void 0;
-var index_1 = require("../_utils/index");
-var defaultScrollTopOptions = {
+import { getScrollTop, getAttributeValueByBreakpoint, throttle, getObjectPropertyValueByKey, stringSnakeToCamel, getUniqueIdWithPrefix, DataUtil, ElementAnimateUtil, } from '../_utils/index';
+const defaultScrollTopOptions = {
     offset: 200,
     speed: 600,
 };
-exports.defaultScrollTopOptions = defaultScrollTopOptions;
-var ScrollTopComponent = /** @class */ (function () {
-    function ScrollTopComponent(_element, options) {
-        var _this = this;
-        this._handlers = function () {
-            var timer = 0;
-            window.addEventListener('scroll', function () {
-                (0, index_1.throttle)(timer, function () {
-                    _this._scroll();
-                });
-            });
-            _this.element.addEventListener('click', function (e) {
-                e.preventDefault();
-                _this._go();
-            });
-        };
-        this._scroll = function () {
-            var offset = parseInt(_this._getOption('offset'));
-            var pos = (0, index_1.getScrollTop)(); // current vertical position
-            if (pos > offset) {
-                if (!document.body.hasAttribute('data-kt-scrolltop')) {
-                    document.body.setAttribute('data-kt-scrolltop', 'on');
-                }
-            }
-            else {
-                if (document.body.hasAttribute('data-kt-scrolltop')) {
-                    document.body.removeAttribute('data-kt-scrolltop');
-                }
-            }
-        };
-        this._go = function () {
-            var speed = parseInt(_this._getOption('speed'));
-            index_1.ElementAnimateUtil.scrollTop(0, speed);
-        };
-        this._getOption = function (name) {
-            var attr = _this.element.getAttribute("data-kt-scrolltop-".concat(name));
-            if (attr) {
-                var value = (0, index_1.getAttributeValueByBreakpoint)(attr);
-                return value !== null && String(value) === 'true';
-            }
-            var optionName = (0, index_1.stringSnakeToCamel)(name);
-            var option = (0, index_1.getObjectPropertyValueByKey)(_this.options, optionName);
-            if (option) {
-                return (0, index_1.getAttributeValueByBreakpoint)(option);
-            }
-            return null;
-        };
-        ///////////////////////
-        // ** Public API  ** //
-        ///////////////////////
-        // Plugin API
-        this.go = function () {
-            return _this._go();
-        };
-        this.getElement = function () {
-            return _this.element;
-        };
+class ScrollTopComponent {
+    element;
+    options;
+    instanceUid;
+    constructor(_element, options) {
         this.element = _element;
         this.options = Object.assign(defaultScrollTopOptions, options);
-        this.instanceUid = (0, index_1.getUniqueIdWithPrefix)('scrolltop');
+        this.instanceUid = getUniqueIdWithPrefix('scrolltop');
         // Event Handlers
         this._handlers();
         // Bind Instance
-        index_1.DataUtil.set(this.element, 'scrolltop', this);
+        DataUtil.set(this.element, 'scrolltop', this);
     }
+    _handlers = () => {
+        let timer = 0;
+        window.addEventListener('scroll', () => {
+            throttle(timer, () => {
+                this._scroll();
+            });
+        });
+        this.element.addEventListener('click', (e) => {
+            e.preventDefault();
+            this._go();
+        });
+    };
+    _scroll = () => {
+        const offset = parseInt(this._getOption('offset'));
+        const pos = getScrollTop(); // current vertical position
+        if (pos > offset) {
+            if (!document.body.hasAttribute('data-kt-scrolltop')) {
+                document.body.setAttribute('data-kt-scrolltop', 'on');
+            }
+        }
+        else {
+            if (document.body.hasAttribute('data-kt-scrolltop')) {
+                document.body.removeAttribute('data-kt-scrolltop');
+            }
+        }
+    };
+    _go = () => {
+        const speed = parseInt(this._getOption('speed'));
+        ElementAnimateUtil.scrollTop(0, speed);
+    };
+    _getOption = (name) => {
+        const attr = this.element.getAttribute(`data-kt-scrolltop-${name}`);
+        if (attr) {
+            const value = getAttributeValueByBreakpoint(attr);
+            return value !== null && String(value) === 'true';
+        }
+        const optionName = stringSnakeToCamel(name);
+        const option = getObjectPropertyValueByKey(this.options, optionName);
+        if (option) {
+            return getAttributeValueByBreakpoint(option);
+        }
+        return null;
+    };
+    ///////////////////////
+    // ** Public API  ** //
+    ///////////////////////
+    // Plugin API
+    go = () => {
+        return this._go();
+    };
+    getElement = () => {
+        return this.element;
+    };
     // Static methods
-    ScrollTopComponent.getInstance = function (el) {
-        var scrollTop = index_1.DataUtil.get(el, 'scrolltop');
+    static getInstance = (el) => {
+        const scrollTop = DataUtil.get(el, 'scrolltop');
         if (scrollTop) {
             return scrollTop;
         }
     };
-    ScrollTopComponent.createInstances = function (selector) {
-        var elements = document.body.querySelectorAll(selector);
-        elements.forEach(function (el) {
-            var item = el;
-            var scrollTop = ScrollTopComponent.getInstance(item);
+    static createInstances = (selector) => {
+        const elements = document.body.querySelectorAll(selector);
+        elements.forEach((el) => {
+            const item = el;
+            let scrollTop = ScrollTopComponent.getInstance(item);
             if (!scrollTop) {
                 scrollTop = new ScrollTopComponent(item, defaultScrollTopOptions);
             }
         });
     };
-    ScrollTopComponent.createInsance = function (selector, options) {
-        if (options === void 0) { options = defaultScrollTopOptions; }
-        var element = document.body.querySelector(selector);
+    static createInsance = (selector, options = defaultScrollTopOptions) => {
+        const element = document.body.querySelector(selector);
         if (!element) {
             return;
         }
-        var item = element;
-        var scrollTop = ScrollTopComponent.getInstance(item);
+        const item = element;
+        let scrollTop = ScrollTopComponent.getInstance(item);
         if (!scrollTop) {
             scrollTop = new ScrollTopComponent(item, options);
         }
         return scrollTop;
     };
-    ScrollTopComponent.bootstrap = function () {
+    static bootstrap = () => {
         ScrollTopComponent.createInstances('[data-kt-scrolltop="true"]');
     };
-    ScrollTopComponent.reinitialization = function () {
+    static reinitialization = () => {
         ScrollTopComponent.createInstances('[data-kt-scrolltop="true"]');
     };
-    ScrollTopComponent.goTop = function () {
-        index_1.ElementAnimateUtil.scrollTop(0, defaultScrollTopOptions.speed);
+    static goTop = () => {
+        ElementAnimateUtil.scrollTop(0, defaultScrollTopOptions.speed);
     };
-    return ScrollTopComponent;
-}());
-exports.ScrollTopComponent = ScrollTopComponent;
+}
+export { ScrollTopComponent, defaultScrollTopOptions };

package/dist/assets/ts/components/_ScrollTopComponent.ts

@@ -0,0 +1,148 @@
+import {
+  getScrollTop,
+  getAttributeValueByBreakpoint,
+  throttle,
+  getObjectPropertyValueByKey,
+  stringSnakeToCamel,
+  getUniqueIdWithPrefix,
+  DataUtil,
+  ElementAnimateUtil,
+} from '../_utils/index'
+
+export interface IScrollTopOptions {
+  offset: number
+  speed: number
+}
+
+const defaultScrollTopOptions: IScrollTopOptions = {
+  offset: 200,
+  speed: 600,
+}
+
+class ScrollTopComponent {
+  element: HTMLElement
+  options: IScrollTopOptions
+  instanceUid: string
+
+  constructor(_element: HTMLElement, options: IScrollTopOptions) {
+    this.element = _element
+    this.options = Object.assign(defaultScrollTopOptions, options)
+    this.instanceUid = getUniqueIdWithPrefix('scrolltop')
+
+    // Event Handlers
+    this._handlers()
+
+    // Bind Instance
+    DataUtil.set(this.element, 'scrolltop', this)
+  }
+
+  private _handlers = () => {
+    let timer: number =0
+    window.addEventListener('scroll', () => {
+      throttle(timer, () => {
+        this._scroll()
+      })
+    })
+
+    this.element.addEventListener('click', (e: Event) => {
+      e.preventDefault()
+      this._go()
+    })
+  }
+
+  private _scroll = () => {
+    const offset = parseInt(this._getOption('offset') as string)
+    const pos = getScrollTop() // current vertical position
+    if (pos > offset) {
+      if (!document.body.hasAttribute('data-kt-scrolltop')) {
+        document.body.setAttribute('data-kt-scrolltop', 'on')
+      }
+    } else {
+      if (document.body.hasAttribute('data-kt-scrolltop')) {
+        document.body.removeAttribute('data-kt-scrolltop')
+      }
+    }
+  }
+
+  private _go = () => {
+    const speed = parseInt(this._getOption('speed') as string)
+    ElementAnimateUtil.scrollTop(0, speed)
+  }
+
+  private _getOption = (name: string) => {
+    const attr = this.element.getAttribute(`data-kt-scrolltop-${name}`)
+    if (attr) {
+      const value = getAttributeValueByBreakpoint(attr)
+      return value !== null && String(value) === 'true'
+    }
+
+    const optionName = stringSnakeToCamel(name)
+    const option = getObjectPropertyValueByKey(this.options, optionName)
+    if (option) {
+      return getAttributeValueByBreakpoint(option)
+    }
+
+    return null
+  }
+
+  ///////////////////////
+  // ** Public API  ** //
+  ///////////////////////
+
+  // Plugin API
+  public go = () => {
+    return this._go()
+  }
+
+  public getElement = () => {
+    return this.element
+  }
+
+  // Static methods
+  public static getInstance = (el: HTMLElement): ScrollTopComponent | undefined => {
+    const scrollTop = DataUtil.get(el, 'scrolltop')
+    if (scrollTop) {
+      return scrollTop as ScrollTopComponent
+    }
+  }
+
+  public static createInstances = (selector: string) => {
+    const elements = document.body.querySelectorAll(selector)
+    elements.forEach((el) => {
+      const item = el as HTMLElement
+      let scrollTop = ScrollTopComponent.getInstance(item)
+      if (!scrollTop) {
+        scrollTop = new ScrollTopComponent(item, defaultScrollTopOptions)
+      }
+    })
+  }
+
+  public static createInsance = (
+    selector: string,
+    options: IScrollTopOptions = defaultScrollTopOptions
+  ): ScrollTopComponent | undefined => {
+    const element = document.body.querySelector(selector)
+    if (!element) {
+      return
+    }
+    const item = element as HTMLElement
+    let scrollTop = ScrollTopComponent.getInstance(item)
+    if (!scrollTop) {
+      scrollTop = new ScrollTopComponent(item, options)
+    }
+    return scrollTop
+  }
+
+  public static bootstrap = () => {
+    ScrollTopComponent.createInstances('[data-kt-scrolltop="true"]')
+  }
+
+  public static reinitialization = () => {
+    ScrollTopComponent.createInstances('[data-kt-scrolltop="true"]')
+  }
+
+  public static goTop = () => {
+    ElementAnimateUtil.scrollTop(0, defaultScrollTopOptions.speed)
+  }
+}
+export {ScrollTopComponent, defaultScrollTopOptions}