ember-mobile-menu/dist/components/mobile-menu/tray.js

A draggable sidebar menu for Ember.

import Component from '@glimmer/component';
import { htmlSafe } from '@ember/template';
import { action } from '@ember/object';
import { enableBodyScroll, disableBodyScroll } from '../../utils/body-scroll-lock.js';
import './tray.css';
import willDestroy from '@ember/render-modifiers/modifiers/will-destroy';
import didUpdate from '@ember/render-modifiers/modifiers/did-update';
import didPan from 'ember-gesture-modifiers/modifiers/did-pan';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
import { n } from 'decorator-transforms/runtime';

class TrayComponent extends Component {
  /**
  * Width of the menu in px.
  *
  * @property width
  * @type Number
  * @default 300
  * @private
  */
  get width() {
    return this.args.width ?? 300;
  }
  /**
  * Whether the menu is a left menu (otherwise it's a right menu)
  *
  * @property isLeft
  * @type Boolean
  * @default true
  * @private
  */
  get isLeft() {
    return this.args.isLeft ?? true;
  }
  /**
  * Current relative position of the menu in px.
  *
  * @property position
  * @type Number
  * @default 0
  * @private
  */
  get position() {
    return this.args.position ?? 0;
  }
  get progress() {
    return Math.abs(this.position) / this.width;
  }
  get style() {
    let style = `width: ${this.width}px;`;
    let offset = this.width;
    let translation = this.position;
    if (this.args.mode === 'ios') {
      offset /= 3;
      translation /= 3;
    } else if (['reveal', 'squeeze-reveal'].includes(this.args.mode)) {
      offset = 0;
      translation = 0;
    }
    style += this.isLeft ? `left: -${offset}px; transform: translateX(${translation}px);` : `right: -${offset}px; transform: translateX(${translation}px);`;
    if (this.args.shadowEnabled && ['default', 'push', 'squeeze'].includes(this.args.mode) && this.progress > 0) {
      style += `box-shadow: 0 0 10px rgba(0,0,0,${0.3 * this.progress});`;
    }
    return htmlSafe(style);
  }
  toggleBodyScroll(target, [isClosed]) {
    if (this.args.preventScroll && !this.args.embed) {
      if (isClosed) {
        enableBodyScroll(target);
      } else {
        disableBodyScroll(target);
      }
    }
  }
  static {
    n(this.prototype, "toggleBodyScroll", [action]);
  }
  static {
    setComponentTemplate(precompileTemplate("\n    <div class=\"mobile-menu__tray\" style={{this.style}} {{didPan onPanStart=@onPanStart onPan=@onPan onPanEnd=@onPanEnd capture=@capture preventScroll=@preventScroll}} {{didUpdate this.toggleBodyScroll @isClosed}} {{willDestroy this.toggleBodyScroll true}} ...attributes>\n      {{yield}}\n    </div>\n  ", {
      strictMode: true,
      scope: () => ({
        didPan,
        didUpdate,
        willDestroy
      })
    }), this);
  }
}

export { TrayComponent as default };
//# sourceMappingURL=tray.js.map