@materializecss/materialize 1.2.2 → 2.0.1-alpha

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

@@ -1,5 +1,5 @@
-(function($) {
-  'use strict';
+import { Component } from "./component";
+import { M } from "./global";
 
   let _defaults = {
     duration: 200, // ms
@@ -13,53 +13,58 @@
     onCycleTo: null // Callback for when a new slide is cycled to.
   };
 
-  /**
-   * @class
-   *
-   */
-  class Carousel extends Component {
-    /**
-     * Construct Carousel instance
-     * @constructor
-     * @param {Element} el
-     * @param {Object} options
-     */
-    constructor(el, options) {
+  export class Carousel extends Component {
+    el: HTMLElement;
+    hasMultipleSlides: boolean;
+    showIndicators: boolean;
+    noWrap: any;
+    pressed: boolean;
+    dragged: boolean;
+    offset: number;
+    target: number;
+    images: HTMLElement[];
+    itemWidth: any;
+    itemHeight: any;
+    dim: number;
+    _autoScrollBound: any;
+    _trackBound: any;
+    _indicators: any;
+    count: number;
+    xform: string;
+    private _handleCarouselTapBound: any;
+    private _handleCarouselDragBound: any;
+    private _handleCarouselReleaseBound: any;
+    private _handleCarouselClickBound: any;
+    _handleIndicatorClickBound: any;
+    _handleThrottledResizeBound: any;
+    verticalDragged: boolean;
+    reference: any;
+    referenceY: any;
+    velocity: number;
+    frame: number;
+    timestamp: number;
+    ticker: NodeJS.Timer;
+    amplitude: number;
+    center: number = 0;
+    imageHeight: any;
+    scrollingTimeout: any;
+    oneTimeCallback: any;
+
+    constructor(el: Element, options: Object) {
       super(Carousel, el, options);
-
-      this.el.M_Carousel = this;
-
-      /**
-       * Options for the carousel
-       * @member Carousel#options
-       * @prop {Number} duration
-       * @prop {Number} dist
-       * @prop {Number} shift
-       * @prop {Number} padding
-       * @prop {Number} numVisible
-       * @prop {Boolean} fullWidth
-       * @prop {Boolean} indicators
-       * @prop {Boolean} noWrap
-       * @prop {Function} onCycleTo
-       */
-      this.options = $.extend({}, Carousel.defaults, options);
+      (this.el as any).M_Carousel = this;
+      this.options = {...Carousel.defaults, ...options};
 
       // Setup
-      this.hasMultipleSlides = this.$el.find('.carousel-item').length > 1;
+      this.hasMultipleSlides = this.el.querySelectorAll('.carousel-item').length > 1;
       this.showIndicators = this.options.indicators && this.hasMultipleSlides;
       this.noWrap = this.options.noWrap || !this.hasMultipleSlides;
       this.pressed = false;
       this.dragged = false;
       this.offset = this.target = 0;
       this.images = [];
-      this.itemWidth = this.$el
-        .find('.carousel-item')
-        .first()
-        .innerWidth();
-      this.itemHeight = this.$el
-        .find('.carousel-item')
-        .first()
-        .innerHeight();
+      this.itemWidth = this.el.querySelector('.carousel-item').clientWidth;
+      this.itemHeight = this.el.querySelector('.carousel-item').clientHeight;
       this.dim = this.itemWidth * 2 + this.options.padding || 1; // Make sure dim is non zero for divisions.
       this._autoScrollBound = this._autoScroll.bind(this);
       this._trackBound = this._track.bind(this);
@@ -71,28 +76,29 @@
 
         // Offset fixed items when indicators.
         if (this.showIndicators) {
-          this.$el.find('.carousel-fixed-item').addClass('with-indicators');
+          this.el.querySelector('.carousel-fixed-item')?.classList.add('with-indicators');
         }
       }
 
       // Iterate through slides
-      this.$indicators = $('<ul class="indicators"></ul>');
-      this.$el.find('.carousel-item').each((el, i) => {
-        this.images.push(el);
-        if (this.showIndicators) {
-          let $indicator = $('<li class="indicator-item"></li>');
+      this._indicators = document.createElement('ul');
+      this._indicators.classList.add('indicators');
 
-          // Add active to first by default.
+      this.el.querySelectorAll('.carousel-item').forEach((item: HTMLElement, i) => {
+        this.images.push(item);
+        if (this.showIndicators) {
+          const indicator = document.createElement('li');
+          indicator.classList.add('indicator-item');
           if (i === 0) {
-            $indicator[0].classList.add('active');
+            indicator.classList.add('active');
           }
-
-          this.$indicators.append($indicator);
+          this._indicators.appendChild(indicator);
         }
       });
-      if (this.showIndicators) {
-        this.$el.append(this.$indicators);
-      }
+
+      if (this.showIndicators)
+        this.el.appendChild(this._indicators);
+
       this.count = this.images.length;
 
       // Cap numVisible at count
@@ -121,60 +127,43 @@
       return super.init(this, els, options);
     }
 
-    /**
-     * Get Instance
-     */
     static getInstance(el) {
       let domElem = !!el.jquery ? el[0] : el;
       return domElem.M_Carousel;
     }
 
-    /**
-     * Teardown component
-     */
     destroy() {
       this._removeEventHandlers();
-      this.el.M_Carousel = undefined;
+      (this.el as any).M_Carousel = undefined;
     }
 
-    /**
-     * Setup Event Handlers
-     */
     _setupEventHandlers() {
       this._handleCarouselTapBound = this._handleCarouselTap.bind(this);
       this._handleCarouselDragBound = this._handleCarouselDrag.bind(this);
       this._handleCarouselReleaseBound = this._handleCarouselRelease.bind(this);
       this._handleCarouselClickBound = this._handleCarouselClick.bind(this);
-
       if (typeof window.ontouchstart !== 'undefined') {
         this.el.addEventListener('touchstart', this._handleCarouselTapBound);
         this.el.addEventListener('touchmove', this._handleCarouselDragBound);
         this.el.addEventListener('touchend', this._handleCarouselReleaseBound);
       }
-
       this.el.addEventListener('mousedown', this._handleCarouselTapBound);
       this.el.addEventListener('mousemove', this._handleCarouselDragBound);
       this.el.addEventListener('mouseup', this._handleCarouselReleaseBound);
       this.el.addEventListener('mouseleave', this._handleCarouselReleaseBound);
       this.el.addEventListener('click', this._handleCarouselClickBound);
-
-      if (this.showIndicators && this.$indicators) {
+      if (this.showIndicators && this._indicators) {
         this._handleIndicatorClickBound = this._handleIndicatorClick.bind(this);
-        this.$indicators.find('.indicator-item').each((el, i) => {
+        this._indicators.querySelectorAll('.indicator-item').forEach((el) => {
           el.addEventListener('click', this._handleIndicatorClickBound);
         });
       }
-
       // Resize
-      let throttledResize = M.throttle(this._handleResize, 200);
+      let throttledResize = M.throttle(this._handleResize, 200, null);
       this._handleThrottledResizeBound = throttledResize.bind(this);
-
       window.addEventListener('resize', this._handleThrottledResizeBound);
     }
 
-    /**
-     * Remove Event Handlers
-     */
     _removeEventHandlers() {
       if (typeof window.ontouchstart !== 'undefined') {
         this.el.removeEventListener('touchstart', this._handleCarouselTapBound);
@@ -186,23 +175,17 @@
       this.el.removeEventListener('mouseup', this._handleCarouselReleaseBound);
       this.el.removeEventListener('mouseleave', this._handleCarouselReleaseBound);
       this.el.removeEventListener('click', this._handleCarouselClickBound);
-
-      if (this.showIndicators && this.$indicators) {
-        this.$indicators.find('.indicator-item').each((el, i) => {
+      if (this.showIndicators && this._indicators) {
+        this._indicators.querySelectorAll('.indicator-item').forEach((el) => {
           el.removeEventListener('click', this._handleIndicatorClickBound);
         });
       }
-
       window.removeEventListener('resize', this._handleThrottledResizeBound);
     }
 
-    /**
-     * Handle Carousel Tap
-     * @param {Event} e
-     */
     _handleCarouselTap(e) {
       // Fixes firefox draggable image bug
-      if (e.type === 'mousedown' && $(e.target).is('img')) {
+      if (e.type === 'mousedown' && (<HTMLElement>e.target).tagName === 'IMG') {
         e.preventDefault();
       }
       this.pressed = true;
@@ -218,10 +201,6 @@
       this.ticker = setInterval(this._trackBound, 100);
     }
 
-    /**
-     * Handle Carousel Drag
-     * @param {Event} e
-     */
     _handleCarouselDrag(e) {
       let x, y, delta, deltaY;
       if (this.pressed) {
@@ -246,7 +225,6 @@
           this.verticalDragged = true;
         }
       }
-
       if (this.dragged) {
         // If dragging don't allow vertical scroll.
         e.preventDefault();
@@ -255,17 +233,12 @@
       }
     }
 
-    /**
-     * Handle Carousel Release
-     * @param {Event} e
-     */
     _handleCarouselRelease(e) {
       if (this.pressed) {
         this.pressed = false;
       } else {
         return;
       }
-
       clearInterval(this.ticker);
       this.target = this.offset;
       if (this.velocity > 10 || this.velocity < -10) {
@@ -273,7 +246,6 @@
         this.target = this.offset + this.amplitude;
       }
       this.target = Math.round(this.target / this.dim) * this.dim;
-
       // No wrap of items.
       if (this.noWrap) {
         if (this.target >= this.dim * (this.count - 1)) {
@@ -285,7 +257,6 @@
       this.amplitude = this.target - this.offset;
       this.timestamp = Date.now();
       requestAnimationFrame(this._autoScrollBound);
-
       if (this.dragged) {
         e.preventDefault();
         e.stopPropagation();
@@ -293,28 +264,22 @@
       return false;
     }
 
-    /**
-     * Handle Carousel Click
-     * @param {Event} e
-     */
     _handleCarouselClick(e) {
       // Disable clicks if carousel was dragged.
       if (this.dragged) {
         e.preventDefault();
         e.stopPropagation();
         return false;
-      } else if (!this.options.fullWidth) {
-        let clickedIndex = $(e.target)
-          .closest('.carousel-item')
-          .index();
-        let diff = this._wrap(this.center) - clickedIndex;
-
+      }
+      else if (!this.options.fullWidth) {
+        const clickedElem = (<HTMLElement>e.target).closest('.carousel-item');
+        const clickedIndex = [...clickedElem.parentNode.children].indexOf(clickedElem);
+        const diff = this._wrap(this.center) - clickedIndex;
         // Disable clicks if carousel was shifted by click
         if (diff !== 0) {
           e.preventDefault();
           e.stopPropagation();
         }
-
         // fixes https://github.com/materializecss/materialize/issues/180
         if (clickedIndex < 0) {
           // relative X position > center of carousel = clicked at the right part of the carousel
@@ -329,106 +294,81 @@
       }
     }
 
-    /**
-     * Handle Indicator CLick
-     * @param {Event} e
-     */
-    _handleIndicatorClick(e) {
+    _handleIndicatorClick(e: Event) {
       e.stopPropagation();
-
-      let indicator = $(e.target).closest('.indicator-item');
-      if (indicator.length) {
-        this._cycleTo(indicator.index());
+      const indicator = (<HTMLElement>e.target).closest('.indicator-item');
+      if (indicator) {
+        const index = [...indicator.parentNode.children].indexOf(indicator);
+        this._cycleTo(index);
       }
     }
 
-    /**
-     * Handle Throttle Resize
-     * @param {Event} e
-     */
     _handleResize(e) {
       if (this.options.fullWidth) {
-        this.itemWidth = this.$el
-          .find('.carousel-item')
-          .first()
-          .innerWidth();
-        this.imageHeight = this.$el.find('.carousel-item.active').height();
+        this.itemWidth = this.el.querySelector('.carousel-item').clientWidth;
+        this.imageHeight = this.el.querySelector('.carousel-item.active').clientHeight;
         this.dim = this.itemWidth * 2 + this.options.padding;
         this.offset = this.center * 2 * this.itemWidth;
         this.target = this.offset;
         this._setCarouselHeight(true);
-      } else {
+      }
+      else {
         this._scroll();
       }
     }
 
-    /**
-     * Set carousel height based on first slide
-     * @param {Booleam} imageOnly - true for image slides
-     */
-    _setCarouselHeight(imageOnly) {
-      let firstSlide = this.$el.find('.carousel-item.active').length
-        ? this.$el.find('.carousel-item.active').first()
-        : this.$el.find('.carousel-item').first();
-      let firstImage = firstSlide.find('img').first();
-      if (firstImage.length) {
-        if (firstImage[0].complete) {
+    _setCarouselHeight(imageOnly: boolean = false) {
+      const firstSlide = this.el.querySelector('.carousel-item.active')
+        ? this.el.querySelector('.carousel-item.active')
+        : this.el.querySelector('.carousel-item');
+
+      const firstImage = firstSlide.querySelector('img');
+      if (firstImage) {
+        if (firstImage.complete) {
           // If image won't trigger the load event
-          let imageHeight = firstImage.height();
+          const imageHeight = firstImage.clientHeight;
           if (imageHeight > 0) {
-            this.$el.css('height', imageHeight + 'px');
-          } else {
+            this.el.style.height = imageHeight+'px';
+          }
+          else {
             // If image still has no height, use the natural dimensions to calculate
-            let naturalWidth = firstImage[0].naturalWidth;
-            let naturalHeight = firstImage[0].naturalHeight;
-            let adjustedHeight = (this.$el.width() / naturalWidth) * naturalHeight;
-            this.$el.css('height', adjustedHeight + 'px');
+            const naturalWidth = firstImage.naturalWidth;
+            const naturalHeight = firstImage.naturalHeight;
+            const adjustedHeight = (this.el.clientWidth / naturalWidth) * naturalHeight;
+            this.el.style.height = adjustedHeight+'px';
           }
         } else {
           // Get height when image is loaded normally
-          firstImage.one('load', (el, i) => {
-            this.$el.css('height', el.offsetHeight + 'px');
+          firstImage.addEventListener('load', () => {
+            this.el.style.height = firstImage.offsetHeight+'px';
           });
         }
-      } else if (!imageOnly) {
-        let slideHeight = firstSlide.height();
-        this.$el.css('height', slideHeight + 'px');
+      }
+      else if (!imageOnly) {
+        const slideHeight = firstSlide.clientHeight;
+        this.el.style.height = slideHeight+'px';
       }
     }
 
-    /**
-     * Get x position from event
-     * @param {Event} e
-     */
     _xpos(e) {
       // touch event
       if (e.targetTouches && e.targetTouches.length >= 1) {
         return e.targetTouches[0].clientX;
       }
-
       // mouse event
       return e.clientX;
     }
 
-    /**
-     * Get y position from event
-     * @param {Event} e
-     */
     _ypos(e) {
       // touch event
       if (e.targetTouches && e.targetTouches.length >= 1) {
         return e.targetTouches[0].clientY;
       }
-
       // mouse event
       return e.clientY;
     }
 
-    /**
-     * Wrap index
-     * @param {Number} x
-     */
-    _wrap(x) {
+    _wrap(x: number) {
       return x >= this.count
         ? x % this.count
         : x < 0
@@ -436,28 +376,19 @@
         : x;
     }
 
-    /**
-     * Tracks scrolling information
-     */
     _track() {
       let now, elapsed, delta, v;
-
       now = Date.now();
       elapsed = now - this.timestamp;
       this.timestamp = now;
       delta = this.offset - this.frame;
       this.frame = this.offset;
-
       v = (1000 * delta) / (1 + elapsed);
       this.velocity = 0.8 * v + 0.2 * this.velocity;
     }
 
-    /**
-     * Auto scrolls to nearest carousel item.
-     */
     _autoScroll() {
       let elapsed, delta;
-
       if (this.amplitude) {
         elapsed = Date.now() - this.timestamp;
         delta = this.amplitude * Math.exp(-elapsed / this.options.duration);
@@ -470,20 +401,16 @@
       }
     }
 
-    /**
-     * Scroll to target
-     * @param {Number} x
-     */
-    _scroll(x) {
+    _scroll(x: number = 0) {
       // Track scrolling state
-      if (!this.$el.hasClass('scrolling')) {
+      if (!this.el.classList.contains('scrolling')) {
         this.el.classList.add('scrolling');
       }
       if (this.scrollingTimeout != null) {
         window.clearTimeout(this.scrollingTimeout);
       }
       this.scrollingTimeout = window.setTimeout(() => {
-        this.$el.removeClass('scrolling');
+        this.el.classList.remove('scrolling');
       }, this.options.duration);
 
       // Start actual scroll
@@ -502,6 +429,7 @@
 
       this.offset = typeof x === 'number' ? x : this.offset;
       this.center = Math.floor((this.offset + this.dim / 2) / this.dim);
+
       delta = this.offset - this.center * this.dim;
       dir = delta < 0 ? 1 : -1;
       tween = (-dir * delta * 2) / this.dim;
@@ -510,7 +438,8 @@
       if (this.options.fullWidth) {
         alignment = 'translateX(0)';
         centerTweenedOpacity = 1;
-      } else {
+      }
+      else {
         alignment = 'translateX(' + (this.el.clientWidth - this.itemWidth) / 2 + 'px) ';
         alignment += 'translateY(' + (this.el.clientHeight - this.itemHeight) / 2 + 'px)';
         centerTweenedOpacity = 1 - numVisibleOffset * tween;
@@ -518,14 +447,13 @@
 
       // Set indicator active
       if (this.showIndicators) {
-        let diff = this.center % this.count;
-        let activeIndicator = this.$indicators.find('.indicator-item.active');
-        if (activeIndicator.index() !== diff) {
-          activeIndicator.removeClass('active');
-          this.$indicators
-            .find('.indicator-item')
-            .eq(diff)[0]
-            .classList.add('active');
+        const diff = this.center % this.count;
+        const activeIndicator = this._indicators.querySelector('.indicator-item.active');
+        const activeIndicatorIndex = [...activeIndicator.parentNode.children].indexOf(activeIndicator);
+        if (activeIndicatorIndex !== diff) {
+          activeIndicator.classList.remove('active');
+          const pos = diff < 0 ? this.count + diff : diff;
+          this._indicators.querySelectorAll('.indicator-item')[pos].classList.add('active');
         }
       }
 
@@ -535,10 +463,11 @@
         el = this.images[this._wrap(this.center)];
 
         // Add active class to center item.
-        if (!$(el).hasClass('active')) {
-          this.$el.find('.carousel-item').removeClass('active');
+        if (!el.classList.contains('active')) {
+          this.el.querySelector('.carousel-item').classList.remove('active');
           el.classList.add('active');
         }
+
         let transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir *
           this.options.shift *
           tween *
@@ -562,7 +491,6 @@
             (this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
           this._updateItemStyle(el, tweenedOpacity, -i, transformString);
         }
-
         // left side
         if (this.options.fullWidth) {
           zTranslation = this.options.dist;
@@ -579,7 +507,6 @@
           this._updateItemStyle(el, tweenedOpacity, -i, transformString);
         }
       }
-
       // center
       // Don't show wrapped items.
       if (!this.noWrap || (this.center >= 0 && this.center < this.count)) {
@@ -589,42 +516,28 @@
           tween}px) translateZ(${this.options.dist * tween}px)`;
         this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
       }
-
       // onCycleTo callback
-      let $currItem = this.$el.find('.carousel-item').eq(this._wrap(this.center));
+      const _currItem = this.el.querySelectorAll('.carousel-item')[this._wrap(this.center)];
+
       if (lastCenter !== this.center && typeof this.options.onCycleTo === 'function') {
-        this.options.onCycleTo.call(this, $currItem[0], this.dragged);
+        this.options.onCycleTo.call(this, _currItem, this.dragged);
       }
-
       // One time callback
       if (typeof this.oneTimeCallback === 'function') {
-        this.oneTimeCallback.call(this, $currItem[0], this.dragged);
+        this.oneTimeCallback.call(this, _currItem, this.dragged);
         this.oneTimeCallback = null;
       }
     }
 
-    /**
-     * Cycle to target
-     * @param {Element} el
-     * @param {Number} opacity
-     * @param {Number} zIndex
-     * @param {String} transform
-     */
-    _updateItemStyle(el, opacity, zIndex, transform) {
+    _updateItemStyle(el: HTMLElement, opacity: number, zIndex: number, transform: string) {
       el.style[this.xform] = transform;
-      el.style.zIndex = zIndex;
-      el.style.opacity = opacity;
+      el.style.zIndex = zIndex.toString();
+      el.style.opacity = opacity.toString();
       el.style.visibility = 'visible';
     }
 
-    /**
-     * Cycle to target
-     * @param {Number} n
-     * @param {Function} callback
-     */
-    _cycleTo(n, callback) {
+    _cycleTo(n: number, callback: Function = null) {
       let diff = (this.center % this.count) - n;
-
       // Account for wraparound.
       if (!this.noWrap) {
         if (diff < 0) {
@@ -637,22 +550,18 @@
           }
         }
       }
-
       this.target = this.dim * Math.round(this.offset / this.dim);
       // Next
       if (diff < 0) {
-        this.target += this.dim * Math.abs(diff);
-
-        // Prev
-      } else if (diff > 0) {
+        this.target += this.dim * Math.abs(diff);        
+      } // Prev
+      else if (diff > 0) {
         this.target -= this.dim * diff;
       }
-
       // Set one time callback
       if (typeof callback === 'function') {
         this.oneTimeCallback = callback;
       }
-
       // Scroll
       if (this.offset !== this.target) {
         this.amplitude = this.target - this.offset;
@@ -661,72 +570,38 @@
       }
     }
 
-    /**
-     * Cycle to next item
-     * @param {Number} [n]
-     */
-    next(n) {
+    next(n: number = 1) {
       if (n === undefined || isNaN(n)) {
         n = 1;
       }
-
       let index = this.center + n;
       if (index >= this.count || index < 0) {
-        if (this.noWrap) {
-          return;
-        }
-
+        if (this.noWrap) return;
         index = this._wrap(index);
       }
       this._cycleTo(index);
     }
 
-    /**
-     * Cycle to previous item
-     * @param {Number} [n]
-     */
-    prev(n) {
+    prev(n: number = 1) {
       if (n === undefined || isNaN(n)) {
         n = 1;
       }
-
       let index = this.center - n;
       if (index >= this.count || index < 0) {
-        if (this.noWrap) {
-          return;
-        }
-
+        if (this.noWrap) return;
         index = this._wrap(index);
       }
-
       this._cycleTo(index);
     }
 
-    /**
-     * Cycle to nth item
-     * @param {Number} [n]
-     * @param {Function} callback
-     */
-    set(n, callback) {
+    set(n: number, callback: Function) {
       if (n === undefined || isNaN(n)) {
         n = 0;
       }
-
       if (n > this.count || n < 0) {
-        if (this.noWrap) {
-          return;
-        }
-
+        if (this.noWrap) return;
         n = this._wrap(n);
       }
-
       this._cycleTo(n, callback);
     }
-  }
-
-  M.Carousel = Carousel;
-
-  if (M.jQueryLoaded) {
-    M.initializeJqueryWrapper(Carousel, 'carousel', 'M_Carousel');
-  }
-})(cash);
+  }