woof finally got git visualization much more flexible with abso or container positioning

build/bundle.js

@@ -4740,9 +4740,9 @@ var DisabledMap = require('../level/disabledMap').DisabledMap;
 var Command = require('../models/commandModel').Command;
 var GitShim = require('../git/gitShim').GitShim;
 
-var ModalTerminal = require('../views').ModalTerminal;
 var ModalAlert = require('../views').ModalAlert;
 var MultiView = require('../views/multiView').MultiView;
+var CanvasTerminalHolder = require('../views').CanvasTerminalHolder;
 
 var TreeCompare = require('../git/treeCompare').TreeCompare;
 
@@ -4785,15 +4785,16 @@ var Level = Sandbox.extend({
 
   initGoalVisualization: function(options) {
     // first we make the goal visualization holder
+    this.goalCanvasHolder = new CanvasTerminalHolder();
 
     // then we make a visualization. the "el" here is the element to
     // track for size information. the container is where the canvas will be placed
     this.goalVis = new Visualization({
-      el: options.goalEl || this.getDefaultGoalVisEl(),
+      el: this.goalCanvasHolder.getCanvasLocation(),
-      treeString: this.goalTreeString,
+      containerElement: this.goalCanvasHolder.getCanvasLocation(),
-      wait: true,
+      treeString: this.goalTreeString
-      slideOut: true
     });
+
     this.goalVis.customEvents.on('paperReady', _.bind(function() {
       // this is tricky. at this point we have a canvas that has 0
       // opacity but its floating in front of our command history. we need
@@ -6488,6 +6489,7 @@ var Visualization = Backbone.View.extend({
     options = options || {};
     this.options = options;
     this.customEvents = _.clone(Backbone.Events);
+    this.containerElement = options.containerElement;
 
     var _this = this;
     // we want to add our canvas somewhere
@@ -6538,13 +6540,7 @@ var Visualization = Backbone.View.extend({
 
     this.shown = false;
     this.setTreeOpacity(0);
-
-    if (!options.wait) {
     this.fadeTreeIn();
-    }
-    if (options.slideOut) {
-      this.slideOut();
-    }
 
     this.customEvents.trigger('gitEngineReady');
     this.customEvents.trigger('paperReady');
@@ -6570,17 +6566,13 @@ var Visualization = Backbone.View.extend({
   },
 
   toggleSlide: function(value) {
-    // no classes on svg :-/
+    if (!this.containerElement) {
-    //$(this.paper.canvas).toggleClass('slideOut', value);
+      console.warn('cant slide with absolute positioning');
-    var transform = (value) ? 'translate3d(-150%, 0, 0)' : 'translate3d(0,0,0)';
+      return;
+    }
 
-    $(this.paper.canvas).css({
+    // no classes on svg :-/
-      '-webkit-transform': transform,
+    $(this.containerElement).toggleClass('slideOut', value);
-      '-moz-transform': transform,
-      '-ms-transform': transform,
-      '-o-transform': transform,
-      'transform': transform
-    });
   },
 
   getAnimationTime: function() { return 300; },
@@ -6630,9 +6622,9 @@ var Visualization = Backbone.View.extend({
     // if we don't have a container, we need to set our
     // position absolutely to whatever we are tracking
     if (!this.options.containerElement) {
-
       var left = el.offsetLeft;
       var top = el.offsetTop;
+
       $(this.paper.canvas).css({
         position: 'absolute',
         left: left + 'px',
@@ -9390,7 +9382,7 @@ var ModalTerminal = ContainedBase.extend({
   },
 
   getInsideElement: function() {
-    return this.$('#inside');
+    return this.$('.inside');
   }
 });
 
@@ -9463,6 +9455,26 @@ var ZoomAlertWindow = Backbone.View.extend({
   }
 });
 
+var CanvasTerminalHolder = BaseView.extend({
+  tagName: 'div',
+  className: 'canvasTerminalHolder box flex1',
+  template: _.template($('#terminal-window-bare-template').html()),
+
+  initialize: function(options) {
+    options = options || {};
+    this.destination = $('body');
+    this.JSON = {
+      title: options.title || 'Goal To Reach'
+    };
+
+    this.render();
+  },
+
+  getCanvasLocation: function() {
+    return this.$('div.inside')[0];
+  }
+});
+
 exports.ModalView = ModalView;
 exports.ModalTerminal = ModalTerminal;
 exports.ModalAlert = ModalAlert;
@@ -9471,6 +9483,8 @@ exports.ConfirmCancelView = ConfirmCancelView;
 exports.LeftRightView = LeftRightView;
 exports.ZoomAlertWindow = ZoomAlertWindow;
 
+exports.CanvasTerminalHolder = CanvasTerminalHolder;
+
 
 });
 
@@ -17382,9 +17396,9 @@ var DisabledMap = require('../level/disabledMap').DisabledMap;
 var Command = require('../models/commandModel').Command;
 var GitShim = require('../git/gitShim').GitShim;
 
-var ModalTerminal = require('../views').ModalTerminal;
 var ModalAlert = require('../views').ModalAlert;
 var MultiView = require('../views/multiView').MultiView;
+var CanvasTerminalHolder = require('../views').CanvasTerminalHolder;
 
 var TreeCompare = require('../git/treeCompare').TreeCompare;
 
@@ -17427,15 +17441,16 @@ var Level = Sandbox.extend({
 
   initGoalVisualization: function(options) {
     // first we make the goal visualization holder
+    this.goalCanvasHolder = new CanvasTerminalHolder();
 
     // then we make a visualization. the "el" here is the element to
     // track for size information. the container is where the canvas will be placed
     this.goalVis = new Visualization({
-      el: options.goalEl || this.getDefaultGoalVisEl(),
+      el: this.goalCanvasHolder.getCanvasLocation(),
-      treeString: this.goalTreeString,
+      containerElement: this.goalCanvasHolder.getCanvasLocation(),
-      wait: true,
+      treeString: this.goalTreeString
-      slideOut: true
     });
+
     this.goalVis.customEvents.on('paperReady', _.bind(function() {
       // this is tricky. at this point we have a canvas that has 0
       // opacity but its floating in front of our command history. we need
@@ -19135,7 +19150,7 @@ var ModalTerminal = ContainedBase.extend({
   },
 
   getInsideElement: function() {
-    return this.$('#inside');
+    return this.$('.inside');
   }
 });
 
@@ -19208,6 +19223,26 @@ var ZoomAlertWindow = Backbone.View.extend({
   }
 });
 
+var CanvasTerminalHolder = BaseView.extend({
+  tagName: 'div',
+  className: 'canvasTerminalHolder box flex1',
+  template: _.template($('#terminal-window-bare-template').html()),
+
+  initialize: function(options) {
+    options = options || {};
+    this.destination = $('body');
+    this.JSON = {
+      title: options.title || 'Goal To Reach'
+    };
+
+    this.render();
+  },
+
+  getCanvasLocation: function() {
+    return this.$('div.inside')[0];
+  }
+});
+
 exports.ModalView = ModalView;
 exports.ModalTerminal = ModalTerminal;
 exports.ModalAlert = ModalAlert;
@@ -19216,6 +19251,8 @@ exports.ConfirmCancelView = ConfirmCancelView;
 exports.LeftRightView = LeftRightView;
 exports.ZoomAlertWindow = ZoomAlertWindow;
 
+exports.CanvasTerminalHolder = CanvasTerminalHolder;
+
 
 });
 require("/src/js/views/index.js");
@@ -21788,6 +21825,7 @@ var Visualization = Backbone.View.extend({
     options = options || {};
     this.options = options;
     this.customEvents = _.clone(Backbone.Events);
+    this.containerElement = options.containerElement;
 
     var _this = this;
     // we want to add our canvas somewhere
@@ -21838,13 +21876,7 @@ var Visualization = Backbone.View.extend({
 
     this.shown = false;
     this.setTreeOpacity(0);
-
-    if (!options.wait) {
     this.fadeTreeIn();
-    }
-    if (options.slideOut) {
-      this.slideOut();
-    }
 
     this.customEvents.trigger('gitEngineReady');
     this.customEvents.trigger('paperReady');
@@ -21870,17 +21902,13 @@ var Visualization = Backbone.View.extend({
   },
 
   toggleSlide: function(value) {
-    // no classes on svg :-/
+    if (!this.containerElement) {
-    //$(this.paper.canvas).toggleClass('slideOut', value);
+      console.warn('cant slide with absolute positioning');
-    var transform = (value) ? 'translate3d(-150%, 0, 0)' : 'translate3d(0,0,0)';
+      return;
+    }
 
-    $(this.paper.canvas).css({
+    // no classes on svg :-/
-      '-webkit-transform': transform,
+    $(this.containerElement).toggleClass('slideOut', value);
-      '-moz-transform': transform,
-      '-ms-transform': transform,
-      '-o-transform': transform,
-      'transform': transform
-    });
   },
 
   getAnimationTime: function() { return 300; },
@@ -21930,9 +21958,9 @@ var Visualization = Backbone.View.extend({
     // if we don't have a container, we need to set our
     // position absolutely to whatever we are tracking
     if (!this.options.containerElement) {
-
       var left = el.offsetLeft;
       var top = el.offsetTop;
+
       $(this.paper.canvas).css({
         position: 'absolute',
         left: left + 'px',

src/index.html

@@ -1,6 +1,5 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
-
 <html lang="en">
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
@@ -96,6 +95,36 @@
     </div>
   </script>
 
+  <script type="text/html" id="terminal-window-bare-template">
+    <div class="terminal-window-holder box flex3 vertical transitionTransform">
+      <div class="toolbar box vertical">
+        <div class="controls box horizontal">
+          <div class="box flex1">
+            <div class="close">
+            </div>
+          </div>
+          <div class="box flex1">
+            <div class="minimize">
+            </div>
+          </div>
+          <div class="box flex1">
+            <div class="plus">
+            </div>
+          </div>
+        </div>
+        <div>
+          <i class="icon-cog"></i>
+          <%= title %>
+        </div>
+      </div>
+
+      <div class="inside box flex1">
+      </div>
+    </div>
+    <div class="box flex3">
+    </div>
+  </script>
+
   <script type="text/html" id="terminal-window-template">
     <div class="terminal-window box horizontal flex3 transitionAll">
       <div class="box flex1">
@@ -123,7 +152,7 @@
           </div>
         </div>
 
-        <div id="inside" class="">
+        <div class="inside">
         </div>
       </div>
 

src/js/level/index.js

@@ -13,9 +13,9 @@ var DisabledMap = require('../level/disabledMap').DisabledMap;
 var Command = require('../models/commandModel').Command;
 var GitShim = require('../git/gitShim').GitShim;
 
-var ModalTerminal = require('../views').ModalTerminal;
 var ModalAlert = require('../views').ModalAlert;
 var MultiView = require('../views/multiView').MultiView;
+var CanvasTerminalHolder = require('../views').CanvasTerminalHolder;
 
 var TreeCompare = require('../git/treeCompare').TreeCompare;
 
@@ -58,15 +58,16 @@ var Level = Sandbox.extend({
 
   initGoalVisualization: function(options) {
     // first we make the goal visualization holder
+    this.goalCanvasHolder = new CanvasTerminalHolder();
 
     // then we make a visualization. the "el" here is the element to
     // track for size information. the container is where the canvas will be placed
     this.goalVis = new Visualization({
-      el: options.goalEl || this.getDefaultGoalVisEl(),
+      el: this.goalCanvasHolder.getCanvasLocation(),
-      treeString: this.goalTreeString,
+      containerElement: this.goalCanvasHolder.getCanvasLocation(),
-      wait: true,
+      treeString: this.goalTreeString
-      slideOut: true
     });
+
     this.goalVis.customEvents.on('paperReady', _.bind(function() {
       // this is tricky. at this point we have a canvas that has 0
       // opacity but its floating in front of our command history. we need

src/js/views/index.js

@@ -235,7 +235,7 @@ var ModalTerminal = ContainedBase.extend({
   },
 
   getInsideElement: function() {
-    return this.$('#inside');
+    return this.$('.inside');
   }
 });
 
@@ -308,6 +308,26 @@ var ZoomAlertWindow = Backbone.View.extend({
   }
 });
 
+var CanvasTerminalHolder = BaseView.extend({
+  tagName: 'div',
+  className: 'canvasTerminalHolder box flex1',
+  template: _.template($('#terminal-window-bare-template').html()),
+
+  initialize: function(options) {
+    options = options || {};
+    this.destination = $('body');
+    this.JSON = {
+      title: options.title || 'Goal To Reach'
+    };
+
+    this.render();
+  },
+
+  getCanvasLocation: function() {
+    return this.$('div.inside')[0];
+  }
+});
+
 exports.ModalView = ModalView;
 exports.ModalTerminal = ModalTerminal;
 exports.ModalAlert = ModalAlert;
@@ -316,3 +336,5 @@ exports.ConfirmCancelView = ConfirmCancelView;
 exports.LeftRightView = LeftRightView;
 exports.ZoomAlertWindow = ZoomAlertWindow;
 
+exports.CanvasTerminalHolder = CanvasTerminalHolder;
+

src/js/visuals/visualization.js

@@ -13,6 +13,7 @@ var Visualization = Backbone.View.extend({
     options = options || {};
     this.options = options;
     this.customEvents = _.clone(Backbone.Events);
+    this.containerElement = options.containerElement;
 
     var _this = this;
     // we want to add our canvas somewhere
@@ -63,13 +64,7 @@ var Visualization = Backbone.View.extend({
 
     this.shown = false;
     this.setTreeOpacity(0);
-
-    if (!options.wait) {
     this.fadeTreeIn();
-    }
-    if (options.slideOut) {
-      this.slideOut();
-    }
 
     this.customEvents.trigger('gitEngineReady');
     this.customEvents.trigger('paperReady');
@@ -95,17 +90,13 @@ var Visualization = Backbone.View.extend({
   },
 
   toggleSlide: function(value) {
-    // no classes on svg :-/
+    if (!this.containerElement) {
-    //$(this.paper.canvas).toggleClass('slideOut', value);
+      console.warn('cant slide with absolute positioning');
-    var transform = (value) ? 'translate3d(-150%, 0, 0)' : 'translate3d(0,0,0)';
+      return;
+    }
 
-    $(this.paper.canvas).css({
+    // no classes on svg :-/
-      '-webkit-transform': transform,
+    $(this.containerElement).toggleClass('slideOut', value);
-      '-moz-transform': transform,
-      '-ms-transform': transform,
-      '-o-transform': transform,
-      'transform': transform
-    });
   },
 
   getAnimationTime: function() { return 300; },
@@ -155,9 +146,9 @@ var Visualization = Backbone.View.extend({
     // if we don't have a container, we need to set our
     // position absolutely to whatever we are tracking
     if (!this.options.containerElement) {
-
       var left = el.offsetLeft;
       var top = el.offsetTop;
+
       $(this.paper.canvas).css({
         position: 'absolute',
         left: left + 'px',

src/style/main.css

@@ -64,7 +64,6 @@ 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);
@@ -116,6 +115,14 @@ body svg,
 
 /* Some interface things */
 
+div.canvasTerminalHolder {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
 #canvasHolder {
   position: absolute;
   top: 0;
@@ -132,13 +139,33 @@ body svg,
   min-height: 400px;
 }
 
-#controls {
+div.canvasTerminalHolder div.terminal-window-holder {
-  max-width: 400px;
+  margin: 50px 0;
-  background: #EEE;
+  height: 100%;
 }
 
-svg.slideOut {
+div.canvasTerminalHolder div.terminal-window-holder div.toolbar,
-  -webkit-transform: translate3d(-150%, 0, 0);
+div.canvasTerminalHolder div.terminal-window-holder div.inside {
+  margin: 0px 20px;
+  border: 0px;
+}
+
+div.canvasTerminalHolder div.terminal-window-holder div.inside {
+  min-height: 200px;
+  margin-bottom: 150px;
+  border-radius: 0 0 5px 5px;
+  background: #4C7956;
+  background: -webkit-linear-gradient(top, #97ECAA 0%,#698D48 100%);
+  box-shadow: 0 0 10px rgba(0,0,0,0.7);
+}
+
+div.canvasTerminalHolder div.terminal-window-holder,
+#controls {
+  max-width: 400px;
+}
+
+#controls {
+  background: #EEE;
 }
 
 /* Toolbar */
@@ -342,14 +369,14 @@ p.commandLine span.prompt {
 }
 
 #commandLineBar,
-.terminal-window #inside,
+.terminal-window .inside,
 li.rebaseEntry,
 #terminal {
   background: #424242;
 }
 
 #terminal,
-.terminal-window #inside,
+.terminal-window .inside,
 #commandLineBar {
   border: 1px solid #303030;
 }
@@ -360,7 +387,7 @@ li.rebaseEntry,
 }
 
 #commandLineBar,
-.terminal-window #inside {
+.terminal-window .inside {
   border-top: 0;
   border-radius: 0 0 5px 5px;
   padding: 3px;
@@ -449,12 +476,12 @@ li.rebaseEntry.notPicked {
   z-index: 100;
 }
 
-.terminal-window #inside {
+.terminal-window .inside {
   padding: 10px;
   -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
 }
 
-.terminal-window #inside h2 {
+.terminal-window .inside h2 {
   text-align: center;
 }