diff --git a/src/commandViews.js b/src/commandViews.js index 55b471b6..f39b4aa1 100644 --- a/src/commandViews.js +++ b/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); }, diff --git a/src/index.html b/src/index.html index 6f21d093..3f1d439e 100644 --- a/src/index.html +++ b/src/index.html @@ -43,9 +43,10 @@
-
- $ - +
+ $ + +  
diff --git a/src/style/main.css b/src/style/main.css index 1ef81058..d9723175 100644 --- a/src/style/main.css +++ b/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;