@materializecss/materialize 1.2.1 → 2.0.0-alpha

package/src/bounding.ts

@@ -0,0 +1,6 @@
+export class Bounding {
+  public left: number; // left offset coordinate
+  public top: number;
+  public width: number;
+  public height: number;
+}

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

@@ -1,57 +1,52 @@
-(function($, anim) {
-  'use strict';
+import { Component } from "./component";
+import anim from "animejs";
 
   let _defaults = {
     direction: 'top',
     hoverEnabled: true,
     toolbarEnabled: false
   };
+  
+  export class FloatingActionButton extends Component {
+    el: HTMLElement;
+    isOpen: boolean;
+    private _anchor: HTMLAnchorElement;
+    private _menu: HTMLElement|null;
+    private _floatingBtns: HTMLElement[];
+    private _floatingBtnsReverse: HTMLElement[];
+    offsetY: number;
+    offsetX: number;
+    private _handleFABClickBound: any;
+    private _handleOpenBound: any;
+    private _handleCloseBound: any;
+    private _handleDocumentClickBound: (this: HTMLElement, ev: MouseEvent) => any;
+    btnBottom: number;
+    btnLeft: number;
+    btnWidth: number;
 
-  $.fn.reverse = [].reverse;
-
-  /**
-   * @class
-   *
-   */
-  class FloatingActionButton extends Component {
-    /**
-     * Construct FloatingActionButton instance
-     * @constructor
-     * @param {Element} el
-     * @param {Object} options
-     */
     constructor(el, options) {
       super(FloatingActionButton, el, options);
 
-      this.el.M_FloatingActionButton = this;
-
-      /**
-       * Options for the fab
-       * @member FloatingActionButton#options
-       * @prop {Boolean} [direction] - Direction fab menu opens
-       * @prop {Boolean} [hoverEnabled=true] - Enable hover vs click
-       * @prop {Boolean} [toolbarEnabled=false] - Enable toolbar transition
-       */
-      this.options = $.extend({}, FloatingActionButton.defaults, options);
+      (this.el as any).M_FloatingActionButton = this;
 
+      this.options = {...FloatingActionButton.defaults, ...options};
       this.isOpen = false;
-      this.$anchor = this.$el.children('a').first();
-      this.$menu = this.$el.children('ul').first();
-      this.$floatingBtns = this.$el.find('ul .btn-floating');
-      this.$floatingBtnsReverse = this.$el.find('ul .btn-floating').reverse();
+      this._anchor = this.el.querySelector('a');
+      this._menu = this.el.querySelector('ul');
+      this._floatingBtns = Array.from(this.el.querySelectorAll('ul .btn-floating'));
+      this._floatingBtnsReverse = this._floatingBtns.reverse();
       this.offsetY = 0;
       this.offsetX = 0;
 
-      this.$el.addClass(`direction-${this.options.direction}`);
-      if (this.options.direction === 'top') {
+      this.el.classList.add(`direction-${this.options.direction}`);
+      if (this.options.direction === 'top')
         this.offsetY = 40;
-      } else if (this.options.direction === 'right') {
+      else if (this.options.direction === 'right')
         this.offsetX = -40;
-      } else if (this.options.direction === 'bottom') {
+      else if (this.options.direction === 'bottom')
         this.offsetY = -40;
-      } else {
+      else
         this.offsetX = 40;
-      }
       this._setupEventHandlers();
     }
 
@@ -63,25 +58,16 @@
       return super.init(this, els, options);
     }
 
-    /**
-     * Get Instance
-     */
     static getInstance(el) {
       let domElem = !!el.jquery ? el[0] : el;
       return domElem.M_FloatingActionButton;
     }
 
-    /**
-     * Teardown component
-     */
     destroy() {
       this._removeEventHandlers();
-      this.el.M_FloatingActionButton = undefined;
+      (this.el as any).M_FloatingActionButton = undefined;
     }
 
-    /**
-     * Setup Event Handlers
-     */
     _setupEventHandlers() {
       this._handleFABClickBound = this._handleFABClick.bind(this);
       this._handleOpenBound = this.open.bind(this);
@@ -95,9 +81,6 @@
       }
     }
 
-    /**
-     * Remove Event Handlers
-     */
     _removeEventHandlers() {
       if (this.options.hoverEnabled && !this.options.toolbarEnabled) {
         this.el.removeEventListener('mouseenter', this._handleOpenBound);
@@ -107,9 +90,6 @@
       }
     }
 
-    /**
-     * Handle FAB Click
-     */
     _handleFABClick() {
       if (this.isOpen) {
         this.close();
@@ -118,58 +98,41 @@
       }
     }
 
-    /**
-     * Handle Document Click
-     * @param {Event} e
-     */
     _handleDocumentClick(e) {
-      if (!$(e.target).closest(this.$menu).length) {
+      const elem = <HTMLElement>e.target;
+      if (elem !== this._menu) this.close;
+      /*
+      if (!elem.closest(this.$menu)) {
         this.close();
-      }
+      }*/
     }
 
-    /**
-     * Open FAB
-     */
     open() {
-      if (this.isOpen) {
-        return;
-      }
-
-      if (this.options.toolbarEnabled) {
+      if (this.isOpen) return;
+      if (this.options.toolbarEnabled)
         this._animateInToolbar();
-      } else {
+      else
         this._animateInFAB();
-      }
       this.isOpen = true;
     }
 
-    /**
-     * Close FAB
-     */
     close() {
-      if (!this.isOpen) {
-        return;
-      }
-
+      if (!this.isOpen) return;
       if (this.options.toolbarEnabled) {
         window.removeEventListener('scroll', this._handleCloseBound, true);
         document.body.removeEventListener('click', this._handleDocumentClickBound, true);
         this._animateOutToolbar();
-      } else {
+      }
+      else {
         this._animateOutFAB();
       }
       this.isOpen = false;
     }
 
-    /**
-     * Classic FAB Menu open
-     */
     _animateInFAB() {
-      this.$el.addClass('active');
-
+      this.el.classList.add('active');
       let time = 0;
-      this.$floatingBtnsReverse.each((el) => {
+      this._floatingBtnsReverse.forEach((el) => {
         anim({
           targets: el,
           opacity: 1,
@@ -184,11 +147,8 @@
       });
     }
 
-    /**
-     * Classic FAB Menu close
-     */
     _animateOutFAB() {
-      this.$floatingBtnsReverse.each((el) => {
+      this._floatingBtnsReverse.forEach((el) => {
         anim.remove(el);
         anim({
           targets: el,
@@ -199,23 +159,24 @@
           duration: 175,
           easing: 'easeOutQuad',
           complete: () => {
-            this.$el.removeClass('active');
+            this.el.classList.remove('active');
           }
         });
       });
     }
 
-    /**
-     * Toolbar transition Menu open
-     */
     _animateInToolbar() {
       let scaleFactor;
       let windowWidth = window.innerWidth;
       let windowHeight = window.innerHeight;
       let btnRect = this.el.getBoundingClientRect();
-      let backdrop = $('<div class="fab-backdrop"></div>');
-      let fabColor = this.$anchor.css('background-color');
-      this.$anchor.append(backdrop);
+
+      const backdrop =  document.createElement('div');
+      backdrop.classList.add('fab-backdrop'); //  $('<div class="fab-backdrop"></div>');
+
+      const fabColor = getComputedStyle(this._anchor).backgroundColor; // css('background-color');
+
+      this._anchor.append(backdrop);
 
       this.offsetX = btnRect.left - windowWidth / 2 + btnRect.width / 2;
       this.offsetY = windowHeight - btnRect.bottom;
@@ -225,50 +186,35 @@
       this.btnWidth = btnRect.width;
 
       // Set initial state
-      this.$el.addClass('active');
-      this.$el.css({
-        'text-align': 'center',
-        width: '100%',
-        bottom: 0,
-        left: 0,
-        transform: 'translateX(' + this.offsetX + 'px)',
-        transition: 'none'
-      });
-      this.$anchor.css({
-        transform: 'translateY(' + -this.offsetY + 'px)',
-        transition: 'none'
-      });
-      backdrop.css({
-        'background-color': fabColor
-      });
+      this.el.classList.add('active');
+      this.el.style.textAlign = 'center';
+      this.el.style.width = '100%';
+      this.el.style.bottom = '0';
+      this.el.style.left = '0';
+      this.el.style.transform = 'translateX(' + this.offsetX + 'px)';
+      this.el.style.transition = 'none';
+
+      this._anchor.style.transform = `translateY(${this.offsetY}px`;
+      this._anchor.style.transition = 'none';
+
+      (<HTMLElement>backdrop).style.backgroundColor = fabColor;
 
       setTimeout(() => {
-        this.$el.css({
-          transform: '',
-          transition:
-            'transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s'
-        });
-        this.$anchor.css({
-          overflow: 'visible',
-          transform: '',
-          transition: 'transform .2s'
-        });
+        this.el.style.transform = '';
+        this.el.style.transition  = 'transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s';
+
+        this._anchor.style.overflow = 'visible';
+        this._anchor.style.transform = '';
+        this._anchor.style.transition = 'transform .2s';
 
         setTimeout(() => {
-          this.$el.css({
-            overflow: 'hidden',
-            'background-color': fabColor
-          });
-          backdrop.css({
-            transform: 'scale(' + scaleFactor + ')',
-            transition: 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)'
-          });
-          this.$menu
-            .children('li')
-            .children('a')
-            .css({
-              opacity: 1
-            });
+          this.el.style.overflow = 'hidden';
+          this.el.style.backgroundColor = fabColor;
+
+          backdrop.style.transform = 'scale(' + scaleFactor + ')';
+          backdrop.style.transition = 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)';
+
+          this._menu.querySelectorAll('li > a').forEach((a: HTMLAnchorElement) => a.style.opacity = '1');
 
           // Scroll to close.
           this._handleDocumentClickBound = this._handleDocumentClick.bind(this);
@@ -278,10 +224,12 @@
       }, 0);
     }
 
-    /**
-     * Toolbar transition Menu close
-     */
+
+
+
     _animateOutToolbar() {
+      return;
+      /*
       let windowWidth = window.innerWidth;
       let windowHeight = window.innerHeight;
       let backdrop = this.$el.find('.fab-backdrop');
@@ -296,19 +244,20 @@
         'background-color': 'transparent',
         transition: 'none'
       });
-      this.$anchor.css({
-        transition: 'none'
-      });
+      // this.$anchor.css({
+      //   transition: 'none'
+      // });
       backdrop.css({
         transform: 'scale(0)',
         'background-color': fabColor
       });
-      this.$menu
-        .children('li')
-        .children('a')
-        .css({
-          opacity: ''
-        });
+
+      // this.$menu
+      //   .children('li')
+      //   .children('a')
+      //   .css({
+      //     opacity: ''
+      //   });
 
       setTimeout(() => {
         backdrop.remove();
@@ -323,32 +272,24 @@
           'background-color': '',
           transform: 'translate3d(' + -this.offsetX + 'px,0,0)'
         });
-        this.$anchor.css({
-          overflow: '',
-          transform: 'translate3d(0,' + this.offsetY + 'px,0)'
-        });
+        // this.$anchor.css({
+        //   overflow: '',
+        //   transform: 'translate3d(0,' + this.offsetY + 'px,0)'
+        // });
 
         setTimeout(() => {
           this.$el.css({
             transform: 'translate3d(0,0,0)',
             transition: 'transform .2s'
           });
-          this.$anchor.css({
-            transform: 'translate3d(0,0,0)',
-            transition: 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)'
-          });
+          // this.$anchor.css({
+          //   transform: 'translate3d(0,0,0)',
+          //   transition: 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)'
+          // });
         }, 20);
       }, 200);
+      */
     }
   }
 
-  M.FloatingActionButton = FloatingActionButton;
-
-  if (M.jQueryLoaded) {
-    M.initializeJqueryWrapper(
-      FloatingActionButton,
-      'floatingActionButton',
-      'M_FloatingActionButton'
-    );
-  }
-})(cash, M.anime);
+  

package/src/cards.ts

@@ -0,0 +1,54 @@
+import anim from "animejs";
+
+export class Cards {
+
+  static Init() {
+
+    document.addEventListener("DOMContentLoaded", () => {
+      document.body.addEventListener('click', e => {
+        const trigger = <HTMLElement>e.target;
+
+        const card: HTMLElement = trigger.closest('.card');
+        if (!card) return;
+
+        const cardReveal = <HTMLElement|null>Array.from(card.children).find(elem => elem.classList.contains('card-reveal'));
+        if (!cardReveal) return;
+        const initialOverflow = getComputedStyle(card).overflow;
+
+        // Close Card        
+        const closeArea = cardReveal.querySelector('.card-reveal .card-title');
+        if (trigger === closeArea || closeArea.contains(trigger)) {
+          anim({
+            targets: cardReveal,
+            translateY: 0,
+            duration: 225,
+            easing: 'easeInOutQuad',
+            complete: (anim) => {
+              cardReveal.style.display = 'none';
+              card.style.overflow = initialOverflow;
+            }
+          });
+        };
+        
+        // Reveal Card
+        const activators = card.querySelectorAll('.activator');
+        activators.forEach(activator => {
+          if (trigger === activator || activator.contains(trigger)) {
+            card.style.overflow = 'hidden';
+            cardReveal.style.display = 'block';
+            anim({
+              targets: cardReveal,
+              translateY: '-100%',
+              duration: 300,
+              easing: 'easeInOutQuad'
+            });
+          }
+        });
+        
+
+      });     
+    });
+
+  }  
+}
+