boom! wrestled backbone into supporting animations

src/collections.js

@@ -20,7 +20,7 @@ var CommandBuffer = Backbone.Model.extend({
 
     this.buffer = [];
     this.timeout = null;
-    this.delay = 300;
+    this.delay = TIME.betweenCommandsDelay;
   },
 
   addCommand: function(command) {
@@ -47,19 +47,22 @@ var CommandBuffer = Backbone.Model.extend({
   setTimeout: function() {
     this.timeout = setTimeout(_.bind(function() {
         this.sipFromBuffer();
-    }, this), 300);
+    }, this), this.delay);
   },
 
   popAndProcess: function() {
     var popped = this.buffer.pop();
+    var callback = _.bind(function() {
+      this.setTimeout();
+    }, this);
 
     // find a command with no error
     while (popped.get('error') && this.buffer.length) {
       popped = buffer.pop();
     }
-    // process it if theres no error
     if (!popped.get('error')) {
-      events.trigger('processCommand', popped);
+      // pass in a callback, so when this command is "done" we will process the next.
+      events.trigger('processCommand', popped, callback);
     }
   },
 
@@ -75,9 +78,7 @@ var CommandBuffer = Backbone.Model.extend({
     }
 
     this.popAndProcess();
-    if (this.buffer.length) {
-      this.setTimeout();
-    } else {
+    if (!this.buffer.length) {
       this.clear();
     }
   },

src/constants.js

@@ -7,9 +7,10 @@ var constants = {
   baseMass: 1,
 };
 
-var time = {
-  edgeAddInterval: 200,
-  breathePeriod: 0.3
+var TIME = {
+  betweenCommandsDelay: 400,
+  commandShow: 300,
+  reflowGuess: 100
 };
 
 /**

src/git.js

@@ -675,14 +675,23 @@ GitEngine.prototype.deleteBranch = function(name) {
   this.branches.splice(toDelete, 1);
 };
 
-GitEngine.prototype.dispatch = function(command) {
+GitEngine.prototype.dispatch = function(command, callback) {
   // current command, options, and args are stored in the gitEngine
   // for easy reference during processing.
   this.command = command;
   this.commandOptions = command.get('supportedMap');
   this.generalArgs = command.get('generalArgs');
 
+  command.set('status', 'processing');
   this[command.get('method') + 'Starter'](); 
+
+  // TODO: move into animation thing
+  var whenDone = _.bind(function() {
+    command.set('status', 'finished');
+    callback();
+  }, this);
+  whenDone();
+
 };
 
 GitEngine.prototype.addStarter = function() {

src/index.html

@@ -44,14 +44,16 @@
 
   <!-- Templates -->
   <script type="text/html" id="command-template">
-    <p class="commandLine <%= status %>">
-      <span class="arrows">&gt; &gt; &gt;</span>
-      <%= rawStr %>
-    </p>
+    <div class="wrapper" style="display:none">
+      <p class="commandLine transitionBackground <%= status %>">
+        <span class="arrows">&gt; &gt; &gt;</span>
+        <%= rawStr %>
+      </p>
 
-    <p class="commandLine <%= resultType %>">
-      <%= result %>
-    </p>
+      <p class="commandLineResult <%= resultType %>">
+        <%= result %>
+      </p>
+    </div>
   </script>
 
   <!-- My files! -->

src/style/main.css

@@ -16,6 +16,15 @@ html, body {
   color: #eee;
 }
 
+/* Transition */
+.transitionBackground {
+  -webkit-transition: background 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+  -moz-transition: background 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+  -ms-transition: background 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+  -o-transition: background 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+  transition: background 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+}
+
 #controls {
   position: absolute;
   top: 0px;
@@ -29,10 +38,21 @@ html, body {
   width: 90%;
 }
 
-p.commandLine {
+p.commandLine, p.commandLineResult {
   opacity: 1;
   font-size: 18px;
   margin: 2px;
+  background-color: black;
+}
+
+p.commandLine.inqueue {
+  background-color: yellow;
+  color: black;
+}
+
+p.commandLine.finished {
+  background-color: #0066cc;
+  color: white;
 }
 
 p.commandResult {

src/views.js

@@ -103,10 +103,37 @@ var CommandView = Backbone.View.extend({
   },
 
   initialize: function() {
-    this.model.bind('change', this.render, this);
+    this.model.bind('change', this.wasChanged, this);
     this.model.bind('destroy', this.remove, this);
   },
 
+  wasChanged: function(model, changeEvent) {
+    // for changes that are just comestic, we actually only want to toggle classes
+    // with jquery rather than brutally delete a html of HTML
+    var changes = changeEvent.changes;
+    var changeKeys = _.keys(changes);
+    if (_.difference(changeKeys, ['status']) == 0) {
+      this.updateStatus();
+    } else {
+      this.render();
+    }
+  },
+
+  updateStatus: function() {
+    var statuses = ['inqueue', 'processing', 'finished'];
+    var toggleMap = {};
+    _.each(statuses, function(status) {
+      toggleMap[status] = false;
+    });
+    toggleMap[this.model.get('status')] = true;
+
+    var query = this.$('p.commandLine');
+
+    _.each(toggleMap, function(value, key) {
+      query.toggleClass(key, value);
+    });
+  },
+
   render: function() {
     var json = _.extend(
       {
@@ -115,7 +142,13 @@ var CommandView = Backbone.View.extend({
       },
       this.model.toJSON()
     );
+
     this.$el.html(this.template(json));
+
+    // we need to show ourselves after a reflow
+    setTimeout(_.bind(function() {
+      this.$('.wrapper').slideDown(TIME.commandShow);
+    }, this), TIME.reflowGuess);
     return this;
   },