mirror/pcottle.learnGitBranching
1
0
Fork 0
mirror of https://github.com/pcottle/learnGitBranching.git synced 2025-06-29 17:27:22 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

terminal much better

Browse source
This commit is contained in:
Peter Cottle 2013-01-08 12:00:58 -08:00
parent eed87168ed
commit 8bd5fb3196
7 changed files with 78 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

74
build/bundle.js
View file

@ -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,

4
index.html
View file

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

32
src/js/views/commandViews.js
View file

@ -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
});
},

4
src/js/views/multiView.js
View file

@ -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'
}
});

1
src/js/visuals/visBranch.js
View file

@ -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,

15
src/style/main.css
View file

@ -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 {

6
todo.txt
View file

@ -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