@materializecss/materialize 1.2.2 → 2.0.0-alpha

package/{js/sidenav.js → src/sidenav.ts}

@@ -1,78 +1,63 @@
-(function($, anim) {
-  'use strict';
-
-  let _defaults = {
-    edge: 'left',
-    draggable: true,
-    dragTargetWidth: '10px',
-    inDuration: 250,
-    outDuration: 200,
-    onOpenStart: null,
-    onOpenEnd: null,
-    onCloseStart: null,
-    onCloseEnd: null,
-    preventScrolling: true
-  };
-
-  /**
-   * @class
-   */
-  class Sidenav extends Component {
-    /**
-     * Construct Sidenav instance and set up overlay
-     * @constructor
-     * @param {Element} el
-     * @param {Object} options
-     */
+import { Component } from "./component";
+import { M } from "./global";
+import anim from "animejs";
+
+const _defaults = {
+  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 {
+    id: any;
+    isOpen: boolean;
+    isFixed: boolean;
+    isDragged: boolean;
+    lastWindowWidth: number;
+    lastWindowHeight: number;
+    static _sidenavs: any;
+    private _overlay: HTMLElement;
+    dragTarget: Element;
+    private _closeBound: any;
+    private _handleDragTargetDragBound: any;
+    private _handleDragTargetReleaseBound: any;
+    private _handleCloseDragBound: any;
+    private _handleCloseReleaseBound: any;
+    private _handleCloseTriggerClickBound: any;
+    private _handleWindowResizeBound: any;
+    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, options) {
       super(Sidenav, el, options);
-
-      this.el.M_Sidenav = this;
-      this.id = this.$el.attr('id');
-
-      /**
-       * Options for the Sidenav
-       * @member Sidenav#options
-       * @prop {String} [edge='left'] - Side of screen on which Sidenav appears
-       * @prop {Boolean} [draggable=true] - Allow swipe gestures to open/close Sidenav
-       * @prop {String} [dragTargetWidth='10px'] - Width of the area where you can start dragging
-       * @prop {Number} [inDuration=250] - Length in ms of enter transition
-       * @prop {Number} [outDuration=200] - Length in ms of exit transition
-       * @prop {Function} onOpenStart - Function called when sidenav starts entering
-       * @prop {Function} onOpenEnd - Function called when sidenav finishes entering
-       * @prop {Function} onCloseStart - Function called when sidenav starts exiting
-       * @prop {Function} onCloseEnd - Function called when sidenav finishes exiting
-       */
-      this.options = $.extend({}, Sidenav.defaults, options);
-
-      /**
-       * Describes open/close state of Sidenav
-       * @type {Boolean}
-       */
+      (this.el as any).M_Sidenav = this;
+      this.id = this.el.id;
+      this.options = {...Sidenav.defaults, ...options};
       this.isOpen = false;
-
-      /**
-       * Describes if Sidenav is fixed
-       * @type {Boolean}
-       */
       this.isFixed = this.el.classList.contains('sidenav-fixed');
-
-      /**
-       * Describes if Sidenav is being draggeed
-       * @type {Boolean}
-       */
       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);
     }
 
@@ -84,53 +69,42 @@
       return super.init(this, els, options);
     }
 
-    /**
-     * Get Instance
-     */
     static getInstance(el) {
-      let domElem = !!el.jquery ? el[0] : el;
+      const domElem = !!el.jquery ? el[0] : el;
       return domElem.M_Sidenav;
     }
 
-    /**
-     * Teardown component
-     */
     destroy() {
       this._removeEventHandlers();
       this._enableBodyScrolling();
       this._overlay.parentNode.removeChild(this._overlay);
       this.dragTarget.parentNode.removeChild(this.dragTarget);
-      this.el.M_Sidenav = undefined;
-      this.el.style.transform = '';
-
-      let index = Sidenav._sidenavs.indexOf(this);
+      (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() {
-      let overlay = document.createElement('div');
+      this._overlay = document.createElement('div');
       this._closeBound = this.close.bind(this);
-      overlay.classList.add('sidenav-overlay');
-
-      overlay.addEventListener('click', this._closeBound);
-
-      document.body.appendChild(overlay);
-      this._overlay = overlay;
+      this._overlay.classList.add('sidenav-overlay');
+      this._overlay.addEventListener('click', this._closeBound);
+      document.body.appendChild(this._overlay);
     }
 
     _setupEventHandlers() {
       if (Sidenav._sidenavs.length === 0) {
         document.body.addEventListener('click', this._handleTriggerClick);
       }
-
       this._handleDragTargetDragBound = this._handleDragTargetDrag.bind(this);
       this._handleDragTargetReleaseBound = this._handleDragTargetRelease.bind(this);
       this._handleCloseDragBound = this._handleCloseDrag.bind(this);
       this._handleCloseReleaseBound = this._handleCloseRelease.bind(this);
       this._handleCloseTriggerClickBound = this._handleCloseTriggerClick.bind(this);
-
+      var passiveIfSupported: boolean = null;
       this.dragTarget.addEventListener('touchmove', this._handleDragTargetDragBound, passiveIfSupported);
       this.dragTarget.addEventListener('touchend', this._handleDragTargetReleaseBound);
       this._overlay.addEventListener('touchmove', this._handleCloseDragBound, passiveIfSupported);
@@ -138,7 +112,6 @@
       this.el.addEventListener('touchmove', this._handleCloseDragBound, passiveIfSupported);
       this.el.addEventListener('touchend', this._handleCloseReleaseBound);
       this.el.addEventListener('click', this._handleCloseTriggerClickBound);
-
       // Add resize for side nav fixed
       if (this.isFixed) {
         this._handleWindowResizeBound = this._handleWindowResize.bind(this);
@@ -150,7 +123,6 @@
       if (Sidenav._sidenavs.length === 1) {
         document.body.removeEventListener('click', this._handleTriggerClick);
       }
-
       this.dragTarget.removeEventListener('touchmove', this._handleDragTargetDragBound);
       this.dragTarget.removeEventListener('touchend', this._handleDragTargetReleaseBound);
       this._overlay.removeEventListener('touchmove', this._handleCloseDragBound);
@@ -165,30 +137,21 @@
       }
     }
 
-    /**
-     * Handle Trigger Click
-     * @param {Event} e
-     */
     _handleTriggerClick(e) {
-      let $trigger = $(e.target).closest('.sidenav-trigger');
-      if (e.target && $trigger.length) {
-        let sidenavId = M.getIdFromTrigger($trigger[0]);
-
-        let sidenavInstance = document.getElementById(sidenavId).M_Sidenav;
+      const trigger = e.target.closest('.sidenav-trigger');
+      if (e.target && trigger) {
+        const sidenavId = M.getIdFromTrigger(trigger);
+        const sidenavInstance = (document.getElementById(sidenavId) as any).M_Sidenav;
         if (sidenavInstance) {
-          sidenavInstance.open($trigger);
+          sidenavInstance.open(trigger);
         }
         e.preventDefault();
       }
     }
 
-    /**
-     * Set variables needed at the beginning of drag
-     * and stop any current transition.
-     * @param {Event} e
-     */
+    // Set variables needed at the beginning of drag and stop any current transition.
     _startDrag(e) {
-      let clientX = e.targetTouches[0].clientX;
+      const clientX = e.targetTouches[0].clientX;
       this.isDragged = true;
       this._startingXpos = clientX;
       this._xPos = this._startingXpos;
@@ -201,13 +164,10 @@
       anim.remove(this._overlay);
     }
 
-    /**
-     * Set variables needed at each drag move update tick
-     * @param {Event} e
-     */
+    //Set variables needed at each drag move update tick
     _dragMoveUpdate(e) {
-      let clientX = e.targetTouches[0].clientX;
-      let currentScrollTop = this.isOpen ? this.el.scrollTop : M.getDocumentScrollTop();
+      const clientX = e.targetTouches[0].clientX;
+      const currentScrollTop = this.isOpen ? this.el.scrollTop : M.getDocumentScrollTop();
       this.deltaX = Math.abs(this._xPos - clientX);
       this._xPos = clientX;
       this.velocityX = this.deltaX / (Date.now() - this._time);
@@ -217,36 +177,26 @@
       }
     }
 
-    /**
-     * Handles Dragging of Sidenav
-     * @param {Event} e
-     */
     _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
-      let dragDirection = totalDeltaX > 0 ? 'right' : 'left';
-
+      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
@@ -258,18 +208,13 @@
         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.style.transform = `${transformPrefix} translateX(${transformX}px)`;
-      this._overlay.style.opacity = this.percentOpen;
+      (this.el as HTMLElement).style.transform = `${transformPrefix} translateX(${transformX}px)`;
+      this._overlay.style.opacity = this.percentOpen.toString();
     }
 
-    /**
-     * Handle Drag Target Release
-     */
     _handleDragTargetRelease() {
       if (this.isDragged) {
         if (this.percentOpen > 0.2) {
@@ -277,60 +222,44 @@
         } else {
           this._animateOut();
         }
-
         this.isDragged = false;
         this._verticallyScrolling = false;
       }
     }
 
-    /**
-     * Handle Close Drag
-     * @param {Event} e
-     */
     _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.style.transform = `translateX(${transformX}px)`;
-        this._overlay.style.opacity = this.percentOpen;
+        (this.el as HTMLElement).style.transform = `translateX(${transformX}px)`;
+        this._overlay.style.opacity = this.percentOpen.toString();
       }
     }
 
-    /**
-     * Handle Close Release
-     */
     _handleCloseRelease() {
       if (this.isOpen && this.isDragged) {
         if (this.percentOpen > 0.8) {
@@ -338,25 +267,19 @@
         } else {
           this.close();
         }
-
         this.isDragged = false;
         this._verticallyScrolling = false;
       }
     }
 
-    /**
-     * Handles closing of Sidenav when element with class .sidenav-close
-     */
+    // Handles closing of Sidenav when element with class .sidenav-close
     _handleCloseTriggerClick(e) {
-      let $closeTrigger = $(e.target).closest('.sidenav-close');
-      if ($closeTrigger.length && !this._isCurrentlyFixed()) {
+      const closeTrigger = e.target.closest('.sidenav-close');
+      if (closeTrigger && !this._isCurrentlyFixed()) {
         this.close();
       }
     }
 
-    /**
-     * Handle Window Resize
-     */
     _handleWindowResize() {
       // Only handle horizontal resizes
       if (this.lastWindowWidth !== window.innerWidth) {
@@ -366,7 +289,6 @@
           this.close();
         }
       }
-
       this.lastWindowWidth = window.innerWidth;
       this.lastWindowHeight = window.innerHeight;
     }
@@ -384,9 +306,7 @@
     }
 
     _setupFixed() {
-      if (this._isCurrentlyFixed()) {
-        this.open();
-      }
+      if (this._isCurrentlyFixed()) this.open();
     }
 
     _isCurrentlyFixed() {
@@ -394,7 +314,7 @@
     }
 
     _createDragTarget() {
-      let dragTarget = document.createElement('div');
+      const dragTarget = document.createElement('div');
       dragTarget.classList.add('drag-target');
       dragTarget.style.width = this.options.dragTargetWidth;
       document.body.appendChild(dragTarget);
@@ -402,27 +322,20 @@
     }
 
     _preventBodyScrolling() {
-      let body = document.body;
-      body.style.overflow = 'hidden';
+      document.body.style.overflow = 'hidden';
     }
 
     _enableBodyScrolling() {
-      let body = document.body;
-      body.style.overflow = '';
+      document.body.style.overflow = '';
     }
 
     open() {
-      if (this.isOpen === true) {
-        return;
-      }
-
+      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);
@@ -434,9 +347,9 @@
         });
         this._enableBodyScrolling();
         this._overlay.style.display = 'none';
-
-        // Handle non-fixed Sidenav
-      } else {
+      }
+      // Handle non-fixed Sidenav
+      else {
         if (this.options.preventScrolling) {
           this._preventBodyScrolling();
         }
@@ -448,26 +361,20 @@
     }
 
     close() {
-      if (this.isOpen === false) {
-        return;
-      }
-
+      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()) {
-        let transformX = this.options.edge === 'left' ? '-105%' : '105%';
-        this.el.style.transform = `translateX(${transformX})`;
-
-        // Handle non-fixed Sidenav
-      } else {
+        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 {
@@ -489,7 +396,6 @@
             ? slideOutPercent + this.percentOpen
             : slideOutPercent - this.percentOpen;
       }
-
       anim.remove(this.el);
       anim({
         targets: this.el,
@@ -509,12 +415,10 @@
       let start = 0;
       if (this.isDragged) {
         start = this.percentOpen;
-      } else {
-        $(this._overlay).css({
-          display: 'block'
-        });
       }
-
+      else {
+        this._overlay.style.display = 'block';
+      }
       anim.remove(this._overlay);
       anim({
         targets: this._overlay,
@@ -530,7 +434,7 @@
     }
 
     _animateSidenavOut() {
-      let endPercent = this.options.edge === 'left' ? -1 : 1;
+      const endPercent = this.options.edge === 'left' ? -1 : 1;
       let slideOutPercent = 0;
       if (this.isDragged) {
         slideOutPercent =
@@ -562,22 +466,12 @@
         duration: this.options.outDuration,
         easing: 'easeOutQuad',
         complete: () => {
-          $(this._overlay).css('display', 'none');
+          this._overlay.style.display = 'none';
         }
       });
     }
-  }
-
-  /**
-   * @static
-   * @memberof Sidenav
-   * @type {Array.<Sidenav>}
-   */
-  Sidenav._sidenavs = [];
 
-  M.Sidenav = Sidenav;
-
-  if (M.jQueryLoaded) {
-    M.initializeJqueryWrapper(Sidenav, 'sidenav', 'M_Sidenav');
+    static  {
+      Sidenav._sidenavs = [];
+    }
   }
-})(cash, M.anime);