SVG Library

svg.js

var BitByte = BitByte || {};

// Note - This needs a dom manipulation library like Zepto or jQuery
BitByte.SVG = (function($) {
  "use strict";

  // the constructor
  var svg = function() {
    //private variables
    var $svg = $(arguments[0] || 'svg');
    var $groups = $svg.find('g');
    // groups with #step* are steps
    var $steps = $svg.find('g[id^=step]');
    var $currentStep = null;

    // public function -----------------------------------------------------
    this.hideAllSteps = function(){
      hideSteps();
    };

    this.showStep = function(nameOrInteger){
      var selector = 'step'+nameOrInteger;
      if(""+parseInt(nameOrInteger,10) != nameOrInteger){
        // not an integer
        selector = ''+nameOrInteger;
      }

      var $step = $steps.filter("#"+selector);
      if($step.length !== 0){
        hideSteps();
        $step.removeClass('hidden').addClass('shown');
        $currentStep = $step;
        console.log('current step',$currentStep);
      }
    };

    this.hideStep = function(nameOrInteger){
      var selector = 'step'+nameOrInteger;
      if(""+parseInt(nameOrInteger,10) != nameOrInteger){
        // not an integer
        selector = ''+nameOrInteger;
        $currentStep = null;
      }

      var $step = $steps.filter("#"+selector);
      if($step.length !== 0){
        hideSteps();
        $step.removeClass('shown').addClass('hidden');
      }
    };

    this.showGroup = function(groupName){
      var $group = $groups.find('#'+groupName);
      if($group.length !== 0){
        $step.removeClass('hidden').addClass('shown');
      }
    }

    this.hideGroup  = function(groupName){
      var $group = $groups.find('#'+groupName);
      if($group.length !== 0){
        $step.removeClass('shown').addClass('hidden');
      }
    }

    this.hideLabels = function(){
      if($currentStep){
        $currentStep.find('text').removeClass('shown').addClass('hidden');
      }
    }

    this.showLabels = function(){
      if($currentStep){
        $currentStep.find('text').addClass('shown').removeClass('hidden');
      }
    }

    this.hide = function(idOfThingToDraw){
      $svg.find("#"+idOfThingToDraw).hide();
    }

    this.draw = function(idOfThingToDraw){
      // Copied from @dz
      // http://product.voxmedia.com/2013/11/25/5426880/polygon-feature-design-svg-animations-for-fun-and-profit
      var initial_ts = new Date().getTime();
      var duration = 2000; // this animation should last for 2 seconds
      var $path = $svg.find("#"+idOfThingToDraw);
      if($path.length) {
        $path.show();
        var path = $path.get(0);
        var length = path.getTotalLength();

        path.style.strokeDasharray = length + ' ' + length;
        path.style.strokeDashoffset = length;

        var draw = function() {
          var progress = (Date.now() - initial_ts)/duration;
          if (progress < 1) {
             path.style.strokeDashoffset = Math.floor(length * (1 - progress));
             setTimeout(draw, 16);
          }
        };
        draw();
      }
    };

    // Private -----------------------------------------------------

    var hideSteps = function(){
      $steps.addClass('hidden').removeClass('shown');
    }

  };
  // Call the constructor during 'new'
  return svg;
})(Zepto);