@materializecss/materialize 1.2.2 → 2.0.1-alpha

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

@@ -1,34 +1,27 @@
-(function($) {
-  'use strict';
+import { Component } from "./component";
+import { M } from "./global";
 
   let _defaults = {
     responsiveThreshold: 0 // breakpoint for swipeable
   };
 
-  class Parallax extends Component {
+  export class Parallax extends Component {
+    private _enabled: boolean;
+    private _img: HTMLImageElement;
+    private _handleImageLoadBound: any;
+    static _parallaxes: any;
+    static _handleScrollThrottled: any;
+    static _handleWindowResizeThrottled: () => any;
+
     constructor(el, options) {
       super(Parallax, el, options);
-
-      this.el.M_Parallax = this;
-
-      /**
-       * Options for the Parallax
-       * @member Parallax#options
-       * @prop {Number} responsiveThreshold
-       */
-      this.options = $.extend({}, Parallax.defaults, options);
+      (this.el as any).M_Parallax = this;
+      this.options = {...Parallax.defaults, ...options};
       this._enabled = window.innerWidth > this.options.responsiveThreshold;
-
-      this.$img = this.$el.find('img').first();
-      this.$img.each(function() {
-        let el = this;
-        if (el.complete) $(el).trigger('load');
-      });
-
+      this._img = this.el.querySelector('img');      
       this._updateParallax();
       this._setupEventHandlers();
       this._setupStyles();
-
       Parallax._parallaxes.push(this);
     }
 
@@ -40,23 +33,16 @@
       return super.init(this, els, options);
     }
 
-    /**
-     * Get Instance
-     */
     static getInstance(el) {
       let domElem = !!el.jquery ? el[0] : el;
       return domElem.M_Parallax;
     }
 
-    /**
-     * Teardown component
-     */
     destroy() {
       Parallax._parallaxes.splice(Parallax._parallaxes.indexOf(this), 1);
-      this.$img[0].style.transform = '';
+      this._img.style.transform = '';
       this._removeEventHandlers();
-
-      this.$el[0].M_Parallax = undefined;
+      (this.el as any).M_Parallax = undefined;
     }
 
     static _handleScroll() {
@@ -76,20 +62,17 @@
 
     _setupEventHandlers() {
       this._handleImageLoadBound = this._handleImageLoad.bind(this);
-      this.$img[0].addEventListener('load', this._handleImageLoadBound);
-
+      this._img.addEventListener('load', this._handleImageLoadBound);
       if (Parallax._parallaxes.length === 0) {
         Parallax._handleScrollThrottled = M.throttle(Parallax._handleScroll, 5);
         window.addEventListener('scroll', Parallax._handleScrollThrottled);
-
         Parallax._handleWindowResizeThrottled = M.throttle(Parallax._handleWindowResize, 5);
         window.addEventListener('resize', Parallax._handleWindowResizeThrottled);
       }
     }
 
     _removeEventHandlers() {
-      this.$img[0].removeEventListener('load', this._handleImageLoadBound);
-
+      this._img.removeEventListener('load', this._handleImageLoadBound);
       if (Parallax._parallaxes.length === 0) {
         window.removeEventListener('scroll', Parallax._handleScrollThrottled);
         window.removeEventListener('resize', Parallax._handleWindowResizeThrottled);
@@ -97,42 +80,46 @@
     }
 
     _setupStyles() {
-      this.$img[0].style.opacity = 1;
+      this._img.style.opacity = '1';
     }
 
     _handleImageLoad() {
       this._updateParallax();
     }
 
-    _updateParallax() {
-      let containerHeight = this.$el.height() > 0 ? this.el.parentNode.offsetHeight : 500;
-      let imgHeight = this.$img[0].offsetHeight;
-      let parallaxDist = imgHeight - containerHeight;
-      let bottom = this.$el.offset().top + containerHeight;
-      let top = this.$el.offset().top;
-      let scrollTop = M.getDocumentScrollTop();
-      let windowHeight = window.innerHeight;
-      let windowBottom = scrollTop + windowHeight;
-      let percentScrolled = (windowBottom - top) / (containerHeight + windowHeight);
-      let parallax = parallaxDist * percentScrolled;
+    private _offset(el: Element) {
+      const box = el.getBoundingClientRect();
+      const docElem = document.documentElement;
+      return {
+        top: box.top + window.pageYOffset - docElem.clientTop,
+        left: box.left + window.pageXOffset - docElem.clientLeft
+      };
+    }
 
+    _updateParallax() {
+      const containerHeight = this.el.getBoundingClientRect().height > 0 ? (this.el.parentNode as any).offsetHeight : 500;
+      const imgHeight = this._img.offsetHeight;
+      const parallaxDist = imgHeight - containerHeight;
+      const bottom = this._offset(this.el).top + containerHeight;
+      const top = this._offset(this.el).top;
+      const scrollTop = M.getDocumentScrollTop();
+      const windowHeight = window.innerHeight;
+      const windowBottom = scrollTop + windowHeight;
+      const percentScrolled = (windowBottom - top) / (containerHeight + windowHeight);
+      const parallax = parallaxDist * percentScrolled;
+      
       if (!this._enabled) {
-        this.$img[0].style.transform = '';
-      } else if (bottom > scrollTop && top < scrollTop + windowHeight) {
-        this.$img[0].style.transform = `translate3D(-50%, ${parallax}px, 0)`;
+        this._img.style.transform = '';
+      }
+      else if (bottom > scrollTop && top < scrollTop + windowHeight) {
+        this._img.style.transform = `translate3D(-50%, ${parallax}px, 0)`;
       }
     }
-  }
 
-  /**
-   * @static
-   * @memberof Parallax
-   */
-  Parallax._parallaxes = [];
+    static {
+      Parallax._parallaxes = [];
+    }
+  }
 
-  M.Parallax = Parallax;
+  
 
-  if (M.jQueryLoaded) {
-    M.initializeJqueryWrapper(Parallax, 'parallax', 'M_Parallax');
-  }
-})(cash);

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

@@ -1,5 +1,5 @@
-(function($) {
-  'use strict';
+import { Component } from "./component";
+import { M } from "./global";
 
   let _defaults = {
     top: 0,
@@ -8,29 +8,15 @@
     onPositionChange: null
   };
 
-  /**
-   * @class
-   *
-   */
-  class Pushpin extends Component {
-    /**
-     * Construct Pushpin instance
-     * @constructor
-     * @param {Element} el
-     * @param {Object} options
-     */
+  export class Pushpin extends Component {
+    static _pushpins: any[];
+    originalOffset: any;
+
     constructor(el, options) {
       super(Pushpin, el, options);
-
-      this.el.M_Pushpin = this;
-
-      /**
-       * Options for the modal
-       * @member Pushpin#options
-       */
-      this.options = $.extend({}, Pushpin.defaults, options);
-
-      this.originalOffset = this.el.offsetTop;
+      (this.el as any).M_Pushpin = this;
+      this.options = {...Pushpin.defaults, ...options};
+      this.originalOffset = (this.el as HTMLElement).offsetTop;
       Pushpin._pushpins.push(this);
       this._setupEventHandlers();
       this._updatePosition();
@@ -44,28 +30,21 @@
       return super.init(this, els, options);
     }
 
-    /**
-     * Get Instance
-     */
     static getInstance(el) {
       let domElem = !!el.jquery ? el[0] : el;
       return domElem.M_Pushpin;
     }
 
-    /**
-     * Teardown component
-     */
     destroy() {
-      this.el.style.top = null;
+      (this.el as HTMLElement).style.top = null;
       this._removePinClasses();
-
       // Remove pushpin Inst
       let index = Pushpin._pushpins.indexOf(this);
       Pushpin._pushpins.splice(index, 1);
       if (Pushpin._pushpins.length === 0) {
         this._removeEventHandlers();
       }
-      this.el.M_Pushpin = undefined;
+      (this.el as any).M_Pushpin = undefined;
     }
 
     static _updateElements() {
@@ -92,7 +71,7 @@
         !this.el.classList.contains('pinned')
       ) {
         this._removePinClasses();
-        this.el.style.top = `${this.options.offset}px`;
+        (this.el as HTMLElement).style.top = `${this.options.offset}px`;
         this.el.classList.add('pinned');
 
         // onPositionChange callback
@@ -104,7 +83,7 @@
       // Add pin-top (when scrolled position is above top)
       if (scrolled < this.options.top && !this.el.classList.contains('pin-top')) {
         this._removePinClasses();
-        this.el.style.top = 0;
+        (this.el as HTMLElement).style.top = '0';
         this.el.classList.add('pin-top');
 
         // onPositionChange callback
@@ -117,7 +96,7 @@
       if (scrolled > this.options.bottom && !this.el.classList.contains('pin-bottom')) {
         this._removePinClasses();
         this.el.classList.add('pin-bottom');
-        this.el.style.top = `${this.options.bottom - this.originalOffset}px`;
+        (this.el as HTMLElement).style.top = `${this.options.bottom - this.originalOffset}px`;
 
         // onPositionChange callback
         if (typeof this.options.onPositionChange === 'function') {
@@ -132,17 +111,10 @@
       this.el.classList.remove('pinned');
       this.el.classList.remove('pin-bottom');
     }
-  }
-
-  /**
-   * @static
-   * @memberof Pushpin
-   */
-  Pushpin._pushpins = [];
 
-  M.Pushpin = Pushpin;
+    static {
+      Pushpin._pushpins = [];
+    }
+  }  
 
-  if (M.jQueryLoaded) {
-    M.initializeJqueryWrapper(Pushpin, 'pushpin', 'M_Pushpin');
-  }
-})(cash);
+  

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

@@ -1,35 +1,27 @@
-(function($, anim) {
-  'use strict';
+import { Component } from "./component";
+import anim from "animejs";
 
-  let _defaults = {};
+const _defaults = {};
 
-  /**
-   * @class
-   *
-   */
-  class Range extends Component {
-    /**
-     * Construct Range instance
-     * @constructor
-     * @param {Element} el
-     * @param {Object} options
-     */
-    constructor(el, options) {
-      super(Range, el, options);
+// TODO: !!!!!
 
-      this.el.M_Range = this;
-
-      /**
-       * Options for the range
-       * @member Range#options
-       */
-      this.options = $.extend({}, Range.defaults, options);
+  export class Range extends Component {
+    el: HTMLInputElement;
+    private _mousedown: boolean;
+    private _handleRangeChangeBound: any;
+    private _handleRangeMousedownTouchstartBound: any;
+    private _handleRangeInputMousemoveTouchmoveBound: any;
+    private _handleRangeMouseupTouchendBound: any;
+    private _handleRangeBlurMouseoutTouchleaveBound: any;
+    value: HTMLElement;
+    thumb: HTMLElement;
 
+    constructor(el, options) {
+      super(Range, el, options);
+      (this.el as any).M_Range = this;
+      this.options = {...Range.defaults, ...options};
       this._mousedown = false;
-
-      // Setup
       this._setupThumb();
-
       this._setupEventHandlers();
     }
 
@@ -41,149 +33,97 @@
       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_Range;
     }
 
-    /**
-     * Teardown component
-     */
     destroy() {
       this._removeEventHandlers();
       this._removeThumb();
-      this.el.M_Range = undefined;
+      (this.el as any).M_Range = undefined;
     }
 
-    /**
-     * Setup Event Handlers
-     */
     _setupEventHandlers() {
       this._handleRangeChangeBound = this._handleRangeChange.bind(this);
       this._handleRangeMousedownTouchstartBound = this._handleRangeMousedownTouchstart.bind(this);
-      this._handleRangeInputMousemoveTouchmoveBound = this._handleRangeInputMousemoveTouchmove.bind(
-        this
-      );
+      this._handleRangeInputMousemoveTouchmoveBound = this._handleRangeInputMousemoveTouchmove.bind(this);
       this._handleRangeMouseupTouchendBound = this._handleRangeMouseupTouchend.bind(this);
-      this._handleRangeBlurMouseoutTouchleaveBound = this._handleRangeBlurMouseoutTouchleave.bind(
-        this
-      );
-
+      this._handleRangeBlurMouseoutTouchleaveBound = this._handleRangeBlurMouseoutTouchleave.bind(this);
       this.el.addEventListener('change', this._handleRangeChangeBound);
-
       this.el.addEventListener('mousedown', this._handleRangeMousedownTouchstartBound);
       this.el.addEventListener('touchstart', this._handleRangeMousedownTouchstartBound);
-
       this.el.addEventListener('input', this._handleRangeInputMousemoveTouchmoveBound);
       this.el.addEventListener('mousemove', this._handleRangeInputMousemoveTouchmoveBound);
       this.el.addEventListener('touchmove', this._handleRangeInputMousemoveTouchmoveBound);
-
       this.el.addEventListener('mouseup', this._handleRangeMouseupTouchendBound);
       this.el.addEventListener('touchend', this._handleRangeMouseupTouchendBound);
-
       this.el.addEventListener('blur', this._handleRangeBlurMouseoutTouchleaveBound);
       this.el.addEventListener('mouseout', this._handleRangeBlurMouseoutTouchleaveBound);
       this.el.addEventListener('touchleave', this._handleRangeBlurMouseoutTouchleaveBound);
     }
 
-    /**
-     * Remove Event Handlers
-     */
     _removeEventHandlers() {
       this.el.removeEventListener('change', this._handleRangeChangeBound);
-
       this.el.removeEventListener('mousedown', this._handleRangeMousedownTouchstartBound);
       this.el.removeEventListener('touchstart', this._handleRangeMousedownTouchstartBound);
-
       this.el.removeEventListener('input', this._handleRangeInputMousemoveTouchmoveBound);
       this.el.removeEventListener('mousemove', this._handleRangeInputMousemoveTouchmoveBound);
       this.el.removeEventListener('touchmove', this._handleRangeInputMousemoveTouchmoveBound);
-
       this.el.removeEventListener('mouseup', this._handleRangeMouseupTouchendBound);
       this.el.removeEventListener('touchend', this._handleRangeMouseupTouchendBound);
-
       this.el.removeEventListener('blur', this._handleRangeBlurMouseoutTouchleaveBound);
       this.el.removeEventListener('mouseout', this._handleRangeBlurMouseoutTouchleaveBound);
       this.el.removeEventListener('touchleave', this._handleRangeBlurMouseoutTouchleaveBound);
     }
 
-    /**
-     * Handle Range Change
-     * @param {Event} e
-     */
     _handleRangeChange() {
-      $(this.value).html(this.$el.val());
-
-      if (!$(this.thumb).hasClass('active')) {
+      this.value.innerHTML = this.el.value;
+      if (!this.thumb.classList.contains('active')) {
         this._showRangeBubble();
       }
-
-      let offsetLeft = this._calcRangeOffset();
-      $(this.thumb)
-        .addClass('active')
-        .css('left', offsetLeft + 'px');
+      const offsetLeft = this._calcRangeOffset();
+      this.thumb.classList.add('active');
+      this.thumb.style.left = offsetLeft+'px';
     }
 
-    /**
-     * Handle Range Mousedown and Touchstart
-     * @param {Event} e
-     */
     _handleRangeMousedownTouchstart(e) {
       // Set indicator value
-      $(this.value).html(this.$el.val());
-
+      this.value.innerHTML = this.el.value;
       this._mousedown = true;
-      this.$el.addClass('active');
-
-      if (!$(this.thumb).hasClass('active')) {
+      this.el.classList.add('active');
+      if (!this.thumb.classList.contains('active')) {
         this._showRangeBubble();
       }
-
       if (e.type !== 'input') {
-        let offsetLeft = this._calcRangeOffset();
-        $(this.thumb)
-          .addClass('active')
-          .css('left', offsetLeft + 'px');
+        const offsetLeft = this._calcRangeOffset();
+        this.thumb.classList.add('active');
+        this.thumb.style.left = offsetLeft+'px';
       }
     }
 
-    /**
-     * Handle Range Input, Mousemove and Touchmove
-     */
     _handleRangeInputMousemoveTouchmove() {
       if (this._mousedown) {
-        if (!$(this.thumb).hasClass('active')) {
+        if (!this.thumb.classList.contains('active')) {
           this._showRangeBubble();
         }
-
-        let offsetLeft = this._calcRangeOffset();
-        $(this.thumb)
-          .addClass('active')
-          .css('left', offsetLeft + 'px');
-        $(this.value).html(this.$el.val());
+        const offsetLeft = this._calcRangeOffset();
+        this.thumb.classList.add('active');
+        this.thumb.style.left = offsetLeft+'px';
+        this.value.innerHTML = this.el.value;
       }
     }
 
-    /**
-     * Handle Range Mouseup and Touchend
-     */
     _handleRangeMouseupTouchend() {
       this._mousedown = false;
-      this.$el.removeClass('active');
+      this.el.classList.remove('active');
     }
 
-    /**
-     * Handle Range Blur, Mouseout and Touchleave
-     */
     _handleRangeBlurMouseoutTouchleave() {
       if (!this._mousedown) {
-        let paddingLeft = parseInt(this.$el.css('padding-left'));
-        let marginLeft = 7 + paddingLeft + 'px';
-
-        if ($(this.thumb).hasClass('active')) {
+        const paddingLeft = parseInt(getComputedStyle(this.el).paddingLeft);
+        const marginLeft = 7 + paddingLeft + 'px';
+        if (this.thumb.classList.contains('active')) {
           anim.remove(this.thumb);
           anim({
             targets: this.thumb,
@@ -195,39 +135,26 @@
             duration: 100
           });
         }
-        $(this.thumb).removeClass('active');
+        this.thumb.classList.remove('active');
       }
     }
 
-    /**
-     * Setup dropdown
-     */
     _setupThumb() {
       this.thumb = document.createElement('span');
       this.value = document.createElement('span');
-      $(this.thumb).addClass('thumb');
-      $(this.value).addClass('value');
-      $(this.thumb).append(this.value);
-      this.$el.after(this.thumb);
+      this.thumb.classList.add('thumb');
+      this.value.classList.add('value');
+      this.thumb.append(this.value);
+      this.el.after(this.thumb);
     }
 
-    /**
-     * Remove dropdown
-     */
     _removeThumb() {
-      $(this.thumb).remove();
+      this.thumb.remove();
     }
 
-    /**
-     * morph thumb into bubble
-     */
     _showRangeBubble() {
-      let paddingLeft = parseInt(
-        $(this.thumb)
-          .parent()
-          .css('padding-left')
-      );
-      let marginLeft = -7 + paddingLeft + 'px'; // TODO: fix magic number?
+      const paddingLeft = parseInt(getComputedStyle(this.thumb.parentElement).paddingLeft);
+      const marginLeft = -7 + paddingLeft + 'px'; // TODO: fix magic number?
       anim.remove(this.thumb);
       anim({
         targets: this.thumb,
@@ -240,24 +167,16 @@
       });
     }
 
-    /**
-     * Calculate the offset of the thumb
-     * @return {Number}  offset in pixels
-     */
-    _calcRangeOffset() {
-      let width = this.$el.width() - 15;
-      let max = parseFloat(this.$el.attr('max')) || 100; // Range default max
-      let min = parseFloat(this.$el.attr('min')) || 0; // Range default min
-      let percent = (parseFloat(this.$el.val()) - min) / (max - min);
+    _calcRangeOffset(): number {
+      const width = this.el.getBoundingClientRect().width - 15;
+      const max = parseFloat(this.el.getAttribute('max')) || 100; // Range default max
+      const min = parseFloat(this.el.getAttribute('min')) || 0; // Range default min      
+      const percent = (parseFloat(this.el.value) - min) / (max - min);
       return percent * width;
     }
-  }
-
-  M.Range = Range;
 
-  if (M.jQueryLoaded) {
-    M.initializeJqueryWrapper(Range, 'range', 'M_Range');
+    static Init(){
+      Range.init(document.querySelectorAll('input[type=range]'), {});
+    }
   }
 
-  Range.init($('input[type=range]'));
-})(cash, M.anime);