damn! all of git rebasing interactive barebones almost done

src/git.js

@@ -864,11 +864,8 @@ GitEngine.prototype.rebaseInteractive = function(targetSource, currentLocation)
     });
   }
 
-  console.log(toRebase);
-
   // now do stuff :D since all our validation checks have passed, we are going to defer animation
   // and actually launch the dialog
-
   this.animationQueue.set('defer', true);
 
   var callback = _.bind(function(userSpecifiedRebase) {
@@ -879,9 +876,11 @@ GitEngine.prototype.rebaseInteractive = function(targetSource, currentLocation)
     this.animationQueue.start();
   }, this);
 
-  setTimeout(function() {
+  new InteractiveRebaseView({
-    callback(toRebase);
+    callback: callback,
-  }, 2000);
+    toRebase: toRebase,
+    el: $('#dialogHolder')
+  });
 };
 
 GitEngine.prototype.rebaseFinish = function(toRebaseRough, stopSet, targetSource, currentLocation) {

src/index.html

@@ -57,10 +57,15 @@
     </div>
   </div>
 
+  <div id="dialogHolder">
+
+  </div>
+
   <!-- *******************************************
        Scripts from here on out
        ****************************************** -->
   <script src="../lib/jquery-1.8.0.min.js"></script>
+  <script src="../lib/jquery-ui-1.9.0.custom.min.js"></script>
   <script src="../lib/underscore-min.js"></script>
   <script src="../lib/backbone-min.js"></script>
   <script src="../lib/backbone.localStorage-min.js"></script>
@@ -88,6 +93,34 @@
       </div>
   </script>
 
+  <script type="text/html" id="interactive-rebase-template">
+    <div id="iRebaseDialog" class="wrapper transitionAllSlow">
+      Rebasing <%= num %> Commits
+      <div id="entryHolders">
+        <ul id="rebaseEntries">
+
+        </ul>
+      </div>
+
+      <a id="confirmButton" class="uiButton uiButtonYellow">
+        Confirm
+      </a>
+    </div>
+  </script>
+
+  <script type="text/html" id="interactive-rebase-entry-template">
+    <li id="<%= id %>">
+      <div class="wrapper">
+          <%= id %>
+        <div>
+          Options: Pick, Choose, Etc
+        </div>
+
+        <i class="icon-align-justify"></i>
+      </div>
+    </li>
+  </script>
+
   <!-- My files! -->
   <script src="main.js"></script>
 
@@ -95,6 +128,8 @@
   <script src="constants.js"></script>
   <script src="errors.js"></script>
 
+  <script src="miscViews.js"></script>
+
   <!-- the beefy git engine -->
   <script src="git.js"></script>
 

src/main.js

@@ -59,11 +59,11 @@ $(document).ready(function(){
   setTimeout(windowResize, 50);
 
   
-  /*
+  if (/\?demo/.test(window.location.href)) {
-  setTimeout(function() {
+    setTimeout(function() {
-    events.trigger('submitCommandValueFromEvent', "gc; git checkout HEAD~1; git commit; git checkout -b bugFix; gc; gc; git rebase master; git checkout master; gc; gc; git merge bugFix");
+      events.trigger('submitCommandValueFromEvent', "gc; git checkout HEAD~1; git commit; git checkout -b bugFix; gc; gc; git rebase master; git checkout master; gc; gc; git merge bugFix");
-  }, 500);*/
+    }, 500);
-
+  }
 });
 
 function windowResize() {

src/miscViews.js

@@ -0,0 +1,121 @@
+var InteractiveRebaseView = Backbone.View.extend({
+  tagName: 'div',
+  template: _.template($('#interactive-rebase-template').html()),
+
+  events: {
+    'click #confirmButton': 'confirmed'
+  },
+
+  initialize: function(options) {
+    this.hasClicked = false;
+    this.rebaseCallback = options.callback;
+
+    this.rebaseArray = options.toRebase;
+
+    this.rebaseEntries = new RebaseEntryCollection();
+    this.rebaseMap = {};
+    this.entryObjMap = {};
+
+    // make basic models for each commit
+    _.each(this.rebaseArray, function(commit) {
+      var id = commit.get('id');
+      this.rebaseMap[id] = commit;
+      this.entryObjMap[id] = new RebaseEntry({
+        id: id
+      });
+      this.rebaseEntries.add(this.entryObjMap[id]);
+    }, this);
+
+    // stuff
+    this.render();
+  },
+
+  confirmed: function() {
+    // we hide the dialog anyways, but they might be fast clickers
+    if (this.hasClicked) {
+      return;
+    }
+    this.hasClicked = true;
+
+    // first of all hide
+    this.$el.css('display', 'none');
+
+    // get our ordering
+    var uiOrder = [];
+    this.$('ul#rebaseEntries li').each(function(i, obj) {
+      uiOrder.push(obj.id);
+    });
+
+    // now get the real array
+    var toRebase = [];
+    _.each(uiOrder, function(id) {
+      // the model
+      if (this.entryObjMap[id].get('pick')) {
+        toRebase.push(this.rebaseMap[id]);
+      }
+    }, this);
+
+    this.rebaseCallback(toRebase);  
+  },
+
+  render: function() {
+    var json = {
+      num: this.rebaseArray.length
+    };
+
+    this.$el.html(this.template(json));
+
+    // also render each entry
+    var listHolder = this.$('ul#rebaseEntries');
+    this.rebaseEntries.each(function(entry) {
+      new RebaseEntryView({
+        el: listHolder,
+        model: entry
+      });
+    }, this);
+
+    // then make it reorderable..
+    listHolder.sortable({
+      distance: 5,
+      placeholder: 'ui-state-highlight'
+    });
+  },
+
+});
+
+var RebaseEntry = Backbone.Model.extend({
+  defaults: {
+    pick: true
+  },
+
+  toggle: function() {
+    this.set('pick', !this.get('pick'));
+  }
+});
+
+var RebaseEntryCollection = Backbone.Collection.extend({
+  model: RebaseEntry
+});
+
+var RebaseEntryView = Backbone.View.extend({
+  tagName: 'li',
+  template: _.template($('#interactive-rebase-entry-template').html()),
+
+  events: {
+    'click #toggleButton': 'toggle'
+  },
+
+  toggle: function() {
+    this.model.toggle();
+  },
+
+  initialize: function(options) {
+    this.model.on('change', this.render, this);
+    this.render();
+  },
+
+  render: function() {
+    this.$el.append(this.template(this.model.toJSON()));
+  }
+});
+

src/style/main.css

@@ -294,27 +294,6 @@ p.commandLine span.prompt {
   opacity: 0.7;
 }
 
-@-webkit-keyframes blink {
-  from {
-    opacity: 0.7;
-  }
-
-  49% {
-    opacity: 0.7;
-  }
-
-  50% {
-    opacity: 0;
-  }
-  
-  99% {
-    opacity: 0;
-  }
-  to {
-    opacity: 0.7;
-  }
-}
-
 #commandLineBar,
 #terminal {
   background: #424242;
@@ -334,7 +313,159 @@ p.commandLine span.prompt {
   padding: 3px;
 }
 
-#commandLineBar {
+/* interactive rebase CSS */
-
+#iRebaseDialog.wrapper {
+  background: red;
+  position: absolute;
+  top: 0px;
+  left: 0px;
 }
 
+#iRebaseDialog #confirmButton {
+  cursor: pointer;
+}
+
+/* button stuff from liquidGraph */
+.uiButton {
+  border-top: 1px solid #96d1f8;
+  background: #65a9d7;
+  background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
+  background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
+  background: -moz-linear-gradient(top, #3e779d, #65a9d7);
+  background: -ms-linear-gradient(top, #3e779d, #65a9d7);
+  background: -o-linear-gradient(top, #3e779d, #65a9d7);
+  padding: 5px 10px;
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  border-radius: 8px;
+  -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
+  -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
+  box-shadow: rgba(0,0,0,1) 0 1px 0;
+  text-shadow: rgba(0,0,0,.4) 0 1px 0;
+  color: white;
+  font-size: 14px;
+  font-family: Georgia, serif;
+  text-decoration: none;
+
+  vertical-align: middle;
+  cursor:pointer;
+}
+.uiButton:hover {
+  border-top-color: #28597a;
+  background: #28597a;
+  color: #ccc;
+}
+.uiButton:active {
+  border-top-color: #1b435e;
+  background: #1b435e;
+}
+
+.uiButtonYellow {
+  border-top: 1px solid #f4ffa1;
+  background: #288708;
+  background: -webkit-gradient(linear, left top, left bottom, from(#e0e63c), to(#288708));
+  background: -webkit-linear-gradient(top, #e0e63c, #288708);
+  background: -moz-linear-gradient(top, #e0e63c, #288708);
+  background: -ms-linear-gradient(top, #e0e63c, #288708);
+  background: -o-linear-gradient(top, #e0e63c, #288708);
+}
+.uiButtonYellow:hover {
+  border-top-color: #30f03d;
+  background: #30f03d;
+  color: #000000;
+}
+.uiButtonYellow:active {
+  border-top-color: #5edb15;
+  background: #5edb15;
+}
+
+.uiButtonPink {
+  padding: 5px 10px;
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  border-radius: 8px;
+  -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
+  -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
+  box-shadow: rgba(0,0,0,1) 0 1px 0;
+  text-shadow: rgba(0,0,0,.4) 0 1px 0;
+  color: white;
+  font-size: 14px;
+  font-family: Georgia, serif;
+  text-decoration: none;
+  vertical-align: middle;
+  cursor:pointer;
+  position:absolute;
+
+
+  border-top: 1px solid #96d1f8;
+  background: #80007c;
+  background: -webkit-gradient(linear, left top, left bottom, from(#fa1ee0), to(#80007c));
+  background: -webkit-linear-gradient(top, #fa1ee0, #80007c);
+  background: -moz-linear-gradient(top, #fa1ee0, #80007c);
+  background: -ms-linear-gradient(top, #fa1ee0, #80007c);
+  background: -o-linear-gradient(top, #fa1ee0, #80007c);
+}
+.uiButtonPink:hover {
+  border-top-color: #fa1ee0;
+  background: #fa1ee0;
+  color: #ccc;
+}
+.uiButtonPink:active {
+  border-top-color: #80007c;
+  background: #80007c;
+}
+
+.uiButtonRed {
+  border-top: 1px solid #ffebee;
+  background: #cc1212;
+  background: -webkit-gradient(linear, left top, left bottom, from(#e08992), to(#cc1212));
+  background: -webkit-linear-gradient(top, #e08992, #cc1212);
+  background: -moz-linear-gradient(top, #e08992, #cc1212);
+  background: -ms-linear-gradient(top, #e08992, #cc1212);
+  background: -o-linear-gradient(top, #e08992, #cc1212);
+}
+
+.uiButtonRed:hover {
+  border-top-color: #cc102f;
+  background: #cc102f;
+  color: #ccc;
+}
+
+.uiButtonRed:active {
+  border-top-color: #ff0000;
+  background: #ff0000;
+}
+   
+.uiButtonWhite {
+  border-top: 1px solid #96d1f8;
+  background: #449ad4;
+  background: -webkit-gradient(linear, left top, left bottom, from(#d1edff), to(#449ad4));
+  background: -webkit-linear-gradient(top, #d1edff, #449ad4);
+  background: -moz-linear-gradient(top, #d1edff, #449ad4);
+  background: -ms-linear-gradient(top, #d1edff, #449ad4);
+  background: -o-linear-gradient(top, #d1edff, #449ad4);
+  padding: 5px 10px;
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  border-radius: 8px;
+  -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
+  -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
+  box-shadow: rgba(0,0,0,1) 0 1px 0;
+  text-shadow: rgba(0,0,0,.4) 0 1px 0;
+  color: #000000;
+  font-size: 14px;
+  font-family: Georgia, serif;
+  text-decoration: none;
+  vertical-align: middle;
+}
+
+.uiButtonWhite:hover {
+  border-top-color: #bae3ff;
+  background: #bae3ff;
+  color: #5c5c5c;
+}
+
+.uiButtonWhite:active {
+  border-top-color: #9bcbeb;
+  background: #9bcbeb;
+}