git demonstration view done pretty much, whatabitch

src/js/util/eventBaton.js

@@ -50,6 +50,13 @@ EventBaton.prototype.getListenersThrow = function(name) {
   return listeners;
 };
 
+EventBaton.prototype.passBatonBackSoft = function(name, func, context, args) {
+  try {
+    return this.passBatonBack(name, func, context, args);
+  } catch (e) {
+  }
+};
+
 EventBaton.prototype.passBatonBack = function(name, func, context, args) {
   // this method will call the listener BEFORE the name/func pair. this
   // basically allows you to put in shims, where you steal batons but pass
@@ -81,7 +88,10 @@ EventBaton.prototype.releaseBaton = function(name, func, context) {
   var found = false;
   _.each(listeners, function(listenerObj) {
     if (listenerObj.func === func && listenerObj.context === context) {
-      if (found) { console.warn('woah duplicates!!!'); }
+      if (found) {
+        console.warn('woah duplicates!!!');
+        console.log(listeners);
+      }
       found = true;
     } else {
       newListeners.push(listenerObj);

src/js/util/keyboard.js

@@ -20,18 +20,22 @@ function KeyboardListener(options) {
   this.events = options.events || _.clone(Backbone.Events);
   this.aliasMap = options.aliasMap || {};
 
-  this.keydownListener = _.bind(this.keydown, this);
   if (!options.wait) {
     this.listen();
   }
 }
 
 KeyboardListener.prototype.listen = function() {
-  Main.getEventBaton().stealBaton('docKeydown', this.keydownListener, this);
+  if (this.listening) {
+    return;
+  }
+  this.listening = true;
+  Main.getEventBaton().stealBaton('docKeydown', this.keydown, this);
 };
 
 KeyboardListener.prototype.mute = function() {
-  Main.getEventBaton().releaseBaton('docKeydown', this.keydownListener, this);
+  this.listening = false;
+  Main.getEventBaton().releaseBaton('docKeydown', this.keydown, this);
 };
 
 KeyboardListener.prototype.keydown = function(e) {
@@ -42,12 +46,16 @@ KeyboardListener.prototype.keydown = function(e) {
     return;
   }
 
-  this.fireEvent(key);
+  this.fireEvent(key, e);
 };
 
-KeyboardListener.prototype.fireEvent = function(eventName) {
+KeyboardListener.prototype.fireEvent = function(eventName, e) {
   eventName = this.aliasMap[eventName] || eventName;
-  this.events.trigger(eventName);
+  this.events.trigger(eventName, e);
+};
+
+KeyboardListener.prototype.passEventBack = function(e) {
+  Main.getEventBaton().passBatonBackSoft('docKeydown', this.keydown, this, [e]);
 };
 
 exports.KeyboardListener = KeyboardListener;

src/js/views/gitDemonstrationView.js

@@ -18,7 +18,7 @@ var GitDemonstrationView = ContainedBase.extend({
   template: _.template($('#git-demonstration-view').html()),
 
   events: {
-    'click div.command > a.uiButton': 'positive'
+    'click div.command > p.uiButton': 'positive'
   },
 
   initialize: function(options) {
@@ -55,22 +55,23 @@ var GitDemonstrationView = ContainedBase.extend({
 
     this.navEvents = _.clone(Backbone.Events);
     this.navEvents.on('positive', this.positive, this);
+    this.navEvents.on('negative', this.negative, this);
     this.keyboardListener = new KeyboardListener({
       events: this.navEvents,
       aliasMap: {
         enter: 'positive',
-        right: 'positive'
+        right: 'positive',
+        left: 'negative'
       },
       wait: true
     });
 
+    this.visFinished = false;
+    this.initVis();
+
     if (!options.wait) {
       this.show();
     }
-
-    // show the canvas once we slide down
-    this.visFinished = false;
-    setTimeout(_.bind(this.initVis, this), this.getAnimationTime());
   },
 
   takeControl: function() {
@@ -88,30 +89,70 @@ var GitDemonstrationView = ContainedBase.extend({
     this.mainVis.reset();
     this.demonstrated = false;
     this.$el.toggleClass('demonstrated', false);
+    this.$el.toggleClass('demonstrating', false);
   },
 
   positive: function() {
     if (this.demonstrated) {
       return;
     }
-
-    this.$el.toggleClass('demonstrated', true);
-    this.dispatchCommand(this.JSON.command);
     this.demonstrated = true;
-    this.releaseControl();
+
+    this.$el.toggleClass('demonstrating', true);
+
+    var whenDone = Q.defer();
+    this.dispatchCommand(this.JSON.command, whenDone);
+    whenDone.promise.then(_.bind(function() {
+      this.$el.toggleClass('demonstrating', false);
+      this.$el.toggleClass('demonstrated', true);
+      this.releaseControl();
+    }, this));
   },
 
-  dispatchCommand: function(value) {
+  negative: function(e) {
+    if (this.$el.hasClass('demonstrating')) {
+      return;
+    }
+    this.keyboardListener.passEventBack(e);
+  },
+
+  dispatchCommand: function(value, whenDone) {
+    var commands = [];
     util.splitTextCommand(value, function(commandStr) {
-      var command = new Command({
+      commands.push(new Command({
         rawStr: commandStr
-      });
-      this.mainVis.gitEngine.dispatch(command, Q.defer());
+      }));
     }, this);
+
+    var chainDeferred = Q.defer();
+    var chainPromise = chainDeferred.promise;
+
+    _.each(commands, function(command, index) {
+      chainPromise = chainPromise.then(_.bind(function() {
+        var myDefer = Q.defer();
+        this.mainVis.gitEngine.dispatch(command, myDefer);
+        return myDefer.promise;
+      }, this));
+      chainPromise = chainPromise.then(function() {
+        return Q.delay(300);
+      });
+    }, this);
+
+    chainPromise = chainPromise.then(function() {
+      whenDone.resolve();
+    });
+
+    chainDeferred.resolve();
+  },
+
+  tearDown: function() {
+    this.mainVis.tearDown();
+    GitDemonstrationView.__super__.tearDown.apply(this);
   },
 
   hide: function() {
     this.releaseControl();
+    this.reset();
     if (this.visFinished) {
       this.mainVis.setTreeIndex(-1);
       this.mainVis.setTreeOpacity(0);
@@ -148,10 +189,14 @@ var GitDemonstrationView = ContainedBase.extend({
       noKeyboardInput: true,
       noClick: true,
       smallCanvas: true,
-      zIndex: 300
+      zIndex: -1
     });
     this.mainVis.customEvents.on('paperReady', _.bind(function() {
       this.visFinished = true;
+      if (this.shown) {
+        // show the canvas once its done if we are shown
+        this.show();
+      }
     }, this));
   }
 });

src/js/views/multiView.js

@@ -8,20 +8,22 @@ var ContainedBase = require('../views').ContainedBase;
 var ConfirmCancelView = require('../views').ConfirmCancelView;
 var LeftRightView = require('../views').LeftRightView;
 var ModalAlert = require('../views').ModalAlert;
-var KeyboardListener = require('../util/keyboard').KeyboardListener;
+var GitDemonstrationView = require('../views/gitDemonstrationView').GitDemonstrationView;
 
+var KeyboardListener = require('../util/keyboard').KeyboardListener;
 var GitError = require('../util/errors').GitError;
 
 var MultiView = Backbone.View.extend({
   tagName: 'div',
   className: 'multiView',
   // ms to debounce the nav functions
-  navEventDebounce: 750,
+  navEventDebounce: 550,
   deathTime: 700,
 
   // a simple mapping of what childViews we support
   typeToConstructor: {
-    ModalAlert: ModalAlert
+    ModalAlert: ModalAlert,
+    GitDemonstrationView: GitDemonstrationView
   },
 
   initialize: function(options) {
@@ -31,6 +33,11 @@ var MultiView = Backbone.View.extend({
       options: {
         markdown: 'Woah wtf!!'
       }
+     }, {
+       type: 'GitDemonstrationView',
+       options: {
+         command: 'git checkout -b side; git commit; git commit'
+       }
      }, {
       type: 'ModalAlert',
       options: {

src/js/visuals/visualization.js

@@ -94,7 +94,7 @@ var Visualization = Backbone.View.extend({
       this.shown = false;
     }
 
-    $(this.paper.canvas).css('opacity', 0);
+    $(this.paper.canvas).css('opacity', level);
   },
 
   getAnimationTime: function() { return 300; },