middleman-wizard-template 1.0.3 → 1.0.4

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

@@ -1,846 +0,0 @@
-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);
-};