**0.2.9** -- 2013/08/31

* Added ability to bind ReadLine/Shell to an element.

* Added ability to bind/unbind keys (could be used to replace emacs bindings of readline, but primarily added to unbind some keys for using readline on input elements.

* Created input.js for easy binding of readline to either an input element or a span behaving like an input.

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Shell testbed</title>

<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>

<script>Josh = {Debug: true };</script>

<script src="js/history.js"></script>

<script src="js/killring.js"></script>

<script src="js/readline.js"></script>

<script src="js/input.js"></script>

<script src="js/shell.js"></script>

<script src="js/pathhandler.js"></script>

<script src="js/example.js"></script>

<style type="text/css">

#shell-panel {

display: none;

height: 400px;

width: 97.0%;

opacity: 0.9;

background-color: #002f05;

color: #00fe00;

position: fixed;

padding: 20px 20px 20px 20px;

top: 0;

left: 0;

z-index: 1000;

font-family: 'Source Code Pro', sans-serif;

font-size: 0.9em;

overflow: scroll;

overflow-x: hidden;

overflow-y: scroll;

}

#cmd1 {

border-style: solid;

border-width: 1px;

display: inline-block;

width: 200px;

height: 20px;

}

</style>

<div id="shell-view"></div>

<p>Press <strong>~</strong> to activate console.</p>

Cmd1: <span id="cmd1"></span>

Cmd2: <input id="cmd2">

var history = new Josh.History();

var killring = new Josh.KillRing();

var cmd1 = new Josh.Input({id: "cmd1"});

var cmd2 = new Josh.Input({id: "cmd2"});

$(root).ready(function() {

_console.log("activating shell");

shell.activate();

var Josh = Josh || {};

(function (root, $, _) {

$.fn.josh_caretTo = function (index) {

return this.queue(function (next) {

if (this.createTextRange) {

var range = this.createTextRange();

range.move("character", index);

range.select();

} else if (this.selectionStart != null) {

this.setSelectionRange(index, index);

}

next();

});

};

$.fn.josh_caretPosition = function () {

var el = this.get(0);

if (el.createTextRange) {

var range = el.createTextRange();

range.moveStart('character', -el.value.length);

return range.text.length;

} else if (el.selectionStart != null) {

return el.selectionStart;

}

return 0;

};

var history = Josh.History();

var killring = new Josh.KillRing();

Josh.Input = function (config) {

config = config || {};

// instance fields

var _console = config.console || (Josh.Debug && root.console ? root.console : {

log: function () {

}

});

var _id = "#" + config.id;

var _blinktime = config.blinktime || 500;

var _active = false;

var _cursor_visible = false;

var _isInput = false;

var _history = config.history || history;

var _killring = config.killring || killring;

var _text;

var self = {

templates: {

span: _.template('<span class="input"><span class="left"/><span class="cursor"/><span class="right"/></span>')

},

history: _history,

killring: _killring

};

$(document).ready(function () {

var $input = $(_id);

var el = $input.get(0);

var readline = new Josh.ReadLine({

history: _history,

killring: _killring,

console: _console

});

self.readline = readline;

readline.attach(el);

var activate = null;

_isInput = $input.is('input');

if (_isInput) {

_console.log(_id + ' is an input');

function renderInput(line) {

var text = line ? line.text : '';

_text = text;

$input.val(text);

$input.josh_caretTo(line.cursor);

}

readline.onChange(renderInput);

$input.click(function() {

var line = readline.getLine();

line.cursor = $input.josh_caretPosition();

readline.setLine(line);

});

activate = function() {

// Note: have to re-render with a setTimeout, because on focus, but after the onfocus event is processed,

// the input will select all, invalidating our render

setTimeout(function() {

renderInput(readline.getLine());

}, 0);

};

} else {

_console.log(_id + ' is a non-input element');

$input.html(self.templates.span());

if(typeof $input.attr('tabindex') === 'undefined') {

$input.attr('tabindex',0);

}

var $left = $input.find('.left');

var $right = $input.find('.right');

var $cursor = $input.find('.cursor');

function renderSpan(line) {

var text = line.text || '';

_text = text;

var cursorIdx = line.cursor || 0;

var left = _.escape(text.substr(0, cursorIdx)).replace(/ /g, '&nbsp;');

var cursor = text.substr(cursorIdx, 1);

var right = _.escape(text.substr(cursorIdx + 1)).replace(/ /g, '&nbsp;');

$left.html(left);

if (!cursor) {

$cursor.html('&nbsp;').css('textDecoration', 'underline');

} else {

$cursor.text(cursor).css('textDecoration', 'underline');

}

$right.html(right);

}

function blinkCursor() {

if (!_active) {

return;

}

root.setTimeout(function () {

if (!_active) {

return;

}

_cursor_visible = !_cursor_visible;

if (_cursor_visible) {

$cursor.css('textDecoration', 'underline');

} else {

$cursor.css('textDecoration', '');

}

blinkCursor();

}, _blinktime);

}

activate = function () {

blinkCursor();

}

readline.onChange(renderSpan);

}

readline.unbind({keyCode: Josh.Keys.Special.Tab});

readline.unbind({char: 'R', ctrlKey: true});

readline.onActivate(function () {

_active = true;

activate();

});

readline.onDeactivate(function () {

_active = false;

if (_text) {

_history.accept(_text);

}

});

});

return self;

}

})(this, $, _);