materialize-sass 0.97.0 → 1.0.0.1

data/assets/javascripts/materialize/slider.js

@@ -0,0 +1,424 @@
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+(function ($, anim) {
+  'use strict';
+
+  var _defaults = {
+    indicators: true,
+    height: 400,
+    duration: 500,
+    interval: 6000
+  };
+
+  /**
+   * @class
+   *
+   */
+
+  var Slider = function (_Component) {
+    _inherits(Slider, _Component);
+
+    /**
+     * Construct Slider instance and set up overlay
+     * @constructor
+     * @param {Element} el
+     * @param {Object} options
+     */
+    function Slider(el, options) {
+      _classCallCheck(this, Slider);
+
+      var _this = _possibleConstructorReturn(this, (Slider.__proto__ || Object.getPrototypeOf(Slider)).call(this, Slider, el, options));
+
+      _this.el.M_Slider = _this;
+
+      /**
+       * Options for the modal
+       * @member Slider#options
+       * @prop {Boolean} [indicators=true] - Show indicators
+       * @prop {Number} [height=400] - height of slider
+       * @prop {Number} [duration=500] - Length in ms of slide transition
+       * @prop {Number} [interval=6000] - Length in ms of slide interval
+       */
+      _this.options = $.extend({}, Slider.defaults, options);
+
+      // setup
+      _this.$slider = _this.$el.find('.slides');
+      _this.$slides = _this.$slider.children('li');
+      _this.activeIndex = _this.$slides.filter(function (item) {
+        return $(item).hasClass('active');
+      }).first().index();
+      if (_this.activeIndex != -1) {
+        _this.$active = _this.$slides.eq(_this.activeIndex);
+      }
+
+      _this._setSliderHeight();
+
+      // Set initial positions of captions
+      _this.$slides.find('.caption').each(function (el) {
+        _this._animateCaptionIn(el, 0);
+      });
+
+      // Move img src into background-image
+      _this.$slides.find('img').each(function (el) {
+        var placeholderBase64 = 'data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+        if ($(el).attr('src') !== placeholderBase64) {
+          $(el).css('background-image', 'url("' + $(el).attr('src') + '")');
+          $(el).attr('src', placeholderBase64);
+        }
+      });
+
+      _this._setupIndicators();
+
+      // Show active slide
+      if (_this.$active) {
+        _this.$active.css('display', 'block');
+      } else {
+        _this.$slides.first().addClass('active');
+        anim({
+          targets: _this.$slides.first()[0],
+          opacity: 1,
+          duration: _this.options.duration,
+          easing: 'easeOutQuad'
+        });
+
+        _this.activeIndex = 0;
+        _this.$active = _this.$slides.eq(_this.activeIndex);
+
+        // Update indicators
+        if (_this.options.indicators) {
+          _this.$indicators.eq(_this.activeIndex).addClass('active');
+        }
+      }
+
+      // Adjust height to current slide
+      _this.$active.find('img').each(function (el) {
+        anim({
+          targets: _this.$active.find('.caption')[0],
+          opacity: 1,
+          translateX: 0,
+          translateY: 0,
+          duration: _this.options.duration,
+          easing: 'easeOutQuad'
+        });
+      });
+
+      _this._setupEventHandlers();
+
+      // auto scroll
+      _this.start();
+      return _this;
+    }
+
+    _createClass(Slider, [{
+      key: 'destroy',
+
+
+      /**
+       * Teardown component
+       */
+      value: function destroy() {
+        this.pause();
+        this._removeIndicators();
+        this._removeEventHandlers();
+        this.el.M_Slider = undefined;
+      }
+
+      /**
+       * Setup Event Handlers
+       */
+
+    }, {
+      key: '_setupEventHandlers',
+      value: function _setupEventHandlers() {
+        var _this2 = this;
+
+        this._handleIntervalBound = this._handleInterval.bind(this);
+        this._handleIndicatorClickBound = this._handleIndicatorClick.bind(this);
+
+        if (this.options.indicators) {
+          this.$indicators.each(function (el) {
+            el.addEventListener('click', _this2._handleIndicatorClickBound);
+          });
+        }
+      }
+
+      /**
+       * Remove Event Handlers
+       */
+
+    }, {
+      key: '_removeEventHandlers',
+      value: function _removeEventHandlers() {
+        var _this3 = this;
+
+        if (this.options.indicators) {
+          this.$indicators.each(function (el) {
+            el.removeEventListener('click', _this3._handleIndicatorClickBound);
+          });
+        }
+      }
+
+      /**
+       * Handle indicator click
+       * @param {Event} e
+       */
+
+    }, {
+      key: '_handleIndicatorClick',
+      value: function _handleIndicatorClick(e) {
+        var currIndex = $(e.target).index();
+        this.set(currIndex);
+      }
+
+      /**
+       * Handle Interval
+       */
+
+    }, {
+      key: '_handleInterval',
+      value: function _handleInterval() {
+        var newActiveIndex = this.$slider.find('.active').index();
+        if (this.$slides.length === newActiveIndex + 1) newActiveIndex = 0;
+        // loop to start
+        else newActiveIndex += 1;
+
+        this.set(newActiveIndex);
+      }
+
+      /**
+       * Animate in caption
+       * @param {Element} caption
+       * @param {Number} duration
+       */
+
+    }, {
+      key: '_animateCaptionIn',
+      value: function _animateCaptionIn(caption, duration) {
+        var animOptions = {
+          targets: caption,
+          opacity: 0,
+          duration: duration,
+          easing: 'easeOutQuad'
+        };
+
+        if ($(caption).hasClass('center-align')) {
+          animOptions.translateY = -100;
+        } else if ($(caption).hasClass('right-align')) {
+          animOptions.translateX = 100;
+        } else if ($(caption).hasClass('left-align')) {
+          animOptions.translateX = -100;
+        }
+
+        anim(animOptions);
+      }
+
+      /**
+       * Set height of slider
+       */
+
+    }, {
+      key: '_setSliderHeight',
+      value: function _setSliderHeight() {
+        // If fullscreen, do nothing
+        if (!this.$el.hasClass('fullscreen')) {
+          if (this.options.indicators) {
+            // Add height if indicators are present
+            this.$el.css('height', this.options.height + 40 + 'px');
+          } else {
+            this.$el.css('height', this.options.height + 'px');
+          }
+          this.$slider.css('height', this.options.height + 'px');
+        }
+      }
+
+      /**
+       * Setup indicators
+       */
+
+    }, {
+      key: '_setupIndicators',
+      value: function _setupIndicators() {
+        var _this4 = this;
+
+        if (this.options.indicators) {
+          this.$indicators = $('<ul class="indicators"></ul>');
+          this.$slides.each(function (el, index) {
+            var $indicator = $('<li class="indicator-item"></li>');
+            _this4.$indicators.append($indicator[0]);
+          });
+          this.$el.append(this.$indicators[0]);
+          this.$indicators = this.$indicators.children('li.indicator-item');
+        }
+      }
+
+      /**
+       * Remove indicators
+       */
+
+    }, {
+      key: '_removeIndicators',
+      value: function _removeIndicators() {
+        this.$el.find('ul.indicators').remove();
+      }
+
+      /**
+       * Cycle to nth item
+       * @param {Number} index
+       */
+
+    }, {
+      key: 'set',
+      value: function set(index) {
+        var _this5 = this;
+
+        // Wrap around indices.
+        if (index >= this.$slides.length) index = 0;else if (index < 0) index = this.$slides.length - 1;
+
+        // Only do if index changes
+        if (this.activeIndex != index) {
+          this.$active = this.$slides.eq(this.activeIndex);
+          var $caption = this.$active.find('.caption');
+          this.$active.removeClass('active');
+
+          anim({
+            targets: this.$active[0],
+            opacity: 0,
+            duration: this.options.duration,
+            easing: 'easeOutQuad',
+            complete: function () {
+              _this5.$slides.not('.active').each(function (el) {
+                anim({
+                  targets: el,
+                  opacity: 0,
+                  translateX: 0,
+                  translateY: 0,
+                  duration: 0,
+                  easing: 'easeOutQuad'
+                });
+              });
+            }
+          });
+
+          this._animateCaptionIn($caption[0], this.options.duration);
+
+          // Update indicators
+          if (this.options.indicators) {
+            this.$indicators.eq(this.activeIndex).removeClass('active');
+            this.$indicators.eq(index).addClass('active');
+          }
+
+          anim({
+            targets: this.$slides.eq(index)[0],
+            opacity: 1,
+            duration: this.options.duration,
+            easing: 'easeOutQuad'
+          });
+
+          anim({
+            targets: this.$slides.eq(index).find('.caption')[0],
+            opacity: 1,
+            translateX: 0,
+            translateY: 0,
+            duration: this.options.duration,
+            delay: this.options.duration,
+            easing: 'easeOutQuad'
+          });
+
+          this.$slides.eq(index).addClass('active');
+          this.activeIndex = index;
+
+          // Reset interval
+          this.start();
+        }
+      }
+
+      /**
+       * Pause slider interval
+       */
+
+    }, {
+      key: 'pause',
+      value: function pause() {
+        clearInterval(this.interval);
+      }
+
+      /**
+       * Start slider interval
+       */
+
+    }, {
+      key: 'start',
+      value: function start() {
+        clearInterval(this.interval);
+        this.interval = setInterval(this._handleIntervalBound, this.options.duration + this.options.interval);
+      }
+
+      /**
+       * Move to next slide
+       */
+
+    }, {
+      key: 'next',
+      value: function next() {
+        var newIndex = this.activeIndex + 1;
+
+        // Wrap around indices.
+        if (newIndex >= this.$slides.length) newIndex = 0;else if (newIndex < 0) newIndex = this.$slides.length - 1;
+
+        this.set(newIndex);
+      }
+
+      /**
+       * Move to previous slide
+       */
+
+    }, {
+      key: 'prev',
+      value: function prev() {
+        var newIndex = this.activeIndex - 1;
+
+        // Wrap around indices.
+        if (newIndex >= this.$slides.length) newIndex = 0;else if (newIndex < 0) newIndex = this.$slides.length - 1;
+
+        this.set(newIndex);
+      }
+    }], [{
+      key: 'init',
+      value: function init(els, options) {
+        return _get(Slider.__proto__ || Object.getPrototypeOf(Slider), 'init', this).call(this, this, els, options);
+      }
+
+      /**
+       * Get Instance
+       */
+
+    }, {
+      key: 'getInstance',
+      value: function getInstance(el) {
+        var domElem = !!el.jquery ? el[0] : el;
+        return domElem.M_Slider;
+      }
+    }, {
+      key: 'defaults',
+      get: function () {
+        return _defaults;
+      }
+    }]);
+
+    return Slider;
+  }(Component);
+
+  M.Slider = Slider;
+
+  if (M.jQueryLoaded) {
+    M.initializeJqueryWrapper(Slider, 'slider', 'M_Slider');
+  }
+})(cash, M.anime);