sliding in and out

build/bundle.js

@@ -4522,12 +4522,6 @@ var Sandbox = Backbone.View.extend({
   },
 
   initGitShim: function(options) {
-    /*
-    this.gitShim = new GitShim({
-      beforeCB: function() { console.log('before'); },
-      afterCB: function() { console.log('after'); },
-      afterDeferHandler: function(deferred) { deferred.resolve(); },
-    });*/
   },
 
   takeControl: function() {
@@ -4767,7 +4761,7 @@ var Level = Sandbox.extend({
     this.goalTreeString = options.level.goalTree;
     if (!this.goalTreeString) {
       console.warn('woah no goal, using random other one');
-      this.goalTreeString = '{"branches":{"master":{"target":"C2","id":"master"}},"commits":{"C0":{"parents":[],"id":"C0","rootCommit":true},"C1":{"parents":["C30"],"id":"C1"},"C2":{"parents":["C1"],"id":"C2"}},"HEAD":{"target":"master","id":"HEAD"}}';
+      this.goalTreeString = '{"branches":{"master":{"target":"C2","id":"master"}},"commits":{"C0":{"parents":[],"id":"C0","rootCommit":true},"C1":{"parents":["C0"],"id":"C1"},"C2":{"parents":["C1"],"id":"C2"}},"HEAD":{"target":"master","id":"HEAD"}}';
       //this.goalTreeString = '{"branches":{"master":{"target":"C2","id":"master"}},"commits":{"C0":{"parents":[],"id":"C0","rootCommit":true},"C1":{"parents":["C0"],"id":"C1"},"C2":{"parents":["C1"],"id":"C2"}},"HEAD":{"target":"master","id":"HEAD"}}';
     }
 
@@ -4782,6 +4776,21 @@ var Level = Sandbox.extend({
       el: options.el || this.getDefaultVisEl(),
       treeString: options.level.startTree
     });
+
+    //this.initGoalVisualization(options);
+  },
+
+  getDefaultGoalVisEl: function() {
+    return $('#commandLineHistory');
+  },
+
+  initGoalVisualization: function(options) {
+    this.goalVisualization = new Visualization({
+      el: options.goalEl || this.getDefaultGoalVisEl(),
+      treeString: this.goalTreeString,
+      wait: true,
+      slideOut: true
+    });
   },
 
   initParseWaterfall: function(options) {
@@ -6503,6 +6512,9 @@ var Visualization = Backbone.View.extend({
     if (!options.wait) {
       this.fadeTreeIn();
     }
+    if (options.slideOut) {
+      this.slideOut();
+    }
 
     this.customEvents.trigger('gitEngineReady');
   },
@@ -6515,6 +6527,28 @@ var Visualization = Backbone.View.extend({
     $(this.paper.canvas).css('opacity', 0);
   },
 
+  slideOut: function() {
+    this.toggleSlide(true);
+  },
+
+  slideIn: function() {
+    this.toggleSlide(false);
+  },
+
+  toggleSlide: function(value) {
+    // no classes on svg :-/
+    //$(this.paper.canvas).toggleClass('slideOut', value);
+    var transform = (value) ? 'translate3d(-150%, 0, 0)' : 'translate3d(0,0,0)';
+
+    $(this.paper.canvas).css({
+      '-webkit-transform': transform,
+      '-moz-transform': transform,
+      '-ms-transform': transform,
+      '-o-transform': transform,
+      'transform': transform
+    });
+  },
+
   getAnimationTime: function() { return 300; },
 
   fadeTreeIn: function() {
@@ -17295,7 +17329,7 @@ var Level = Sandbox.extend({
     this.goalTreeString = options.level.goalTree;
     if (!this.goalTreeString) {
       console.warn('woah no goal, using random other one');
-      this.goalTreeString = '{"branches":{"master":{"target":"C2","id":"master"}},"commits":{"C0":{"parents":[],"id":"C0","rootCommit":true},"C1":{"parents":["C30"],"id":"C1"},"C2":{"parents":["C1"],"id":"C2"}},"HEAD":{"target":"master","id":"HEAD"}}';
+      this.goalTreeString = '{"branches":{"master":{"target":"C2","id":"master"}},"commits":{"C0":{"parents":[],"id":"C0","rootCommit":true},"C1":{"parents":["C0"],"id":"C1"},"C2":{"parents":["C1"],"id":"C2"}},"HEAD":{"target":"master","id":"HEAD"}}';
       //this.goalTreeString = '{"branches":{"master":{"target":"C2","id":"master"}},"commits":{"C0":{"parents":[],"id":"C0","rootCommit":true},"C1":{"parents":["C0"],"id":"C1"},"C2":{"parents":["C1"],"id":"C2"}},"HEAD":{"target":"master","id":"HEAD"}}';
     }
 
@@ -17310,6 +17344,21 @@ var Level = Sandbox.extend({
       el: options.el || this.getDefaultVisEl(),
       treeString: options.level.startTree
     });
+
+    //this.initGoalVisualization(options);
+  },
+
+  getDefaultGoalVisEl: function() {
+    return $('#commandLineHistory');
+  },
+
+  initGoalVisualization: function(options) {
+    this.goalVisualization = new Visualization({
+      el: options.goalEl || this.getDefaultGoalVisEl(),
+      treeString: this.goalTreeString,
+      wait: true,
+      slideOut: true
+    });
   },
 
   initParseWaterfall: function(options) {
@@ -17550,12 +17599,6 @@ var Sandbox = Backbone.View.extend({
   },
 
   initGitShim: function(options) {
-    /*
-    this.gitShim = new GitShim({
-      beforeCB: function() { console.log('before'); },
-      afterCB: function() { console.log('after'); },
-      afterDeferHandler: function(deferred) { deferred.resolve(); },
-    });*/
   },
 
   takeControl: function() {
@@ -21690,6 +21733,9 @@ var Visualization = Backbone.View.extend({
     if (!options.wait) {
       this.fadeTreeIn();
     }
+    if (options.slideOut) {
+      this.slideOut();
+    }
 
     this.customEvents.trigger('gitEngineReady');
   },
@@ -21702,6 +21748,28 @@ var Visualization = Backbone.View.extend({
     $(this.paper.canvas).css('opacity', 0);
   },
 
+  slideOut: function() {
+    this.toggleSlide(true);
+  },
+
+  slideIn: function() {
+    this.toggleSlide(false);
+  },
+
+  toggleSlide: function(value) {
+    // no classes on svg :-/
+    //$(this.paper.canvas).toggleClass('slideOut', value);
+    var transform = (value) ? 'translate3d(-150%, 0, 0)' : 'translate3d(0,0,0)';
+
+    $(this.paper.canvas).css({
+      '-webkit-transform': transform,
+      '-moz-transform': transform,
+      '-ms-transform': transform,
+      '-o-transform': transform,
+      'transform': transform
+    });
+  },
+
   getAnimationTime: function() { return 300; },
 
   fadeTreeIn: function() {

src/js/level/index.js

@@ -34,7 +34,7 @@ var Level = Sandbox.extend({
     this.goalTreeString = options.level.goalTree;
     if (!this.goalTreeString) {
       console.warn('woah no goal, using random other one');
-      this.goalTreeString = '{"branches":{"master":{"target":"C2","id":"master"}},"commits":{"C0":{"parents":[],"id":"C0","rootCommit":true},"C1":{"parents":["C30"],"id":"C1"},"C2":{"parents":["C1"],"id":"C2"}},"HEAD":{"target":"master","id":"HEAD"}}';
+      this.goalTreeString = '{"branches":{"master":{"target":"C2","id":"master"}},"commits":{"C0":{"parents":[],"id":"C0","rootCommit":true},"C1":{"parents":["C0"],"id":"C1"},"C2":{"parents":["C1"],"id":"C2"}},"HEAD":{"target":"master","id":"HEAD"}}';
       //this.goalTreeString = '{"branches":{"master":{"target":"C2","id":"master"}},"commits":{"C0":{"parents":[],"id":"C0","rootCommit":true},"C1":{"parents":["C0"],"id":"C1"},"C2":{"parents":["C1"],"id":"C2"}},"HEAD":{"target":"master","id":"HEAD"}}';
     }
 
@@ -49,6 +49,21 @@ var Level = Sandbox.extend({
       el: options.el || this.getDefaultVisEl(),
       treeString: options.level.startTree
     });
+
+    //this.initGoalVisualization(options);
+  },
+
+  getDefaultGoalVisEl: function() {
+    return $('#commandLineHistory');
+  },
+
+  initGoalVisualization: function(options) {
+    this.goalVisualization = new Visualization({
+      el: options.goalEl || this.getDefaultGoalVisEl(),
+      treeString: this.goalTreeString,
+      wait: true,
+      slideOut: true
+    });
   },
 
   initParseWaterfall: function(options) {

src/js/level/sandbox.js

@@ -54,12 +54,6 @@ var Sandbox = Backbone.View.extend({
   },
 
   initGitShim: function(options) {
-    /*
-    this.gitShim = new GitShim({
-      beforeCB: function() { console.log('before'); },
-      afterCB: function() { console.log('after'); },
-      afterDeferHandler: function(deferred) { deferred.resolve(); },
-    });*/
   },
 
   takeControl: function() {

src/js/visuals/visualization.js

@@ -64,6 +64,9 @@ var Visualization = Backbone.View.extend({
     if (!options.wait) {
       this.fadeTreeIn();
     }
+    if (options.slideOut) {
+      this.slideOut();
+    }
 
     this.customEvents.trigger('gitEngineReady');
   },
@@ -76,6 +79,28 @@ var Visualization = Backbone.View.extend({
     $(this.paper.canvas).css('opacity', 0);
   },
 
+  slideOut: function() {
+    this.toggleSlide(true);
+  },
+
+  slideIn: function() {
+    this.toggleSlide(false);
+  },
+
+  toggleSlide: function(value) {
+    // no classes on svg :-/
+    //$(this.paper.canvas).toggleClass('slideOut', value);
+    var transform = (value) ? 'translate3d(-150%, 0, 0)' : 'translate3d(0,0,0)';
+
+    $(this.paper.canvas).css({
+      '-webkit-transform': transform,
+      '-moz-transform': transform,
+      '-ms-transform': transform,
+      '-o-transform': transform,
+      'transform': transform
+    });
+  },
+
   getAnimationTime: function() { return 300; },
 
   fadeTreeIn: function() {

src/style/main.css

@@ -68,6 +68,7 @@ body,
   transition: background 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 }
 
+body svg,
 .transitionTransform {
   -webkit-transition: -webkit-transform 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
   -moz-transition: -moz-transform 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
@@ -131,6 +132,10 @@ body,
   background: #EEE;
 }
 
+svg.slideOut {
+  -webkit-transform: translate3d(-150%, 0, 0);
+}
+
 /* Toolbar */
 
 div.toolbar {