@materializecss/materialize 2.0.3-beta → 2.0.3

package/src/sidenav.ts

@@ -1,543 +0,0 @@
-import anim from "animejs";
-
-import { Utils } from "./utils";
-import { Component, BaseOptions, InitElements, MElement, Openable } from "./component";
-
-export interface SidenavOptions extends BaseOptions {
-  /**
-   * Side of screen on which Sidenav appears.
-   * @default 'left'
-   */
-  edge: 'left' | 'right';
-  /**
-   * Allow swipe gestures to open/close Sidenav.
-   * @default true
-   */
-  draggable: boolean;
-  /**
-   * Width of the area where you can start dragging.
-   * @default '10px'
-   */
-  dragTargetWidth: string;
-  /**
-   * Length in ms of enter transition.
-   * @default 250
-   */
-  inDuration: number;
-  /**
-   * Length in ms of exit transition.
-   * @default 200
-   */
-  outDuration: number;
-  /**
-   * Prevent page from scrolling while sidenav is open.
-   * @default true
-   */
-  preventScrolling: boolean;
-  /**
-   * Function called when sidenav starts entering.
-   */
-  onOpenStart: (elem: HTMLElement) => void;
-  /**
-   * Function called when sidenav finishes entering.
-   */
-  onOpenEnd: (elem: HTMLElement) => void;
-  /**
-   * Function called when sidenav starts exiting.
-   */
-  onCloseStart: (elem: HTMLElement) => void;
-  /**
-   * Function called when sidenav finishes exiting.
-   */
-  onCloseEnd: (elem: HTMLElement) => void;
-}
-
-const _defaults: SidenavOptions = {
-  edge: 'left',
-  draggable: true,
-  dragTargetWidth: '10px',
-  inDuration: 250,
-  outDuration: 200,
-  onOpenStart: null,
-  onOpenEnd: null,
-  onCloseStart: null,
-  onCloseEnd: null,
-  preventScrolling: true
-};
-
-export class Sidenav extends Component<SidenavOptions> implements Openable {
-  id: string;
-  /** Describes open/close state of Sidenav. */
-  isOpen: boolean;
-  /** Describes if sidenav is fixed. */
-  isFixed: boolean;
-  /** Describes if Sidenav is being dragged. */
-  isDragged: boolean;
-  lastWindowWidth: number;
-  lastWindowHeight: number;
-  static _sidenavs: Sidenav[];
-  private _overlay: HTMLElement;
-  dragTarget: Element;
-  private _startingXpos: number;
-  private _xPos: number;
-  private _time: number;
-  private _width: number;
-  private _initialScrollTop: number;
-  private _verticallyScrolling: boolean;
-  private deltaX: number;
-  private velocityX: number;
-  private percentOpen: number;
-
-  constructor(el: HTMLElement, options: Partial<SidenavOptions>) {
-    super(el, options, Sidenav);
-    (this.el as any).M_Sidenav = this;
-
-    this.options = {
-      ...Sidenav.defaults,
-      ...options
-    };
-
-    this.id = this.el.id;
-    this.isOpen = false;
-    this.isFixed = this.el.classList.contains('sidenav-fixed');
-    this.isDragged = false;
-    // Window size variables for window resize checks
-    this.lastWindowWidth = window.innerWidth;
-    this.lastWindowHeight = window.innerHeight;
-    this._createOverlay();
-    this._createDragTarget();
-    this._setupEventHandlers();
-    this._setupClasses();
-    this._setupFixed();
-    Sidenav._sidenavs.push(this);
-  }
-
-  static get defaults(): SidenavOptions {
-    return _defaults;
-  }
-
-  /**
-   * Initializes instance of Sidenav.
-   * @param el HTML element.
-   * @param options Component options.
-   */
-  static init(el: HTMLElement, options?: Partial<SidenavOptions>): Sidenav;
-  /**
-   * Initializes instances of Sidenav.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els: InitElements<MElement>, options?: Partial<SidenavOptions>): Sidenav[];
-  /**
-   * Initializes instances of Sidenav.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els: HTMLElement | InitElements<MElement>, options: Partial<SidenavOptions> = {}): Sidenav | Sidenav[] {
-    return super.init(els, options, Sidenav);
-  }
-
-  static getInstance(el: HTMLElement): Sidenav {
-    return (el as any).M_Sidenav;
-  }
-
-  destroy() {
-    this._removeEventHandlers();
-    this._enableBodyScrolling();
-    this._overlay.parentNode.removeChild(this._overlay);
-    this.dragTarget.parentNode.removeChild(this.dragTarget);
-    (this.el as any).M_Sidenav = undefined;
-    (this.el as HTMLElement).style.transform = '';
-    const index = Sidenav._sidenavs.indexOf(this);
-    if (index >= 0) {
-      Sidenav._sidenavs.splice(index, 1);
-    }
-  }
-
-  _createOverlay() {
-    this._overlay = document.createElement('div');
-    this._overlay.classList.add('sidenav-overlay');
-    this._overlay.addEventListener('click', this.close);
-    document.body.appendChild(this._overlay);
-  }
-
-  _setupEventHandlers() {
-    if (Sidenav._sidenavs.length === 0) {
-      document.body.addEventListener('click', this._handleTriggerClick);
-    }
-    var passiveIfSupported: boolean = null;
-    this.dragTarget.addEventListener('touchmove', this._handleDragTargetDrag, passiveIfSupported);
-    this.dragTarget.addEventListener('touchend', this._handleDragTargetRelease);
-    this._overlay.addEventListener('touchmove', this._handleCloseDrag, passiveIfSupported);
-    this._overlay.addEventListener('touchend', this._handleCloseRelease);
-    this.el.addEventListener('touchmove', this._handleCloseDrag, passiveIfSupported);
-    this.el.addEventListener('touchend', this._handleCloseRelease);
-    this.el.addEventListener('click', this._handleCloseTriggerClick);
-    // Add resize for side nav fixed
-    if (this.isFixed) {
-      window.addEventListener('resize', this._handleWindowResize);
-    }
-  }
-
-  _removeEventHandlers() {
-    if (Sidenav._sidenavs.length === 1) {
-      document.body.removeEventListener('click', this._handleTriggerClick);
-    }
-    this.dragTarget.removeEventListener('touchmove', this._handleDragTargetDrag);
-    this.dragTarget.removeEventListener('touchend', this._handleDragTargetRelease);
-    this._overlay.removeEventListener('touchmove', this._handleCloseDrag);
-    this._overlay.removeEventListener('touchend', this._handleCloseRelease);
-    this.el.removeEventListener('touchmove', this._handleCloseDrag);
-    this.el.removeEventListener('touchend', this._handleCloseRelease);
-    this.el.removeEventListener('click', this._handleCloseTriggerClick);
-
-    // Remove resize for side nav fixed
-    if (this.isFixed) {
-      window.removeEventListener('resize', this._handleWindowResize);
-    }
-  }
-
-  _handleTriggerClick(e) {
-    const trigger = e.target.closest('.sidenav-trigger');
-    if (e.target && trigger) {
-      const sidenavId = Utils.getIdFromTrigger(trigger);
-      const sidenavInstance = (document.getElementById(sidenavId) as any).M_Sidenav;
-      if (sidenavInstance) {
-        sidenavInstance.open(trigger);
-      }
-      e.preventDefault();
-    }
-  }
-
-  // Set variables needed at the beginning of drag and stop any current transition.
-  _startDrag(e) {
-    const clientX = e.targetTouches[0].clientX;
-    this.isDragged = true;
-    this._startingXpos = clientX;
-    this._xPos = this._startingXpos;
-    this._time = Date.now();
-    this._width = this.el.getBoundingClientRect().width;
-    this._overlay.style.display = 'block';
-    this._initialScrollTop = this.isOpen ? this.el.scrollTop : Utils.getDocumentScrollTop();
-    this._verticallyScrolling = false;
-    anim.remove(this.el);
-    anim.remove(this._overlay);
-  }
-
-  //Set variables needed at each drag move update tick
-  _dragMoveUpdate(e) {
-    const clientX = e.targetTouches[0].clientX;
-    const currentScrollTop = this.isOpen ? this.el.scrollTop : Utils.getDocumentScrollTop();
-    this.deltaX = Math.abs(this._xPos - clientX);
-    this._xPos = clientX;
-    this.velocityX = this.deltaX / (Date.now() - this._time);
-    this._time = Date.now();
-    if (this._initialScrollTop !== currentScrollTop) {
-      this._verticallyScrolling = true;
-    }
-  }
-
-  _handleDragTargetDrag = (e) => {
-    // Check if draggable
-    if (!this.options.draggable || this._isCurrentlyFixed() || this._verticallyScrolling) {
-      return;
-    }
-    // If not being dragged, set initial drag start variables
-    if (!this.isDragged) {
-      this._startDrag(e);
-    }
-    // Run touchmove updates
-    this._dragMoveUpdate(e);
-    // Calculate raw deltaX
-    let totalDeltaX = this._xPos - this._startingXpos;
-    // dragDirection is the attempted user drag direction
-    const dragDirection = totalDeltaX > 0 ? 'right' : 'left';
-    // Don't allow totalDeltaX to exceed Sidenav width or be dragged in the opposite direction
-    totalDeltaX = Math.min(this._width, Math.abs(totalDeltaX));
-    if (this.options.edge === dragDirection) {
-      totalDeltaX = 0;
-    }
-    /**
-     * transformX is the drag displacement
-     * transformPrefix is the initial transform placement
-     * Invert values if Sidenav is right edge
-     */
-    let transformX = totalDeltaX;
-    let transformPrefix = 'translateX(-100%)';
-    if (this.options.edge === 'right') {
-      transformPrefix = 'translateX(100%)';
-      transformX = -transformX;
-    }
-    // Calculate open/close percentage of sidenav, with open = 1 and close = 0
-    this.percentOpen = Math.min(1, totalDeltaX / this._width);
-    // Set transform and opacity styles
-    (this.el as HTMLElement).style.transform = `${transformPrefix} translateX(${transformX}px)`;
-    this._overlay.style.opacity = this.percentOpen.toString();
-  }
-
-  _handleDragTargetRelease = () => {
-    if (this.isDragged) {
-      if (this.percentOpen > 0.2) {
-        this.open();
-      } else {
-        this._animateOut();
-      }
-      this.isDragged = false;
-      this._verticallyScrolling = false;
-    }
-  }
-
-  _handleCloseDrag = (e) => {
-    if (this.isOpen) {
-      // Check if draggable
-      if (!this.options.draggable || this._isCurrentlyFixed() || this._verticallyScrolling) {
-        return;
-      }
-      // If not being dragged, set initial drag start variables
-      if (!this.isDragged) {
-        this._startDrag(e);
-      }
-      // Run touchmove updates
-      this._dragMoveUpdate(e);
-      // Calculate raw deltaX
-      let totalDeltaX = this._xPos - this._startingXpos;
-      // dragDirection is the attempted user drag direction
-      let dragDirection = totalDeltaX > 0 ? 'right' : 'left';
-      // Don't allow totalDeltaX to exceed Sidenav width or be dragged in the opposite direction
-      totalDeltaX = Math.min(this._width, Math.abs(totalDeltaX));
-      if (this.options.edge !== dragDirection) {
-        totalDeltaX = 0;
-      }
-      let transformX = -totalDeltaX;
-      if (this.options.edge === 'right') {
-        transformX = -transformX;
-      }
-      // Calculate open/close percentage of sidenav, with open = 1 and close = 0
-      this.percentOpen = Math.min(1, 1 - totalDeltaX / this._width);
-      // Set transform and opacity styles
-      (this.el as HTMLElement).style.transform = `translateX(${transformX}px)`;
-      this._overlay.style.opacity = this.percentOpen.toString();
-    }
-  }
-
-  _handleCloseRelease = () => {
-    if (this.isOpen && this.isDragged) {
-      if (this.percentOpen > 0.8) {
-        this._animateIn();
-      } else {
-        this.close();
-      }
-      this.isDragged = false;
-      this._verticallyScrolling = false;
-    }
-  }
-
-  // Handles closing of Sidenav when element with class .sidenav-close
-  _handleCloseTriggerClick = (e) => {
-    const closeTrigger = e.target.closest('.sidenav-close');
-    if (closeTrigger && !this._isCurrentlyFixed()) {
-      this.close();
-    }
-  }
-
-  _handleWindowResize = () => {
-    // Only handle horizontal resizes
-    if (this.lastWindowWidth !== window.innerWidth) {
-      if (window.innerWidth > 992) {
-        this.open();
-      } else {
-        this.close();
-      }
-    }
-    this.lastWindowWidth = window.innerWidth;
-    this.lastWindowHeight = window.innerHeight;
-  }
-
-  _setupClasses() {
-    if (this.options.edge === 'right') {
-      this.el.classList.add('right-aligned');
-      this.dragTarget.classList.add('right-aligned');
-    }
-  }
-
-  _removeClasses() {
-    this.el.classList.remove('right-aligned');
-    this.dragTarget.classList.remove('right-aligned');
-  }
-
-  _setupFixed() {
-    if (this._isCurrentlyFixed()) this.open();
-  }
-
-  _isCurrentlyFixed() {
-    return this.isFixed && window.innerWidth > 992;
-  }
-
-  _createDragTarget() {
-    const dragTarget = document.createElement('div');
-    dragTarget.classList.add('drag-target');
-    dragTarget.style.width = this.options.dragTargetWidth;
-    document.body.appendChild(dragTarget);
-    this.dragTarget = dragTarget;
-  }
-
-  _preventBodyScrolling() {
-    document.body.style.overflow = 'hidden';
-  }
-
-  _enableBodyScrolling() {
-    document.body.style.overflow = '';
-  }
-
-  /**
-   * Opens Sidenav.
-   */
-  open = () => {
-    if (this.isOpen === true) return;
-    this.isOpen = true;
-    // Run onOpenStart callback
-    if (typeof this.options.onOpenStart === 'function') {
-      this.options.onOpenStart.call(this, this.el);
-    }
-    // Handle fixed Sidenav
-    if (this._isCurrentlyFixed()) {
-      anim.remove(this.el);
-      anim({
-        targets: this.el,
-        translateX: 0,
-        duration: 0,
-        easing: 'easeOutQuad'
-      });
-      this._enableBodyScrolling();
-      this._overlay.style.display = 'none';
-    }
-    // Handle non-fixed Sidenav
-    else {
-      if (this.options.preventScrolling) {
-        this._preventBodyScrolling();
-      }
-
-      if (!this.isDragged || this.percentOpen != 1) {
-        this._animateIn();
-      }
-    }
-  }
-
-  /**
-   * Closes Sidenav.
-   */
-  close = () => {
-    if (this.isOpen === false) return;
-    this.isOpen = false;
-    // Run onCloseStart callback
-    if (typeof this.options.onCloseStart === 'function') {
-      this.options.onCloseStart.call(this, this.el);
-    }
-    // Handle fixed Sidenav
-    if (this._isCurrentlyFixed()) {
-      const transformX = this.options.edge === 'left' ? '-105%' : '105%';
-      (this.el as HTMLElement).style.transform = `translateX(${transformX})`;
-    }
-    // Handle non-fixed Sidenav
-    else {
-      this._enableBodyScrolling();
-      if (!this.isDragged || this.percentOpen != 0) {
-        this._animateOut();
-      } else {
-        this._overlay.style.display = 'none';
-      }
-    }
-  }
-
-  _animateIn() {
-    this._animateSidenavIn();
-    this._animateOverlayIn();
-  }
-
-  _animateSidenavIn() {
-    let slideOutPercent = this.options.edge === 'left' ? -1 : 1;
-    if (this.isDragged) {
-      slideOutPercent =
-        this.options.edge === 'left'
-          ? slideOutPercent + this.percentOpen
-          : slideOutPercent - this.percentOpen;
-    }
-    anim.remove(this.el);
-    anim({
-      targets: this.el,
-      translateX: [`${slideOutPercent * 100}%`, 0],
-      duration: this.options.inDuration,
-      easing: 'easeOutQuad',
-      complete: () => {
-        // Run onOpenEnd callback
-        if (typeof this.options.onOpenEnd === 'function') {
-          this.options.onOpenEnd.call(this, this.el);
-        }
-      }
-    });
-  }
-
-  _animateOverlayIn() {
-    let start = 0;
-    if (this.isDragged) {
-      start = this.percentOpen;
-    }
-    else {
-      this._overlay.style.display = 'block';
-    }
-    anim.remove(this._overlay);
-    anim({
-      targets: this._overlay,
-      opacity: [start, 1],
-      duration: this.options.inDuration,
-      easing: 'easeOutQuad'
-    });
-  }
-
-  _animateOut() {
-    this._animateSidenavOut();
-    this._animateOverlayOut();
-  }
-
-  _animateSidenavOut() {
-    const endPercent = this.options.edge === 'left' ? -1 : 1;
-    let slideOutPercent = 0;
-    if (this.isDragged) {
-      slideOutPercent =
-        this.options.edge === 'left'
-          ? endPercent + this.percentOpen
-          : endPercent - this.percentOpen;
-    }
-
-    anim.remove(this.el);
-    anim({
-      targets: this.el,
-      translateX: [`${slideOutPercent * 100}%`, `${endPercent * 105}%`],
-      duration: this.options.outDuration,
-      easing: 'easeOutQuad',
-      complete: () => {
-        // Run onOpenEnd callback
-        if (typeof this.options.onCloseEnd === 'function') {
-          this.options.onCloseEnd.call(this, this.el);
-        }
-      }
-    });
-  }
-
-  _animateOverlayOut() {
-    anim.remove(this._overlay);
-    anim({
-      targets: this._overlay,
-      opacity: 0,
-      duration: this.options.outDuration,
-      easing: 'easeOutQuad',
-      complete: () => {
-        this._overlay.style.display = 'none';
-      }
-    });
-  }
-
-  static  {
-    Sidenav._sidenavs = [];
-  }
-}