kmaterialize 2.0.0 → 2.3.3-1.0.0

package/js/carousel.js

@@ -1,717 +0,0 @@
-(function($) {
-  'use strict';
-
-  let _defaults = {
-    duration: 200, // ms
-    dist: -100, // zoom scale TODO: make this more intuitive as an option
-    shift: 0, // spacing for center image
-    padding: 0, // Padding between non center items
-    numVisible: 5, // Number of visible items in carousel
-    fullWidth: false, // Change to full width styles
-    indicators: false, // Toggle indicators
-    noWrap: false, // Don't wrap around and cycle through items.
-    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) {
-      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);
-
-      // Setup
-      this.hasMultipleSlides = this.$el.find('.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.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);
-
-      // Full Width carousel setup
-      if (this.options.fullWidth) {
-        this.options.dist = 0;
-        this._setCarouselHeight();
-
-        // Offset fixed items when indicators.
-        if (this.showIndicators) {
-          this.$el.find('.carousel-fixed-item').addClass('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>');
-
-          // Add active to first by default.
-          if (i === 0) {
-            $indicator[0].classList.add('active');
-          }
-
-          this.$indicators.append($indicator);
-        }
-      });
-      if (this.showIndicators) {
-        this.$el.append(this.$indicators);
-      }
-      this.count = this.images.length;
-
-      // Cap numVisible at count
-      this.options.numVisible = Math.min(this.count, this.options.numVisible);
-
-      // Setup cross browser string
-      this.xform = 'transform';
-      ['webkit', 'Moz', 'O', 'ms'].every((prefix) => {
-        var e = prefix + 'Transform';
-        if (typeof document.body.style[e] !== 'undefined') {
-          this.xform = e;
-          return false;
-        }
-        return true;
-      });
-
-      this._setupEventHandlers();
-      this._scroll(this.offset);
-    }
-
-    static get defaults() {
-      return _defaults;
-    }
-
-    static init(els, options) {
-      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;
-    }
-
-    /**
-     * 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) {
-        this._handleIndicatorClickBound = this._handleIndicatorClick.bind(this);
-        this.$indicators.find('.indicator-item').each((el, i) => {
-          el.addEventListener('click', this._handleIndicatorClickBound);
-        });
-      }
-
-      // Resize
-      let throttledResize = M.throttle(this._handleResize, 200);
-      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);
-        this.el.removeEventListener('touchmove', this._handleCarouselDragBound);
-        this.el.removeEventListener('touchend', this._handleCarouselReleaseBound);
-      }
-      this.el.removeEventListener('mousedown', this._handleCarouselTapBound);
-      this.el.removeEventListener('mousemove', this._handleCarouselDragBound);
-      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) => {
-          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')) {
-        e.preventDefault();
-      }
-      this.pressed = true;
-      this.dragged = false;
-      this.verticalDragged = false;
-      this.reference = this._xpos(e);
-      this.referenceY = this._ypos(e);
-
-      this.velocity = this.amplitude = 0;
-      this.frame = this.offset;
-      this.timestamp = Date.now();
-      clearInterval(this.ticker);
-      this.ticker = setInterval(this._trackBound, 100);
-    }
-
-    /**
-     * Handle Carousel Drag
-     * @param {Event} e
-     */
-    _handleCarouselDrag(e) {
-      let x, y, delta, deltaY;
-      if (this.pressed) {
-        x = this._xpos(e);
-        y = this._ypos(e);
-        delta = this.reference - x;
-        deltaY = Math.abs(this.referenceY - y);
-        if (deltaY < 30 && !this.verticalDragged) {
-          // If vertical scrolling don't allow dragging.
-          if (delta > 2 || delta < -2) {
-            this.dragged = true;
-            this.reference = x;
-            this._scroll(this.offset + delta);
-          }
-        } else if (this.dragged) {
-          // If dragging don't allow vertical scroll.
-          e.preventDefault();
-          e.stopPropagation();
-          return false;
-        } else {
-          // Vertical scrolling.
-          this.verticalDragged = true;
-        }
-      }
-
-      if (this.dragged) {
-        // If dragging don't allow vertical scroll.
-        e.preventDefault();
-        e.stopPropagation();
-        return false;
-      }
-    }
-
-    /**
-     * 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) {
-        this.amplitude = 0.9 * this.velocity;
-        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)) {
-          this.target = this.dim * (this.count - 1);
-        } else if (this.target < 0) {
-          this.target = 0;
-        }
-      }
-      this.amplitude = this.target - this.offset;
-      this.timestamp = Date.now();
-      requestAnimationFrame(this._autoScrollBound);
-
-      if (this.dragged) {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-      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;
-
-        // Disable clicks if carousel was shifted by click
-        if (diff !== 0) {
-          e.preventDefault();
-          e.stopPropagation();
-        }
-        this._cycleTo(clickedIndex);
-      }
-    }
-
-    /**
-     * Handle Indicator CLick
-     * @param {Event} e
-     */
-    _handleIndicatorClick(e) {
-      e.stopPropagation();
-
-      let indicator = $(e.target).closest('.indicator-item');
-      if (indicator.length) {
-        this._cycleTo(indicator.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.dim = this.itemWidth * 2 + this.options.padding;
-        this.offset = this.center * 2 * this.itemWidth;
-        this.target = this.offset;
-        this._setCarouselHeight(true);
-      } 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) {
-          // If image won't trigger the load event
-          let imageHeight = firstImage.height();
-          if (imageHeight > 0) {
-            this.$el.css('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');
-          }
-        } else {
-          // Get height when image is loaded normally
-          firstImage.one('load', (el, i) => {
-            this.$el.css('height', el.offsetHeight + 'px');
-          });
-        }
-      } else if (!imageOnly) {
-        let slideHeight = firstSlide.height();
-        this.$el.css('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) {
-      return x >= this.count ? x % this.count : x < 0 ? this._wrap(this.count + x % this.count) : 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);
-        if (delta > 2 || delta < -2) {
-          this._scroll(this.target - delta);
-          requestAnimationFrame(this._autoScrollBound);
-        } else {
-          this._scroll(this.target);
-        }
-      }
-    }
-
-    /**
-     * Scroll to target
-     * @param {Number} x
-     */
-    _scroll(x) {
-      // Track scrolling state
-      if (!this.$el.hasClass('scrolling')) {
-        this.el.classList.add('scrolling');
-      }
-      if (this.scrollingTimeout != null) {
-        window.clearTimeout(this.scrollingTimeout);
-      }
-      this.scrollingTimeout = window.setTimeout(() => {
-        this.$el.removeClass('scrolling');
-      }, this.options.duration);
-
-      // Start actual scroll
-      let i,
-        half,
-        delta,
-        dir,
-        tween,
-        el,
-        alignment,
-        zTranslation,
-        tweenedOpacity,
-        centerTweenedOpacity;
-      let lastCenter = this.center;
-      let numVisibleOffset = 1 / this.options.numVisible;
-
-      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;
-      half = this.count >> 1;
-
-      if (this.options.fullWidth) {
-        alignment = 'translateX(0)';
-        centerTweenedOpacity = 1;
-      } else {
-        alignment = 'translateX(' + (this.el.clientWidth - this.itemWidth) / 2 + 'px) ';
-        alignment += 'translateY(' + (this.el.clientHeight - this.itemHeight) / 2 + 'px)';
-        centerTweenedOpacity = 1 - numVisibleOffset * tween;
-      }
-
-      // 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');
-        }
-      }
-
-      // center
-      // Don't show wrapped items.
-      if (!this.noWrap || (this.center >= 0 && this.center < this.count)) {
-        el = this.images[this._wrap(this.center)];
-
-        // Add active class to center item.
-        if (!$(el).hasClass('active')) {
-          this.$el.find('.carousel-item').removeClass('active');
-          el.classList.add('active');
-        }
-        let transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir *
-          this.options.shift *
-          tween *
-          i}px) translateZ(${this.options.dist * tween}px)`;
-        this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
-      }
-
-      for (i = 1; i <= half; ++i) {
-        // right side
-        if (this.options.fullWidth) {
-          zTranslation = this.options.dist;
-          tweenedOpacity = i === half && delta < 0 ? 1 - tween : 1;
-        } else {
-          zTranslation = this.options.dist * (i * 2 + tween * dir);
-          tweenedOpacity = 1 - numVisibleOffset * (i * 2 + tween * dir);
-        }
-        // Don't show wrapped items.
-        if (!this.noWrap || this.center + i < this.count) {
-          el = this.images[this._wrap(this.center + i)];
-          let transformString = `${alignment} translateX(${this.options.shift +
-            (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;
-          tweenedOpacity = i === half && delta > 0 ? 1 - tween : 1;
-        } else {
-          zTranslation = this.options.dist * (i * 2 - tween * dir);
-          tweenedOpacity = 1 - numVisibleOffset * (i * 2 - tween * dir);
-        }
-        // Don't show wrapped items.
-        if (!this.noWrap || this.center - i >= 0) {
-          el = this.images[this._wrap(this.center - i)];
-          let transformString = `${alignment} translateX(${-this.options.shift +
-            (-this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
-          this._updateItemStyle(el, tweenedOpacity, -i, transformString);
-        }
-      }
-
-      // center
-      // Don't show wrapped items.
-      if (!this.noWrap || (this.center >= 0 && this.center < this.count)) {
-        el = this.images[this._wrap(this.center)];
-        let transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir *
-          this.options.shift *
-          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));
-      if (lastCenter !== this.center && typeof this.options.onCycleTo === 'function') {
-        this.options.onCycleTo.call(this, $currItem[0], this.dragged);
-      }
-
-      // One time callback
-      if (typeof this.oneTimeCallback === 'function') {
-        this.oneTimeCallback.call(this, $currItem[0], 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) {
-      el.style[this.xform] = transform;
-      el.style.zIndex = zIndex;
-      el.style.opacity = opacity;
-      el.style.visibility = 'visible';
-    }
-
-    /**
-     * Cycle to target
-     * @param {Number} n
-     * @param {Function} callback
-     */
-    _cycleTo(n, callback) {
-      let diff = this.center % this.count - n;
-
-      // Account for wraparound.
-      if (!this.noWrap) {
-        if (diff < 0) {
-          if (Math.abs(diff + this.count) < Math.abs(diff)) {
-            diff += this.count;
-          }
-        } else if (diff > 0) {
-          if (Math.abs(diff - this.count) < diff) {
-            diff -= this.count;
-          }
-        }
-      }
-
-      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 * diff;
-      }
-
-      // Set one time callback
-      if (typeof callback === 'function') {
-        this.oneTimeCallback = callback;
-      }
-
-      // Scroll
-      if (this.offset !== this.target) {
-        this.amplitude = this.target - this.offset;
-        this.timestamp = Date.now();
-        requestAnimationFrame(this._autoScrollBound);
-      }
-    }
-
-    /**
-     * Cycle to next item
-     * @param {Number} [n]
-     */
-    next(n) {
-      if (n === undefined || isNaN(n)) {
-        n = 1;
-      }
-
-      let index = this.center + n;
-      if (index >= this.count || index < 0) {
-        if (this.noWrap) {
-          return;
-        }
-
-        index = this._wrap(index);
-      }
-      this._cycleTo(index);
-    }
-
-    /**
-     * Cycle to previous item
-     * @param {Number} [n]
-     */
-    prev(n) {
-      if (n === undefined || isNaN(n)) {
-        n = 1;
-      }
-
-      let index = this.center - n;
-      if (index >= this.count || index < 0) {
-        if (this.noWrap) {
-          return;
-        }
-
-        index = this._wrap(index);
-      }
-
-      this._cycleTo(index);
-    }
-
-    /**
-     * Cycle to nth item
-     * @param {Number} [n]
-     * @param {Function} callback
-     */
-    set(n, callback) {
-      if (n === undefined || isNaN(n)) {
-        n = 0;
-      }
-
-      if (n > this.count || n < 0) {
-        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);