@materializecss/materialize 1.2.2 → 2.0.1-alpha

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

@@ -1,9 +1,6 @@
-(function($, anim) {
-  'use strict';
+import anim from "animejs";
 
-  let _defaults = {
-    html: '',
-    unsafeHTML: '',
+let _defaults = {
     text: '',
     displayLength: 4000,
     inDuration: 300,
@@ -13,46 +10,46 @@
     activationPercent: 0.8
   };
 
-  class Toast {
-    constructor(options) {
-      /**
-       * Options for the toast
-       * @member Toast#options
-       */
-      this.options = $.extend({}, Toast.defaults, options);
-      this.htmlMessage = this.options.html;
+  export class Toast {
+    static _toasts: Toast[];
+    static _container: any;
+    static _draggedToast: Toast;
+    options: any;
+    message: string;
+    panning: boolean;
+    timeRemaining: number;
+    el: HTMLDivElement;
+    counterInterval: NodeJS.Timeout;
+    wasSwiped: any;
+    startingXPos: number;
+    xPos: any;
+    time: number;
+    deltaX: number;
+    velocityX: number;
+
+    constructor(options: any) {
+      this.options = {...Toast.defaults, ...options};
+      //this.htmlMessage = this.options.html;
       // Warn when using html
-      if (!!this.options.html)
-        console.warn(
-          'The html option is deprecated and will be removed in the future. See https://github.com/materializecss/materialize/pull/49'
-        );
+      // if (!!this.options.html)
+      //   console.warn(
+      //     'The html option is deprecated and will be removed in the future. See https://github.com/materializecss/materialize/pull/49'
+      //   );
       // If the new unsafeHTML is used, prefer that
-      if (!!this.options.unsafeHTML) {
-        this.htmlMessage = this.options.unsafeHTML;
-      }
+      // if (!!this.options.unsafeHTML) {
+      //   this.htmlMessage = this.options.unsafeHTML;
+      // }
       this.message = this.options.text;
-
-      /**
-       * Describes current pan state toast
-       * @type {Boolean}
-       */
       this.panning = false;
-
-      /**
-       * Time remaining until toast is removed
-       */
       this.timeRemaining = this.options.displayLength;
-
       if (Toast._toasts.length === 0) {
         Toast._createContainer();
       }
-
       // Create new toast
       Toast._toasts.push(this);
       let toastElement = this._createToast();
-      toastElement.M_Toast = this;
+      (toastElement as any).M_Toast = this;
       this.el = toastElement;
-      this.$el = $(toastElement);
       this._animateIn();
       this._setTimer();
     }
@@ -61,54 +58,36 @@
       return _defaults;
     }
 
-    /**
-     * Get Instance
-     */
     static getInstance(el) {
       let domElem = !!el.jquery ? el[0] : el;
       return domElem.M_Toast;
     }
 
-    /**
-     * Append toast container and add event handlers
-     */
     static _createContainer() {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
       container.setAttribute('id', 'toast-container');
-
       // Add event handler
       container.addEventListener('touchstart', Toast._onDragStart);
       container.addEventListener('touchmove', Toast._onDragMove);
       container.addEventListener('touchend', Toast._onDragEnd);
-
       container.addEventListener('mousedown', Toast._onDragStart);
       document.addEventListener('mousemove', Toast._onDragMove);
       document.addEventListener('mouseup', Toast._onDragEnd);
-
       document.body.appendChild(container);
       Toast._container = container;
     }
 
-    /**
-     * Remove toast container and event handlers
-     */
     static _removeContainer() {
-      // Add event handler
       document.removeEventListener('mousemove', Toast._onDragMove);
       document.removeEventListener('mouseup', Toast._onDragEnd);
-
-      $(Toast._container).remove();
+      Toast._container.remove();
       Toast._container = null;
     }
 
-    /**
-     * Begin drag handler
-     * @param {Event} e
-     */
     static _onDragStart(e) {
-      if (e.target && $(e.target).closest('.toast').length) {
-        let $toast = $(e.target).closest('.toast');
-        let toast = $toast[0].M_Toast;
+      if (e.target && (<HTMLElement>e.target).closest('.toast')) {
+        const toastElem = (<HTMLElement>e.target).closest('.toast');
+        const toast: Toast = (toastElem as any).M_Toast;
         toast.panning = true;
         Toast._draggedToast = toast;
         toast.el.classList.add('panning');
@@ -119,29 +98,22 @@
       }
     }
 
-    /**
-     * Drag move handler
-     * @param {Event} e
-     */
     static _onDragMove(e) {
       if (!!Toast._draggedToast) {
         e.preventDefault();
-        let toast = Toast._draggedToast;
+        const toast = Toast._draggedToast;
         toast.deltaX = Math.abs(toast.xPos - Toast._xPos(e));
         toast.xPos = Toast._xPos(e);
         toast.velocityX = toast.deltaX / (Date.now() - toast.time);
         toast.time = Date.now();
 
-        let totalDeltaX = toast.xPos - toast.startingXPos;
-        let activationDistance = toast.el.offsetWidth * toast.options.activationPercent;
+        const totalDeltaX = toast.xPos - toast.startingXPos;
+        const activationDistance = toast.el.offsetWidth * toast.options.activationPercent;
         toast.el.style.transform = `translateX(${totalDeltaX}px)`;
-        toast.el.style.opacity = 1 - Math.abs(totalDeltaX / activationDistance);
+        toast.el.style.opacity = (1 - Math.abs(totalDeltaX / activationDistance)).toString();
       }
     }
 
-    /**
-     * End drag handler
-     */
     static _onDragEnd() {
       if (!!Toast._draggedToast) {
         let toast = Toast._draggedToast;
@@ -156,9 +128,9 @@
         if (shouldBeDismissed) {
           toast.wasSwiped = true;
           toast.dismiss();
-
           // Animate toast back to original position
-        } else {
+        }
+        else {
           toast.el.style.transition = 'transform .2s, opacity .2s';
           toast.el.style.transform = '';
           toast.el.style.opacity = '';
@@ -167,10 +139,6 @@
       }
     }
 
-    /**
-     * Get x position of mouse or touch event
-     * @param {Event} e
-     */
     static _xPos(e) {
       if (e.targetTouches && e.targetTouches.length >= 1) {
         return e.targetTouches[0].clientX;
@@ -179,59 +147,53 @@
       return e.clientX;
     }
 
-    /**
-     * Remove all toasts
-     */
     static dismissAll() {
       for (let toastIndex in Toast._toasts) {
         Toast._toasts[toastIndex].dismiss();
       }
     }
 
-    /**
-     * Create toast and append it to toast container
-     */
     _createToast() {
-      let toast = document.createElement('div');
+      const toast = document.createElement('div');
       toast.classList.add('toast');
       toast.setAttribute('role', 'alert');
       toast.setAttribute('aria-live', 'assertive');
-      toast.setAttribute('aria-atomic', true);
+      toast.setAttribute('aria-atomic', 'true');
 
       // Add custom classes onto toast
-      if (!!this.options.classes.length) {
-        $(toast).addClass(this.options.classes);
+      if (this.options.classes.length > 0) {
+        toast.classList.add(...this.options.classes.split(' '));
       }
 
       // Set safe text content
-      toast.textContent = this.message;
-      if (
-        typeof HTMLElement === 'object'
-          ? this.htmlMessage instanceof HTMLElement
-          : this.htmlMessage &&
-            typeof this.htmlMessage === 'object' &&
-            this.htmlMessage !== null &&
-            this.htmlMessage.nodeType === 1 &&
-            typeof this.htmlMessage.nodeName === 'string'
-      ) {
-        //if the htmlMessage is an HTML node, append it directly
-        toast.appendChild(this.htmlMessage);
-      } else if (!!this.htmlMessage.jquery) {
-        // Check if it is jQuery object, append the node
-        $(toast).append(this.htmlMessage[0]);
-      } else {
-        // Append as unsanitized html;
-        $(toast).append(this.htmlMessage);
-      }
+      toast.innerText = this.message;
+
+      // if (
+      //   typeof HTMLElement === 'object'
+      //     ? this.htmlMessage instanceof HTMLElement
+      //     : this.htmlMessage &&
+      //       typeof this.htmlMessage === 'object' &&
+      //       this.htmlMessage !== null &&
+      //       this.htmlMessage.nodeType === 1 &&
+      //       typeof this.htmlMessage.nodeName === 'string'
+      // ) {
+      //   //if the htmlMessage is an HTML node, append it directly
+      //   toast.appendChild(this.htmlMessage);
+      // }
+      // else if (!!this.htmlMessage.jquery) {
+      //   // Check if it is jQuery object, append the node
+      //   $(toast).append(this.htmlMessage[0]);
+      // }
+      // else {
+      //   // Append as unsanitized html;
+      //   $(toast).append(this.htmlMessage);
+      // }
 
       // Append toast
       Toast._container.appendChild(toast);
       return toast;
     }
 
-    /**
-     * Animate in toast
-     */
     _animateIn() {
       // Animate toast in
       anim({
@@ -254,7 +216,6 @@
           if (!this.panning) {
             this.timeRemaining -= 20;
           }
-
           // Animate toast out
           if (this.timeRemaining <= 0) {
             this.dismiss();
@@ -273,7 +234,7 @@
       if (this.wasSwiped) {
         this.el.style.transition = 'transform .05s, opacity .05s';
         this.el.style.transform = `translateX(${activationDistance}px)`;
-        this.el.style.opacity = 0;
+        this.el.style.opacity = '0';
       }
 
       anim({
@@ -288,7 +249,7 @@
             this.options.completeCallback();
           }
           // Remove toast from DOM
-          this.$el.remove();
+          this.el.remove();
           Toast._toasts.splice(Toast._toasts.indexOf(this), 1);
           if (Toast._toasts.length === 0) {
             Toast._removeContainer();
@@ -296,30 +257,10 @@
         }
       });
     }
-  }
-
-  /**
-   * @static
-   * @memberof Toast
-   * @type {Array.<Toast>}
-   */
-  Toast._toasts = [];
-
-  /**
-   * @static
-   * @memberof Toast
-   */
-  Toast._container = null;
 
-  /**
-   * @static
-   * @memberof Toast
-   * @type {Toast}
-   */
-  Toast._draggedToast = null;
-
-  M.Toast = Toast;
-  M.toast = function(options) {
-    return new Toast(options);
-  };
-})(cash, M.anime);
+    static {          
+      Toast._toasts = [];
+      Toast._container = null;
+      Toast._draggedToast = null;
+    }
+  }

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

@@ -1,12 +1,14 @@
-(function($, anim) {
-  'use strict';
+import { Component } from "./component";
+import { M } from "./global";
+import anim from "animejs";
+import { Bounding } from "./bounding";
 
-  let _defaults = {
+  const _defaults = {
     exitDelay: 200,
     enterDelay: 0,
-    html: null,
+    //html: null,
     text: '',
-    unsafeHTML: null,
+    //unsafeHTML: null,
     margin: 5,
     inDuration: 250,
     outDuration: 200,
@@ -14,23 +16,24 @@
     transitionMovement: 10
   };
 
-  /**
-   * @class
-   *
-   */
-  class Tooltip extends Component {
-    /**
-     * Construct Tooltip instance
-     * @constructor
-     * @param {Element} el
-     * @param {Object} options
-     */
+  export class Tooltip extends Component {
+    isOpen: boolean;
+    isHovered: boolean;
+    isFocused: boolean;
+    tooltipEl: HTMLElement;
+    private _handleMouseEnterBound: any;
+    private _handleMouseLeaveBound: any;
+    private _handleFocusBound: any;
+    private _handleBlurBound: any;
+    private _exitDelayTimeout: string | number | NodeJS.Timeout;
+    private _enterDelayTimeout: string | number | NodeJS.Timeout;
+    xMovement: number;
+    yMovement: number;
+
     constructor(el, options) {
       super(Tooltip, el, options);
-
-      this.el.M_Tooltip = this;
-      this.options = $.extend({}, Tooltip.defaults, options);
-
+      (this.el as any).M_Tooltip = this;
+      this.options = {...Tooltip.defaults, ...options};
       this.isOpen = false;
       this.isHovered = false;
       this.isFocused = false;
@@ -46,38 +49,31 @@
       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_Tooltip;
     }
 
-    /**
-     * Teardown component
-     */
     destroy() {
-      $(this.tooltipEl).remove();
+      this.tooltipEl.remove();
       this._removeEventHandlers();
-      this.el.M_Tooltip = undefined;
+      (this.el as any).M_Tooltip = undefined;
     }
 
     _appendTooltipEl() {
-      let tooltipEl = document.createElement('div');
-      tooltipEl.classList.add('material-tooltip');
-      this.tooltipEl = tooltipEl;
+      this.tooltipEl = document.createElement('div');
+      this.tooltipEl.classList.add('material-tooltip');
 
-      let tooltipContentEl = document.createElement('div');
+      const tooltipContentEl = document.createElement('div');
       tooltipContentEl.classList.add('tooltip-content');
       this._setTooltipContent(tooltipContentEl);
-
-      tooltipEl.appendChild(tooltipContentEl);
-      document.body.appendChild(tooltipEl);
+      this.tooltipEl.appendChild(tooltipContentEl);
+      document.body.appendChild(this.tooltipEl);
     }
 
-    _setTooltipContent(tooltipContentEl) {
-      tooltipContentEl.textContent = this.options.text;
+    _setTooltipContent(tooltipContentEl: HTMLElement) {
+      tooltipContentEl.innerText = this.options.text;
+      /*
       if (!!this.options.html) {
         // Warn when using html
         console.warn(
@@ -88,6 +84,7 @@
       if (!!this.options.unsafeHTML) {
         $(tooltipContentEl).append(this.options.unsafeHTML);
       }
+      */
     }
 
     _updateTooltipContent() {
@@ -113,75 +110,52 @@
     }
 
     open(isManual) {
-      if (this.isOpen) {
-        return;
-      }
+      if (this.isOpen) return;
       isManual = isManual === undefined ? true : undefined; // Default value true
       this.isOpen = true;
       // Update tooltip content with HTML attribute options
-      this.options = $.extend({}, this.options, this._getAttributeOptions());
+      this.options = {...this.options, ...this._getAttributeOptions()};
       this._updateTooltipContent();
       this._setEnterDelayTimeout(isManual);
     }
 
     close() {
-      if (!this.isOpen) {
-        return;
-      }
-
+      if (!this.isOpen) return;
       this.isHovered = false;
       this.isFocused = false;
       this.isOpen = false;
       this._setExitDelayTimeout();
     }
 
-    /**
-     * Create timeout which delays when the tooltip closes
-     */
     _setExitDelayTimeout() {
       clearTimeout(this._exitDelayTimeout);
-
       this._exitDelayTimeout = setTimeout(() => {
-        if (this.isHovered || this.isFocused) {
-          return;
-        }
-
+        if (this.isHovered || this.isFocused) return;
         this._animateOut();
       }, this.options.exitDelay);
     }
 
-    /**
-     * Create timeout which delays when the toast closes
-     */
     _setEnterDelayTimeout(isManual) {
       clearTimeout(this._enterDelayTimeout);
-
       this._enterDelayTimeout = setTimeout(() => {
-        if (!this.isHovered && !this.isFocused && !isManual) {
-          return;
-        }
-
+        if (!this.isHovered && !this.isFocused && !isManual) return;
         this._animateIn();
       }, this.options.enterDelay);
     }
 
     _positionTooltip() {
-      let origin = this.el,
-        tooltip = this.tooltipEl,
+      const tooltip: HTMLElement = this.tooltipEl;
+      const origin = (this.el as HTMLElement),
         originHeight = origin.offsetHeight,
         originWidth = origin.offsetWidth,
         tooltipHeight = tooltip.offsetHeight,
         tooltipWidth = tooltip.offsetWidth,
-        newCoordinates,
-        margin = this.options.margin,
-        targetTop,
-        targetLeft;
+        margin = this.options.margin;
 
       (this.xMovement = 0), (this.yMovement = 0);
 
-      targetTop = origin.getBoundingClientRect().top + M.getDocumentScrollTop();
-      targetLeft = origin.getBoundingClientRect().left + M.getDocumentScrollLeft();
-
+      let targetTop = origin.getBoundingClientRect().top + M.getDocumentScrollTop();
+      let targetLeft = origin.getBoundingClientRect().left + M.getDocumentScrollLeft();
       if (this.options.position === 'top') {
         targetTop += -tooltipHeight - margin;
         targetLeft += originWidth / 2 - tooltipWidth / 2;
@@ -200,46 +174,42 @@
         this.yMovement = this.options.transitionMovement;
       }
 
-      newCoordinates = this._repositionWithinScreen(
+      const newCoordinates = this._repositionWithinScreen(
         targetLeft,
         targetTop,
         tooltipWidth,
         tooltipHeight
       );
-      $(tooltip).css({
-        top: newCoordinates.y + 'px',
-        left: newCoordinates.x + 'px'
-      });
+        
+      tooltip.style.top = newCoordinates.y+'px';
+      tooltip.style.left = newCoordinates.x+'px';
     }
 
     _repositionWithinScreen(x, y, width, height) {
-      let scrollLeft = M.getDocumentScrollLeft();
-      let scrollTop = M.getDocumentScrollTop();
+      const scrollLeft = M.getDocumentScrollLeft();
+      const scrollTop = M.getDocumentScrollTop();
       let newX = x - scrollLeft;
       let newY = y - scrollTop;
 
-      let bounding = {
+      const bounding: Bounding = {
         left: newX,
         top: newY,
         width: width,
         height: height
       };
-
-      let offset = this.options.margin + this.options.transitionMovement;
-      let edges = M.checkWithinContainer(document.body, bounding, offset);
+      const offset = this.options.margin + this.options.transitionMovement;
+      const edges = M.checkWithinContainer(document.body, bounding, offset);
 
       if (edges.left) {
         newX = offset;
       } else if (edges.right) {
         newX -= newX + width - window.innerWidth;
       }
-
       if (edges.top) {
         newY = offset;
       } else if (edges.bottom) {
         newY -= newY + height - window.innerHeight;
       }
-
       return {
         x: newX + scrollLeft,
         y: newY + scrollTop
@@ -297,24 +267,17 @@
     }
 
     _getAttributeOptions() {
-      let attributeOptions = {};
-      let tooltipTextOption = this.el.getAttribute('data-tooltip');
-      let positionOption = this.el.getAttribute('data-position');
-
+      const attributeOptions = {};
+      const tooltipTextOption = this.el.getAttribute('data-tooltip');
+      const positionOption = this.el.getAttribute('data-position');
       if (tooltipTextOption) {
-        attributeOptions.text = tooltipTextOption;
+        (attributeOptions as any).text = tooltipTextOption;
       }
-
       if (positionOption) {
-        attributeOptions.position = positionOption;
+        (attributeOptions as any).position = positionOption;
       }
       return attributeOptions;
     }
   }
 
-  M.Tooltip = Tooltip;
 
-  if (M.jQueryLoaded) {
-    M.initializeJqueryWrapper(Tooltip, 'tooltip', 'M_Tooltip');
-  }
-})(cash, M.anime);