big scroll update

src/commandModel.js

@@ -38,15 +38,18 @@ var Command = Backbone.Model.extend({
   },
 
   addWarning: function(msg) {
-    this.set('warnings', this.get('warnings').push(msg));
+    this.get('warnings').push(msg);
+    // change numWarnings so the change event fires. This is bizarre -- Backbone can't
+    // detect if an array changes, so adding an element does nothing
+    this.set('numWarnings', this.get('numWarnings') ? this.get('numWarnings') + 1 : 1);
   },
 
   getFormattedWarnings: function() {
     if (!this.get('warnings').length) {
       return '';
     }
-
+    var i = '<i class="icon-exclamation-sign"></i>';
-    return '<p>' + this.get('warnings').join('</p><p>') + '</p>';
+    return '<p>' + i + this.get('warnings').join('</p><p>' + i) + '</p>';
   },
 
   initialize: function() {

src/commandViews.js

@@ -67,9 +67,14 @@ var CommandPromptView = Backbone.View.extend({
     this.index = -1;
 
     // split commands on semicolon
-    _.each(value.split(';'), _.bind(function(command) {
+    _.each(value.split(';'), _.bind(function(command, index) {
       command = command.replace(/^(\s+)/, '');
       command = command.replace(/(\s+)$/, '');
+
+      if (index > 0 && !command.length) {
+        return;
+      }
+
       this.addToCollection(command);
     }, this));
   },
@@ -140,7 +145,7 @@ var CommandView = Backbone.View.extend({
       {
         resultType: '',
         result: '',
-        warnings: ''
+        formattedWarnings: this.model.getFormattedWarnings()
       },
       this.model.toJSON()
     );
@@ -169,7 +174,6 @@ var CommandLineHistoryView = Backbone.View.extend({
   },
 
   addWarning: function(msg) {
-    console.log('here', arguments);
     var err = new Warning({
       msg: msg
     });
@@ -183,8 +187,20 @@ var CommandLineHistoryView = Backbone.View.extend({
   },
 
   scrollDown: function() {
-    var el = $('#commandLineHistory')[0];
+    // if commandDisplay is ever bigger than #terminal, we need to
-    el.scrollTop = el.scrollHeight;
+    // add overflow-y to terminal and scroll down
+    var cD = $('#commandDisplay')[0];
+    var t = $('#terminal')[0];
+
+    if ($(t).hasClass('scrolling')) {
+      t.scrollTop = t.scrollHeight;
+      return;
+    }
+    if (cD.clientHeight > t.clientHeight) {
+      $(t).css('overflow-y', 'scroll');
+      $(t).addClass('scrolling');
+      t.scrollTop = t.scrollHeight;
+    }
   },
 
   addOne: function(command) {

src/index.html

@@ -62,7 +62,7 @@
 
   <!-- Templates -->
   <script type="text/html" id="command-template">
-      <p class="commandLine transitionBackground <%= status %>">
+       <p class="commandLine transitionBackground <%= status %>">
         <span class="prompt">$</span>
         <%= rawStr %>
         <span class="icons transitionAllSlow">
@@ -73,17 +73,13 @@
         </span>
       </p>
 
-      <p class="commandLineResult <%= resultType %>">
+      <div class="commandLineResult <%= resultType %>">
-        <div class="commandLineResultWrapper">
+        <%= result %>
-          <%= result %>
+      </div>
-        </div>
-      </p>
 
-      <p class="commandLineWarnings">
+      <div class="commandLineWarnings">
-        <div class="commandLineWarningsWrapper">
+        <%= formattedWarnings %>
-          <%= warnings %>
+      </div>
-        </div>
-      </p>
   </script>
 
   <!-- My files! -->

src/style/main.css

@@ -171,12 +171,17 @@ div.controls div.box.flex1 div.plus {
 
 /* Command Line */
 
-p.commandLine, p.commandLineResult {
+p.commandLine, div.commandLineResult {
   opacity: 1;
   font-size: 16px;
   margin: 0px;
 }
 
+p.commandLine div.commandLineWarnings p i.icon-exclamation-point {
+  color: yellow;
+  margin-right: 5px;
+}
+
 p.commandLine span.icons {
   float: right;
 }