@soyfri/template 1.0.0 → 1.0.3

package/dist/assets/ts/components/_StickyComponent.ts

@@ -0,0 +1,297 @@
+import {
+  getElementOffset,
+  getScrollTop,
+  getAttributeValueByBreakpoint,
+  getUniqueIdWithPrefix,
+  getObjectPropertyValueByKey,
+  stringSnakeToCamel,
+  getCSS,
+  DataUtil,
+  ElementAnimateUtil,
+  ElementStyleUtil,
+  EventHandlerUtil,
+} from '../_utils/index'
+
+export interface StickyOptions {
+  offset: number
+  reverse: boolean
+  animation: boolean
+  animationSpeed: string
+  animationClass: string
+}
+
+const defaultStickyOptions: StickyOptions = {
+  offset: 200,
+  reverse: false,
+  animation: true,
+  animationSpeed: '0.3s',
+  animationClass: 'animation-slide-in-down',
+}
+
+class StickyComponent {
+  element: HTMLElement
+  options: StickyOptions
+  instanceUid: string
+  instanceName: string | null = ''
+  attributeName: string
+  attributeName2: string
+  eventTriggerState: boolean
+  lastScrollTop: number
+
+  constructor(_element: HTMLElement, options: StickyOptions) {
+    this.element = _element
+    this.options = Object.assign(defaultStickyOptions, options)
+    this.instanceUid = getUniqueIdWithPrefix('sticky')
+    this.instanceName = this.element.getAttribute('data-kt-sticky-name')
+    this.attributeName = 'data-kt-sticky-' + this.instanceName
+    this.attributeName2 = 'data-kt-' + this.instanceName
+    this.eventTriggerState = true
+    this.lastScrollTop = 0
+
+    // Event Handlers
+    window.addEventListener('scroll', this.scroll)
+
+    // Initial Launch
+    this.scroll()
+
+    DataUtil.set(this.element, 'sticky', this)
+  }
+
+  private scroll = () => {
+    const offset = this.getOption('offset')
+    const reverse = this.getOption('reverse')
+
+    // Exit if false
+    if (offset === false) {
+      return
+    }
+
+    let offsetNum = 0
+    if (typeof offset === 'string') {
+      offsetNum = parseInt(offset)
+    }
+
+    const st = getScrollTop()
+
+    // Reverse scroll mode
+    if (reverse === true) {
+      // Release on reverse scroll mode
+      if (st > offsetNum && this.lastScrollTop < st) {
+        if (document.body.hasAttribute(this.attributeName) === false) {
+          this.enable()
+          document.body.setAttribute(this.attributeName, 'on')
+          document.body.setAttribute(this.attributeName2, 'on')
+        }
+
+        if (this.eventTriggerState === true) {
+          EventHandlerUtil.trigger(this.element, 'kt.sticky.on')
+          EventHandlerUtil.trigger(this.element, 'kt.sticky.change')
+
+          this.eventTriggerState = false
+        }
+      } else {
+        // Back scroll mode
+        if (document.body.hasAttribute(this.attributeName)) {
+          this.disable()
+          document.body.removeAttribute(this.attributeName)
+          document.body.removeAttribute(this.attributeName2)
+        }
+
+        if (this.eventTriggerState === false) {
+          EventHandlerUtil.trigger(this.element, 'kt.sticky.off')
+          EventHandlerUtil.trigger(this.element, 'kt.sticky.change')
+
+          this.eventTriggerState = true
+        }
+      }
+
+      this.lastScrollTop = st
+      return
+    }
+
+    // Classic scroll mode
+    if (st > offsetNum) {
+      if (document.body.hasAttribute(this.attributeName) === false) {
+        this.enable()
+        document.body.setAttribute(this.attributeName, 'on')
+        document.body.setAttribute(this.attributeName2, 'on')
+      }
+
+      if (this.eventTriggerState === true) {
+        EventHandlerUtil.trigger(this.element, 'kt.sticky.on')
+        EventHandlerUtil.trigger(this.element, 'kt.sticky.change')
+        this.eventTriggerState = false
+      }
+    } else {
+      // back scroll mode
+      if (document.body.hasAttribute(this.attributeName) === true) {
+        this.disable()
+        document.body.removeAttribute(this.attributeName)
+        document.body.removeAttribute(this.attributeName2)
+      }
+
+      if (this.eventTriggerState === false) {
+        EventHandlerUtil.trigger(this.element, 'kt.sticky.off')
+        EventHandlerUtil.trigger(this.element, 'kt.sticky.change')
+        this.eventTriggerState = true
+      }
+    }
+  }
+
+  private getOption = (name: string) => {
+    const dataStickyAttr = 'data-kt-sticky-' + name
+    if (this.element.hasAttribute(dataStickyAttr) === true) {
+      const attrValueInStr = this.element.getAttribute(dataStickyAttr)
+      const attrValue = getAttributeValueByBreakpoint(attrValueInStr || '')
+      if (attrValue !== null && String(attrValue) === 'true') {
+        return true
+      } else if (attrValue !== null && String(attrValue) === 'false') {
+        return false
+      }
+
+      return attrValue
+    } else {
+      const optionName = stringSnakeToCamel(name)
+      const option = getObjectPropertyValueByKey(this.options, optionName)
+      if (option) {
+        return getAttributeValueByBreakpoint(option)
+      }
+    }
+  }
+
+  private disable = () => {
+    ElementStyleUtil.remove(this.element, 'top')
+    ElementStyleUtil.remove(this.element, 'width')
+    ElementStyleUtil.remove(this.element, 'left')
+    ElementStyleUtil.remove(this.element, 'right')
+    ElementStyleUtil.remove(this.element, 'z-index')
+    ElementStyleUtil.remove(this.element, 'position')
+  }
+
+  private enable = (update: boolean = false) => {
+    const top = this.getOption('top')
+    const left = this.getOption('left')
+    // const right = this.getOption("right");
+    let width = this.getOption('width')
+    const zindex = this.getOption('zindex')
+
+    if (update !== true && this.getOption('animation') === true) {
+      ElementStyleUtil.set(this.element, 'animationDuration', this.getOption('animationSpeed'))
+      ElementAnimateUtil.animateClass(this.element, 'animation ' + this.getOption('animationClass'))
+    }
+
+    if (zindex !== null) {
+      ElementStyleUtil.set(this.element, 'z-index', zindex)
+      ElementStyleUtil.set(this.element, 'position', 'fixed')
+    }
+
+    if (top !== null) {
+      ElementStyleUtil.set(this.element, 'top', top)
+    }
+
+    if (width !== null && width !== undefined) {
+      const widthTarget = getObjectPropertyValueByKey(width, 'target')
+      if (widthTarget) {
+        const targetElement = document.querySelector(widthTarget)
+        if (targetElement) {
+          width = getCSS(targetElement, 'width')
+        }
+      }
+      ElementStyleUtil.set(this.element, 'width', width)
+    }
+
+    if (left !== null) {
+      if (String(left).toLowerCase() === 'auto') {
+        const offsetLeft = getElementOffset(this.element).left
+
+        if (offsetLeft > 0) {
+          ElementStyleUtil.set(this.element, 'left', String(offsetLeft) + 'px')
+        }
+      }
+    }
+  }
+
+  public update = () => {
+    if (document.body.hasAttribute(this.attributeName) === true) {
+      this.disable()
+      document.body.removeAttribute(this.attributeName)
+      document.body.removeAttribute(this.attributeName2)
+      this.enable(true)
+      document.body.setAttribute(this.attributeName, 'on')
+      document.body.setAttribute(this.attributeName2, 'on')
+    }
+  }
+
+  // Event API
+  public on = (name: string, callBack: Function) => {
+    return EventHandlerUtil.on(this.element, name, callBack)
+  }
+
+  public one = (name: string, callback: Function) => {
+    return EventHandlerUtil.one(this.element, name, callback)
+  }
+
+  public off = (name: string, handlerId: string) => {
+    return EventHandlerUtil.off(this.element, name, handlerId)
+  }
+
+  public trigger = (name: string) => {
+    return EventHandlerUtil.trigger(this.element, name)
+  }
+
+  // Static methods
+  public static hasInstace(element: HTMLElement) {
+    return DataUtil.has(element, 'sticky')
+  }
+
+  public static getInstance(element: HTMLElement): StickyComponent | undefined {
+    if (element !== null && StickyComponent.hasInstace(element)) {
+      const data = DataUtil.get(element, 'sticky')
+      if (data) {
+        return data as StickyComponent
+      }
+    }
+  }
+
+  // Create Instances
+  public static createInstances(selector: string) {
+    DataUtil.getAllInstancesByKey("sticky").forEach((stickyInst) => {
+      window.removeEventListener("scroll", stickyInst.scroll);
+    });
+
+    const elements = document.body.querySelectorAll(selector)
+    elements.forEach((element) => {
+      const item = element as HTMLElement
+      let sticky = StickyComponent.getInstance(item)
+      if (!sticky) {
+        sticky = new StickyComponent(item, defaultStickyOptions)
+      }
+    })
+  }
+
+  public static createInsance = (
+    selector: string,
+    options: StickyOptions = defaultStickyOptions
+  ): StickyComponent | undefined => {
+    const element = document.body.querySelector(selector)
+    if (!element) {
+      return
+    }
+    const item = element as HTMLElement
+    let sticky = StickyComponent.getInstance(item)
+    if (!sticky) {
+      sticky = new StickyComponent(item, options)
+    }
+    return sticky
+  }
+
+  public static bootstrap(attr: string = '[data-kt-sticky="true"]') {
+    StickyComponent.createInstances(attr)
+  }
+
+  public static reInitialization(attr: string = '[data-kt-sticky="true"]') {
+    StickyComponent.createInstances(attr)
+  }
+}
+
+export {StickyComponent, defaultStickyOptions}

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

@@ -1,84 +1,44 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultSwapperQueires = exports.defaultSwapperOptions = exports.SwapperComponent = exports.SwapperStore = void 0;
-var index_1 = require("../_utils/index");
-var SwapperStore = /** @class */ (function () {
-    function SwapperStore() {
-    }
-    SwapperStore.set = function (instanceId, drawerComponentObj) {
+import { getAttributeValueByBreakpoint, stringSnakeToCamel, getObjectPropertyValueByKey, EventHandlerUtil, throttle, } from '../_utils/index';
+export class SwapperStore {
+    static store = new Map();
+    static set(instanceId, drawerComponentObj) {
         if (SwapperStore.has(instanceId)) {
             return;
         }
         SwapperStore.store.set(instanceId, drawerComponentObj);
-    };
-    SwapperStore.get = function (instanceId) {
+    }
+    static get(instanceId) {
         if (!SwapperStore.has(instanceId)) {
             return;
         }
         return SwapperStore.store.get(instanceId);
-    };
-    SwapperStore.remove = function (instanceId) {
+    }
+    static remove(instanceId) {
         if (!SwapperStore.has(instanceId)) {
             return;
         }
         SwapperStore.store.delete(instanceId);
-    };
-    SwapperStore.has = function (instanceId) {
+    }
+    static has(instanceId) {
         return SwapperStore.store.has(instanceId);
-    };
-    SwapperStore.getAllInstances = function () {
+    }
+    static getAllInstances() {
         return SwapperStore.store;
-    };
-    SwapperStore.store = new Map();
-    return SwapperStore;
-}());
-exports.SwapperStore = SwapperStore;
-var defaultSwapperOptions = {
+    }
+}
+const defaultSwapperOptions = {
     mode: 'append',
 };
-exports.defaultSwapperOptions = defaultSwapperOptions;
-var defaultSwapperQueires = {
+const defaultSwapperQueires = {
     componentName: 'swapper',
     instanseQuery: '[data-kt-swapper="true"]',
     attrQuery: 'data-kt-swapper-',
 };
-exports.defaultSwapperQueires = defaultSwapperQueires;
-var SwapperComponent = /** @class */ (function () {
-    function SwapperComponent(_element, _options, _queries) {
-        var _this = this;
-        ///////////////////////
-        // ** Public API  ** //
-        ///////////////////////
-        this.update = function () {
-            var _a;
-            var parentSelector = (_a = _this.getOption('parent')) === null || _a === void 0 ? void 0 : _a.toString();
-            var mode = _this.getOption('mode');
-            var parentElement = parentSelector ? document.querySelector(parentSelector) : null;
-            if (parentElement && _this.element.parentNode !== parentElement) {
-                var alreadyPended = document.getElementById('kt_header_menu') !== null;
-                if (!alreadyPended) {
-                    if (mode === 'prepend') {
-                        parentElement.prepend(_this.element);
-                    }
-                    else if (mode === 'append') {
-                        parentElement.append(_this.element);
-                    }
-                }
-            }
-        };
-        // Event API
-        this.on = function (name, handler) {
-            return index_1.EventHandlerUtil.on(_this.element, name, handler);
-        };
-        this.one = function (name, handler) {
-            return index_1.EventHandlerUtil.one(_this.element, name, handler);
-        };
-        this.off = function (name, handlerId) {
-            return index_1.EventHandlerUtil.off(_this.element, name, handlerId);
-        };
-        this.trigger = function (name, event) {
-            return index_1.EventHandlerUtil.trigger(_this.element, name, event);
-        };
+class SwapperComponent {
+    element;
+    options;
+    queries;
+    constructor(_element, _options, _queries) {
         this.element = _element;
         this.options = Object.assign(defaultSwapperOptions, _options);
         this.queries = _queries;
@@ -86,10 +46,10 @@ var SwapperComponent = /** @class */ (function () {
         this.update();
         SwapperStore.set(this.element.id, this);
     }
-    SwapperComponent.prototype.getOption = function (name) {
-        var attr = this.element.getAttribute("".concat(this.queries.attrQuery).concat(name));
+    getOption(name) {
+        const attr = this.element.getAttribute(`${this.queries.attrQuery}${name}`);
         if (attr) {
-            var value = (0, index_1.getAttributeValueByBreakpoint)(attr);
+            const value = getAttributeValueByBreakpoint(attr);
             if (attr != null && String(value) === 'true') {
                 return true;
             }
@@ -99,75 +59,97 @@ var SwapperComponent = /** @class */ (function () {
             return value;
         }
         else {
-            var optionName = (0, index_1.stringSnakeToCamel)(name);
-            var option = (0, index_1.getObjectPropertyValueByKey)(this.options, optionName);
+            const optionName = stringSnakeToCamel(name);
+            const option = getObjectPropertyValueByKey(this.options, optionName);
             if (option) {
-                return (0, index_1.getAttributeValueByBreakpoint)(option);
+                return getAttributeValueByBreakpoint(option);
             }
             else {
                 return null;
             }
         }
+    }
+    ///////////////////////
+    // ** Public API  ** //
+    ///////////////////////
+    update = () => {
+        const parentSelector = this.getOption('parent')?.toString();
+        const mode = this.getOption('mode');
+        const parentElement = parentSelector ? document.querySelector(parentSelector) : null;
+        if (parentElement && this.element.parentNode !== parentElement) {
+            const alreadyPended = document.getElementById('kt_header_menu') !== null;
+            if (!alreadyPended) {
+                if (mode === 'prepend') {
+                    parentElement.prepend(this.element);
+                }
+                else if (mode === 'append') {
+                    parentElement.append(this.element);
+                }
+            }
+        }
+    };
+    // Event API
+    on = (name, handler) => {
+        return EventHandlerUtil.on(this.element, name, handler);
+    };
+    one = (name, handler) => {
+        return EventHandlerUtil.one(this.element, name, handler);
+    };
+    off = (name, handlerId) => {
+        return EventHandlerUtil.off(this.element, name, handlerId);
+    };
+    trigger = (name, event) => {
+        return EventHandlerUtil.trigger(this.element, name, event);
     };
     // Static methods
-    SwapperComponent.getInstance = function (el, componentName) {
-        if (componentName === void 0) { componentName = defaultSwapperQueires.componentName; }
-        var place = SwapperStore.get(el.id);
+    static getInstance = (el, componentName = defaultSwapperQueires.componentName) => {
+        const place = SwapperStore.get(el.id);
         if (place) {
             return place;
         }
         return null;
     };
-    SwapperComponent.createInstances = function (selector, options, queries) {
-        if (selector === void 0) { selector = defaultSwapperQueires.instanseQuery; }
-        if (options === void 0) { options = defaultSwapperOptions; }
-        if (queries === void 0) { queries = defaultSwapperQueires; }
-        var elements = document.body.querySelectorAll(selector);
-        elements.forEach(function (el) {
-            var item = el;
-            var place = SwapperComponent.getInstance(item);
+    static createInstances = (selector = defaultSwapperQueires.instanseQuery, options = defaultSwapperOptions, queries = defaultSwapperQueires) => {
+        const elements = document.body.querySelectorAll(selector);
+        elements.forEach((el) => {
+            const item = el;
+            let place = SwapperComponent.getInstance(item);
             if (!place) {
                 place = new SwapperComponent(item, options, queries);
             }
         });
     };
-    SwapperComponent.createInsance = function (selector, options, queries) {
-        if (selector === void 0) { selector = defaultSwapperQueires.instanseQuery; }
-        if (options === void 0) { options = defaultSwapperOptions; }
-        if (queries === void 0) { queries = defaultSwapperQueires; }
-        var element = document.body.querySelector(selector);
+    static createInsance = (selector = defaultSwapperQueires.instanseQuery, options = defaultSwapperOptions, queries = defaultSwapperQueires) => {
+        const element = document.body.querySelector(selector);
         if (!element) {
             return;
         }
-        var item = element;
-        var place = SwapperComponent.getInstance(item);
+        const item = element;
+        let place = SwapperComponent.getInstance(item);
         if (!place) {
             place = new SwapperComponent(item, options, queries);
         }
         return place;
     };
-    SwapperComponent.bootstrap = function (selector) {
-        if (selector === void 0) { selector = defaultSwapperQueires.instanseQuery; }
+    static bootstrap = (selector = defaultSwapperQueires.instanseQuery) => {
         SwapperComponent.createInstances(selector);
     };
-    SwapperComponent.reinitialization = function (selector) {
-        if (selector === void 0) { selector = defaultSwapperQueires.instanseQuery; }
+    static reinitialization = (selector = defaultSwapperQueires.instanseQuery) => {
         SwapperComponent.createInstances(selector);
     };
-    return SwapperComponent;
-}());
-exports.SwapperComponent = SwapperComponent;
+}
 // Window resize handler
 window.addEventListener('resize', function () {
-    var timer;
-    (0, index_1.throttle)(timer, function () {
+    let timer;
+    throttle(timer, () => {
         // Locate and update Offcanvas instances on window resize
-        var elements = document.querySelectorAll(defaultSwapperQueires.instanseQuery);
-        elements.forEach(function (el) {
-            var place = SwapperComponent.getInstance(el);
+        const elements = document.querySelectorAll(defaultSwapperQueires.instanseQuery);
+        elements.forEach((el) => {
+            const place = SwapperComponent.getInstance(el);
             if (place) {
                 place.update();
             }
         });
     }, 200);
 });
+export { SwapperComponent, defaultSwapperOptions, defaultSwapperQueires };