refactor: removed jquery from modal and sidenav

Author: wuda-io

docs/js/materialize.js

@@ -1,9 +1,8 @@
 import { Component } from "./component";
-import $ from "cash-dom";
 import anim from "animejs";
 import { M } from "./global";
 
-let _defaults = {
+const _defaults = {
   opacity: 0.5,
   inDuration: 250,
   outDuration: 250,
@@ -18,12 +17,13 @@ let _defaults = {
 };
 
   export class Modal extends Component {
+    el: HTMLElement;
     static _modalsOpen: number;
     static _count: number;
     isOpen: boolean;
-    id: any;
+    id: string;
     private _openingTrigger: any;
-    $overlay: any;
+    private _overlay: HTMLElement;
     private _nthModalOpened: number;
     private _handleOverlayClickBound: any;
     private _handleModalCloseClickBound: any;
@@ -35,10 +35,11 @@ let _defaults = {
       (this.el as any).M_Modal = this;
       this.options = {...Modal.defaults, ...options};
       this.isOpen = false;
-      this.id = this.$el.attr('id');
+      this.id = this.el.id;
       this._openingTrigger = undefined;
-      this.$overlay = $('<div class="modal-overlay"></div>');
-      (this.el as HTMLElement).tabIndex = 0;
+      this._overlay = document.createElement('div');
+      this._overlay.classList.add('modal-overlay');
+      this.el.tabIndex = 0;
       this._nthModalOpened = 0;
       Modal._count++;
       this._setupEventHandlers();
@@ -53,15 +54,15 @@ let _defaults = {
     }
 
     static getInstance(el) {
-      let domElem = !!el.jquery ? el[0] : el;
+      const domElem = !!el.jquery ? el[0] : el;
       return domElem.M_Modal;
     }
 
     destroy() {
       Modal._count--;
       this._removeEventHandlers();
       this.el.removeAttribute('style');
-      this.$overlay.remove();
+      this._overlay.remove();
       (this.el as any).M_Modal = undefined;
     }
 
@@ -71,76 +72,63 @@ let _defaults = {
       if (Modal._count === 1) {
         document.body.addEventListener('click', this._handleTriggerClick);
       }
-      this.$overlay[0].addEventListener('click', this._handleOverlayClickBound);
+      this._overlay.addEventListener('click', this._handleOverlayClickBound);
       this.el.addEventListener('click', this._handleModalCloseClickBound);
     }
 
     _removeEventHandlers() {
       if (Modal._count === 0) {
         document.body.removeEventListener('click', this._handleTriggerClick);
       }
-      this.$overlay[0].removeEventListener('click', this._handleOverlayClickBound);
+      this._overlay.removeEventListener('click', this._handleOverlayClickBound);
       this.el.removeEventListener('click', this._handleModalCloseClickBound);
     }
 
     _handleTriggerClick(e) {
-      let $trigger = $(e.target).closest('.modal-trigger');
-      if ($trigger.length) {
-        let modalId = M.getIdFromTrigger($trigger[0]);
-        let modalInstance = (document.getElementById(modalId) as any).M_Modal;
-        if (modalInstance) {
-          modalInstance.open($trigger);
-        }
-        e.preventDefault();
-      }
+      const trigger = e.target.closest('.modal-trigger');
+      if (!trigger) return;
+      const modalId = M.getIdFromTrigger(trigger);
+      const modalInstance = (document.getElementById(modalId) as any).M_Modal;
+      if (modalInstance) modalInstance.open(trigger);
+      e.preventDefault();
     }
 
     _handleOverlayClick() {
-      if (this.options.dismissible) {
-        this.close();
-      }
+      if (this.options.dismissible) this.close();
     }
 
     _handleModalCloseClick(e) {
-      let $closeTrigger = $(e.target).closest('.modal-close');
-      if ($closeTrigger.length) {
-        this.close();
-      }
+      const closeTrigger = e.target.closest('.modal-close');
+      if (closeTrigger) this.close();
     }
 
     _handleKeydown(e) {
       // ESC key
-      if (e.keyCode === 27 && this.options.dismissible) {
-        this.close();
-      }
+      if (e.keyCode === 27 && this.options.dismissible) this.close();
     }
 
     _handleFocus(e) {
       // Only trap focus if this modal is the last model opened (prevents loops in nested modals).
       if (!this.el.contains(e.target) && this._nthModalOpened === Modal._modalsOpen) {
-        (this.el as HTMLElement).focus();
+        this.el.focus();
       }
     }
 
     _animateIn() {
-      // Set initial styles
-      $.extend((this.el as HTMLElement).style, {
-        display: 'block',
-        opacity: 0
-      });
-      $.extend(this.$overlay[0].style, {
-        display: 'block',
-        opacity: 0
-      });
+      // Set initial styles  
+      this.el.style.display = 'block';
+      this.el.style.opacity = '0';
+      this._overlay.style.display = 'block';
+      this._overlay.style.opacity = '0';
       // Animate overlay
       anim({
-        targets: this.$overlay[0],
+        targets: this._overlay,
         opacity: this.options.opacity,
         duration: this.options.inDuration,
         easing: 'easeOutQuad'
       });
       // Define modal animation options
-      let enterAnimOptions = {
+      const enterAnimOptions = {
         targets: this.el,
         duration: this.options.inDuration,
         easing: 'easeOutCubic',
@@ -151,45 +139,38 @@ let _defaults = {
           }
         }
       };
-
       // Bottom sheet animation
       if (this.el.classList.contains('bottom-sheet')) {
-        $.extend(enterAnimOptions, {
-          bottom: 0,
-          opacity: 1
-        });
-        anim(enterAnimOptions);
-
-        // Normal modal animation
-      } else {
-        $.extend(enterAnimOptions, {
-          top: [this.options.startingTop, this.options.endingTop],
-          opacity: 1,
-          scaleX: [0.8, 1],
-          scaleY: [0.8, 1]
-        });
-        anim(enterAnimOptions);
+        enterAnimOptions['bottom'] = 0;
+        enterAnimOptions['opacity'] = 1;
+      }
+      // Normal modal animation
+      else {
+        enterAnimOptions['top'] = [this.options.startingTop, this.options.endingTop];
+        enterAnimOptions['opacity'] = 1;
+        enterAnimOptions['scaleX'] = [0.8, 1];
+        enterAnimOptions['scaleY'] = [0.8, 1];
       }
+      anim(enterAnimOptions);
     }
 
     _animateOut() {
       // Animate overlay
       anim({
-        targets: this.$overlay[0],
+        targets: this._overlay,
         opacity: 0,
         duration: this.options.outDuration,
         easing: 'easeOutQuart'
       });
-
       // Define modal animation options
-      let exitAnimOptions = {
+      const exitAnimOptions = {
         targets: this.el,
         duration: this.options.outDuration,
         easing: 'easeOutCubic',
         // Handle modal ready callback
         complete: () => {
-          (this.el as HTMLElement).style.display = 'none';
-          this.$overlay.remove();
+          this.el.style.display = 'none';
+          this._overlay.remove();
           // Call onCloseEnd callback
           if (typeof this.options.onCloseEnd === 'function') {
             this.options.onCloseEnd.call(this, this.el);
@@ -198,104 +179,78 @@ let _defaults = {
       };
       // Bottom sheet animation
       if (this.el.classList.contains('bottom-sheet')) {
-        $.extend(exitAnimOptions, {
-          bottom: '-100%',
-          opacity: 0
-        });
-        anim(exitAnimOptions);
-        // Normal modal animation
+        exitAnimOptions['bottom'] = '-100%';
+        exitAnimOptions['opacity'] = 0;
       }
+      // Normal modal animation
       else {
-        $.extend(exitAnimOptions, {
-          top: [this.options.endingTop, this.options.startingTop],
-          opacity: 0,
-          scaleX: 0.8,
-          scaleY: 0.8
-        });
-        anim(exitAnimOptions);
+        exitAnimOptions['top'] = [this.options.endingTop, this.options.startingTop];
+        exitAnimOptions['opacity'] = 0;
+        exitAnimOptions['scaleX'] = 0.8;
+        exitAnimOptions['scaleY'] = 0.8;
       }
+      anim(exitAnimOptions);
     }
 
-    open($trigger) {
-      if (this.isOpen) {
-        return;
-      }
+    open(trigger: HTMLElement|undefined): Modal {
+      if (this.isOpen) return;
       this.isOpen = true;
       Modal._modalsOpen++;
       this._nthModalOpened = Modal._modalsOpen;
-
       // Set Z-Index based on number of currently open modals
-      this.$overlay[0].style.zIndex = 1000 + Modal._modalsOpen * 2;
-      (this.el as HTMLElement).style.zIndex = (1000 + Modal._modalsOpen * 2 + 1).toString();
-
+      this._overlay.style.zIndex = (1000 + Modal._modalsOpen * 2).toString();
+      this.el.style.zIndex = (1000 + Modal._modalsOpen * 2 + 1).toString();
       // Set opening trigger, undefined indicates modal was opened by javascript
-      this._openingTrigger = !!$trigger ? $trigger[0] : undefined;
-
+      this._openingTrigger = !!trigger ? trigger : undefined;
       // onOpenStart callback
       if (typeof this.options.onOpenStart === 'function') {
         this.options.onOpenStart.call(this, this.el, this._openingTrigger);
       }
-
       if (this.options.preventScrolling) {
         document.body.style.overflow = 'hidden';
       }
-
       this.el.classList.add('open');
-      this.el.insertAdjacentElement('afterend', this.$overlay[0]);
-
+      this.el.insertAdjacentElement('afterend', this._overlay);
       if (this.options.dismissible) {
         this._handleKeydownBound = this._handleKeydown.bind(this);
         this._handleFocusBound = this._handleFocus.bind(this);
         document.addEventListener('keydown', this._handleKeydownBound);
         document.addEventListener('focus', this._handleFocusBound, true);
       }
-
       anim.remove(this.el);
-      anim.remove(this.$overlay[0]);
+      anim.remove(this._overlay);
       this._animateIn();
-
       // Focus modal
-      (this.el as HTMLElement).focus();
+      this.el.focus();
       return this;
     }
 
     close() {
-      if (!this.isOpen) {
-        return;
-      }
+      if (!this.isOpen) return;
       this.isOpen = false;
       Modal._modalsOpen--;
       this._nthModalOpened = 0;
-
       // Call onCloseStart callback
       if (typeof this.options.onCloseStart === 'function') {
         this.options.onCloseStart.call(this, this.el);
       }
-
       this.el.classList.remove('open');
-
       // Enable body scrolling only if there are no more modals open.
       if (Modal._modalsOpen === 0) {
         document.body.style.overflow = '';
       }
-
       if (this.options.dismissible) {
         document.removeEventListener('keydown', this._handleKeydownBound);
         document.removeEventListener('focus', this._handleFocusBound, true);
       }
-
       anim.remove(this.el);
-      anim.remove(this.$overlay[0]);
+      anim.remove(this._overlay);
       this._animateOut();
       return this;
     }
-    
+
     static{
       Modal._modalsOpen = 0;
       Modal._count = 0;
     }
-
   }
-
- 
-