diff --git a/build/bundle.js b/build/bundle.js index 314d7c3b..bce79529 100644 --- a/build/bundle.js +++ b/build/bundle.js @@ -14484,7 +14484,6 @@ var VisBranch = VisBase.extend({ branch.obj.get('visBranch') )); }); - console.log('getting text size', textNode, 'width', textNode.clientWidth); return firefoxFix({ w: maxWidth, @@ -15067,13 +15066,15 @@ var MultiView = Backbone.View.extend({ this.navEvents = _.clone(Backbone.Events); this.navEvents.on('negative', this.getNegFunc(), this); this.navEvents.on('positive', this.getPosFunc(), this); + this.navEvents.on('quit', this.finish, this); this.keyboardListener = new KeyboardListener({ events: this.navEvents, aliasMap: { left: 'negative', right: 'positive', - enter: 'positive' + enter: 'positive', + esc: 'quit' } }); @@ -16056,7 +16057,7 @@ var CommandPromptView = Backbone.View.extend({ }); this.index = -1; - this.commandSpan = this.$('#prompt span.command')[0]; + this.commandParagraph = this.$('#prompt p.command')[0]; this.commandCursor = this.$('#prompt span.cursor')[0]; this.focus(); @@ -16093,16 +16094,11 @@ var CommandPromptView = Backbone.View.extend({ }, onKeyDown: function(e) { - console.log('on keydown'); - console.log(e); - var el = e.srcElement; this.updatePrompt(el); }, onKeyUp: function(e) { - console.log('on key up'); - console.log(e); this.onKeyDown(e); // we need to capture some of these events. @@ -16145,7 +16141,7 @@ var CommandPromptView = Backbone.View.extend({ // well... var text = $('#commandTextField').val(); var val = this.badHtmlEncode(text); - this.commandSpan.innerHTML = val; + this.commandParagraph.innerHTML = val; // now mutate the cursor... this.cursorUpdate(text.length, el.selectionStart, el.selectionEnd); @@ -16155,24 +16151,31 @@ var CommandPromptView = Backbone.View.extend({ cursorUpdate: function(commandLength, selectionStart, selectionEnd) { if (selectionStart === undefined || selectionEnd === undefined) { - selectionStart = 0; - selectionEnd = 1; + selectionStart = commandLength - 1; + selectionEnd = commandLength; } // 10px for monospaced font at "1" zoom var zoom = require('../util/zoomLevel').detectZoom(); var widthPerChar = 10 * zoom; + var heightPerRow = 22 * zoom; - var numCharsSelected = Math.max(1, selectionEnd - selectionStart); - var width = String(numCharsSelected * widthPerChar) + 'px'; + var widthOfParagraph = $(this.commandParagraph).width(); + var numCharsPerLine = widthOfParagraph / widthPerChar; + + var numCharsSelected = Math.min(Math.max(1, selectionEnd - selectionStart), numCharsPerLine); + var widthOfSelection = String(numCharsSelected * widthPerChar) + 'px'; // now for positioning - var numLeft = (selectionStart !== undefined) ? Math.max(commandLength - selectionStart, 0) : 0; - var left = String(-numLeft * widthPerChar) + 'px'; + var leftOffset = String(widthPerChar * (selectionStart % numCharsPerLine)) + 'px'; + var topOffset = String(Math.floor(selectionStart / numCharsPerLine) * heightPerRow) + 'px'; + console.log('height per row', heightPerRow, 'selection start', selectionStart, 'num chars perline', numCharsPerLine); + // one reflow? :D $(this.commandCursor).css({ - width: width, - left: left + width: widthOfSelection, + left: leftOffset, + top: topOffset }); }, @@ -20715,7 +20718,7 @@ var CommandPromptView = Backbone.View.extend({ }); this.index = -1; - this.commandSpan = this.$('#prompt span.command')[0]; + this.commandParagraph = this.$('#prompt p.command')[0]; this.commandCursor = this.$('#prompt span.cursor')[0]; this.focus(); @@ -20752,16 +20755,11 @@ var CommandPromptView = Backbone.View.extend({ }, onKeyDown: function(e) { - console.log('on keydown'); - console.log(e); - var el = e.srcElement; this.updatePrompt(el); }, onKeyUp: function(e) { - console.log('on key up'); - console.log(e); this.onKeyDown(e); // we need to capture some of these events. @@ -20804,7 +20802,7 @@ var CommandPromptView = Backbone.View.extend({ // well... var text = $('#commandTextField').val(); var val = this.badHtmlEncode(text); - this.commandSpan.innerHTML = val; + this.commandParagraph.innerHTML = val; // now mutate the cursor... this.cursorUpdate(text.length, el.selectionStart, el.selectionEnd); @@ -20814,24 +20812,31 @@ var CommandPromptView = Backbone.View.extend({ cursorUpdate: function(commandLength, selectionStart, selectionEnd) { if (selectionStart === undefined || selectionEnd === undefined) { - selectionStart = 0; - selectionEnd = 1; + selectionStart = commandLength - 1; + selectionEnd = commandLength; } // 10px for monospaced font at "1" zoom var zoom = require('../util/zoomLevel').detectZoom(); var widthPerChar = 10 * zoom; + var heightPerRow = 22 * zoom; - var numCharsSelected = Math.max(1, selectionEnd - selectionStart); - var width = String(numCharsSelected * widthPerChar) + 'px'; + var widthOfParagraph = $(this.commandParagraph).width(); + var numCharsPerLine = widthOfParagraph / widthPerChar; + + var numCharsSelected = Math.min(Math.max(1, selectionEnd - selectionStart), numCharsPerLine); + var widthOfSelection = String(numCharsSelected * widthPerChar) + 'px'; // now for positioning - var numLeft = (selectionStart !== undefined) ? Math.max(commandLength - selectionStart, 0) : 0; - var left = String(-numLeft * widthPerChar) + 'px'; + var leftOffset = String(widthPerChar * (selectionStart % numCharsPerLine)) + 'px'; + var topOffset = String(Math.floor(selectionStart / numCharsPerLine) * heightPerRow) + 'px'; + console.log('height per row', heightPerRow, 'selection start', selectionStart, 'num chars perline', numCharsPerLine); + // one reflow? :D $(this.commandCursor).css({ - width: width, - left: left + width: widthOfSelection, + left: leftOffset, + top: topOffset }); }, @@ -22171,13 +22176,15 @@ var MultiView = Backbone.View.extend({ this.navEvents = _.clone(Backbone.Events); this.navEvents.on('negative', this.getNegFunc(), this); this.navEvents.on('positive', this.getPosFunc(), this); + this.navEvents.on('quit', this.finish, this); this.keyboardListener = new KeyboardListener({ events: this.navEvents, aliasMap: { left: 'negative', right: 'positive', - enter: 'positive' + enter: 'positive', + esc: 'quit' } }); @@ -23895,7 +23902,6 @@ var VisBranch = VisBase.extend({ branch.obj.get('visBranch') )); }); - console.log('getting text size', textNode, 'width', textNode.clientWidth); return firefoxFix({ w: maxWidth, diff --git a/index.html b/index.html index e2a48f33..01837461 100644 --- a/index.html +++ b/index.html @@ -40,10 +40,10 @@
-
+
$ -   +

diff --git a/src/js/views/commandViews.js b/src/js/views/commandViews.js index 4760f153..740d16fb 100644 --- a/src/js/views/commandViews.js +++ b/src/js/views/commandViews.js @@ -37,7 +37,7 @@ var CommandPromptView = Backbone.View.extend({ }); this.index = -1; - this.commandSpan = this.$('#prompt span.command')[0]; + this.commandParagraph = this.$('#prompt p.command')[0]; this.commandCursor = this.$('#prompt span.cursor')[0]; this.focus(); @@ -74,16 +74,11 @@ var CommandPromptView = Backbone.View.extend({ }, onKeyDown: function(e) { - console.log('on keydown'); - console.log(e); - var el = e.srcElement; this.updatePrompt(el); }, onKeyUp: function(e) { - console.log('on key up'); - console.log(e); this.onKeyDown(e); // we need to capture some of these events. @@ -126,7 +121,7 @@ var CommandPromptView = Backbone.View.extend({ // well... var text = $('#commandTextField').val(); var val = this.badHtmlEncode(text); - this.commandSpan.innerHTML = val; + this.commandParagraph.innerHTML = val; // now mutate the cursor... this.cursorUpdate(text.length, el.selectionStart, el.selectionEnd); @@ -136,24 +131,31 @@ var CommandPromptView = Backbone.View.extend({ cursorUpdate: function(commandLength, selectionStart, selectionEnd) { if (selectionStart === undefined || selectionEnd === undefined) { - selectionStart = 0; - selectionEnd = 1; + selectionStart = commandLength - 1; + selectionEnd = commandLength; } // 10px for monospaced font at "1" zoom var zoom = require('../util/zoomLevel').detectZoom(); var widthPerChar = 10 * zoom; + var heightPerRow = 22 * zoom; - var numCharsSelected = Math.max(1, selectionEnd - selectionStart); - var width = String(numCharsSelected * widthPerChar) + 'px'; + var widthOfParagraph = $(this.commandParagraph).width(); + var numCharsPerLine = widthOfParagraph / widthPerChar; + + var numCharsSelected = Math.min(Math.max(1, selectionEnd - selectionStart), numCharsPerLine); + var widthOfSelection = String(numCharsSelected * widthPerChar) + 'px'; // now for positioning - var numLeft = (selectionStart !== undefined) ? Math.max(commandLength - selectionStart, 0) : 0; - var left = String(-numLeft * widthPerChar) + 'px'; + var leftOffset = String(widthPerChar * (selectionStart % numCharsPerLine)) + 'px'; + var topOffset = String(Math.floor(selectionStart / numCharsPerLine) * heightPerRow) + 'px'; + console.log('height per row', heightPerRow, 'selection start', selectionStart, 'num chars perline', numCharsPerLine); + // one reflow? :D $(this.commandCursor).css({ - width: width, - left: left + width: widthOfSelection, + left: leftOffset, + top: topOffset }); }, diff --git a/src/js/views/multiView.js b/src/js/views/multiView.js index 80436e17..d1575624 100644 --- a/src/js/views/multiView.js +++ b/src/js/views/multiView.js @@ -52,13 +52,15 @@ var MultiView = Backbone.View.extend({ this.navEvents = _.clone(Backbone.Events); this.navEvents.on('negative', this.getNegFunc(), this); this.navEvents.on('positive', this.getPosFunc(), this); + this.navEvents.on('quit', this.finish, this); this.keyboardListener = new KeyboardListener({ events: this.navEvents, aliasMap: { left: 'negative', right: 'positive', - enter: 'positive' + enter: 'positive', + esc: 'quit' } }); diff --git a/src/js/visuals/visBranch.js b/src/js/visuals/visBranch.js index 5db9b1a4..0bd582f3 100644 --- a/src/js/visuals/visBranch.js +++ b/src/js/visuals/visBranch.js @@ -225,7 +225,6 @@ var VisBranch = VisBase.extend({ branch.obj.get('visBranch') )); }); - console.log('getting text size', textNode, 'width', textNode.clientWidth); return firefoxFix({ w: maxWidth, diff --git a/src/style/main.css b/src/style/main.css index a7345dec..d828c462 100644 --- a/src/style/main.css +++ b/src/style/main.css @@ -6,6 +6,7 @@ body { margin: 0px; border: 0px; padding: 0px; + overflow: hidden; } html, body { @@ -27,9 +28,9 @@ p { html, body, .box { - display: -webkit-box; - display: -moz-box; display: box; + display: -moz-box; + display: -webkit-box; } body, @@ -425,6 +426,11 @@ p.commandLine span.prompt { font-weight: bold; } +#commandLineBar p.command { + margin: 0; + margin-left: 12px; +} + #commandLineBar #commandTextField { position: absolute; top: -1000px; @@ -443,18 +449,21 @@ p.commandLine span.prompt { #prompt { text-align: left; + position: relative; + min-height: 22px; } #prompt span { padding: 0px; margin: 0px; border: 0px; + position: absolute; } #prompt span.cursor { background: #DDD; - position: relative; opacity: 0; + margin-left: 12px; } #prompt span.cursor.shown { diff --git a/todo.txt b/todo.txt index d144a31c..25eb1cca 100644 --- a/todo.txt +++ b/todo.txt @@ -4,6 +4,8 @@ Big Things * basically just an extension of level (or sandbox), that has commands like ```save tree beginning``` or ```save tree goal``` and then a final dialog typing area thingy +[ ] warning for window size + Medium things: ~~~~~~~~~~~~~~~~~~~~~~~~~~~ @@ -13,7 +15,6 @@ Cases to handle / things to edit Small things to implement: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -[ ] esc on multiview quits absolutely Minor Bugs to fix: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ @@ -29,12 +30,13 @@ Ideas for cleaning /************************************* ** Publish Things ** ************************************/ -- cross browser support... firefox only LULZ. should be just css right? - fix terminal input field in general Done things: (I only started this on Dec 17th 2012 to get a better sense of what was done) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +[x] esc on multiview quits absolutely +[x] cross browser support... firefox only LULZ. should be just css right? WRONG [x] keyboard navigation for level selector [x] optional multiview on start [x] local storage for solved map