@codeperate/cdp-ui-library/dist/collection/components/cdp/cdp-menu/cdp-menu.js

Codeperate UI Library

import { Component, Element, h, Host, Listen, Prop, State, Watch, Build } from '@stencil/core';
import { deepAssign } from '../../../utils/deep-assign';
export class CdpMenu {
  constructor() {
    this._config = {};
    this.defaultConfig = {
      sensitivity: 0.5,
      background: true,
      classList: {
        host: 'h-full block relative <md:w-0',
        container: '<md:transition-transform <md:translate-x-[-100%] transform sticky h-screen w-full top-0 overflow-y-auto',
        background: '<md:fixed md:hidden w-screen h-screen bg-black bg-opacity-50',
      },
    };
    this.props = {
      display: false,
    };
    this.translateX = 0;
    this.moveHandler = (e) => {
      if (e instanceof TouchEvent)
        this.finalXPos = e.touches[0].clientX;
      this.offsetX = (this.finalXPos - this.initXPos) * this._config.sensitivity;
      if (this.offsetX <= 0)
        this.offsetX = 0;
      if (this.offsetX >= 100)
        this.offsetX = 100;
      this.translateX = this.offsetX;
      this.setTranslateX();
    };
  }
  touchDownHandler(e) {
    if (this.containerEl.contains(e.target))
      return;
    if (Build.isBrowser) {
      const transform = getComputedStyle(this.containerEl).transform;
      const matrix = new WebKitCSSMatrix(transform);
      if (matrix.m41 >= 0)
        return;
    }
    this.initXPos = e.touches[0].clientX;
    addEventListener('touchmove', this.moveHandler, { passive: false });
  }
  touchUpHandler() {
    removeEventListener('touchmove', this.moveHandler);
    if (this.translateX <= 50) {
      this.close();
    }
    if (this.translateX > 50) {
      this.open();
    }
  }
  open() {
    this._props.display = true;
  }
  close() {
    this._props.display = false;
  }
  setTranslateX() {
    if (this.containerEl)
      this.containerEl.style.transform = `translateX(${this.translateX - 100}%)`;
  }
  removeTranslateX() {
    if (this.containerEl) {
      this.containerEl.style.transform = null;
      this.translateX = 0;
    }
  }
  componentWillLoad() {
    this._config = deepAssign(this.config, this.defaultConfig);
    this.createProxy();
  }
  createProxy() {
    var _a;
    const set = (target, prop, value, receiver) => {
      this.props = Object.assign(Object.assign({}, target), { [prop]: value });
      return Reflect.set(target, prop, value, receiver);
    };
    this._props = new Proxy(this.props, (_a = this._config.proxyHandler) !== null && _a !== void 0 ? _a : { set });
  }
  configChangeHandler(n) {
    if (n.display) {
      this.translateX = 100;
      this.setTranslateX();
    }
    if (!n.display)
      this.removeTranslateX();
  }
  render() {
    const { classList, width, background } = this._config;
    const { display } = this.props;
    return (h(Host, { class: `${classList.host}` },
      display && background ? h("div", { class: `${classList.background}`, onClick: () => this.close() }) : '',
      h("div", { ref: el => (this.containerEl = el), class: `${classList.container}`, style: width ? { width: width } : {} },
        h("slot", null))));
  }
  static get is() { return "cdp-menu"; }
  static get properties() { return {
    "config": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "CdpMenuConfig",
        "resolved": "CdpMenuConfig",
        "references": {
          "CdpMenuConfig": {
            "location": "import",
            "path": "./cdp-menu.interface"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "props": {
      "type": "unknown",
      "mutable": true,
      "complexType": {
        "original": "CdpMenuProps",
        "resolved": "CdpMenuProps",
        "references": {
          "CdpMenuProps": {
            "location": "import",
            "path": "./cdp-menu.interface"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "defaultValue": "{\r\n    display: false,\r\n  }"
    }
  }; }
  static get states() { return {
    "_config": {}
  }; }
  static get elementRef() { return "rootEl"; }
  static get watchers() { return [{
      "propName": "props",
      "methodName": "configChangeHandler"
    }]; }
  static get listeners() { return [{
      "name": "touchstart",
      "method": "touchDownHandler",
      "target": "window",
      "capture": false,
      "passive": false
    }, {
      "name": "touchend",
      "method": "touchUpHandler",
      "target": "window",
      "capture": false,
      "passive": true
    }]; }
}