better show and hide for goal and start visualizations related to Issue #36 nice

build/bundle.js

@@ -6809,12 +6809,7 @@ var Level = Sandbox.extend({
       noKeyboardInput: true,
       noClick: true
     });
-  },
+    return this.goalCanvasHolder;
-
-  onGoalVisualizationClick: function() {
-    // we need to destory this entire view whenever it is hidden so the scroll bar
-    // still works. unfortunately this
-    delete this.goalCanvasHolder;
   },
 
   showSolution: function(command, deferred) {
@@ -6861,24 +6856,36 @@ var Level = Sandbox.extend({
   },
 
   showGoal: function(command, defer) {
-    if (!this.goalCanvasHolder || !this.goalCanvasHolder.inDom) {
+    this.showSideVis(command, defer, this.goalCanvasHolder, this.initGoalVisualization);
-      this.initGoalVisualization();
+  },
-    }
-    this.goalCanvasHolder.slideIn();
 
-    if (!command || !defer) { return; }
+  showSideVis: function(command, defer, canvasHolder, initMethod) {
-    setTimeout(function() {
+    var safeFinish = function() {
-      command.finishWith(defer);
+      if (command) { command.finishWith(defer); }
-    }, this.goalCanvasHolder.getAnimationTime());
+    };
+    if (!canvasHolder || !canvasHolder.inDom) {
+      canvasHolder = initMethod.apply(this);
+    }
+
+    canvasHolder.slideIn();
+    setTimeout(safeFinish, canvasHolder.getAnimationTime());
   },
 
   hideGoal: function(command, defer) {
-    this.goalCanvasHolder.die();
+    this.hideSideVis(command, defer, this.goalCanvasHolder);
-    if (!command || !defer) { return; }
+  },
 
-    setTimeout(function() {
+  hideSideVis: function(command, defer, canvasHolder, vis) {
-      command.finishWith(defer);
+    var safeFinish = function() {
-    }, this.goalCanvasHolder.getAnimationTime());
+      if (command) { command.finishWith(defer); }
+    };
+
+    if (canvasHolder && canvasHolder.inDom) {
+      canvasHolder.die();
+      setTimeout(safeFinish, canvasHolder.getAnimationTime());
+    } else {
+      safeFinish();
+    }
   },
 
   initParseWaterfall: function(options) {
@@ -7043,7 +7050,7 @@ var Level = Sandbox.extend({
   die: function() {
     this.levelToolbar.die();
 
-    this.goalDie();
+    this.hideGoal();
     this.mainVis.die();
     this.releaseControl();
 
@@ -7055,11 +7062,6 @@ var Level = Sandbox.extend({
     delete this.goalCanvasHolder;
   },
 
-  goalDie: function() {
-    this.goalCanvasHolder.die();
-    this.goalVis.die();
-  },
-
   getInstantCommands: function() {
     var hintMsg = (this.level.hint) ?
       this.level.hint :
@@ -13499,7 +13501,6 @@ var LevelBuilder = Level.extend({
     };
     LevelBuilder.__super__.initialize.apply(this, [options]);
 
-    this.initStartVisualization();
     this.startDialog = undefined;
     this.definedGoal = false;
 
@@ -13535,11 +13536,7 @@ var LevelBuilder = Level.extend({
       noKeyboardInput: true,
       noClick: true
     });
-  },
+    return this.startCanvasHolder;
-
-  startDie: function() {
-    this.startCanvasHolder.die();
-    this.startVis.die();
   },
 
   startOffCommand: function() {
@@ -13595,17 +13592,13 @@ var LevelBuilder = Level.extend({
   },
 
   showGoal: function() {
-    this.startCanvasHolder.slideOut();
+    this.hideStart();
     LevelBuilder.__super__.showGoal.apply(this, arguments);
   },
 
   showStart: function(command, deferred) {
-    this.goalCanvasHolder.slideOut();
+    this.hideGoal();
-    this.startCanvasHolder.slideIn();
+    this.showSideVis(command, deferred, this.startCanvasHolder, this.initStartVisualization);
-
-    setTimeout(function() {
-      command.finishWith(deferred);
-    }, this.startCanvasHolder.getAnimationTime());
   },
 
   resetSolution: function() {
@@ -13614,15 +13607,11 @@ var LevelBuilder = Level.extend({
   },
 
   hideStart: function(command, deferred) {
-    this.startCanvasHolder.slideOut();
+    this.hideSideVis(command, deferred, this.startCanvasHolder);
-
-    setTimeout(function() {
-      command.finishWith(deferred);
-    }, this.startCanvasHolder.getAnimationTime());
   },
 
   defineStart: function(command, deferred) {
-    this.startDie();
+    this.hideStart();
 
     command.addWarning(
       'Defining start point... solution and goal will be overwritten if they were defined earlier'
@@ -13632,13 +13621,11 @@ var LevelBuilder = Level.extend({
     this.level.startTree = this.mainVis.gitEngine.printTree();
     this.mainVis.resetFromThisTreeNow(this.level.startTree);
 
-    this.initStartVisualization();
-
     this.showStart(command, deferred);
   },
 
   defineGoal: function(command, deferred) {
-    this.goalDie();
+    this.hideGoal();
 
     if (!this.gitCommandsIssued.length) {
       command.set('error', new Errors.GitError({
@@ -13803,7 +13790,7 @@ var LevelBuilder = Level.extend({
   },
 
   die: function() {
-    this.startDie();
+    this.hideStart();
 
     LevelBuilder.__super__.die.apply(this, arguments);
 
@@ -21415,7 +21402,6 @@ var LevelBuilder = Level.extend({
     };
     LevelBuilder.__super__.initialize.apply(this, [options]);
 
-    this.initStartVisualization();
     this.startDialog = undefined;
     this.definedGoal = false;
 
@@ -21451,11 +21437,7 @@ var LevelBuilder = Level.extend({
       noKeyboardInput: true,
       noClick: true
     });
-  },
+    return this.startCanvasHolder;
-
-  startDie: function() {
-    this.startCanvasHolder.die();
-    this.startVis.die();
   },
 
   startOffCommand: function() {
@@ -21511,17 +21493,13 @@ var LevelBuilder = Level.extend({
   },
 
   showGoal: function() {
-    this.startCanvasHolder.slideOut();
+    this.hideStart();
     LevelBuilder.__super__.showGoal.apply(this, arguments);
   },
 
   showStart: function(command, deferred) {
-    this.goalCanvasHolder.slideOut();
+    this.hideGoal();
-    this.startCanvasHolder.slideIn();
+    this.showSideVis(command, deferred, this.startCanvasHolder, this.initStartVisualization);
-
-    setTimeout(function() {
-      command.finishWith(deferred);
-    }, this.startCanvasHolder.getAnimationTime());
   },
 
   resetSolution: function() {
@@ -21530,15 +21508,11 @@ var LevelBuilder = Level.extend({
   },
 
   hideStart: function(command, deferred) {
-    this.startCanvasHolder.slideOut();
+    this.hideSideVis(command, deferred, this.startCanvasHolder);
-
-    setTimeout(function() {
-      command.finishWith(deferred);
-    }, this.startCanvasHolder.getAnimationTime());
   },
 
   defineStart: function(command, deferred) {
-    this.startDie();
+    this.hideStart();
 
     command.addWarning(
       'Defining start point... solution and goal will be overwritten if they were defined earlier'
@@ -21548,13 +21522,11 @@ var LevelBuilder = Level.extend({
     this.level.startTree = this.mainVis.gitEngine.printTree();
     this.mainVis.resetFromThisTreeNow(this.level.startTree);
 
-    this.initStartVisualization();
-
     this.showStart(command, deferred);
   },
 
   defineGoal: function(command, deferred) {
-    this.goalDie();
+    this.hideGoal();
 
     if (!this.gitCommandsIssued.length) {
       command.set('error', new Errors.GitError({
@@ -21719,7 +21691,7 @@ var LevelBuilder = Level.extend({
   },
 
   die: function() {
-    this.startDie();
+    this.hideStart();
 
     LevelBuilder.__super__.die.apply(this, arguments);
 
@@ -21928,12 +21900,7 @@ var Level = Sandbox.extend({
       noKeyboardInput: true,
       noClick: true
     });
-  },
+    return this.goalCanvasHolder;
-
-  onGoalVisualizationClick: function() {
-    // we need to destory this entire view whenever it is hidden so the scroll bar
-    // still works. unfortunately this
-    delete this.goalCanvasHolder;
   },
 
   showSolution: function(command, deferred) {
@@ -21980,24 +21947,36 @@ var Level = Sandbox.extend({
   },
 
   showGoal: function(command, defer) {
-    if (!this.goalCanvasHolder || !this.goalCanvasHolder.inDom) {
+    this.showSideVis(command, defer, this.goalCanvasHolder, this.initGoalVisualization);
-      this.initGoalVisualization();
+  },
-    }
-    this.goalCanvasHolder.slideIn();
 
-    if (!command || !defer) { return; }
+  showSideVis: function(command, defer, canvasHolder, initMethod) {
-    setTimeout(function() {
+    var safeFinish = function() {
-      command.finishWith(defer);
+      if (command) { command.finishWith(defer); }
-    }, this.goalCanvasHolder.getAnimationTime());
+    };
+    if (!canvasHolder || !canvasHolder.inDom) {
+      canvasHolder = initMethod.apply(this);
+    }
+
+    canvasHolder.slideIn();
+    setTimeout(safeFinish, canvasHolder.getAnimationTime());
   },
 
   hideGoal: function(command, defer) {
-    this.goalCanvasHolder.die();
+    this.hideSideVis(command, defer, this.goalCanvasHolder);
-    if (!command || !defer) { return; }
+  },
 
-    setTimeout(function() {
+  hideSideVis: function(command, defer, canvasHolder, vis) {
-      command.finishWith(defer);
+    var safeFinish = function() {
-    }, this.goalCanvasHolder.getAnimationTime());
+      if (command) { command.finishWith(defer); }
+    };
+
+    if (canvasHolder && canvasHolder.inDom) {
+      canvasHolder.die();
+      setTimeout(safeFinish, canvasHolder.getAnimationTime());
+    } else {
+      safeFinish();
+    }
   },
 
   initParseWaterfall: function(options) {
@@ -22162,7 +22141,7 @@ var Level = Sandbox.extend({
   die: function() {
     this.levelToolbar.die();
 
-    this.goalDie();
+    this.hideGoal();
     this.mainVis.die();
     this.releaseControl();
 
@@ -22174,11 +22153,6 @@ var Level = Sandbox.extend({
     delete this.goalCanvasHolder;
   },
 
-  goalDie: function() {
-    this.goalCanvasHolder.die();
-    this.goalVis.die();
-  },
-
   getInstantCommands: function() {
     var hintMsg = (this.level.hint) ?
       this.level.hint :

index.html

@@ -409,7 +409,7 @@
        For a much easier time perusing the source, see the individual files at:
           https://github.com/pcottle/learnGitBranching
   -->
-  <script src="build/bundle.min.51f92e48.js"></script>
+  <script src="build/bundle.min.ff85065c.js"></script>
 
   <!-- The advantage of github pages: super-easy, simple, slick static hostic.
        The downside? No raw logs to parse for analytics, so I have to include

src/js/level/builder.js

@@ -48,7 +48,6 @@ var LevelBuilder = Level.extend({
     };
     LevelBuilder.__super__.initialize.apply(this, [options]);
 
-    this.initStartVisualization();
     this.startDialog = undefined;
     this.definedGoal = false;
 
@@ -84,11 +83,7 @@ var LevelBuilder = Level.extend({
       noKeyboardInput: true,
       noClick: true
     });
-  },
+    return this.startCanvasHolder;
-
-  startDie: function() {
-    this.startCanvasHolder.die();
-    this.startVis.die();
   },
 
   startOffCommand: function() {
@@ -144,17 +139,13 @@ var LevelBuilder = Level.extend({
   },
 
   showGoal: function() {
-    this.startCanvasHolder.slideOut();
+    this.hideStart();
     LevelBuilder.__super__.showGoal.apply(this, arguments);
   },
 
   showStart: function(command, deferred) {
-    this.goalCanvasHolder.slideOut();
+    this.hideGoal();
-    this.startCanvasHolder.slideIn();
+    this.showSideVis(command, deferred, this.startCanvasHolder, this.initStartVisualization);
-
-    setTimeout(function() {
-      command.finishWith(deferred);
-    }, this.startCanvasHolder.getAnimationTime());
   },
 
   resetSolution: function() {
@@ -163,15 +154,11 @@ var LevelBuilder = Level.extend({
   },
 
   hideStart: function(command, deferred) {
-    this.startCanvasHolder.slideOut();
+    this.hideSideVis(command, deferred, this.startCanvasHolder);
-
-    setTimeout(function() {
-      command.finishWith(deferred);
-    }, this.startCanvasHolder.getAnimationTime());
   },
 
   defineStart: function(command, deferred) {
-    this.startDie();
+    this.hideStart();
 
     command.addWarning(
       'Defining start point... solution and goal will be overwritten if they were defined earlier'
@@ -181,13 +168,11 @@ var LevelBuilder = Level.extend({
     this.level.startTree = this.mainVis.gitEngine.printTree();
     this.mainVis.resetFromThisTreeNow(this.level.startTree);
 
-    this.initStartVisualization();
-
     this.showStart(command, deferred);
   },
 
   defineGoal: function(command, deferred) {
-    this.goalDie();
+    this.hideGoal();
 
     if (!this.gitCommandsIssued.length) {
       command.set('error', new Errors.GitError({
@@ -352,7 +337,7 @@ var LevelBuilder = Level.extend({
   },
 
   die: function() {
-    this.startDie();
+    this.hideStart();
 
     LevelBuilder.__super__.die.apply(this, arguments);
 

src/js/level/index.js

@@ -149,12 +149,7 @@ var Level = Sandbox.extend({
       noKeyboardInput: true,
       noClick: true
     });
-  },
+    return this.goalCanvasHolder;
-
-  onGoalVisualizationClick: function() {
-    // we need to destory this entire view whenever it is hidden so the scroll bar
-    // still works. unfortunately this
-    delete this.goalCanvasHolder;
   },
 
   showSolution: function(command, deferred) {
@@ -201,24 +196,36 @@ var Level = Sandbox.extend({
   },
 
   showGoal: function(command, defer) {
-    if (!this.goalCanvasHolder || !this.goalCanvasHolder.inDom) {
+    this.showSideVis(command, defer, this.goalCanvasHolder, this.initGoalVisualization);
-      this.initGoalVisualization();
+  },
-    }
-    this.goalCanvasHolder.slideIn();
 
-    if (!command || !defer) { return; }
+  showSideVis: function(command, defer, canvasHolder, initMethod) {
-    setTimeout(function() {
+    var safeFinish = function() {
-      command.finishWith(defer);
+      if (command) { command.finishWith(defer); }
-    }, this.goalCanvasHolder.getAnimationTime());
+    };
+    if (!canvasHolder || !canvasHolder.inDom) {
+      canvasHolder = initMethod.apply(this);
+    }
+
+    canvasHolder.slideIn();
+    setTimeout(safeFinish, canvasHolder.getAnimationTime());
   },
 
   hideGoal: function(command, defer) {
-    this.goalCanvasHolder.die();
+    this.hideSideVis(command, defer, this.goalCanvasHolder);
-    if (!command || !defer) { return; }
+  },
 
-    setTimeout(function() {
+  hideSideVis: function(command, defer, canvasHolder, vis) {
-      command.finishWith(defer);
+    var safeFinish = function() {
-    }, this.goalCanvasHolder.getAnimationTime());
+      if (command) { command.finishWith(defer); }
+    };
+
+    if (canvasHolder && canvasHolder.inDom) {
+      canvasHolder.die();
+      setTimeout(safeFinish, canvasHolder.getAnimationTime());
+    } else {
+      safeFinish();
+    }
   },
 
   initParseWaterfall: function(options) {
@@ -383,7 +390,7 @@ var Level = Sandbox.extend({
   die: function() {
     this.levelToolbar.die();
 
-    this.goalDie();
+    this.hideGoal();
     this.mainVis.die();
     this.releaseControl();
 
@@ -395,11 +402,6 @@ var Level = Sandbox.extend({
     delete this.goalCanvasHolder;
   },
 
-  goalDie: function() {
-    this.goalCanvasHolder.die();
-    this.goalVis.die();
-  },
-
   getInstantCommands: function() {
     var hintMsg = (this.level.hint) ?
       this.level.hint :