@soyfri/template 1.0.0 → 1.0.3

package/dist/assets/ts/components/_DrawerComponent.ts

@@ -0,0 +1,388 @@
+import {
+  EventHandlerUtil,
+  getUniqueIdWithPrefix,
+  getObjectPropertyValueByKey,
+  stringSnakeToCamel,
+  getAttributeValueByBreakpoint,
+  throttle,
+  getCSS,
+  DOMEventHandlerUtil,
+  ElementStyleUtil,
+} from '../_utils/index'
+
+export class DrawerStore {
+  static store: Map<string, DrawerComponent> = new Map()
+
+  public static set(instanceId: string, drawerComponentObj: DrawerComponent): void {
+    if (DrawerStore.has(instanceId)) {
+      return
+    }
+
+    DrawerStore.store.set(instanceId, drawerComponentObj)
+  }
+
+  public static get(instanceId: string): DrawerComponent | undefined {
+    if (!DrawerStore.has(instanceId)) {
+      return
+    }
+    return DrawerStore.store.get(instanceId)
+  }
+
+  public static remove(instanceId: string): void {
+    if (!DrawerStore.has(instanceId)) {
+      return
+    }
+
+    DrawerStore.store.delete(instanceId)
+  }
+
+  public static has(instanceId: string): boolean {
+    return DrawerStore.store.has(instanceId)
+  }
+
+  public static getAllInstances() {
+    return DrawerStore.store
+  }
+}
+
+export interface DrawerOptions {
+  overlay: boolean
+  baseClass: string
+  overlayClass: string
+  direction: string
+}
+
+const defaultDrawerOptions: DrawerOptions = {
+  overlay: true,
+  baseClass: 'drawer',
+  overlayClass: 'drawer-overlay',
+  direction: 'end',
+}
+
+class DrawerComponent {
+  element: HTMLElement
+  overlayElement: HTMLElement | null = null
+  toggleElement: HTMLElement | null = null
+  options: DrawerOptions
+  instanceUid: string
+  name: string = ''
+  shown: boolean = false
+  lastWidth: number = 0
+  closeElement: HTMLElement | null = null
+
+  constructor(_element: HTMLElement, options: DrawerOptions) {
+    this.element = _element
+    this.options = Object.assign(defaultDrawerOptions, options)
+    this.instanceUid = getUniqueIdWithPrefix('drawer')
+    this.overlayElement = null
+    this.name = this.element.getAttribute('data-kt-drawer-name') || ''
+    this.shown = false
+    this.toggleElement = null
+    // Event Handlers
+    this._handlers()
+    // Update Instance
+    this._update()
+    // Bind Instance
+    DrawerStore.set(this.element.id, this)
+  }
+
+  private _handlers = () => {
+    const togglers = this._getOption('toggle') as string
+    const closers = this._getOption('close') as string
+
+    if (togglers !== null && togglers.length > 0) {
+      DOMEventHandlerUtil.on(document.body, togglers, 'click', (e: Event) => {
+        e.preventDefault()
+        this.toggleElement = document.getElementById(togglers)
+        this._toggle()
+      })
+    }
+
+    if (closers !== null && closers.length > 0) {
+      DOMEventHandlerUtil.on(document.body, closers, 'click', (e: Event) => {
+        e.preventDefault()
+        this.closeElement = document.getElementById(closers)
+
+        this._hide()
+      })
+    }
+  }
+
+  private _update = () => {
+    const width = String(this._getOption('width'))
+    const direction = String(this._getOption('direction'))
+
+    // Reset state
+    const hasBaseClass = this.element.classList.contains(`${this.options.baseClass}-on`)
+    const bodyCanvasAttr = String(document.body.getAttribute(`data-kt-drawer-${this.name}-`))
+
+    if (hasBaseClass === true && bodyCanvasAttr === 'on') {
+      this.shown = true
+    } else {
+      this.shown = false
+    }
+
+    // Activate/deactivate
+    if (this._getOption('activate') === true) {
+      this.element.classList.add(this.options.baseClass)
+      this.element.classList.add(`${this.options.baseClass}-${direction}`)
+      ElementStyleUtil.set(this.element, 'width', width, true)
+
+      this.lastWidth = parseInt(width)
+    } else {
+      ElementStyleUtil.set(this.element, 'width', '')
+      this.element.classList.remove(this.options.baseClass)
+      this.element.classList.remove(`${this.options.baseClass}-${direction}`)
+      this._hide()
+    }
+  }
+
+  private _getOption = (name: string) => {
+    const attr = this.element.getAttribute(`data-kt-drawer-${name}`)
+    if (attr) {
+      const value = getAttributeValueByBreakpoint(attr)
+      if (value !== 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
+      }
+    }
+  }
+
+  private _toggle = () => {
+    if (EventHandlerUtil.trigger(this.element, 'kt.drawer.toggle') === false) {
+      return
+    }
+
+    if (this.shown) {
+      this._hide()
+    } else {
+      this._show()
+    }
+
+    EventHandlerUtil.trigger(this.element, 'kt.drawer.toggled')
+  }
+
+  private _hide = () => {
+    if (EventHandlerUtil.trigger(this.element, 'kt.drawer.hide') === false) {
+      return
+    }
+
+    this.shown = false
+    this._deleteOverlay()
+    document.body.removeAttribute(`data-kt-drawer-${this.name}`)
+    document.body.removeAttribute(`data-kt-drawer`)
+    this.element.classList.remove(`${this.options.baseClass}-on`)
+    if (this.toggleElement != null) {
+      this.toggleElement.classList.remove('active')
+    }
+
+    EventHandlerUtil.trigger(this.element, 'kt.drawer.after.hidden')
+  }
+
+  private _show = () => {
+    if (EventHandlerUtil.trigger(this.element, 'kt.drawer.show') === false) {
+      return
+    }
+
+    this.shown = true
+    this._createOverlay()
+    document.body.setAttribute(`data-kt-drawer-${this.name}`, 'on')
+    document.body.setAttribute('data-kt-drawer', 'on')
+    this.element.classList.add(`${this.options.baseClass}-on`)
+    if (this.toggleElement !== null) {
+      this.toggleElement.classList.add('active')
+    }
+
+    EventHandlerUtil.trigger(this.element, 'kt.drawer.shown')
+  }
+
+  private _createOverlay = () => {
+    if (this._getOption('overlay') === true) {
+      this.overlayElement = document.createElement('DIV')
+      const elementZIndex = getCSS(this.element, 'z-index')
+      if (elementZIndex) {
+        const overlayZindex = parseInt(elementZIndex) - 1
+        ElementStyleUtil.set(this.overlayElement, 'z-index', overlayZindex) // update
+      }
+      document.body.append(this.overlayElement)
+      const overlayClassOption = this._getOption('overlay-class')
+      if (overlayClassOption) {
+        this.overlayElement.classList.add(overlayClassOption.toString())
+      }
+
+      if(!this._getOption('permanent')){
+        this.overlayElement.addEventListener('click', (e) => {
+          e.preventDefault()
+          this._hide()
+        })
+      }
+    }
+  }
+
+  private _deleteOverlay = () => {
+    if (this.overlayElement !== null && this.overlayElement.parentNode) {
+      this.overlayElement.parentNode.removeChild(this.overlayElement)
+    }
+  }
+
+  private _getDirection = () => {
+    return String(this._getOption('direction')) === 'left' ? 'left' : 'right'
+  }
+
+  private _getWidth = () => {
+    let width = this._getOption('width')
+    if (width && width === 'auto') {
+      width = getCSS(this.element, 'width')
+    }
+
+    return width
+  }
+
+  ///////////////////////
+  // ** Public API  ** //
+  ///////////////////////
+  public toggle = () => {
+    this._toggle()
+  }
+
+  public show = () => {
+    this._show()
+  }
+
+  public hide = () => {
+    this._hide()
+  }
+
+  public isShown = () => {
+    return this.shown
+  }
+
+  public update = () => {
+    this._update()
+  }
+
+  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, handerId: string) => {
+    return EventHandlerUtil.off(this.element, name, handerId)
+  }
+
+  public trigger = (name: string, event: Event) => {
+    return EventHandlerUtil.trigger(this.element, name, event)
+  }
+
+  // Static methods
+  public static hasInstace = (elementId: string): boolean => {
+    return DrawerStore.has(elementId)
+  }
+
+  public static getInstance = (elementId: string) => {
+    return DrawerStore.get(elementId)
+  }
+
+  public static hideAll = () => {
+    const oldInstances = DrawerStore.getAllInstances()
+    oldInstances.forEach((dr) => {
+      dr.hide()
+    })
+  }
+
+  public static updateAll = () => {
+    const oldInstances = DrawerStore.getAllInstances()
+    oldInstances.forEach((dr) => {
+      dr.update()
+    })
+  }
+
+  // Create Instances
+  public static createInstances(selector: string): void {
+    const elements = document.body.querySelectorAll(selector)
+    elements.forEach((element) => {
+      const item = element as HTMLElement
+      let drawer = DrawerComponent.getInstance(item.id)
+      if (!drawer) {
+        drawer = new DrawerComponent(item, defaultDrawerOptions)
+      }
+      drawer.element = item
+      drawer.hide()
+    })
+  }
+
+  // Dismiss instances
+  public static handleDismiss = () => {
+    // External drawer toggle handler
+    DOMEventHandlerUtil.on(document.body, '[data-kt-drawer-dismiss="true"]', 'click', () => {
+      /* @ts-ignore */
+      const element = this.closest('[data-kt-drawer="true"]')
+      if (element) {
+        const drawer = DrawerComponent.getInstance(element)
+        if (drawer && drawer.isShown()) {
+          drawer.hide()
+        }
+      }
+    })
+  }
+
+  // Global Initialization
+  public static initGlobalHandlers(): void {
+    // Window Resize Handling
+    window.addEventListener('resize', function () {
+      let timer: number | undefined
+      throttle(
+        timer,
+        () => {
+          // Locate and update Drawer instances on window resize
+          const elements = document.body.querySelectorAll('[data-kt-drawer="true"]')
+          elements.forEach((el) => {
+            const item = el as HTMLElement
+            const instance = DrawerComponent.getInstance(item.id)
+            if (instance) {
+              instance.element = item
+              instance.update()
+            }
+          })
+        },
+        200
+      )
+    })
+  }
+
+  public static bootstrap = () => {
+    DrawerComponent.createInstances('[data-kt-drawer="true"]')
+    DrawerComponent.initGlobalHandlers()
+    DrawerComponent.handleDismiss()
+  }
+
+  public static reinitialization = () => {
+    DrawerComponent.createInstances('[data-kt-drawer="true"]')
+    DrawerComponent.hideAll()
+    DrawerComponent.updateAll()
+    DrawerComponent.handleDismiss()
+  }
+}
+
+export {DrawerComponent, defaultDrawerOptions}

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

@@ -1,113 +1,109 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultFeedbackOptions = exports.FeedbackComponent = void 0;
-var index_1 = require("../_utils/index");
-var defaultFeedbackOptions = {
+import { DataUtil, ElementStyleUtil, EventHandlerUtil, getUniqueIdWithPrefix, getAttributeValueByBreakpoint, } from '../_utils/index';
+const defaultFeedbackOptions = {
     width: 100,
     placement: 'top-center',
     content: '',
     type: 'popup',
 };
-exports.defaultFeedbackOptions = defaultFeedbackOptions;
-var FeedbackComponent = /** @class */ (function () {
-    function FeedbackComponent(_element, options) {
-        var _this = this;
-        this._handlers = function () {
-            _this.element.addEventListener('click', function (e) {
-                e.preventDefault();
-                _this._go();
-            });
-        };
-        this._go = function () { };
-        this.showPopup = function () {
-            _this.element = document.createElement('DIV');
-            _this.element.classList.add('feedback feedback-popup');
-            _this.element.innerHTML = _this.options.content || '';
-            if (_this.options.placement === 'top-center') {
-                _this.setPopupTopCenterPosition();
-            }
-            document.body.appendChild(_this.element);
-            _this.element.classList.add('feedback-shown');
-            _this.shown = true;
-        };
-        this.setPopupTopCenterPosition = function () {
-            var _a;
-            var width = (0, index_1.getAttributeValueByBreakpoint)(((_a = _this.options.width) === null || _a === void 0 ? void 0 : _a.toString()) || '0');
-            var height = index_1.ElementStyleUtil.get(_this.element, 'height');
-            _this.element.classList.add('feedback-top-center');
-            index_1.ElementStyleUtil.set(_this.element, 'width', width);
-            index_1.ElementStyleUtil.set(_this.element, 'left', '50%');
-            index_1.ElementStyleUtil.set(_this.element, 'top', '-' + height);
-        };
-        this.hidePopup = function () {
-            _this.element.remove();
-        };
-        ///////////////////////
-        // ** Public API  ** //
-        ///////////////////////
-        this.show = function () {
-            if (index_1.EventHandlerUtil.trigger(_this.element, 'kt.feedback.show') === false) {
-                return;
-            }
-            if (_this.options.type === 'popup') {
-                _this.showPopup();
-            }
-            index_1.EventHandlerUtil.trigger(_this.element, 'kt.feedback.shown');
-            return _this;
-        };
-        this.hide = function () {
-            if (index_1.EventHandlerUtil.trigger(_this.element, 'kt.feedback.hide') === false) {
-                return;
-            }
-            if (_this.options.type === 'popup') {
-                _this.hidePopup();
-            }
-            _this.shown = false;
-            index_1.EventHandlerUtil.trigger(_this.element, 'kt.feedback.hidden');
-            return _this;
-        };
-        this.isShown = function () {
-            return _this.isShown;
-        };
-        this.getElement = 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, handerId) {
-            return index_1.EventHandlerUtil.off(_this.element, name, handerId);
-        };
-        this.trigger = function (name, event) {
-            return index_1.EventHandlerUtil.trigger(_this.element, name, event);
-        };
+class FeedbackComponent {
+    element;
+    options;
+    instanceUid;
+    shown;
+    constructor(_element, options) {
         this.element = _element;
         this.options = Object.assign(defaultFeedbackOptions, options);
-        this.instanceUid = (0, index_1.getUniqueIdWithPrefix)('feedback');
+        this.instanceUid = getUniqueIdWithPrefix('feedback');
         this.shown = false;
         // Event handlers
         this._handlers(); // will add in the show popup
-        index_1.DataUtil.set(this.element, 'feedback', this);
+        DataUtil.set(this.element, 'feedback', this);
     }
+    _handlers = () => {
+        this.element.addEventListener('click', (e) => {
+            e.preventDefault();
+            this._go();
+        });
+    };
+    _go = () => { };
+    showPopup = () => {
+        this.element = document.createElement('DIV');
+        this.element.classList.add('feedback feedback-popup');
+        this.element.innerHTML = this.options.content || '';
+        if (this.options.placement === 'top-center') {
+            this.setPopupTopCenterPosition();
+        }
+        document.body.appendChild(this.element);
+        this.element.classList.add('feedback-shown');
+        this.shown = true;
+    };
+    setPopupTopCenterPosition = () => {
+        const width = getAttributeValueByBreakpoint(this.options.width?.toString() || '0');
+        const height = ElementStyleUtil.get(this.element, 'height');
+        this.element.classList.add('feedback-top-center');
+        ElementStyleUtil.set(this.element, 'width', width);
+        ElementStyleUtil.set(this.element, 'left', '50%');
+        ElementStyleUtil.set(this.element, 'top', '-' + height);
+    };
+    hidePopup = () => {
+        this.element.remove();
+    };
+    ///////////////////////
+    // ** Public API  ** //
+    ///////////////////////
+    show = () => {
+        if (EventHandlerUtil.trigger(this.element, 'kt.feedback.show') === false) {
+            return;
+        }
+        if (this.options.type === 'popup') {
+            this.showPopup();
+        }
+        EventHandlerUtil.trigger(this.element, 'kt.feedback.shown');
+        return this;
+    };
+    hide = () => {
+        if (EventHandlerUtil.trigger(this.element, 'kt.feedback.hide') === false) {
+            return;
+        }
+        if (this.options.type === 'popup') {
+            this.hidePopup();
+        }
+        this.shown = false;
+        EventHandlerUtil.trigger(this.element, 'kt.feedback.hidden');
+        return this;
+    };
+    isShown = () => {
+        return this.isShown;
+    };
+    getElement = () => {
+        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, handerId) => {
+        return EventHandlerUtil.off(this.element, name, handerId);
+    };
+    trigger = (name, event) => {
+        return EventHandlerUtil.trigger(this.element, name, event);
+    };
     // Create Instances
-    FeedbackComponent.createInstances = function (selector) {
+    static createInstances(selector) {
         throw new Error('not implemented');
-    };
+    }
     // Static methods
-    FeedbackComponent.hasInstace = function (element) {
+    static hasInstace(element) {
         throw new Error('not implemented');
-    };
-    FeedbackComponent.getInstance = function (element) {
+    }
+    static getInstance(element) {
         throw new Error('not implemented');
-    };
-    FeedbackComponent.bootstrap = function (attr) {
-        if (attr === void 0) { attr = '[data-Feedback]'; }
+    }
+    static bootstrap(attr = '[data-Feedback]') {
         throw new Error('not implemented');
-    };
-    return FeedbackComponent;
-}());
-exports.FeedbackComponent = FeedbackComponent;
+    }
+}
+export { FeedbackComponent, defaultFeedbackOptions };