middleman-wizard-template 1.0.2 → 1.0.3

data/lib/middleman-wizard-template/template/source/javascripts/_lib/ww/Slides.js

@@ -0,0 +1,846 @@
+goog.provide('ww.Slides');
+goog.require('ww.Tween');
+goog.require('goog.dom');
+goog.require('goog.dom.classes');
+goog.require('goog.dom.query');
+goog.require('goog.events');
+goog.require('goog.object');
+goog.require('goog.style');
+
+/*
+  <div id="identifier">
+    <div class="slide"></div>
+    <div class="slide"></div>
+    <div class="slide"></div>
+    <div class="slide"></div>
+  </div>
+*/
+
+
+/**
+ * Slides. Requires ww.Tween for fade and fallback animations.
+ * Slide effect can be 'slide' or 'fade'.
+ * @constructor
+ * @param {Object} element Element to initialize Slides.
+ * @param {Object} opts Slides configurable options.
+ */
+ww.Slides = function(element, opts) {
+  var defaults = {
+    'slideClass': 'slide',
+    'namespace': 'slides',
+    'width': 980,
+    'height': 538,
+    'start': 1,
+    'navigation': {
+      'active': true,
+      'effect': 'slide'
+    },
+    'pagination': {
+      'active': true,
+      'effect': 'slide'
+    },
+    'play': {
+      'active': false,
+      'effect': 'slide',
+      'interval': 5000,
+      'auto': false,
+      'swap': true,
+      'pauseOnHover': false,
+      'restartDelay': 2500
+    },
+    'effect': {
+      'slide': {
+        'speed': 500
+      },
+      'fade': {
+        'speed': 300,
+        'crossfade': true
+      }
+    },
+    'callback': {
+      'loaded': function() {},
+      'start': function() {},
+      'complete': function() {}
+    }
+  };
+
+  opts = opts || {};
+  goog.object.extend(defaults, opts);
+  this.opts = defaults;
+
+  this.elem = element;
+  this.namespace = this.opts['namespace'];
+  this.init_();
+};
+
+
+/**
+ * Initialize Slides.
+ * @private
+ */
+ww.Slides.prototype.init_ = function() {
+  var self = this;
+
+  this.slides = goog.dom.getElementsByClass(this.opts['slideClass'], this.elem);
+
+  // set data
+  this.animating = false;
+  this.total = this.slides.length;
+  this.current = this.opts['start'] - 1;
+  this.vendorPrefix = this.getVendorPrefix_();
+
+  if (this.vendorPrefix) {
+    this.timing_ = this.vendorPrefix + 'TransitionTimingFunction';
+    this.duration_ = this.vendorPrefix + 'TransitionDuration';
+    this.transform_ = this.vendorPrefix + 'Transform';
+
+    this.endEvents = ['transitionend', 'webkitTransitionEnd',
+                      'oTransitionEnd', 'otransitionend', 'MSTransitionEnd'];
+  }
+
+  // detect touch and set slide speed to half for touch
+  this.touch = this.getTouch_();
+  if (this.touch) {
+    var speed = this.opts['effect']['slide']['speed'];
+    this.opts['effect']['slide']['speed'] = speed / 2;
+  }
+
+  // hide overflow
+  this.elem['style']['overflow'] = 'hidden';
+
+  // create container
+  this.container = goog.dom.createDom('div', this.namespace + '-container');
+  this.container['style']['overflow'] = 'hidden';
+  this.container['style']['position'] = 'relative';
+
+  // create control div
+  this.control = goog.dom.createDom('div', this.namespace + '-control');
+  this.control['style']['position'] = 'relative';
+  this.control['style']['left'] = 0;
+
+  goog.dom.appendChild(this.elem, this.container);
+  goog.dom.appendChild(this.container, this.control);
+
+  // setup slides
+  goog.array.forEach(this.slides, function(slide, index) {
+    slide['style']['position'] = 'absolute';
+    slide['style']['top'] = 0;
+    slide['style']['left'] = 0;
+    slide['style']['height'] = '100%';
+    slide['style']['width'] = '100%';
+    slide['style']['zIndex'] = 0;
+    slide['style']['display'] = 'none';
+    slide['style']['webkitBackfaceVisibility'] = 'hidden';
+
+    // assign an index to each slide
+    goog.dom.dataset.set(slide, 'index', index);
+    goog.dom.classes.add(slide, this.opts['slideClass'] + '-' + index);
+
+    // move slide to appropriate container
+    goog.dom.appendChild(this.control, goog.dom.removeNode(slide));
+  }, this);
+
+  if (this.touch) {
+    goog.events.listen(this.control, goog.events.EventType.TOUCHSTART,
+      function(e) {
+        self.touchstart(e);
+      }
+    );
+
+    goog.events.listen(this.control, goog.events.EventType.TOUCHMOVE,
+      function(e) {
+        self.touchmove(e);
+      }
+    );
+
+    goog.events.listen(this.control, goog.events.EventType.TOUCHEND,
+      function(e) {
+        self.touchend(e);
+      }
+    );
+  }
+
+  this.elem['style']['display'] = 'block';
+  this.elem['style']['opacity'] = '1';
+
+  if (this.touch) {
+    this.setupTouch_();
+  }
+
+  this.slides[this.current]['style']['display'] = 'block';
+  this.slides[this.current]['style']['zIndex'] = 10;
+  this.slides[this.current]['style']['opacity'] = 1;
+
+  if (this.opts['navigation']['active']) {
+    this.prevButton = goog.dom.createDom('a', {
+      'class': this.namespace + '-previous ' + this.namespace + '-navigation',
+      'href': '#',
+      'title': 'Previous'
+    });
+
+    goog.dom.setTextContent(this.prevButton, 'Previous');
+    goog.dom.appendChild(this.elem, this.prevButton);
+
+    this.nextButton = goog.dom.createDom('a', {
+      'class': this.namespace + '-next ' + this.namespace + '-navigation',
+      'href': '#',
+      'title': 'Next'
+    });
+
+    goog.dom.setTextContent(this.nextButton, 'Next');
+    goog.dom.appendChild(this.elem, this.nextButton);
+
+    goog.events.listen(this.prevButton, goog.events.EventType.CLICK,
+      function(e) {
+        e.preventDefault();
+        this.stop(true);
+        this.previous(this.opts['navigation']['effect']);
+      }, false, this);
+
+    goog.events.listen(this.nextButton, goog.events.EventType.CLICK,
+      function(e) {
+        e.preventDefault();
+        this.stop(true);
+        this.next(this.opts['navigation']['effect']);
+      }, false, this);
+  }
+
+  if (this.opts['play']['active']) {
+    this.playButton = goog.dom.createDom('a', {
+      'class': this.namespace + '-play ' + this.namespace + '-navigation',
+      'href': '#',
+      'title': 'Play'
+    });
+
+    goog.dom.setTextContent(this.playButton, 'Play');
+    goog.dom.appendChild(this.elem, this.playButton);
+
+    this.stopButton = goog.dom.createDom('a', {
+      'class': this.namespace + '-stop ' + this.namespace + '-navigation',
+      'href': '#',
+      'title': 'Stop'
+    });
+
+    goog.dom.setTextContent(this.stopButton, 'Stop');
+    goog.dom.appendChild(this.elem, this.stopButton);
+
+    goog.events.listen(this.playButton, goog.events.EventType.CLICK,
+      function(e) {
+        e.preventDefault();
+        this.play(true);
+      }, false, this);
+
+    goog.events.listen(this.stopButton, goog.events.EventType.CLICK,
+      function(e) {
+        e.preventDefault();
+        this.stop(true);
+      }, false, this);
+  }
+
+  if (this.opts['pagination']['active']) {
+    this.pagination = goog.dom.createDom('ul', this.namespace + '-pagination');
+    this.pagination['style']['zIndex'] = 100;
+    goog.dom.appendChild(this.elem, this.pagination);
+
+    for (var i = 0; i < this.total; i++) {
+      var li = goog.dom.createDom('li', this.namespace + '-pagination-item');
+      goog.dom.appendChild(this.pagination, li);
+
+      var a = goog.dom.createDom('a', this.namespace + '-pagination-link');
+          a['href'] = '#';
+
+      goog.dom.setTextContent(a, i + 1);
+      goog.dom.dataset.set(a, 'item', i);
+      goog.dom.appendChild(li, a);
+
+      goog.events.listen(a, goog.events.EventType.CLICK,
+        function(e) {
+          e.preventDefault();
+          var index = parseInt(
+                        goog.dom.dataset.get(e.currentTarget, 'item'), 10);
+          self.stop(true);
+          self.goTo(index + 1);
+        });
+    }
+
+    this.pagers = goog.dom.getElementsByClass(
+                    this.namespace + '-pagination-item', this.pagination);
+  }
+
+  // bind update on browser resize
+  goog.events.listen(window, goog.events.EventType.RESIZE, function(e) {
+    self.update_();
+  });
+
+  // set start pagination item to active
+  this.setActive_();
+
+  // auto play slideshow if so desired
+  if (this.opts['play']['auto']) {
+    this.play();
+  }
+
+  this.update_();
+
+  // slides are loaded
+  this.opts['callback']['loaded'](this.opts['start']);
+};
+
+
+/**
+ * Get current slide.
+ * @return {element} Returned element.
+ */
+ww.Slides.prototype.getCurrentSlide = function() {
+  return this.slides[this.current];
+};
+
+
+/**
+ * Set current active in pagination.
+ * @param {number} number Index number to make active.
+ * @private
+ */
+ww.Slides.prototype.setActive_ = function(number) {
+  var current = (number > -1) ? number : this.current;
+  var active = goog.dom.getElementByClass('active', this.pagination);
+
+  if (active) {
+    goog.dom.classes.remove(active, 'active');
+  }
+
+  goog.dom.classes.add(this.pagers[current], 'active');
+};
+
+
+/**
+ * Sets up previous and next slides during touch.
+ * @private
+ */
+ww.Slides.prototype.setupTouch_ = function() {
+  var next = this.current + 1;
+  var prev = this.current - 1;
+
+  if (prev < 0) {
+    prev = this.total - 1;
+  }
+
+  if (next > this.total - 1) {
+    next = 0;
+  }
+
+  this.slides[next]['style']['display'] = 'block';
+  this.slides[next]['style']['opacity'] = 1;
+  this.slides[next]['style']['left'] = this.opts['width'] + 'px';
+};
+
+
+/**
+ * Touch start. Sets up touch related information.
+ * @param {Object} e Event object.
+ */
+ww.Slides.prototype.touchstart = function(e) {
+  var touches = e && e.event_ && e.event_['targetTouches'];
+  if (!touches) { return; }
+  touches = touches[0];
+
+  this.setupTouch_();
+
+  // start touch timer
+  this.touchtimer = Number(new Date());
+
+  // set touch position
+  this.touchstartX = touches['pageX'];
+  this.touchstartY = touches['pageY'];
+
+  e.stopPropagation();
+};
+
+
+/**
+ * Touch move. Update touch related information.
+ * @param {Object} e Event object.
+ */
+ww.Slides.prototype.touchmove = function(e) {
+  var touches = e && e.event_ && e.event_['targetTouches'];
+  if (!touches) { return; }
+  touches = touches[0];
+
+  this.scrolling_ = Math.abs(touches['pageX'] - this.touchstartX) <
+                    Math.abs(touches['pageY'] - this.touchstartY);
+
+  // if not vertically scrolling
+  if (!this.animating && !this.scrolling_) {
+    e.preventDefault();
+    this.setupTouch_();
+    this.control['style'][this.transform_] = 'translateX(' +
+      (touches['pageX'] - this.touchstartX) + 'px)';
+  }
+
+  e.stopPropagation();
+};
+
+
+/**
+ * Touch end. Slide to previous or next depending on touch direction.
+ * Or snap to current slide if touch distance isn't enough.
+ * @param {Object} e Event object.
+ */
+ww.Slides.prototype.touchend = function(e) {
+  var touches = e && e.event_ && e.event_['targetTouches'];
+  if (!touches) { return; }
+  touches = touches[0];
+
+  var left = goog.style.getRelativePosition(this.control, this.container)['x'];
+  if (left > this.opts['width'] * 0.5 ||
+      left > this.opts['width'] * 0.1 &&
+      (Number(new Date()) - this.touchtimer < 250)) {
+    this.direction = 'previous';
+    this.slide_();
+  } else if (left < -(this.opts['width'] * 0.5) ||
+             left < -(this.opts['width'] * 0.1) &&
+             (Number(new Date()) - this.touchtimer < 250)) {
+    this.direction = 'next';
+    this.slide_();
+  } else {
+    var speed = this.opts['effect']['slide']['speed'] * 0.85;
+    this.control['style'][this.transform_] = 'translateX(0px)';
+    this.control['style'][this.duration_] = speed + 'ms';
+    this.control['style'][this.timing_] = 'ease-out';
+  }
+
+  goog.events.listenOnce(this.control, this.endEvents, function() {
+    this.control['style'][this.transform_] = '';
+    this.control['style'][this.duration_] = '';
+    this.control['style'][this.timing_] = '';
+  }, false, this);
+
+  e.stopPropagation();
+};
+
+
+/**
+ * Hide all of the slides. Reset states.
+ * @private
+ */
+ww.Slides.prototype.hideAll_ = function() {
+  // hide all slides except current
+  var self = this;
+  goog.array.forEach(this.slides, function(slide, index) {
+    if (self.current !== index) {
+      slide['style']['display'] = 'none';
+      slide['style']['left'] = 0;
+      slide['style']['opacity'] = 0;
+      slide['style']['zIndex'] = 0;
+    }
+  });
+};
+
+
+/**
+ * Update slide container and control sizing.
+ * @private
+ */
+ww.Slides.prototype.update_ = function() {
+  this.hideAll_();
+
+  // get the new width and height
+  var width = goog.style.getSize(this.elem)['width'];
+  var height = (this.opts['height'] / this.opts['width']) * width + 'px';
+
+  // store dat
+  this.opts['width'] = width;
+  this.opts['height'] = height;
+
+  // update container and control
+  this.container['style']['width'] = width + 'px';
+  this.container['style']['height'] = height;
+
+  this.control['style']['width'] = width + 'px';
+  this.control['style']['height'] = height;
+};
+
+
+/**
+ * Play slides.
+ * @param {boolean} next Whether to advance to next slide.
+ */
+ww.Slides.prototype.play = function(next) {
+  if (!this.playInterval) {
+    if (next) {
+      currentSlide = this.current;
+      this.direction = 'next';
+
+      if (this.opts['play']['effect'] === 'fade') {
+        this.fade_();
+      } else {
+        this.slide_();
+      }
+    }
+
+    var self = this;
+    this.playInterval = setInterval(function() {
+      currentSlide = self.current;
+      self.direction = 'next';
+
+      if (self.opts['play']['effect'] === 'fade') {
+        self.fade_();
+      } else {
+        self.slide_();
+      }
+    }, this.opts['play']['interval']);
+
+    if (this.opts['play']['pauseOnHover']) {
+      goog.events.removeAll(this.container);
+
+      goog.events.listen(this.container,
+        goog.events.EventType.MOUSEOVER, function(e) {
+          self.stop();
+        });
+
+      goog.events.listen(this.container,
+        goog.events.EventType.MOUSEOUT, function(e) {
+          if (self.opts['play']['restartDelay']) {
+            self.restartDelay = setTimeout(function() {
+              self.play(true);
+            }, self.opts['play']['restartDelay']);
+          } else {
+            self.play(false);
+          }
+        });
+    }
+
+    this.playing = true;
+    if (this.playButton) {
+      goog.dom.classes.add(this.playButton, this.namespace + '-playing');
+    }
+
+    if (this.opts['play']['swap'] && this.playButton && this.stopButton) {
+      this.playButton['style']['display'] = 'none';
+      this.stopButton['style']['display'] = 'block';
+    }
+  }
+};
+
+
+/**
+ * Stop slides.
+ * @param {boolean} clicked To pause or not to pause.
+ */
+ww.Slides.prototype.stop = function(clicked) {
+  clearInterval(this.playInterval);
+
+  if (this.opts['play']['pauseOnHover'] && clicked) {
+    goog.events.removeAll(this.container);
+  }
+
+  this.playInterval = null;
+  this.playing = false;
+
+  if (this.playButton) {
+    goog.dom.classes.remove(this.playButton, this.namespace + '-playing');
+  }
+
+  if (this.opts['play']['swap'] && this.playButton && this.stopButton) {
+    this.playButton['style']['display'] = 'block';
+    this.stopButton['style']['display'] = 'none';
+  }
+};
+
+
+/**
+ * Advance to next slide.
+ * @param {String} effect Desired effect.
+ */
+ww.Slides.prototype.next = function(effect) {
+  this.direction = 'next';
+
+  if (effect === void 0) {
+    effect = this.opts['navigation']['effect'];
+  }
+
+  if (effect === 'fade') {
+    this.fade_();
+  } else {
+    this.slide_();
+  }
+};
+
+
+/**
+ * Advance to previous slide.
+ * @param {String} effect Desired effect.
+ */
+ww.Slides.prototype.previous = function(effect) {
+  this.direction = 'previous';
+
+  if (effect === void 0) {
+    effect = this.opts['navigation']['effect'];
+  }
+
+  if (effect === 'fade') {
+    this.fade_();
+  } else {
+    this.slide_();
+  }
+};
+
+
+/**
+ * Advance to a given slide number.
+ * @param {Number|String} number Desired go to slide number.
+ */
+ww.Slides.prototype.goTo = function(number) {
+  if (number > this.total) {
+    number = this.total;
+  } else if (number < 1) {
+    number = 1;
+  }
+
+  if (typeof number === 'number') {
+    if (this.opts['pagination']['effect'] === 'fade') {
+      this.fade_(number);
+    } else {
+      this.slide_(number);
+    }
+  } else if (typeof number === 'string') {
+    var index;
+
+    if (number.toLowerCase() === 'first') {
+      index = 0;
+    } else if (number.toLowerCase() === 'last') {
+      index = this.total;
+    }
+
+    if (this.opts['pagination']['effect'] === 'fade') {
+      this.fade_(index);
+    } else {
+      this.slide_(index);
+    }
+  }
+};
+
+
+/**
+ * Slide animation.
+ * @param {number} number Desired slide number.
+ * @private
+ */
+ww.Slides.prototype.slide_ = function(number) {
+  if (!this.animating && number !== this.current + 1) {
+    this.animating = true;
+
+    var currentSlide = this.current;
+    var value, direction, next;
+
+    if (number > -1) {
+      number = number - 1;
+      if (number > currentSlide) {
+        value = 1;
+        direction = -this.opts['width'];
+      } else {
+        value = -1;
+        direction = this.opts['width'];
+      }
+
+      next = number;
+    } else {
+      if (this.direction === 'next') {
+        value = 1;
+        direction = -this.opts['width'];
+      } else {
+        value = -1;
+        direction = this.opts['width'];
+      }
+
+      next = currentSlide + value;
+    }
+
+    if (next === -1) {
+      next = this.total - 1;
+    }
+
+    if (next === this.total) {
+      next = 0;
+    }
+
+    this.setActive_(next);
+
+    if (number > -1) {
+      // hide all except current
+      this.hideAll_();
+    }
+
+    // setup next slide
+    this.slides[next]['style']['display'] = 'block';
+    this.slides[next]['style']['left'] = value * this.opts['width'] + 'px';
+    this.slides[next]['style']['opacity'] = 1;
+    this.slides[next]['style']['zIndex'] = 10;
+
+    this.opts['callback']['start'](currentSlide + 1);
+
+    if (this.vendorPrefix) {
+      var speed = this.opts['effect']['slide']['speed'];
+      var trans = 'translateX(' + direction + 'px)';
+      this.control['style'][this.transform_] = trans;
+      this.control['style'][this.duration_] = speed + 'ms';
+      this.control['style'][this.timing_] = 'ease-out';
+
+      goog.events.listenOnce(this.control, this.endEvents, function() {
+        this.control['style'][this.transform_] = '';
+        this.control['style'][this.duration_] = '';
+        this.control['style'][this.timing_] = '';
+
+        this.slides[next]['style']['left'] = 0;
+        this.slides[currentSlide]['style']['display'] = 'none';
+        this.slides[currentSlide]['style']['left'] = 0;
+        this.slides[currentSlide]['style']['zIndex'] = 0;
+
+        this.current = next;
+        this.animating = false;
+
+        this.hideAll_();
+        if (this.touch) {
+          this.setupTouch_();
+        }
+
+        this.opts['callback']['complete'](next + 1);
+      }, false, this);
+    } else {
+      // CSS3 transform fallback
+      var self = this;
+      var left = parseInt(this.control['style']['left'], 10),
+
+      move = new ww.Tween({ 'left': left });
+      move.to({ 'left': direction }, this.opts['effect']['slide']['speed']);
+      move.onUpdate(function() {
+        self.control['style']['left'] = this['left'];
+      });
+      move.onComplete(function() {
+        self.control['style']['left'] = 0;
+        self.slides[next]['style']['left'] = 0;
+
+        self.slides[currentSlide]['style']['display'] = 'none';
+        self.slides[currentSlide]['style']['left'] = 0;
+        self.slides[currentSlide]['style']['zIndex'] = 0;
+
+        self.current = next;
+        self.animating = false;
+        self.opts['callback']['complete'](next + 1);
+      });
+      move.start();
+    }
+  }
+};
+
+
+/**
+ * Fade and cross-fade animation.
+ * @param {number} number Desired slide number.
+ * @private
+ */
+ww.Slides.prototype.fade_ = function(number) {
+  if (!this.animating && number !== this.current + 1) {
+    this.animating = true;
+
+    var self = this;
+    var currentSlide = this.current;
+    var next, value;
+
+    if (number) {
+      number = number - 1;
+      value = number > currentSlide ? 1 : -1;
+      next = number;
+    } else {
+      value = this.direction === 'next' ? 1 : -1;
+      next = currentSlide + value;
+    }
+
+    if (next === -1) {
+      next = this.total - 1;
+    }
+
+    if (next === this.total) {
+      next = 0;
+    }
+
+    this.setActive_(next);
+
+    this.hideAll_();
+    this.slides[next]['style']['zIndex'] = 10;
+
+    this.opts['callback']['start'](currentSlide + 1);
+
+    var currentOpacity = this.slides[currentSlide]['style']['opacity'] || 1;
+
+    var fadeIn = new ww.Tween({ 'opacity': 0 });
+        fadeIn.to({ 'opacity': 1 }, self.opts['effect']['fade']['speed']);
+        fadeIn.onStart(function() {
+          self.slides[next]['style']['display'] = 'block';
+        });
+        fadeIn.onUpdate(function() {
+          self.slides[next]['style']['opacity'] = this['opacity'];
+        });
+        fadeIn.onComplete(function() {
+          self.slides[next]['style']['zIndex'] = 10;
+          self.animating = false;
+          self.current = next;
+
+          self.opts['callback']['complete'](next + 1);
+        });
+
+    var fadeOut = new ww.Tween({ 'opacity': parseInt(currentOpacity, 10) });
+        fadeOut.to({ 'opacity': 0 }, self.opts['effect']['fade']['speed']);
+        fadeOut.onUpdate(function() {
+          self.slides[currentSlide]['style']['opacity'] = this['opacity'];
+        });
+        fadeOut.onComplete(function() {
+          self.slides[currentSlide]['style']['zIndex'] = 0;
+
+          if (!self.opts['effect']['fade']['crossfade']) {
+            fadeIn.start();
+          }
+        });
+
+    if (this.opts['effect']['fade']['crossfade']) {
+      fadeOut.start();
+      fadeIn.start();
+    } else {
+      fadeOut.start();
+    }
+  }
+};
+
+
+/**
+ * Return vendor prefix. Check if the browser supports CSS3 Transitions.
+ * @private
+ * @return {String} The vendor prefix.
+ */
+ww.Slides.prototype.getVendorPrefix_ = function() {
+  var body, i, style, transition, vendor;
+  body = document.body || document.documentElement;
+  style = body.style;
+  transition = 'transition';
+  vendor = ['Moz', 'Webkit', 'Khtml', 'O', 'ms', 'MS'];
+  transition = transition.charAt(0).toUpperCase() + transition.substr(1);
+  i = 0;
+  while (i < vendor.length) {
+    if (typeof style[vendor[i] + transition] === 'string') {
+      return vendor[i];
+    }
+    i++;
+  }
+  return false;
+};
+
+
+/**
+ * Detect touch support.
+ * @private
+ * @return {Boolean} If there is touch support.
+ */
+ww.Slides.prototype.getTouch_ = function() {
+  return (typeof TouchEvent !== "undefined") ||
+         (window['ontouchstart'] !== undefined);
+};