@materializecss/materialize 1.2.2 → 2.0.0-alpha

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

@@ -1,7 +1,8 @@
-(function($, anim) {
-  'use strict';
+import { Component } from "./component";
+import { M } from "./global";
+import anim from "animejs";
 
-  let _defaults = {
+  const _defaults = {
     alignment: 'left',
     autoFocus: true,
     constrainWidth: true,
@@ -18,63 +19,44 @@
     onItemClick: null
   };
 
-  /**
-   * @class
-   */
-  class Dropdown extends Component {
+  export class Dropdown extends Component {
+    el: HTMLElement;
+    static _dropdowns: Dropdown[] = [];
+    id: string;
+    dropdownEl: HTMLElement;
+    isOpen: boolean;
+    isScrollable: boolean;
+    isTouchMoving: boolean;
+    focusedIndex: number;
+    filterQuery: any[];
+    private _resetFilterQueryBound: any;
+    private _handleDocumentClickBound: any;
+    private _handleDocumentTouchmoveBound: any;
+    private _handleDropdownClickBound: any;
+    private _handleDropdownKeydownBound: any;
+    private _handleTriggerKeydownBound: any;
+    private _handleMouseEnterBound: any;
+    private _handleMouseLeaveBound: any;
+    _handleClickBound: any;
+    filterTimeout: NodeJS.Timeout;
+
     constructor(el, options) {
       super(Dropdown, el, options);
-
-      this.el.M_Dropdown = this;
+      (this.el as any).M_Dropdown = this;
       Dropdown._dropdowns.push(this);
-
       this.id = M.getIdFromTrigger(el);
       this.dropdownEl = document.getElementById(this.id);
-      this.$dropdownEl = $(this.dropdownEl);
-
-      /**
-       * Options for the dropdown
-       * @member Dropdown#options
-       * @prop {String} [alignment='left'] - Edge which the dropdown is aligned to
-       * @prop {Boolean} [autoFocus=true] - Automatically focus dropdown el for keyboard
-       * @prop {Boolean} [constrainWidth=true] - Constrain width to width of the button
-       * @prop {Element} container - Container element to attach dropdown to (optional)
-       * @prop {Boolean} [coverTrigger=true] - Place dropdown over trigger
-       * @prop {Boolean} [closeOnClick=true] - Close on click of dropdown item
-       * @prop {Boolean} [hover=false] - Open dropdown on hover
-       * @prop {Number} [inDuration=150] - Duration of open animation in ms
-       * @prop {Number} [outDuration=250] - Duration of close animation in ms
-       * @prop {Function} onOpenStart - Function called when dropdown starts opening
-       * @prop {Function} onOpenEnd - Function called when dropdown finishes opening
-       * @prop {Function} onCloseStart - Function called when dropdown starts closing
-       * @prop {Function} onCloseEnd - Function called when dropdown finishes closing
-       */
-      this.options = $.extend({}, Dropdown.defaults, options);
-
-      /**
-       * Describes open/close state of dropdown
-       * @type {Boolean}
-       */
-      this.isOpen = false;
+      //this.$dropdownEl = $(this.dropdownEl);
+      this.options = {...Dropdown.defaults, ...options};
 
-      /**
-       * Describes if dropdown content is scrollable
-       * @type {Boolean}
-       */
+      this.isOpen = false;
       this.isScrollable = false;
-
-      /**
-       * Describes if touch moving on dropdown content
-       * @type {Boolean}
-       */
       this.isTouchMoving = false;
-
       this.focusedIndex = -1;
       this.filterQuery = [];
 
       // Move dropdown-content after dropdown-trigger
       this._moveDropdown();
-
       this._makeDropdownFocusable();
       this._resetFilterQueryBound = this._resetFilterQuery.bind(this);
       this._handleDocumentClickBound = this._handleDocumentClick.bind(this);
@@ -93,34 +75,23 @@
       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_Dropdown;
     }
 
-    /**
-     * Teardown component
-     */
     destroy() {
       this._resetDropdownStyles();
       this._removeEventHandlers();
       Dropdown._dropdowns.splice(Dropdown._dropdowns.indexOf(this), 1);
-      this.el.M_Dropdown = undefined;
+      (this.el as any).M_Dropdown = undefined;
     }
 
-    /**
-     * Setup Event Handlers
-     */
     _setupEventHandlers() {
       // Trigger keydown handler
       this.el.addEventListener('keydown', this._handleTriggerKeydownBound);
-
       // Item click handler
-      this.dropdownEl.addEventListener('click', this._handleDropdownClickBound);
-
+      this.dropdownEl?.addEventListener('click', this._handleDropdownClickBound);
       // Hover event handlers
       if (this.options.hover) {
         this._handleMouseEnterBound = this._handleMouseEnter.bind(this);
@@ -128,7 +99,6 @@
         this._handleMouseLeaveBound = this._handleMouseLeave.bind(this);
         this.el.addEventListener('mouseleave', this._handleMouseLeaveBound);
         this.dropdownEl.addEventListener('mouseleave', this._handleMouseLeaveBound);
-
         // Click event handlers
       } else {
         this._handleClickBound = this._handleClick.bind(this);
@@ -136,13 +106,9 @@
       }
     }
 
-    /**
-     * Remove Event Handlers
-     */
     _removeEventHandlers() {
       this.el.removeEventListener('keydown', this._handleTriggerKeydownBound);
       this.dropdownEl.removeEventListener('click', this._handleDropdownClickBound);
-
       if (this.options.hover) {
         this.el.removeEventListener('mouseenter', this._handleMouseEnterBound);
         this.el.removeEventListener('mouseleave', this._handleMouseLeaveBound);
@@ -176,19 +142,17 @@
     }
 
     _handleMouseLeave(e) {
-      let toEl = e.toElement || e.relatedTarget;
-      let leaveToDropdownContent = !!$(toEl).closest('.dropdown-content').length;
+      const toEl = e.toElement || e.relatedTarget;
+      const leaveToDropdownContent = !!toEl.closest('.dropdown-content');
       let leaveToActiveDropdownTrigger = false;
-
-      let $closestTrigger = $(toEl).closest('.dropdown-trigger');
+      const closestTrigger = toEl.closest('.dropdown-trigger');
       if (
-        $closestTrigger.length &&
-        !!$closestTrigger[0].M_Dropdown &&
-        $closestTrigger[0].M_Dropdown.isOpen
+        closestTrigger &&
+        !!(<any>closestTrigger).M_Dropdown &&
+        (<any>closestTrigger).M_Dropdown.isOpen
       ) {
         leaveToActiveDropdownTrigger = true;
       }
-
       // Close hover dropdown if mouse did not leave to either active dropdown-trigger or dropdown-content
       if (!leaveToActiveDropdownTrigger && !leaveToDropdownContent) {
         this.close();
@@ -196,23 +160,24 @@
     }
 
     _handleDocumentClick(e) {
-      let $target = $(e.target);
+      const target = <HTMLElement>e.target;
       if (
         this.options.closeOnClick &&
-        $target.closest('.dropdown-content').length &&
+        target.closest('.dropdown-content') &&
         !this.isTouchMoving
       ) {
         // isTouchMoving to check if scrolling on mobile.
-        setTimeout(() => {
-          this.close();
-        }, 0);
-      } else if (
-        $target.closest('.dropdown-trigger').length ||
-        !$target.closest('.dropdown-content').length
+        //setTimeout(() => {
+        this.close();
+        //}, 0);
+      }
+      else if (
+        target.closest('.dropdown-trigger') ||
+        !target.closest('.dropdown-content')
       ) {
-        setTimeout(() => {
-          this.close();
-        }, 0);
+        //setTimeout(() => {
+        this.close();
+        //}, 0);
       }
       this.isTouchMoving = false;
     }
@@ -225,157 +190,127 @@
       }
     }
 
-    /**
-     * Handle Document Touchmove
-     * @param {Event} e
-     */
     _handleDocumentTouchmove(e) {
-      let $target = $(e.target);
-      if ($target.closest('.dropdown-content').length) {
+      const target = <HTMLElement>e.target;
+      if (target.closest('.dropdown-content')) {
         this.isTouchMoving = true;
       }
     }
 
-    /**
-     * Handle Dropdown Click
-     * @param {Event} e
-     */
     _handleDropdownClick(e) {
       // onItemClick callback
       if (typeof this.options.onItemClick === 'function') {
-        let itemEl = $(e.target).closest('li')[0];
+        const itemEl = <HTMLElement>e.target.closest('li');
         this.options.onItemClick.call(this, itemEl);
       }
     }
 
-    /**
-     * Handle Dropdown Keydown
-     * @param {Event} e
-     */
     _handleDropdownKeydown(e) {
       if (e.which === M.keys.TAB) {
         e.preventDefault();
         this.close();
-
-        // Navigate down dropdown list
-      } else if ((e.which === M.keys.ARROW_DOWN || e.which === M.keys.ARROW_UP) && this.isOpen) {
+      }
+      // Navigate down dropdown list
+      else if ((e.which === M.keys.ARROW_DOWN || e.which === M.keys.ARROW_UP) && this.isOpen) {
         e.preventDefault();
-        let direction = e.which === M.keys.ARROW_DOWN ? 1 : -1;
+        const direction = e.which === M.keys.ARROW_DOWN ? 1 : -1;
         let newFocusedIndex = this.focusedIndex;
-        let foundNewIndex = false;
+        let hasFoundNewIndex = false;
         do {
           newFocusedIndex = newFocusedIndex + direction;
-
           if (
             !!this.dropdownEl.children[newFocusedIndex] &&
-            this.dropdownEl.children[newFocusedIndex].tabIndex !== -1
+            (<any>this.dropdownEl.children[newFocusedIndex]).tabIndex !== -1
           ) {
-            foundNewIndex = true;
+            hasFoundNewIndex = true;
             break;
           }
         } while (newFocusedIndex < this.dropdownEl.children.length && newFocusedIndex >= 0);
 
-        if (foundNewIndex) {
+        if (hasFoundNewIndex) {
           // Remove active class from old element
           if (this.focusedIndex >= 0)
             this.dropdownEl.children[this.focusedIndex].classList.remove('active');
           this.focusedIndex = newFocusedIndex;
           this._focusFocusedItem();
         }
-
-        // ENTER selects choice on focused item
-      } else if (e.which === M.keys.ENTER && this.isOpen) {
+      }
+      // ENTER selects choice on focused item
+      else if (e.which === M.keys.ENTER && this.isOpen) {
         // Search for <a> and <button>
-        let focusedElement = this.dropdownEl.children[this.focusedIndex];
-        let $activatableElement = $(focusedElement)
-          .find('a, button')
-          .first();
-
+        const focusedElement = this.dropdownEl.children[this.focusedIndex];
+        const activatableElement = <HTMLElement>focusedElement.querySelector('a, button');
         // Click a or button tag if exists, otherwise click li tag
-        if (!!$activatableElement.length) {
-          $activatableElement[0].click();
-        } else if (!!focusedElement) {
-          focusedElement.click();
+        if (!!activatableElement) {
+          activatableElement.click();
         }
-
-        // Close dropdown on ESC
-      } else if (e.which === M.keys.ESC && this.isOpen) {
+        else if (!!focusedElement) {
+          if (focusedElement instanceof HTMLElement) {
+            focusedElement.click();
+          }          
+        }
+      }
+      // Close dropdown on ESC
+      else if (e.which === M.keys.ESC && this.isOpen) {
         e.preventDefault();
         this.close();
       }
 
       // CASE WHEN USER TYPE LETTERS
-      let letter = String.fromCharCode(e.which).toLowerCase(),
-        nonLetters = [9, 13, 27, 38, 40];
+      const letter = String.fromCharCode(e.which).toLowerCase();
+      const nonLetters = [9, 13, 27, 38, 40];
       if (letter && nonLetters.indexOf(e.which) === -1) {
         this.filterQuery.push(letter);
-
-        let string = this.filterQuery.join(''),
-          newOptionEl = $(this.dropdownEl)
-            .find('li')
-            .filter((el) => {
-              return (
-                $(el)
-                  .text()
-                  .toLowerCase()
-                  .indexOf(string) === 0
-              );
-            })[0];
-
+        const string = this.filterQuery.join('');
+        const newOptionEl = Array.from(this.dropdownEl.querySelectorAll('li'))
+          .find((el) => el.innerText.toLowerCase().indexOf(string) === 0);
         if (newOptionEl) {
-          this.focusedIndex = $(newOptionEl).index();
+          this.focusedIndex = [...newOptionEl.parentNode.children].indexOf(newOptionEl);
           this._focusFocusedItem();
         }
       }
-
       this.filterTimeout = setTimeout(this._resetFilterQueryBound, 1000);
     }
 
-    /**
-     * Setup dropdown
-     */
     _resetFilterQuery() {
       this.filterQuery = [];
     }
 
     _resetDropdownStyles() {
-      this.$dropdownEl.css({
-        display: '',
-        width: '',
-        height: '',
-        left: '',
-        top: '',
-        'transform-origin': '',
-        transform: '',
-        opacity: ''
-      });
+      this.dropdownEl.style.display = '';
+      this.dropdownEl.style.width = '';
+      this.dropdownEl.style.height = '';
+      this.dropdownEl.style.left = '';
+      this.dropdownEl.style.top = '';
+      this.dropdownEl.style.transformOrigin = '';
+      this.dropdownEl.style.transform = '';
+      this.dropdownEl.style.opacity = '';
     }
 
     // Move dropdown after container or trigger
-    _moveDropdown(containerEl) {
+    _moveDropdown(containerEl = null) {
       if (!!this.options.container) {
-        $(this.options.container).append(this.dropdownEl);
-      } else if (containerEl) {
+        this.options.container.append(this.dropdownEl);
+      }
+      else if (containerEl) {
         if (!containerEl.contains(this.dropdownEl)) {
-          $(containerEl).append(this.dropdownEl);
+          containerEl.append(this.dropdownEl);
         }
-      } else {
-        this.$el.after(this.dropdownEl);
+      }
+      else {
+        this.el.after(this.dropdownEl);
       }
     }
 
     _makeDropdownFocusable() {
+      if (!this.dropdownEl) return;
       // Needed for arrow key navigation
       this.dropdownEl.tabIndex = 0;
-
       // Only set tabindex if it hasn't been set by user
-      $(this.dropdownEl)
-        .children()
-        .each(function(el) {
-          if (!el.getAttribute('tabindex')) {
-            el.setAttribute('tabindex', 0);
-          }
-        });
+      Array.from(this.dropdownEl.children).forEach((el)=> {
+        if (!el.getAttribute('tabindex')) 
+          el.setAttribute('tabindex', '0');
+      });
     }
 
     _focusFocusedItem() {
@@ -384,7 +319,7 @@
         this.focusedIndex < this.dropdownEl.children.length &&
         this.options.autoFocus
       ) {
-        this.dropdownEl.children[this.focusedIndex].focus({
+        (this.dropdownEl.children[this.focusedIndex] as HTMLElement).focus({
           preventScroll: true
         });
         this.dropdownEl.children[this.focusedIndex].scrollIntoView({
@@ -396,23 +331,23 @@
     }
 
     _getDropdownPosition(closestOverflowParent) {
-      let offsetParentBRect = this.el.offsetParent.getBoundingClientRect();
-      let triggerBRect = this.el.getBoundingClientRect();
-      let dropdownBRect = this.dropdownEl.getBoundingClientRect();
+      const offsetParentBRect = this.el.offsetParent.getBoundingClientRect();
+      const triggerBRect = this.el.getBoundingClientRect();
+      const dropdownBRect = this.dropdownEl.getBoundingClientRect();
 
       let idealHeight = dropdownBRect.height;
       let idealWidth = dropdownBRect.width;
       let idealXPos = triggerBRect.left - dropdownBRect.left;
       let idealYPos = triggerBRect.top - dropdownBRect.top;
 
-      let dropdownBounds = {
+      const dropdownBounds = {
         left: idealXPos,
         top: idealYPos,
         height: idealHeight,
         width: idealWidth
       };
 
-      let alignments = M.checkPossibleAlignments(
+      const alignments = M.checkPossibleAlignments(
         this.el,
         closestOverflowParent,
         dropdownBounds,
@@ -452,7 +387,7 @@
 
       // If preferred horizontal alignment is possible
       if (!alignments[horizontalAlignment]) {
-        let oppositeAlignment = horizontalAlignment === 'left' ? 'right' : 'left';
+        const oppositeAlignment = horizontalAlignment === 'left' ? 'right' : 'left';
         if (alignments[oppositeAlignment]) {
           horizontalAlignment = oppositeAlignment;
         } else {
@@ -485,9 +420,6 @@
       };
     }
 
-    /**
-     * Animate in dropdown
-     */
     _animateIn() {
       anim.remove(this.dropdownEl);
       anim({
@@ -501,10 +433,7 @@
         duration: this.options.inDuration,
         easing: 'easeOutQuint',
         complete: (anim) => {
-          if (this.options.autoFocus) {
-            this.dropdownEl.focus();
-          }
-
+          if (this.options.autoFocus) this.dropdownEl.focus();
           // onOpenEnd callback
           if (typeof this.options.onOpenEnd === 'function') {
             this.options.onOpenEnd.call(this, this.el);
@@ -513,9 +442,6 @@
       });
     }
 
-    /**
-     * Animate out dropdown
-     */
     _animateOut() {
       anim.remove(this.dropdownEl);
       anim({
@@ -530,7 +456,6 @@
         easing: 'easeOutQuint',
         complete: (anim) => {
           this._resetDropdownStyles();
-
           // onCloseEnd callback
           if (typeof this.options.onCloseEnd === 'function') {
             this.options.onCloseEnd.call(this, this.el);
@@ -539,49 +464,41 @@
       });
     }
 
-    /**
-     * Place dropdown
-     */
-    _placeDropdown() {
-      /**
-       * Get closest ancestor that satisfies the condition
-       * @param {Element} el  Element to find ancestors on
-       * @param {Function} condition  Function that given an ancestor element returns true or false
-       * @returns {Element} Return closest ancestor or null if none satisfies the condition
-       */
-      const getClosestAncestor = function(el, condition) {
-        let ancestor = el.parentNode;
-        while (ancestor !== null && !$(ancestor).is(document)) {
-          if (condition(ancestor)) {
-            return ancestor;
-          }
-          ancestor = ancestor.parentNode;
+    private _getClosestAncestor(el: Element, condition: Function): Element {
+      let ancestor = el.parentNode;
+      while (ancestor !== null && ancestor !== document) {
+        if (condition(ancestor)) {
+          return <Element>ancestor;
         }
-        return null;
-      };
+        ancestor = ancestor.parentNode;
+      }
+      return null;
+    };
 
+    _placeDropdown() {
       // Container here will be closest ancestor with overflow: hidden
-      let closestOverflowParent = getClosestAncestor(this.dropdownEl, (ancestor) => {
-        return !$(ancestor).is('html,body') && $(ancestor).css('overflow') !== 'visible';
+      let closestOverflowParent: HTMLElement = <HTMLElement>this._getClosestAncestor(this.dropdownEl, (ancestor: HTMLElement) => {
+        return !['HTML','BODY'].includes(ancestor.tagName) && getComputedStyle(ancestor).overflow !== 'visible';
       });
       // Fallback
       if (!closestOverflowParent) {
-        closestOverflowParent = !!this.dropdownEl.offsetParent
+        closestOverflowParent = <HTMLElement>(!!this.dropdownEl.offsetParent
           ? this.dropdownEl.offsetParent
-          : this.dropdownEl.parentNode;
+          : this.dropdownEl.parentNode);
       }
-      if ($(closestOverflowParent).css('position') === 'static')
-        $(closestOverflowParent).css('position', 'relative');
+
+      if (getComputedStyle(closestOverflowParent).position === 'static')
+        closestOverflowParent.style.position = 'relative';
 
       this._moveDropdown(closestOverflowParent);
 
       // Set width before calculating positionInfo
-      let idealWidth = this.options.constrainWidth
+      const idealWidth = this.options.constrainWidth
         ? this.el.getBoundingClientRect().width
         : this.dropdownEl.getBoundingClientRect().width;
       this.dropdownEl.style.width = idealWidth + 'px';
 
-      let positionInfo = this._getDropdownPosition(closestOverflowParent);
+      const positionInfo = this._getDropdownPosition(closestOverflowParent);
       this.dropdownEl.style.left = positionInfo.x + 'px';
       this.dropdownEl.style.top = positionInfo.y + 'px';
       this.dropdownEl.style.height = positionInfo.height + 'px';
@@ -591,79 +508,48 @@
       } ${positionInfo.verticalAlignment === 'top' ? '0' : '100%'}`;
     }
 
-    /**
-     * Open Dropdown
-     */
     open() {
-      if (this.isOpen) {
-        return;
-      }
+      if (this.isOpen) return;
       this.isOpen = true;
-
       // onOpenStart callback
       if (typeof this.options.onOpenStart === 'function') {
         this.options.onOpenStart.call(this, this.el);
       }
-
       // Reset styles
       this._resetDropdownStyles();
       this.dropdownEl.style.display = 'block';
-
       this._placeDropdown();
       this._animateIn();
       this._setupTemporaryEventHandlers();
     }
 
-    /**
-     * Close Dropdown
-     */
     close() {
-      if (!this.isOpen) {
-        return;
-      }
-
+      if (!this.isOpen) return;
       this.isOpen = false;
       this.focusedIndex = -1;
-
       // onCloseStart callback
       if (typeof this.options.onCloseStart === 'function') {
         this.options.onCloseStart.call(this, this.el);
       }
-
       this._animateOut();
       this._removeTemporaryEventHandlers();
-
       if (this.options.autoFocus) {
         this.el.focus();
       }
     }
 
-    /**
-     * Recalculate dimensions
-     */
     recalculateDimensions() {
       if (this.isOpen) {
-        this.$dropdownEl.css({
-          width: '',
-          height: '',
-          left: '',
-          top: '',
-          'transform-origin': ''
-        });
+        this.dropdownEl.style.width = '';
+        this.dropdownEl.style.height = '';
+        this.dropdownEl.style.left = '';
+        this.dropdownEl.style.top = '';
+        this.dropdownEl.style.transformOrigin = '';
         this._placeDropdown();
       }
     }
-  }
 
-  /**
-   * @static
-   * @memberof Dropdown
-   */
-  Dropdown._dropdowns = [];
-
-  M.Dropdown = Dropdown;
-
-  if (M.jQueryLoaded) {
-    M.initializeJqueryWrapper(Dropdown, 'dropdown', 'M_Dropdown');
+    static {
+      Dropdown._dropdowns = [];    
+    }
   }
-})(cash, M.anime);

package/src/edges.ts

@@ -0,0 +1,6 @@
+export class Edges {
+  public top: Boolean; // If the top edge was exceeded
+  public right: Boolean; // If the right edge was exceeded
+  public bottom: Boolean; // If the bottom edge was exceeded
+  public left: Boolean; // If the left edge was exceeded
+}