more terminal work

src/commandViews.js

@@ -5,6 +5,7 @@ var CommandPromptView = Backbone.View.extend({
     this.index = -1;
 
     this.commandSpan = this.$('#prompt span.command')[0];
+    this.commandCursor = this.$('#prompt span.cursor')[0];
 
     // this is evil, but we will refer to HTML outside the document
     // and attach a click event listener
@@ -71,8 +72,12 @@ var CommandPromptView = Backbone.View.extend({
     // try.github.com also has this, so I'm assuming those engineers gave up as
     // well...
 
-    var val = el.value;
-    this.commandSpan.innerHTML = this.badHtmlEncode(val);
+    var val = this.badHtmlEncode(el.value);
+    this.commandSpan.innerHTML = val;
+
+    // if it's full of something, we need to move the cursor
+    $(this.commandCursor).toggleClass('partialCommand', val.length == 0);
+    console.log('val.elgnth is', val.length);
     //console.log(val, el.selectionStart, el.selectionEnd);
   },
 

src/index.html

@@ -43,9 +43,10 @@
         </div>
 
         <div id="commandLineBar" class="box vertical flex0">
-          <div id="prompt">
-            <span class="promptSign">$</span>
-            <span class="command"></span>
+          <div id="prompt" class="box horizontal">
+            <span class="promptSign box">$</span>
+            <span class="command box"></span>
+            <span class="cursor box">&nbsp;</span>
           </div>
           <textarea id="commandTextField"></textarea>
         </div>

src/style/main.css

@@ -18,34 +18,34 @@ html, body {
 /* Box Model */
 html,
 body,
-div.box {
+.box {
   display: -webkit-box;
 }
 
-div.flex0 {
+.flex0 {
   -webkit-box-flex: 0;
 }
 
 body,
-div.flex1 {
+.flex1 {
   -webkit-box-flex: 1;
 }
 
-div.flex2 {
+.flex2 {
   -webkit-box-flex: 2;
 }
 
-div.flex3 {
+.flex3 {
   -webkit-box-flex: 3;
 }
 
 html,
 body,
-div.vertical {
+.vertical {
   -webkit-box-orient: vertical;
 }
 
-div.horizontal {
+.horizontal {
   -webkit-box-orient: horizontal;
 }
 
@@ -274,6 +274,40 @@ p.commandLine span.prompt {
   text-align: left;
 }
 
+#prompt span {
+  padding: 0px;
+  margin: 0px;
+  border: 0px;
+}
+
+#prompt span.cursor {
+  -webkit-animation-name: blink;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-iteration-count: 99999;
+  background: #DDD;
+}
+
+@-webkit-keyframes blink {
+  from {
+    opacity: 1;
+  }
+
+  49% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+  
+  99% {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 #commandLineBar,
 #terminal {
   background: #424242;