@soyfri/template 1.0.1 → 1.0.4

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

@@ -0,0 +1,210 @@
+import {
+  getAttributeValueByBreakpoint,
+  stringSnakeToCamel,
+  getObjectPropertyValueByKey,
+  EventHandlerUtil,
+  throttle,
+} from '../_utils/index'
+
+export class SwapperStore {
+  static store: Map<string, SwapperComponent> = new Map()
+
+  public static set(instanceId: string, drawerComponentObj: SwapperComponent): void {
+    if (SwapperStore.has(instanceId)) {
+      return
+    }
+
+    SwapperStore.store.set(instanceId, drawerComponentObj)
+  }
+
+  public static get(instanceId: string): SwapperComponent | undefined {
+    if (!SwapperStore.has(instanceId)) {
+      return
+    }
+    return SwapperStore.store.get(instanceId)
+  }
+
+  public static remove(instanceId: string): void {
+    if (!SwapperStore.has(instanceId)) {
+      return
+    }
+
+    SwapperStore.store.delete(instanceId)
+  }
+
+  public static has(instanceId: string): boolean {
+    return SwapperStore.store.has(instanceId)
+  }
+
+  public static getAllInstances() {
+    return SwapperStore.store
+  }
+}
+
+export interface ISwapperOptions {
+  mode: string
+}
+
+export interface ISwapperQueries {
+  componentName: string
+  instanseQuery: string
+  attrQuery: string
+}
+
+const defaultSwapperOptions: ISwapperOptions = {
+  mode: 'append',
+}
+
+const defaultSwapperQueires: ISwapperQueries = {
+  componentName: 'swapper',
+  instanseQuery: '[data-kt-swapper="true"]',
+  attrQuery: 'data-kt-swapper-',
+}
+
+class SwapperComponent {
+  element: HTMLElement
+  options: ISwapperOptions
+  queries: ISwapperQueries
+
+  constructor(_element: HTMLElement, _options: ISwapperOptions, _queries: ISwapperQueries) {
+    this.element = _element
+    this.options = Object.assign(defaultSwapperOptions, _options)
+    this.queries = _queries
+
+    // Initial update
+    this.update()
+
+    SwapperStore.set(this.element.id, this)
+  }
+
+  private getOption(name: string) {
+    const attr = this.element.getAttribute(`${this.queries.attrQuery}${name}`)
+    if (attr) {
+      const value = getAttributeValueByBreakpoint(attr)
+      if (attr != null && String(value) === 'true') {
+        return true
+      } else if (value !== null && String(value) === 'false') {
+        return false
+      }
+      return value
+    } else {
+      const optionName = stringSnakeToCamel(name)
+      const option = getObjectPropertyValueByKey(this.options, optionName)
+      if (option) {
+        return getAttributeValueByBreakpoint(option)
+      } else {
+        return null
+      }
+    }
+  }
+
+  ///////////////////////
+  // ** Public API  ** //
+  ///////////////////////
+  public 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
+  public on = (name: string, handler: Function) => {
+    return EventHandlerUtil.on(this.element, name, handler)
+  }
+
+  public one = (name: string, handler: Function) => {
+    return EventHandlerUtil.one(this.element, name, handler)
+  }
+
+  public off = (name: string, handlerId: string) => {
+    return EventHandlerUtil.off(this.element, name, handlerId)
+  }
+
+  public trigger = (name: string, event: Event) => {
+    return EventHandlerUtil.trigger(this.element, name, event)
+  }
+
+  // Static methods
+  public static getInstance = (
+    el: HTMLElement,
+    componentName: string = defaultSwapperQueires.componentName
+  ): SwapperComponent | null => {
+    const place = SwapperStore.get(el.id)
+    if (place) {
+      return place as SwapperComponent
+    }
+
+    return null
+  }
+
+  public static createInstances = (
+    selector: string = defaultSwapperQueires.instanseQuery,
+    options: ISwapperOptions = defaultSwapperOptions,
+    queries: ISwapperQueries = defaultSwapperQueires
+  ) => {
+    const elements = document.body.querySelectorAll(selector)
+    elements.forEach((el) => {
+      const item = el as HTMLElement
+      let place = SwapperComponent.getInstance(item)
+      if (!place) {
+        place = new SwapperComponent(item, options, queries)
+      }
+    })
+  }
+
+  public static createInsance = (
+    selector: string = defaultSwapperQueires.instanseQuery,
+    options: ISwapperOptions = defaultSwapperOptions,
+    queries: ISwapperQueries = defaultSwapperQueires
+  ): SwapperComponent | undefined => {
+    const element = document.body.querySelector(selector)
+    if (!element) {
+      return
+    }
+    const item = element as HTMLElement
+    let place = SwapperComponent.getInstance(item)
+    if (!place) {
+      place = new SwapperComponent(item, options, queries)
+    }
+    return place
+  }
+
+  public static bootstrap = (selector: string = defaultSwapperQueires.instanseQuery) => {
+    SwapperComponent.createInstances(selector)
+  }
+
+  public static reinitialization = (selector: string = defaultSwapperQueires.instanseQuery) => {
+    SwapperComponent.createInstances(selector)
+  }
+}
+
+// Window resize handler
+window.addEventListener('resize', function () {
+  let timer
+  throttle(
+    timer,
+    () => {
+      // Locate and update Offcanvas instances on window resize
+      const elements = document.querySelectorAll(defaultSwapperQueires.instanseQuery)
+      elements.forEach((el) => {
+        const place = SwapperComponent.getInstance(el as HTMLElement)
+        if (place) {
+          place.update()
+        }
+      })
+    },
+    200
+  )
+})
+
+export {SwapperComponent, defaultSwapperOptions, defaultSwapperQueires}

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

@@ -1,161 +1,156 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultToggleOptions = exports.ToggleComponent = void 0;
-var index_1 = require("../_utils/index");
+import { DataUtil, getUniqueIdWithPrefix, EventHandlerUtil } from '../_utils/index';
 // Helpers
-var _CookieComponent_1 = require("./_CookieComponent");
-var defaultToggleOptions = {
+import { CookieComponent } from './_CookieComponent';
+const defaultToggleOptions = {
     saveState: false,
 };
-exports.defaultToggleOptions = defaultToggleOptions;
-var ToggleComponent = /** @class */ (function () {
-    function ToggleComponent(_element, options) {
-        var _this = this;
-        this.state = '';
-        this.mode = '';
-        this.target = null;
-        this.attribute = '';
-        this._handlers = function () {
-            _this.element.addEventListener('click', function (e) {
-                e.preventDefault();
-                if (_this.mode === '') {
-                    _this._toggle();
-                    return;
-                }
-                if (_this.mode === 'off' && !_this._isEnabled()) {
-                    _this._toggle();
-                }
-                else if (_this.mode === 'on' && _this._isEnabled()) {
-                    _this._toggle();
-                }
-            });
-        };
-        // Event handlers
-        this._toggle = function () {
-            // Trigger "after.toggle" event
-            index_1.EventHandlerUtil.trigger(_this.element, 'kt.toggle.change');
-            if (_this._isEnabled()) {
-                _this._disable();
-            }
-            else {
-                _this._enable();
-            }
-            // Trigger "before.toggle" event
-            index_1.EventHandlerUtil.trigger(_this.element, 'kt.toggle.changed');
-            return _this;
-        };
-        this._enable = function () {
-            var _a;
-            if (_this._isEnabled()) {
-                return;
-            }
-            index_1.EventHandlerUtil.trigger(_this.element, 'kt.toggle.enable');
-            (_a = _this.target) === null || _a === void 0 ? void 0 : _a.setAttribute(_this.attribute, 'on');
-            if (_this.state.length > 0) {
-                _this.element.classList.add(_this.state);
-            }
-            if (_this.options.saveState) {
-                _CookieComponent_1.CookieComponent.set(_this.attribute, 'on', {});
-            }
-            index_1.EventHandlerUtil.trigger(_this.element, 'kt.toggle.enabled');
-            return _this;
-        };
-        this._disable = function () {
-            var _a;
-            if (!_this._isEnabled()) {
-                return false;
-            }
-            index_1.EventHandlerUtil.trigger(_this.element, 'kt.toggle.disable');
-            (_a = _this.target) === null || _a === void 0 ? void 0 : _a.removeAttribute(_this.attribute);
-            if (_this.state.length > 0) {
-                _this.element.classList.remove(_this.state);
-            }
-            if (_this.options.saveState) {
-                _CookieComponent_1.CookieComponent.delete(_this.attribute);
-            }
-            index_1.EventHandlerUtil.trigger(_this.element, 'kt.toggle.disabled');
-            return _this;
-        };
-        this._isEnabled = function () {
-            if (!_this.target) {
-                return false;
-            }
-            return String(_this.target.getAttribute(_this.attribute)).toLowerCase() === 'on';
-        };
-        ///////////////////////
-        // ** Public API  ** //
-        ///////////////////////
-        // Plugin API
-        // Plugin API
-        this.toggle = function () {
-            return _this._toggle();
-        };
-        this.enable = function () {
-            return _this._enable();
-        };
-        this.disable = function () {
-            return _this._disable();
-        };
-        this.isEnabled = function () {
-            return _this._isEnabled();
-        };
-        this.goElement = function () {
-            return _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 ToggleComponent {
+    element;
+    instanceUid;
+    options;
+    state = '';
+    mode = '';
+    target = null;
+    attribute = '';
+    constructor(_element, options) {
         this.options = Object.assign(defaultToggleOptions, options);
-        this.instanceUid = (0, index_1.getUniqueIdWithPrefix)('toggle');
+        this.instanceUid = getUniqueIdWithPrefix('toggle');
         this.element = _element;
-        var elementTargetAttr = this.element.getAttribute('data-kt-toggle-target');
+        const elementTargetAttr = this.element.getAttribute('data-kt-toggle-target');
         if (elementTargetAttr) {
             this.target = document.querySelector(elementTargetAttr);
         }
-        var elementToggleAttr = this.element.getAttribute('data-kt-toggle-state');
+        const elementToggleAttr = this.element.getAttribute('data-kt-toggle-state');
         this.state = elementToggleAttr || '';
-        var elementModeAttr = this.element.getAttribute('data-kt-toggle-mode');
+        const elementModeAttr = this.element.getAttribute('data-kt-toggle-mode');
         this.mode = elementModeAttr || '';
         this.attribute = 'data-kt-' + this.element.getAttribute('data-kt-toggle-name');
         // Event Handlers
         this._handlers();
         // Update Instance
         // Bind Instance
-        index_1.DataUtil.set(this.element, 'toggle', this);
+        DataUtil.set(this.element, 'toggle', this);
     }
+    _handlers = () => {
+        this.element.addEventListener('click', (e) => {
+            e.preventDefault();
+            if (this.mode === '') {
+                this._toggle();
+                return;
+            }
+            if (this.mode === 'off' && !this._isEnabled()) {
+                this._toggle();
+            }
+            else if (this.mode === 'on' && this._isEnabled()) {
+                this._toggle();
+            }
+        });
+    };
+    // Event handlers
+    _toggle = () => {
+        // Trigger "after.toggle" event
+        EventHandlerUtil.trigger(this.element, 'kt.toggle.change');
+        if (this._isEnabled()) {
+            this._disable();
+        }
+        else {
+            this._enable();
+        }
+        // Trigger "before.toggle" event
+        EventHandlerUtil.trigger(this.element, 'kt.toggle.changed');
+        return this;
+    };
+    _enable = () => {
+        if (this._isEnabled()) {
+            return;
+        }
+        EventHandlerUtil.trigger(this.element, 'kt.toggle.enable');
+        this.target?.setAttribute(this.attribute, 'on');
+        if (this.state.length > 0) {
+            this.element.classList.add(this.state);
+        }
+        if (this.options.saveState) {
+            CookieComponent.set(this.attribute, 'on', {});
+        }
+        EventHandlerUtil.trigger(this.element, 'kt.toggle.enabled');
+        return this;
+    };
+    _disable = () => {
+        if (!this._isEnabled()) {
+            return false;
+        }
+        EventHandlerUtil.trigger(this.element, 'kt.toggle.disable');
+        this.target?.removeAttribute(this.attribute);
+        if (this.state.length > 0) {
+            this.element.classList.remove(this.state);
+        }
+        if (this.options.saveState) {
+            CookieComponent.delete(this.attribute);
+        }
+        EventHandlerUtil.trigger(this.element, 'kt.toggle.disabled');
+        return this;
+    };
+    _isEnabled = () => {
+        if (!this.target) {
+            return false;
+        }
+        return String(this.target.getAttribute(this.attribute)).toLowerCase() === 'on';
+    };
+    ///////////////////////
+    // ** Public API  ** //
+    ///////////////////////
+    // Plugin API
+    // Plugin API
+    toggle = () => {
+        return this._toggle();
+    };
+    enable = () => {
+        return this._enable();
+    };
+    disable = () => {
+        return this._disable();
+    };
+    isEnabled = () => {
+        return this._isEnabled();
+    };
+    goElement = () => {
+        return 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
-    ToggleComponent.getInstance = function (el) {
-        var toggleElement = index_1.DataUtil.get(el, 'toggle');
+    static getInstance = (el) => {
+        const toggleElement = DataUtil.get(el, 'toggle');
         if (toggleElement) {
             return toggleElement;
         }
         return null;
     };
-    ToggleComponent.createInstances = function (selector) {
-        var elements = document.body.querySelectorAll(selector);
-        elements.forEach(function (el) {
-            var toggle = ToggleComponent.getInstance(el);
+    static createInstances = (selector) => {
+        const elements = document.body.querySelectorAll(selector);
+        elements.forEach((el) => {
+            let toggle = ToggleComponent.getInstance(el);
             if (!toggle) {
                 toggle = new ToggleComponent(el, defaultToggleOptions);
             }
         });
     };
-    ToggleComponent.reinitialization = function () {
+    static reinitialization = () => {
         ToggleComponent.createInstances('[data-kt-toggle]');
     };
-    ToggleComponent.bootstrap = function () {
+    static bootstrap = () => {
         ToggleComponent.createInstances('[data-kt-toggle]');
     };
-    return ToggleComponent;
-}());
-exports.ToggleComponent = ToggleComponent;
+}
+export { ToggleComponent, defaultToggleOptions };

package/dist/assets/ts/components/_ToggleComponent.ts

@@ -0,0 +1,200 @@
+import {DataUtil, getUniqueIdWithPrefix, EventHandlerUtil} from '../_utils/index'
+// Helpers
+import {CookieComponent} from './_CookieComponent'
+
+export interface ToggleOptions {
+  saveState: boolean
+  targetState?: string
+  toggleState?: string
+  targetToggleMode?: string
+}
+
+const defaultToggleOptions: ToggleOptions = {
+  saveState: false,
+}
+
+class ToggleComponent {
+  element: HTMLElement
+  instanceUid: string
+  options: ToggleOptions
+  state: string = ''
+  mode: string = ''
+  target: HTMLElement | null = null
+  attribute: string = ''
+
+  constructor(_element: HTMLElement, options: ToggleOptions) {
+    this.options = Object.assign(defaultToggleOptions, options)
+    this.instanceUid = getUniqueIdWithPrefix('toggle')
+    this.element = _element
+
+    const elementTargetAttr = this.element.getAttribute('data-kt-toggle-target')
+    if (elementTargetAttr) {
+      this.target = document.querySelector(elementTargetAttr)
+    }
+    const elementToggleAttr = this.element.getAttribute('data-kt-toggle-state')
+    this.state = elementToggleAttr || ''
+    const elementModeAttr = this.element.getAttribute('data-kt-toggle-mode')
+    this.mode = elementModeAttr || ''
+    this.attribute = 'data-kt-' + this.element.getAttribute('data-kt-toggle-name')
+
+    // Event Handlers
+    this._handlers()
+
+    // Update Instance
+    // Bind Instance
+    DataUtil.set(this.element, 'toggle', this)
+  }
+
+  private _handlers = () => {
+    this.element.addEventListener('click', (e: Event) => {
+      e.preventDefault()
+
+      if (this.mode === '') {
+        this._toggle()
+        return
+      }
+
+      if (this.mode === 'off' && !this._isEnabled()) {
+        this._toggle()
+      } else if (this.mode === 'on' && this._isEnabled()) {
+        this._toggle()
+      }
+    })
+  }
+
+  // Event handlers
+  private _toggle = () => {
+    // Trigger "after.toggle" event
+    EventHandlerUtil.trigger(this.element, 'kt.toggle.change')
+
+    if (this._isEnabled()) {
+      this._disable()
+    } else {
+      this._enable()
+    }
+
+    // Trigger "before.toggle" event
+    EventHandlerUtil.trigger(this.element, 'kt.toggle.changed')
+    return this
+  }
+
+  private _enable = () => {
+    if (this._isEnabled()) {
+      return
+    }
+
+    EventHandlerUtil.trigger(this.element, 'kt.toggle.enable')
+    this.target?.setAttribute(this.attribute, 'on')
+    if (this.state.length > 0) {
+      this.element.classList.add(this.state)
+    }
+
+    if (this.options.saveState) {
+      CookieComponent.set(this.attribute, 'on', {})
+    }
+
+    EventHandlerUtil.trigger(this.element, 'kt.toggle.enabled')
+    return this
+  }
+
+  private _disable = () => {
+    if (!this._isEnabled()) {
+      return false
+    }
+
+    EventHandlerUtil.trigger(this.element, 'kt.toggle.disable')
+    this.target?.removeAttribute(this.attribute)
+
+    if (this.state.length > 0) {
+      this.element.classList.remove(this.state)
+    }
+
+    if (this.options.saveState) {
+      CookieComponent.delete(this.attribute)
+    }
+
+    EventHandlerUtil.trigger(this.element, 'kt.toggle.disabled')
+    return this
+  }
+
+  private _isEnabled = () => {
+    if (!this.target) {
+      return false
+    }
+
+    return String(this.target.getAttribute(this.attribute)).toLowerCase() === 'on'
+  }
+
+  ///////////////////////
+  // ** Public API  ** //
+  ///////////////////////
+
+  // Plugin API
+  // Plugin API
+  public toggle = () => {
+    return this._toggle()
+  }
+
+  public enable = () => {
+    return this._enable()
+  }
+
+  public disable = () => {
+    return this._disable()
+  }
+
+  public isEnabled = () => {
+    return this._isEnabled()
+  }
+
+  public goElement = () => {
+    return this.element
+  }
+
+  // Event API
+  public on = (name: string, handler: Function) => {
+    return EventHandlerUtil.on(this.element, name, handler)
+  }
+
+  public one = (name: string, handler: Function) => {
+    return EventHandlerUtil.one(this.element, name, handler)
+  }
+
+  public off = (name: string, handlerId: string) => {
+    return EventHandlerUtil.off(this.element, name, handlerId)
+  }
+
+  public trigger = (name: string, event?: Event) => {
+    return EventHandlerUtil.trigger(this.element, name, event)
+  }
+
+  // Static methods
+  public static getInstance = (el: HTMLElement) => {
+    const toggleElement = DataUtil.get(el, 'toggle')
+    if (toggleElement) {
+      return toggleElement
+    }
+
+    return null
+  }
+
+  public static createInstances = (selector: string) => {
+    const elements = document.body.querySelectorAll<HTMLElement>(selector)
+    elements.forEach((el) => {
+      let toggle = ToggleComponent.getInstance(el)
+      if (!toggle) {
+        toggle = new ToggleComponent(el, defaultToggleOptions)
+      }
+    })
+  }
+
+  public static reinitialization = () => {
+    ToggleComponent.createInstances('[data-kt-toggle]')
+  }
+
+  public static bootstrap = () => {
+    ToggleComponent.createInstances('[data-kt-toggle]')
+  }
+}
+
+export {ToggleComponent, defaultToggleOptions}