rails_vivus 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 0db1a41c628b5f9f467ded76d16367f76ae21496
+  data.tar.gz: 564eb04db8fb8b0cabca4a670c1aafc2ab79edf9
+SHA512:
+  metadata.gz: cbb38833cfbde467dad7f516e1b8f4ac5fbacd1f65283e9abc62febb151dba9bd81baf1dcbb2f9fa224098e1b179308713c66a62a9f4b2138d2348fc94a49584
+  data.tar.gz: ed3fb8d550270daeb2a4d21082915f7f0a84f04fe84989aa0888776df2eadd5c4c906787562b62bd938b679e01c08f900962f7eedebe67e9dabc772caad8c1cd

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2015 Jack A. Huang
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.rdoc

@@ -0,0 +1,3 @@
+= RailsVivus
+
+This project rocks and uses MIT-LICENSE.

data/Rakefile

@@ -0,0 +1,23 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'RailsVivus'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+
+
+
+
+
+Bundler::GemHelper.install_tasks
+

data/app/assets/javascripts/vivus.js

@@ -0,0 +1,825 @@
+/**
+ * vivus - JavaScript library to make drawing animation on SVG
+ * @version v0.1.2
+ * @link https://github.com/maxwellito/vivus
+ * @license MIT
+ */
+
+'use strict';
+
+(function () {
+
+  'use strict';
+
+/**
+ * Pathformer
+ * Beta version
+ *
+ * Take any SVG version 1.1 and transform
+ * child elements to 'path' elements
+ *
+ * This code is purely forked from
+ * https://github.com/Waest/SVGPathConverter
+ */
+
+/**
+ * Class constructor
+ *
+ * @param {DOM|String} element Dom element of the SVG or id of it
+ */
+function Pathformer(element) {
+  // Test params
+  if (typeof element === 'undefined') {
+    throw new Error('Pathformer [constructor]: "element" parameter is required');
+  }
+
+  // Set the element
+  if (element.constructor === String) {
+    element = document.getElementById(element);
+    if (!element) {
+      throw new Error('Pathformer [constructor]: "element" parameter is not related to an existing ID');
+    }
+  }
+  if (element.constructor === SVGSVGElement) {
+    this.el = element;
+  } else {
+    throw new Error('Pathformer [constructor]: "element" parameter must be a string or a SVGelement');
+  }
+
+  // Start
+  this.scan(element);
+}
+
+/**
+ * List of tags which can be transformed
+ * to path elements
+ *
+ * @type {Array}
+ */
+Pathformer.prototype.TYPES = ['line', 'elipse', 'circle', 'polygon', 'polyline', 'rect'];
+
+/**
+ * List of attribute names which contain
+ * data. This array list them to check if
+ * they contain bad values, like percentage. 
+ *
+ * @type {Array}
+ */
+Pathformer.prototype.ATTR_WATCH = ['cx', 'cy', 'points', 'r', 'rx', 'ry', 'x', 'x1', 'x2', 'y', 'y1', 'y2'];
+
+/**
+ * Finds the elements compatible for transform
+ * and apply the liked method
+ *
+ * @param  {object} options Object from the constructor
+ */
+Pathformer.prototype.scan = function (svg) {
+  var fn, element, pathData, pathDom,
+    elements = svg.querySelectorAll(this.TYPES.join(','));
+  for (var i = 0; i < elements.length; i++) {
+    element = elements[i];
+    fn = this[element.tagName.toLowerCase() + 'ToPath'];
+    pathData = fn(this.parseAttr(element.attributes));
+    pathDom = this.pathMaker(element, pathData);
+    element.parentNode.replaceChild(pathDom, element);
+  }
+};
+
+
+/**
+ * Read `line` element to extract and transform
+ * data, to make it ready for a `path` object.
+ *
+ * @param  {DOMelement} element Line element to transform
+ * @return {object}             Data for a `path` element
+ */
+Pathformer.prototype.lineToPath = function (element) {
+  var newElement = {};
+  newElement.d = 'M' + element.x1 + ',' + element.y1 + 'L' + element.x2 + ',' + element.y2;
+  return newElement;
+};
+
+/**
+ * Read `rect` element to extract and transform
+ * data, to make it ready for a `path` object.
+ * The radius-border is not taken in charge yet.
+ * (your help is more than welcomed)
+ *
+ * @param  {DOMelement} element Rect element to transform
+ * @return {object}             Data for a `path` element
+ */
+Pathformer.prototype.rectToPath = function (element) {
+  var newElement = {},
+    x = parseFloat(element.x) || 0,
+    y = parseFloat(element.y) || 0,
+    width = parseFloat(element.width) || 0,
+    height = parseFloat(element.height) || 0;
+  newElement.d  = 'M' + x + ' ' + y + ' ';
+  newElement.d += 'L' + (x + width) + ' ' + y + ' ';
+  newElement.d += 'L' + (x + width) + ' ' + (y + height) + ' ';
+  newElement.d += 'L' + x + ' ' + (y + height) + ' Z';
+  return newElement;
+};
+
+/**
+ * Read `polyline` element to extract and transform
+ * data, to make it ready for a `path` object.
+ *
+ * @param  {DOMelement} element Polyline element to transform
+ * @return {object}             Data for a `path` element
+ */
+Pathformer.prototype.polylineToPath = function (element) {
+  var newElement = {};
+  var points = element.points.split(' ');
+  var path = 'M' + points[0];
+  for(var i = 1; i < points.length; i++) {
+    if (points[i].indexOf(',') !== -1) {
+      path += 'L'+points[i];
+    }
+  }
+  newElement.d = path;
+  return newElement;
+};
+
+/**
+ * Read `polygon` element to extract and transform
+ * data, to make it ready for a `path` object.
+ * This method rely on polylineToPath, because the
+ * logic is similar. THe path created is just closed,
+ * so it needs an 'Z' at the end.
+ *
+ * @param  {DOMelement} element Polygon element to transform
+ * @return {object}             Data for a `path` element
+ */
+Pathformer.prototype.polygonToPath = function (element) {
+  var newElement = Pathformer.prototype.polylineToPath(element);
+  newElement.d += 'Z';
+  return newElement;
+};
+
+/**
+ * Read `elipse` element to extract and transform
+ * data, to make it ready for a `path` object.
+ *
+ * @param  {DOMelement} element Elipse element to transform
+ * @return {object}             Data for a `path` element
+ */
+Pathformer.prototype.elipseToPath = function (element) {
+  var startX = element.cx - element.rx,
+      startY = element.cy;
+  var endX = parseFloat(element.cx) + parseFloat(element.rx),
+      endY = element.cy;
+
+  var newElement = {};
+  newElement.d = 'M' + startX + ',' + startY +
+                 'A' + element.rx + ',' + element.ry + ' 0,1,1 ' + endX + ',' + endY +
+                 'A' + element.rx + ',' + element.ry + ' 0,1,1 ' + startX + ',' + endY;
+  return newElement;
+};
+
+/**
+ * Read `circle` element to extract and transform
+ * data, to make it ready for a `path` object.
+ *
+ * @param  {DOMelement} element Circle element to transform
+ * @return {object}             Data for a `path` element
+ */
+Pathformer.prototype.circleToPath = function (element) {
+  var newElement = {};
+  var startX = element.cx - element.r,
+      startY = element.cy;
+  var endX = parseFloat(element.cx) + parseFloat(element.r),
+      endY = element.cy;
+  newElement.d =  'M' + startX + ',' + startY +
+                  'A' + element.r + ',' + element.r + ' 0,1,1 ' + endX + ',' + endY +
+                  'A' + element.r + ',' + element.r + ' 0,1,1 ' + startX + ',' + endY;
+  return newElement;
+};
+
+/**
+ * Create `path` elements form original element
+ * and prepared objects
+ *
+ * @param  {DOMelement} element  Original element to transform
+ * @param  {object} pathData     Path data (from `toPath` methods)
+ * @return {DOMelement}          Path element
+ */
+Pathformer.prototype.pathMaker = function (element, pathData) {
+  var i, attr, pathTag = document.createElementNS('http://www.w3.org/2000/svg','path');
+  for(i = 0; i < element.attributes.length; i++) {
+    attr = element.attributes[i];
+    if (this.ATTR_WATCH.indexOf(attr.name) === -1) {
+      pathTag.setAttribute(attr.name, attr.value);
+    }
+  }
+  for(i in pathData) {
+    pathTag.setAttribute(i, pathData[i]);
+  }
+  return pathTag;
+};
+
+/**
+ * Parse attributes of a DOM element to
+ * get an object of attribute => value
+ *
+ * @param  {NamedNodeMap} attributes Attributes object from DOM element to parse
+ * @return {object}                  Object of attributes
+ */
+Pathformer.prototype.parseAttr = function (element) {
+  var attr, output = {};
+  for (var i = 0; i < element.length; i++) {
+    attr = element[i];
+    // Check if no data attribute contains '%', or the transformation is impossible
+    if (this.ATTR_WATCH.indexOf(attr.name) !== -1 && attr.value.indexOf('%') !== -1) {
+      throw new Error('Pathformer [parseAttr]: a SVG shape got values in percentage. This cannot be transformed into \'path\' tags. Please use \'viewBox\'.');
+    }
+    output[attr.name] = attr.value;
+  }
+  return output;
+};
+
+  'use strict';
+
+var requestAnimFrame, cancelAnimFrame, parsePositiveInt;
+
+/**
+ * Vivus
+ * Beta version
+ *
+ * Take any SVG and make the animation
+ * to give give the impression of live drawing
+ *
+ * This in more than just inspired from codrops
+ * At that point, it's a pure fork.
+ */
+
+/**
+ * Class constructor
+ * option structure
+ *   type: 'delayed'|'async'|'oneByOne'|'script' (to know if the item must be drawn asynchronously or not, default: delayed)
+ *   duration: <int> (in frames)
+ *   start: 'inViewport'|'manual'|'autostart' (start automatically the animation, default: inViewport)
+ *   delay: <int> (delay between the drawing of first and last path)
+ *
+ * The attribute 'type' is by default on 'delayed'.
+ *  - 'delayed'
+ *    all paths are draw at the same time but with a
+ *    little delay between them before start
+ *  - 'async'
+ *    all path are start and finish at the same time
+ *  - 'oneByOne'
+ *    only one path is draw at the time
+ *    the end of the first one will trigger the draw
+ *    of the next one
+ *
+ * All these values can be overwritten individually
+ * for each path item in the SVG
+ * The value of frames will always take the advantage of
+ * the duration value.
+ * If you fail somewhere, an error will be thrown.
+ * Good luck.
+ *
+ * @constructor
+ * @this {Vivus}
+ * @param {DOM|String}   element  Dom element of the SVG or id of it
+ * @param {Object}       options  Options about the animation
+ * @param {Function}     callback Callback for the end of the animation
+ */
+function Vivus (element, options, callback) {
+
+  // Setup
+  this.setElement(element);
+  this.setOptions(options);
+  this.setCallback(callback);
+
+  // Set object variables
+  this.frameLength = 0;
+  this.currentFrame = 0;
+  this.map = [];
+
+  // Start
+  new Pathformer(element);
+  this.mapping();
+  this.starter();
+}
+
+
+/**
+ * Setters
+ **************************************
+ */
+
+/**
+ * Check and set the element in the instance
+ * The method will not return anything, but will throw an
+ * error if the parameter is invalid
+ *
+ * @param {DOM|String}   element  SVG Dom element or id of it
+ */
+Vivus.prototype.setElement = function (element) {
+  // Basic check
+  if (typeof element === 'undefined') {
+    throw new Error('Vivus [constructor]: "element" parameter is required');
+  }
+
+  // Set the element
+  if (element.constructor === String) {
+    element = document.getElementById(element);
+    if (!element) {
+      throw new Error('Vivus [constructor]: "element" parameter is not related to an existing ID');
+    }
+  }
+  if (element.constructor === SVGSVGElement) {
+    this.el = element;
+  } else {
+    throw new Error('Vivus [constructor]: "element" parameter must be a string or a SVGelement');
+  }
+};
+
+/**
+ * Set up user option to the instance
+ * The method will not return anything, but will throw an
+ * error if the parameter is invalid
+ *
+ * @param  {object} options Object from the constructor
+ */
+Vivus.prototype.setOptions = function (options) {
+  var allowedTypes = ['delayed', 'async', 'oneByOne', 'scenario', 'scenario-sync'];
+  var allowedStarts =  ['inViewport', 'manual', 'autostart'];
+
+  // Basic check
+  if (options !== undefined && options.constructor !== Object) {
+    throw new Error('Vivus [constructor]: "options" parameter must be an object');
+  }
+  else {
+    options = options || {};
+  }
+
+  // Set the animation type
+  if (options.type && allowedTypes.indexOf(options.type) === -1) {
+    throw new Error('Vivus [constructor]: ' + options.type + ' is not an existing animation `type`');
+  }
+  else {
+    this.type = options.type || allowedTypes[0];
+  }
+
+  // Set the start type
+  if (options.start && allowedStarts.indexOf(options.start) === -1) {
+    throw new Error('Vivus [constructor]: ' + options.start + ' is not an existing `start` option');
+  }
+  else {
+    this.start = options.start || allowedStarts[0];
+  }
+
+  this.isIE        = (navigator.userAgent.indexOf('MSIE') !== -1);
+  this.duration    = parsePositiveInt(options.duration, 120);
+  this.delay       = parsePositiveInt(options.delay, null);
+  this.dashGap     = parsePositiveInt(options.dashGap, 2);
+  this.forceRender = options.hasOwnProperty('forceRender') ? !!options.forceRender : this.isIE;
+  this.selfDestroy = !!options.selfDestroy;
+
+  if (this.delay >= this.duration) {
+    throw new Error('Vivus [constructor]: delay must be shorter than duration');
+  }
+};
+
+/**
+ * Set up callback to the instance
+ * The method will not return enything, but will throw an
+ * error if the parameter is invalid
+ *
+ * @param  {Function} callback Callback for the animation end
+ */
+Vivus.prototype.setCallback = function (callback) {
+  // Basic check
+  if (!!callback && callback.constructor !== Function) {
+    throw new Error('Vivus [constructor]: "callback" parameter must be a function');
+  }
+  this.callback = callback || function () {};
+};
+
+
+/**
+ * Core
+ **************************************
+ */
+
+/**
+ * Map the svg, path by path.
+ * The method return nothing, it just fill the
+ * `map` array. Each item in this array represent
+ * a path element from the SVG, with informations for
+ * the animation.
+ *
+ * ```
+ * [
+ *   {
+ *     el: <DOMobj> the path element
+ *     length: <number> length of the path line
+ *     startAt: <number> time start of the path animation (in frames)
+ *     duration: <number> path animation duration (in frames)
+ *   },
+ *   ...
+ * ]
+ * ```
+ *
+ */
+Vivus.prototype.mapping = function () {
+  var i, paths, path, pAttrs, pathObj, totalLength, lengthMeter, timePoint;
+  timePoint = totalLength = lengthMeter = 0;
+  paths = this.el.querySelectorAll('path');
+
+  for (i = 0; i < paths.length; i++) {
+    path = paths[i];
+    pathObj = {
+      el: path,
+      length: Math.ceil(path.getTotalLength())
+    };
+    // Test if the path length is correct
+    if (isNaN(pathObj.length)) {
+      if (window.console && console.warn) {
+        console.warn('Vivus [mapping]: cannot retrieve a path element length', path);
+      }
+      continue;
+    }
+    totalLength += pathObj.length;
+    this.map.push(pathObj);
+    path.style.strokeDasharray  = pathObj.length + ' ' + (pathObj.length + this.dashGap);
+    path.style.strokeDashoffset = pathObj.length;
+
+    // Fix IE glitch
+    if (this.isIE) {
+      pathObj.length += this.dashGap;
+    }
+    this.renderPath(i);
+  }
+
+  totalLength = totalLength === 0 ? 1 : totalLength;
+  this.delay = this.delay === null ? this.duration / 3 : this.delay;
+  this.delayUnit = this.delay / (paths.length > 1 ? paths.length - 1 : 1);
+
+  for (i = 0; i < this.map.length; i++) {
+    pathObj = this.map[i];
+
+    switch (this.type) {
+    case 'delayed':
+      pathObj.startAt = this.delayUnit * i;
+      pathObj.duration = this.duration - this.delay;
+      break;
+
+    case 'oneByOne':
+      pathObj.startAt = lengthMeter / totalLength * this.duration;
+      pathObj.duration = pathObj.length / totalLength * this.duration;
+      break;
+
+    case 'async':
+      pathObj.startAt = 0;
+      pathObj.duration = this.duration;
+      break;
+
+    case 'scenario-sync':
+      path = paths[i];
+      pAttrs = this.parseAttr(path);
+      pathObj.startAt = timePoint + (parsePositiveInt(pAttrs['data-delay'], this.delayUnit) || 0);
+      pathObj.duration = parsePositiveInt(pAttrs['data-duration'], this.duration);
+      timePoint = pAttrs['data-async'] !== undefined ? pathObj.startAt : pathObj.startAt + pathObj.duration;
+      this.frameLength = Math.max(this.frameLength, (pathObj.startAt + pathObj.duration));
+      break;
+
+    case 'scenario':
+      path = paths[i];
+      pAttrs = this.parseAttr(path);
+      pathObj.startAt = parsePositiveInt(pAttrs['data-start'], this.delayUnit) || 0;
+      pathObj.duration = parsePositiveInt(pAttrs['data-duration'], this.duration);
+      this.frameLength = Math.max(this.frameLength, (pathObj.startAt + pathObj.duration));
+      break;
+    }
+    lengthMeter += pathObj.length;
+    this.frameLength = this.frameLength || this.duration;
+  }
+};
+
+/**
+ * Interval method to draw the SVG from current
+ * position of the animation. It update the value of
+ * `currentFrame` and re-trace the SVG.
+ *
+ * It use this.handle to store the requestAnimationFrame
+ * and clear it one the animation is stopped. So this
+ * attribute can be used to know if the animation is
+ * playing.
+ *
+ * Once the animation at the end, this method will
+ * trigger the Vivus callback.
+ *
+ */
+Vivus.prototype.drawer = function () {
+  var self = this;
+  this.currentFrame += this.speed;
+
+  if (this.currentFrame <= 0) {
+    this.stop();
+    this.reset();
+  } else if (this.currentFrame >= this.frameLength) {
+    this.stop();
+    this.currentFrame = this.frameLength;
+    this.trace();
+    if (this.selfDestroy) {
+      this.destroy();
+    }
+    this.callback(this);
+  } else {
+    this.trace();
+    this.handle = requestAnimFrame(function () {
+      self.drawer();
+    });
+  }
+};
+
+/**
+ * Draw the SVG at the current instant from the
+ * `currentFrame` value. Here is where most of the magic is.
+ * The trick is to use the `strokeDashoffset` style property.
+ *
+ * For optimisation reasons, a new property called `progress`
+ * is added in each item of `map`. This one contain the current
+ * progress of the path element. Only if the new value is different
+ * the new value will be applied to the DOM element. This
+ * method save a lot of resources to re-render the SVG. And could
+ * be improved if the animation couldn't be played forward.
+ *
+ */
+Vivus.prototype.trace = function () {
+  var i, progress, path;
+  for (i = 0; i < this.map.length; i++) {
+    path = this.map[i];
+    progress = (this.currentFrame - path.startAt) / path.duration;
+    progress = Math.max(0, Math.min(1, progress));
+    if (path.progress !== progress) {
+      path.progress = progress;
+      path.el.style.strokeDashoffset = Math.floor(path.length * (1 - progress));
+      this.renderPath(i);
+    }
+  }
+};
+
+/**
+ * Method forcing the browser to re-render a path element
+ * from it's index in the map. Depending on the `forceRender`
+ * value.
+ * The trick is to replace the path element by it's clone.
+ * This practice is not recommended because it's asking more
+ * ressources, too much DOM manupulation..
+ * but it's the only way to let the magic happen on IE.
+ * By default, this fallback is only applied on IE.
+ * 
+ * @param  {Number} index Path index
+ */
+Vivus.prototype.renderPath = function (index) {
+  if (this.forceRender && this.map && this.map[index]) {
+    var pathObj = this.map[index],
+        newPath = pathObj.el.cloneNode(true);
+    pathObj.el.parentNode.replaceChild(newPath, pathObj.el);
+    pathObj.el = newPath;
+  }
+};
+
+/**
+ * Trigger to start of the animation.
+ * Depending on the `start` value, a different script
+ * will be applied.
+ *
+ * If the `start` value is not valid, an error will be thrown.
+ * Even if technically, this is impossible.
+ *
+ */
+Vivus.prototype.starter = function () {
+  switch (this.start) {
+  case 'manual':
+    return;
+
+  case 'autostart':
+    this.play();
+    break;
+
+  case 'inViewport':
+    var self = this,
+    listener = function () {
+      if (self.isInViewport(self.el, 1)) {
+        self.play();
+        window.removeEventListener('scroll', listener);
+      }
+    };
+    window.addEventListener('scroll', listener);
+    listener();
+    break;
+  }
+};
+
+
+/**
+ * Controls
+ **************************************
+ */
+
+/**
+ * Reset the instance to the initial state : undraw
+ * Be careful, it just reset the animation, if you're
+ * playing the animation, this won't stop it. But just
+ * make it start from start.
+ *
+ */
+Vivus.prototype.reset = function () {
+  this.currentFrame = 0;
+  this.trace();
+  return this;
+};
+
+/**
+ * Play the animation at the desired speed.
+ * Speed must be a valid number (no zero).
+ * By default, the speed value is 1.
+ * But a negative value is accepted to go forward.
+ *
+ * And works with float too.
+ * But don't forget we are in JavaScript, se be nice
+ * with him and give him a 1/2^x value.
+ *
+ * @param  {number} speed Animation speed [optional]
+ */
+Vivus.prototype.play = function (speed) {
+  if (speed && typeof speed !== 'number') {
+    throw new Error('Vivus [play]: invalid speed');
+  }
+  this.speed = speed || 1;
+  if (!this.handle) {
+    this.drawer();
+  }
+  return this;
+};
+
+/**
+ * Stop the current animation, if on progress.
+ * Should not trigger any error.
+ *
+ */
+Vivus.prototype.stop = function () {
+  if (this.handle) {
+    cancelAnimFrame(this.handle);
+    delete this.handle;
+  }
+  return this;
+};
+
+/**
+ * Destroy the instance.
+ * Remove all bad styling attributes on all
+ * path tags
+ *
+ */
+Vivus.prototype.destroy = function () {
+  var i, path;
+  for (i = 0; i < this.map.length; i++) {
+    path = this.map[i];
+    path.el.style.strokeDashoffset = null;
+    path.el.style.strokeDasharray = null;
+    this.renderPath(i);
+  }
+};
+
+
+/**
+ * Utils methods
+ * from Codrops
+ **************************************
+ */
+
+/**
+ * Parse attributes of a DOM element to
+ * get an object of {attributeName => attributeValue}
+ *
+ * @param  {object} element DOM element to parse
+ * @return {object}         Object of attributes
+ */
+Vivus.prototype.parseAttr = function (element) {
+  var attr, output = {};
+  if (element && element.attributes) {
+    for (var i = 0; i < element.attributes.length; i++) {
+      attr = element.attributes[i];
+      output[attr.name] = attr.value;
+    }
+  }
+  return output;
+};
+
+/**
+ * Reply if an element is in the page viewport
+ *
+ * @param  {object} el Element to observe
+ * @param  {number} h  Percentage of height
+ * @return {boolean}
+ */
+Vivus.prototype.isInViewport = function (el, h) {
+  var scrolled   = this.scrollY(),
+    viewed       = scrolled + this.getViewportH(),
+    elBCR        = el.getBoundingClientRect(),
+    elHeight     = elBCR.height,
+    elTop        = scrolled + elBCR.top,
+    elBottom     = elTop + elHeight;
+
+  // if 0, the element is considered in the viewport as soon as it enters.
+  // if 1, the element is considered in the viewport only when it's fully inside
+  // value in percentage (1 >= h >= 0)
+  h = h || 0;
+
+  return (elTop + elHeight * h) <= viewed && (elBottom) >= scrolled;
+};
+
+/**
+ * Alias for document element
+ *
+ * @type {DOMelement}
+ */
+Vivus.prototype.docElem = window.document.documentElement;
+
+/**
+ * Get the viewport height in pixels
+ *
+ * @return {integer} Viewport height
+ */
+Vivus.prototype.getViewportH = function () {
+  var client = this.docElem.clientHeight,
+    inner = window.innerHeight;
+
+  if (client < inner) {
+    return inner;
+  }
+  else {
+    return client;
+  }
+};
+
+/**
+ * Get the page Y offset
+ *
+ * @return {integer} Page Y offset
+ */
+Vivus.prototype.scrollY = function () {
+  return window.pageYOffset || this.docElem.scrollTop;
+};
+
+/**
+ * Alias for `requestAnimationFrame` or
+ * `setTimeout` function for deprecated browsers.
+ *
+ */
+requestAnimFrame = (function () {
+  return (
+    window.requestAnimationFrame       ||
+    window.webkitRequestAnimationFrame ||
+    window.mozRequestAnimationFrame    ||
+    window.oRequestAnimationFrame      ||
+    window.msRequestAnimationFrame     ||
+    function(/* function */ callback){
+      return window.setTimeout(callback, 1000 / 60);
+    }
+  );
+})();
+
+/**
+ * Alias for `cancelAnimationFrame` or
+ * `cancelTimeout` function for deprecated browsers.
+ *
+ */
+cancelAnimFrame = (function () {
+  return (
+    window.cancelAnimationFrame       ||
+    window.webkitCancelAnimationFrame ||
+    window.mozCancelAnimationFrame    ||
+    window.oCancelAnimationFrame      ||
+    window.msCancelAnimationFrame     ||
+    function(id){
+      return window.clearTimeout(id);
+    }
+  );
+})();
+
+/**
+ * Parse string to integer.
+ * If the number is not positive or null
+ * the method will return the default value
+ * or 0 if undefined
+ *
+ * @param {string} value String to parse
+ * @param {*} defaultValue Value to return if the result parsed is invalid
+ * @return {number}
+ *
+ */
+parsePositiveInt = function (value, defaultValue) {
+  var output = parseInt(value, 10);
+  return (output >= 0) ? output : defaultValue;
+};
+
+
+  window.Vivus = Vivus;
+}());

data/app/assets/javascripts/vivus.min.js

@@ -0,0 +1,7 @@
+/**
+ * vivus - JavaScript library to make drawing animation on SVG
+ * @version v0.1.2
+ * @link https://github.com/maxwellito/vivus
+ * @license MIT
+ */
+"use strict";!function(){function t(t){if("undefined"==typeof t)throw new Error('Pathformer [constructor]: "element" parameter is required');if(t.constructor===String&&(t=document.getElementById(t),!t))throw new Error('Pathformer [constructor]: "element" parameter is not related to an existing ID');if(t.constructor!==SVGSVGElement)throw new Error('Pathformer [constructor]: "element" parameter must be a string or a SVGelement');this.el=t,this.scan(t)}function e(e,r,n){this.setElement(e),this.setOptions(r),this.setCallback(n),this.frameLength=0,this.currentFrame=0,this.map=[],new t(e),this.mapping(),this.starter()}t.prototype.TYPES=["line","elipse","circle","polygon","polyline","rect"],t.prototype.ATTR_WATCH=["cx","cy","points","r","rx","ry","x","x1","x2","y","y1","y2"],t.prototype.scan=function(t){for(var e,r,n,o,a=t.querySelectorAll(this.TYPES.join(",")),i=0;i<a.length;i++)r=a[i],e=this[r.tagName.toLowerCase()+"ToPath"],n=e(this.parseAttr(r.attributes)),o=this.pathMaker(r,n),r.parentNode.replaceChild(o,r)},t.prototype.lineToPath=function(t){var e={};return e.d="M"+t.x1+","+t.y1+"L"+t.x2+","+t.y2,e},t.prototype.rectToPath=function(t){var e={},r=parseFloat(t.x)||0,n=parseFloat(t.y)||0,o=parseFloat(t.width)||0,a=parseFloat(t.height)||0;return e.d="M"+r+" "+n+" ",e.d+="L"+(r+o)+" "+n+" ",e.d+="L"+(r+o)+" "+(n+a)+" ",e.d+="L"+r+" "+(n+a)+" Z",e},t.prototype.polylineToPath=function(t){for(var e={},r=t.points.split(" "),n="M"+r[0],o=1;o<r.length;o++)-1!==r[o].indexOf(",")&&(n+="L"+r[o]);return e.d=n,e},t.prototype.polygonToPath=function(e){var r=t.prototype.polylineToPath(e);return r.d+="Z",r},t.prototype.elipseToPath=function(t){var e=t.cx-t.rx,r=t.cy,n=parseFloat(t.cx)+parseFloat(t.rx),o=t.cy,a={};return a.d="M"+e+","+r+"A"+t.rx+","+t.ry+" 0,1,1 "+n+","+o+"A"+t.rx+","+t.ry+" 0,1,1 "+e+","+o,a},t.prototype.circleToPath=function(t){var e={},r=t.cx-t.r,n=t.cy,o=parseFloat(t.cx)+parseFloat(t.r),a=t.cy;return e.d="M"+r+","+n+"A"+t.r+","+t.r+" 0,1,1 "+o+","+a+"A"+t.r+","+t.r+" 0,1,1 "+r+","+a,e},t.prototype.pathMaker=function(t,e){var r,n,o=document.createElementNS("http://www.w3.org/2000/svg","path");for(r=0;r<t.attributes.length;r++)n=t.attributes[r],-1===this.ATTR_WATCH.indexOf(n.name)&&o.setAttribute(n.name,n.value);for(r in e)o.setAttribute(r,e[r]);return o},t.prototype.parseAttr=function(t){for(var e,r={},n=0;n<t.length;n++){if(e=t[n],-1!==this.ATTR_WATCH.indexOf(e.name)&&-1!==e.value.indexOf("%"))throw new Error("Pathformer [parseAttr]: a SVG shape got values in percentage. This cannot be transformed into 'path' tags. Please use 'viewBox'.");r[e.name]=e.value}return r};var r,n,o;e.prototype.setElement=function(t){if("undefined"==typeof t)throw new Error('Vivus [constructor]: "element" parameter is required');if(t.constructor===String&&(t=document.getElementById(t),!t))throw new Error('Vivus [constructor]: "element" parameter is not related to an existing ID');if(t.constructor!==SVGSVGElement)throw new Error('Vivus [constructor]: "element" parameter must be a string or a SVGelement');this.el=t},e.prototype.setOptions=function(t){var e=["delayed","async","oneByOne","scenario","scenario-sync"],r=["inViewport","manual","autostart"];if(void 0!==t&&t.constructor!==Object)throw new Error('Vivus [constructor]: "options" parameter must be an object');if(t=t||{},t.type&&-1===e.indexOf(t.type))throw new Error("Vivus [constructor]: "+t.type+" is not an existing animation `type`");if(this.type=t.type||e[0],t.start&&-1===r.indexOf(t.start))throw new Error("Vivus [constructor]: "+t.start+" is not an existing `start` option");if(this.start=t.start||r[0],this.isIE=-1!==navigator.userAgent.indexOf("MSIE"),this.duration=o(t.duration,120),this.delay=o(t.delay,null),this.dashGap=o(t.dashGap,2),this.forceRender=t.hasOwnProperty("forceRender")?!!t.forceRender:this.isIE,this.selfDestroy=!!t.selfDestroy,this.delay>=this.duration)throw new Error("Vivus [constructor]: delay must be shorter than duration")},e.prototype.setCallback=function(t){if(t&&t.constructor!==Function)throw new Error('Vivus [constructor]: "callback" parameter must be a function');this.callback=t||function(){}},e.prototype.mapping=function(){var t,e,r,n,a,i,s,h;for(h=i=s=0,e=this.el.querySelectorAll("path"),t=0;t<e.length;t++)r=e[t],a={el:r,length:Math.ceil(r.getTotalLength())},isNaN(a.length)?window.console&&console.warn&&console.warn("Vivus [mapping]: cannot retrieve a path element length",r):(i+=a.length,this.map.push(a),r.style.strokeDasharray=a.length+" "+(a.length+this.dashGap),r.style.strokeDashoffset=a.length,this.isIE&&(a.length+=this.dashGap),this.renderPath(t));for(i=0===i?1:i,this.delay=null===this.delay?this.duration/3:this.delay,this.delayUnit=this.delay/(e.length>1?e.length-1:1),t=0;t<this.map.length;t++){switch(a=this.map[t],this.type){case"delayed":a.startAt=this.delayUnit*t,a.duration=this.duration-this.delay;break;case"oneByOne":a.startAt=s/i*this.duration,a.duration=a.length/i*this.duration;break;case"async":a.startAt=0,a.duration=this.duration;break;case"scenario-sync":r=e[t],n=this.parseAttr(r),a.startAt=h+(o(n["data-delay"],this.delayUnit)||0),a.duration=o(n["data-duration"],this.duration),h=void 0!==n["data-async"]?a.startAt:a.startAt+a.duration,this.frameLength=Math.max(this.frameLength,a.startAt+a.duration);break;case"scenario":r=e[t],n=this.parseAttr(r),a.startAt=o(n["data-start"],this.delayUnit)||0,a.duration=o(n["data-duration"],this.duration),this.frameLength=Math.max(this.frameLength,a.startAt+a.duration)}s+=a.length,this.frameLength=this.frameLength||this.duration}},e.prototype.drawer=function(){var t=this;this.currentFrame+=this.speed,this.currentFrame<=0?(this.stop(),this.reset()):this.currentFrame>=this.frameLength?(this.stop(),this.currentFrame=this.frameLength,this.trace(),this.selfDestroy&&this.destroy(),this.callback(this)):(this.trace(),this.handle=r(function(){t.drawer()}))},e.prototype.trace=function(){var t,e,r;for(t=0;t<this.map.length;t++)r=this.map[t],e=(this.currentFrame-r.startAt)/r.duration,e=Math.max(0,Math.min(1,e)),r.progress!==e&&(r.progress=e,r.el.style.strokeDashoffset=Math.floor(r.length*(1-e)),this.renderPath(t))},e.prototype.renderPath=function(t){if(this.forceRender&&this.map&&this.map[t]){var e=this.map[t],r=e.el.cloneNode(!0);e.el.parentNode.replaceChild(r,e.el),e.el=r}},e.prototype.starter=function(){switch(this.start){case"manual":return;case"autostart":this.play();break;case"inViewport":var t=this,e=function(){t.isInViewport(t.el,1)&&(t.play(),window.removeEventListener("scroll",e))};window.addEventListener("scroll",e),e()}},e.prototype.reset=function(){return this.currentFrame=0,this.trace(),this},e.prototype.play=function(t){if(t&&"number"!=typeof t)throw new Error("Vivus [play]: invalid speed");return this.speed=t||1,this.handle||this.drawer(),this},e.prototype.stop=function(){return this.handle&&(n(this.handle),delete this.handle),this},e.prototype.destroy=function(){var t,e;for(t=0;t<this.map.length;t++)e=this.map[t],e.el.style.strokeDashoffset=null,e.el.style.strokeDasharray=null,this.renderPath(t)},e.prototype.parseAttr=function(t){var e,r={};if(t&&t.attributes)for(var n=0;n<t.attributes.length;n++)e=t.attributes[n],r[e.name]=e.value;return r},e.prototype.isInViewport=function(t,e){var r=this.scrollY(),n=r+this.getViewportH(),o=t.getBoundingClientRect(),a=o.height,i=r+o.top,s=i+a;return e=e||0,n>=i+a*e&&s>=r},e.prototype.docElem=window.document.documentElement,e.prototype.getViewportH=function(){var t=this.docElem.clientHeight,e=window.innerHeight;return e>t?e:t},e.prototype.scrollY=function(){return window.pageYOffset||this.docElem.scrollTop},r=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){return window.setTimeout(t,1e3/60)}}(),n=function(){return window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||window.oCancelAnimationFrame||window.msCancelAnimationFrame||function(t){return window.clearTimeout(t)}}(),o=function(t,e){var r=parseInt(t,10);return r>=0?r:e},window.Vivus=e}();

data/lib/rails_vivus/version.rb

@@ -0,0 +1,3 @@
+module RailsVivus
+  VERSION = "0.0.1"
+end

data/lib/rails_vivus.rb

@@ -0,0 +1,2 @@
+module RailsVivus
+end

data/lib/tasks/rails_vivus_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :rails_vivus do
+#   # Task goes here
+# end

metadata

@@ -0,0 +1,80 @@
+--- !ruby/object:Gem::Specification
+name: rails_vivus
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- Jack A. Huang
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-02-09 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 4.2.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 4.2.0
+- !ruby/object:Gem::Dependency
+  name: rspec-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Vivus (SVG animation) assets for Rails
+email:
+- huynhquancam@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.rdoc
+- Rakefile
+- app/assets/javascripts/vivus.js
+- app/assets/javascripts/vivus.min.js
+- lib/rails_vivus.rb
+- lib/rails_vivus/version.rb
+- lib/tasks/rails_vivus_tasks.rake
+homepage: http://github.com/huynhquancam/rails_vivus
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.4.5
+signing_key: 
+specification_version: 4
+summary: Vivus (SVG animation) assets for Rails
+test_files: []