fixed long text in dmeonstarton view

build/bundle.js

@@ -15457,6 +15457,7 @@ var GitDemonstrationView = ContainedBase.extend({
       title: options.title || 'Git Demonstration'
     });
     this.render();
+    this.checkScroll();
 
     this.navEvents = _.clone(Backbone.Events);
     this.navEvents.on('positive', this.positive, this);
@@ -15479,6 +15480,31 @@ var GitDemonstrationView = ContainedBase.extend({
     }
   },
 
+  checkScroll: function() {
+    console.log('checking scroll');
+    var children = this.$('div.demonstrationText').children();
+    var heights = _.map(children, function(child) { return child.clientHeight; });
+    var totalHeight = _.reduce(heights, function(a, b) { return a + b; });
+    console.log(children, heights, totalHeight);
+    if (totalHeight < this.$('div.demonstrationText').height()) {
+      this.$('div.demonstrationText').addClass('noLongText');
+    }
+  },
+
+  dispatchBeforeCommand: function() {
+    if (!this.options.beforeCommand) {
+      return;
+    }
+    // here we just split the command and push them through to the git engine
+    util.splitTextCommand(this.options.beforeCommand, function(commandStr) {
+      this.mainVis.gitEngine.dispatch(new Command({
+        rawStr: commandStr
+      }), Q.defer());
+    }, this);
+    // then harsh refresh
+    this.mainVis.gitVisuals.refreshTreeHarsh();
+  },
+
   takeControl: function() {
     this.hasControl = true;
     this.keyboardListener.listen();
@@ -15598,6 +15624,7 @@ var GitDemonstrationView = ContainedBase.extend({
     });
     this.mainVis.customEvents.on('paperReady', _.bind(function() {
       this.visFinished = true;
+      this.dispatchBeforeCommand();
       if (this.shown) {
         // show the canvas once its done if we are shown
         this.show();
@@ -16977,6 +17004,41 @@ var Views = require('../views');
 var ModalTerminal = Views.ModalTerminal;
 var ContainedBase = Views.ContainedBase;
 
+var MultiView = require('../views/multiView').MultiView;
+
+var TextGrabber = ContainedBase.extend({
+  tagName: 'div',
+  className: 'textGrabber box vertical',
+  template: _.template($('#text-grabber').html()),
+
+  initialize: function(options) {
+    options = options || {};
+    this.JSON = {
+      helperText: options.helperText || 'Enter some text'
+    };
+
+    this.container = options.container || new ModalTerminal({
+      title: 'Enter some text'
+    });
+    this.render();
+    if (options.initialText) {
+      this.setText(options.initialText);
+    }
+
+    if (!options.wait) {
+      this.show();
+    }
+  },
+
+  getText: function() {
+    return this.$('textarea').val();
+  },
+
+  setText: function(str) {
+    this.$('textarea').val(str);
+  }
+});
+
 var MarkdownGrabber = ContainedBase.extend({
   tagName: 'div',
   className: 'markdownGrabber box horizontal',
@@ -17007,7 +17069,7 @@ var MarkdownGrabber = ContainedBase.extend({
 
       var confirmCancel = new Views.ConfirmCancelView({
         deferred: buttonDefer,
-        destination: this.getDestination()
+        destination: this
       });
     }
 
@@ -17074,6 +17136,18 @@ var DemonstrationBuilder = ContainedBase.extend({
       withoutButton: true,
       previewText: 'Before demonstration Markdown'
     });
+    this.beforeCommandView = new TextGrabber({
+      container: this,
+      helperText: 'The git command(s) to set up the demonstration view (before it is displayed)',
+      initialText: 'git checkout -b bugFix'
+    });
+
+    this.commandView = new TextGrabber({
+      container: this,
+      helperText: 'The git command(s) to demonstrate to the reader',
+      initialText: 'git commit'
+    });
+
     this.afterMarkdownView = new MarkdownGrabber({
       container: this,
       withoutButton: true,
@@ -17101,15 +17175,20 @@ var DemonstrationBuilder = ContainedBase.extend({
   },
 
   testView: function() {
-    var module = require('../views/gitDemonstrationView');
+    new MultiView({
-    new module.GitDemonstrationView(this.getExportObj());
+      childViews: [{
+        type: 'GitDemonstrationView',
+        options: this.getExportObj()
+      }]
+    });
   },
 
   getExportObj: function() {
     return {
       beforeMarkdowns: this.beforeMarkdownView.exportToArray(),
       afterMarkdowns: this.afterMarkdownView.exportToArray(),
-      gitCommand: 'git commit'
+      command: this.commandView.getText(),
+      beforeCommand: this.beforeCommandView.getText()
     };
   },
 
@@ -17130,6 +17209,7 @@ var DemonstrationBuilder = ContainedBase.extend({
 
 exports.MarkdownGrabber = MarkdownGrabber;
 exports.DemonstrationBuilder = DemonstrationBuilder;
+exports.TextGrabber = TextGrabber;
 
 
 });
@@ -21638,6 +21718,41 @@ var Views = require('../views');
 var ModalTerminal = Views.ModalTerminal;
 var ContainedBase = Views.ContainedBase;
 
+var MultiView = require('../views/multiView').MultiView;
+
+var TextGrabber = ContainedBase.extend({
+  tagName: 'div',
+  className: 'textGrabber box vertical',
+  template: _.template($('#text-grabber').html()),
+
+  initialize: function(options) {
+    options = options || {};
+    this.JSON = {
+      helperText: options.helperText || 'Enter some text'
+    };
+
+    this.container = options.container || new ModalTerminal({
+      title: 'Enter some text'
+    });
+    this.render();
+    if (options.initialText) {
+      this.setText(options.initialText);
+    }
+
+    if (!options.wait) {
+      this.show();
+    }
+  },
+
+  getText: function() {
+    return this.$('textarea').val();
+  },
+
+  setText: function(str) {
+    this.$('textarea').val(str);
+  }
+});
+
 var MarkdownGrabber = ContainedBase.extend({
   tagName: 'div',
   className: 'markdownGrabber box horizontal',
@@ -21668,7 +21783,7 @@ var MarkdownGrabber = ContainedBase.extend({
 
       var confirmCancel = new Views.ConfirmCancelView({
         deferred: buttonDefer,
-        destination: this.getDestination()
+        destination: this
       });
     }
 
@@ -21735,6 +21850,18 @@ var DemonstrationBuilder = ContainedBase.extend({
       withoutButton: true,
       previewText: 'Before demonstration Markdown'
     });
+    this.beforeCommandView = new TextGrabber({
+      container: this,
+      helperText: 'The git command(s) to set up the demonstration view (before it is displayed)',
+      initialText: 'git checkout -b bugFix'
+    });
+
+    this.commandView = new TextGrabber({
+      container: this,
+      helperText: 'The git command(s) to demonstrate to the reader',
+      initialText: 'git commit'
+    });
+
     this.afterMarkdownView = new MarkdownGrabber({
       container: this,
       withoutButton: true,
@@ -21762,15 +21889,20 @@ var DemonstrationBuilder = ContainedBase.extend({
   },
 
   testView: function() {
-    var module = require('../views/gitDemonstrationView');
+    new MultiView({
-    new module.GitDemonstrationView(this.getExportObj());
+      childViews: [{
+        type: 'GitDemonstrationView',
+        options: this.getExportObj()
+      }]
+    });
   },
 
   getExportObj: function() {
     return {
       beforeMarkdowns: this.beforeMarkdownView.exportToArray(),
       afterMarkdowns: this.afterMarkdownView.exportToArray(),
-      gitCommand: 'git commit'
+      command: this.commandView.getText(),
+      beforeCommand: this.beforeCommandView.getText()
     };
   },
 
@@ -21791,6 +21923,7 @@ var DemonstrationBuilder = ContainedBase.extend({
 
 exports.MarkdownGrabber = MarkdownGrabber;
 exports.DemonstrationBuilder = DemonstrationBuilder;
+exports.TextGrabber = TextGrabber;
 
 
 });
@@ -22236,6 +22369,7 @@ var GitDemonstrationView = ContainedBase.extend({
       title: options.title || 'Git Demonstration'
     });
     this.render();
+    this.checkScroll();
 
     this.navEvents = _.clone(Backbone.Events);
     this.navEvents.on('positive', this.positive, this);
@@ -22258,6 +22392,31 @@ var GitDemonstrationView = ContainedBase.extend({
     }
   },
 
+  checkScroll: function() {
+    console.log('checking scroll');
+    var children = this.$('div.demonstrationText').children();
+    var heights = _.map(children, function(child) { return child.clientHeight; });
+    var totalHeight = _.reduce(heights, function(a, b) { return a + b; });
+    console.log(children, heights, totalHeight);
+    if (totalHeight < this.$('div.demonstrationText').height()) {
+      this.$('div.demonstrationText').addClass('noLongText');
+    }
+  },
+
+  dispatchBeforeCommand: function() {
+    if (!this.options.beforeCommand) {
+      return;
+    }
+    // here we just split the command and push them through to the git engine
+    util.splitTextCommand(this.options.beforeCommand, function(commandStr) {
+      this.mainVis.gitEngine.dispatch(new Command({
+        rawStr: commandStr
+      }), Q.defer());
+    }, this);
+    // then harsh refresh
+    this.mainVis.gitVisuals.refreshTreeHarsh();
+  },
+
   takeControl: function() {
     this.hasControl = true;
     this.keyboardListener.listen();
@@ -22377,6 +22536,7 @@ var GitDemonstrationView = ContainedBase.extend({
     });
     this.mainVis.customEvents.on('paperReady', _.bind(function() {
       this.visFinished = true;
+      this.dispatchBeforeCommand();
       if (this.shown) {
         // show the canvas once its done if we are shown
         this.show();

index.html

@@ -204,19 +204,19 @@
 
   <script type="text/html" id="git-demonstration-view">
     <div class="demonstrationText box vertical">
-      <div class="beforeText box flex1 vertical center">
+      <div class="beforeText">
         <p>
           <%= beforeHTML %>
         </p>
       </div>
 
-      <div class="command box flex1 vertical center centerAlign">
+      <div class="command center">
         <p class="uiButton uiButtonYellow transitionOpacity">
           <%= command %>
         </p>
       </div>
 
-      <div class="afterText box flex1 vertical center transitionOpacity">
+      <div class="afterText transitionOpacity">
         <p>
           <%= afterHTML %>
         </p>
@@ -238,6 +238,13 @@
     </div>
   </script>
 
+  <script type="text/html" id="text-grabber">
+    <p class="helperText">
+      <%= helperText %>
+    </p>
+    <textarea></textarea>
+  </script>
+
   <script type="text/html" id="markdown-grabber-view">
     <div class="inputSide box vertical">
       <div class="markdownGrabberInput">

src/js/views/builderViews.js

@@ -10,6 +10,41 @@ var Views = require('../views');
 var ModalTerminal = Views.ModalTerminal;
 var ContainedBase = Views.ContainedBase;
 
+var MultiView = require('../views/multiView').MultiView;
+
+var TextGrabber = ContainedBase.extend({
+  tagName: 'div',
+  className: 'textGrabber box vertical',
+  template: _.template($('#text-grabber').html()),
+
+  initialize: function(options) {
+    options = options || {};
+    this.JSON = {
+      helperText: options.helperText || 'Enter some text'
+    };
+
+    this.container = options.container || new ModalTerminal({
+      title: 'Enter some text'
+    });
+    this.render();
+    if (options.initialText) {
+      this.setText(options.initialText);
+    }
+
+    if (!options.wait) {
+      this.show();
+    }
+  },
+
+  getText: function() {
+    return this.$('textarea').val();
+  },
+
+  setText: function(str) {
+    this.$('textarea').val(str);
+  }
+});
+
 var MarkdownGrabber = ContainedBase.extend({
   tagName: 'div',
   className: 'markdownGrabber box horizontal',
@@ -40,7 +75,7 @@ var MarkdownGrabber = ContainedBase.extend({
 
       var confirmCancel = new Views.ConfirmCancelView({
         deferred: buttonDefer,
-        destination: this.getDestination()
+        destination: this
       });
     }
 
@@ -107,6 +142,18 @@ var DemonstrationBuilder = ContainedBase.extend({
       withoutButton: true,
       previewText: 'Before demonstration Markdown'
     });
+    this.beforeCommandView = new TextGrabber({
+      container: this,
+      helperText: 'The git command(s) to set up the demonstration view (before it is displayed)',
+      initialText: 'git checkout -b bugFix'
+    });
+
+    this.commandView = new TextGrabber({
+      container: this,
+      helperText: 'The git command(s) to demonstrate to the reader',
+      initialText: 'git commit'
+    });
+
     this.afterMarkdownView = new MarkdownGrabber({
       container: this,
       withoutButton: true,
@@ -134,15 +181,20 @@ var DemonstrationBuilder = ContainedBase.extend({
   },
 
   testView: function() {
-    var module = require('../views/gitDemonstrationView');
+    new MultiView({
-    new module.GitDemonstrationView(this.getExportObj());
+      childViews: [{
+        type: 'GitDemonstrationView',
+        options: this.getExportObj()
+      }]
+    });
   },
 
   getExportObj: function() {
     return {
       beforeMarkdowns: this.beforeMarkdownView.exportToArray(),
       afterMarkdowns: this.afterMarkdownView.exportToArray(),
-      gitCommand: 'git commit'
+      command: this.commandView.getText(),
+      beforeCommand: this.beforeCommandView.getText()
     };
   },
 
@@ -163,4 +215,5 @@ var DemonstrationBuilder = ContainedBase.extend({
 
 exports.MarkdownGrabber = MarkdownGrabber;
 exports.DemonstrationBuilder = DemonstrationBuilder;
+exports.TextGrabber = TextGrabber;
 

src/js/views/gitDemonstrationView.js

@@ -52,6 +52,7 @@ var GitDemonstrationView = ContainedBase.extend({
       title: options.title || 'Git Demonstration'
     });
     this.render();
+    this.checkScroll();
 
     this.navEvents = _.clone(Backbone.Events);
     this.navEvents.on('positive', this.positive, this);
@@ -74,6 +75,31 @@ var GitDemonstrationView = ContainedBase.extend({
     }
   },
 
+  checkScroll: function() {
+    console.log('checking scroll');
+    var children = this.$('div.demonstrationText').children();
+    var heights = _.map(children, function(child) { return child.clientHeight; });
+    var totalHeight = _.reduce(heights, function(a, b) { return a + b; });
+    console.log(children, heights, totalHeight);
+    if (totalHeight < this.$('div.demonstrationText').height()) {
+      this.$('div.demonstrationText').addClass('noLongText');
+    }
+  },
+
+  dispatchBeforeCommand: function() {
+    if (!this.options.beforeCommand) {
+      return;
+    }
+    // here we just split the command and push them through to the git engine
+    util.splitTextCommand(this.options.beforeCommand, function(commandStr) {
+      this.mainVis.gitEngine.dispatch(new Command({
+        rawStr: commandStr
+      }), Q.defer());
+    }, this);
+    // then harsh refresh
+    this.mainVis.gitVisuals.refreshTreeHarsh();
+  },
+
   takeControl: function() {
     this.hasControl = true;
     this.keyboardListener.listen();
@@ -193,6 +219,7 @@ var GitDemonstrationView = ContainedBase.extend({
     });
     this.mainVis.customEvents.on('paperReady', _.bind(function() {
       this.visFinished = true;
+      this.dispatchBeforeCommand();
       if (this.shown) {
         // show the canvas once its done if we are shown
         this.show();

src/style/main.css

@@ -739,12 +739,20 @@ div.levelIcon.solved div.index div.indexNum {
 
 /* DemonstrationBuilder */
 
+.demonstrationBuilder {
+  max-height: 600px;
+  overflow-y: scroll;
+  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
+  padding: 10px;
+  margin-bottom: 10px;
+}
+
 .demonstrationBuilder div.buttons {
   margin: 8px 0;
 }
 
 .demonstrationBuilder .markdownGrabber{
-  min-height: 200px;
+  min-height: 100px;
 }
 
 .markdownGrabberInput {
@@ -755,6 +763,10 @@ div.levelIcon.solved div.index div.indexNum {
   height: auto;
 }
 
+.textGrabber textarea {
+  width: 70%;
+}
+
 /* Git demonstration view, and markdownGrabber */
 
 .markdownGrabber {
@@ -767,7 +779,7 @@ div.levelIcon.solved div.index div.indexNum {
 }
 
 .demonstrationBuilder .markdownGrabber textarea {
-  height: 200px;
+  height: 100px;
 }
 
 .markdownGrabberPreview div.insidePreview {
@@ -779,6 +791,16 @@ div.levelIcon.solved div.index div.indexNum {
   width: 50%;
 }
 
+.gitDemonstrationView > div.demonstrationText {
+  margin-right: 10px;
+  max-height: 400px;
+  overflow-y: scroll;
+}
+
+.gitDemonstrationView > div.demonstrationText.noLongText {
+  overflow-y: hidden;
+}
+
 .markdownGrabber div.markdownGrabberPreview,
 .gitDemonstrationView > div.visHolder {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);

todo.txt

@@ -2,11 +2,13 @@ Big Things
 ~~~~~~~~~~~~~~~~~~~~~~~~~
 [ ] level builder dialog tester
 [ ] level builder dialog builder
-[ ] allow demonstration view to have git commands beforehand
 
 Medium things:
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~
 [ ] get automated SHA hash appending in the html source :OOOOO... template? or what?t
+[ ] text grabber for commands
+[ ] turn off button clicking for demonstration view :O
+
 
 Cases to handle / things to edit
 =======================
@@ -32,6 +34,8 @@ Ideas for cleaning
 Done things:
 (I only started this on Dec 17th 2012 to get a better sense of what was done)
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+[x] way to close testing view
+[x] allow demonstration view to have git commands beforehand
 [x] demonstration builder progress
 [x] markdowngrabber
 [x] sandbox and level command refresh