Compare commits

...
7 Commits
Author SHA1 Message Date
paris 59ebbbaaf0 Fix helper position 2014-04-10 18:48:36 +00:00
paris 6e6b5dad8c fit() uses offset height and width now 2014-04-10 18:36:37 +00:00
paris 0b603952c3 Removed debugging stuff
Bumped bower version to 0.9
2014-04-10 16:04:59 +00:00
paris 9bd2a1c202 Implemented the attach addon 2014-04-10 15:54:39 +00:00
paris c7f4658e97 Add fullscreen mode plug in 2014-04-10 15:20:41 +00:00
paris 96848a6425 Improved textarea handling 2014-04-10 15:08:19 +00:00
paris 0997f4398f Proper event handling
Bump bower version to 0.7
2014-04-10 14:39:17 +00:00
9 changed files with 119 additions and 19 deletions
+23
View File
@@ -0,0 +1,23 @@
/*
* Implements the attach method, that
* attaches the terminal to a WebSocket stream.
*
* The bidirectional argument indicates, whether the terminal should
* send data to the socket as well and is true, by default.
*/
Terminal.prototype.attach = function (socket, bidirectional) {
var term = this;
bidirectional = (typeof bidirectional == 'undefined') ? true : bidirectional;
this.socket = socket;
socket.addEventListener('message', function (ev) {
term.write(ev.data);
});
if (bidirectional) {
this.on('data', function (data) {
socket.send(data);
});
}
}
+38
View File
@@ -0,0 +1,38 @@
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="../../src/xterm.css" />
<link rel="stylesheet" href="../../demo/style.css" />
<script src="../../src/xterm.js"></script>
<script src="attach.js"></script>
</head>
<body>
<form id="socket-form">
<input id="socket-url"
type="text"
placeholder="Enter socket url (e.g. ws://mysock)"
autofocus />
<button>
Attach
</button>
</form>
<div id="terminal-container"></div>
<script>
var term = new Terminal(),
container = document.getElementById('terminal-container'),
socketUrl = document.getElementById('socket-url'),
socketForm = document.getElementById('socket-form');
socketForm.addEventListener('submit', function (ev) {
ev.preventDefault();
var url = socketUrl.value,
sock = new WebSocket(url);
sock.addEventListener('open', function () {
term.attach(sock);
});
});
term.open(container);
</script>
</body>
</html>
+10
View File
@@ -0,0 +1,10 @@
.xterm.fullscreen {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: auto;
height: auto;
z-index: 255;
}
+25
View File
@@ -0,0 +1,25 @@
/*
* Fullscreen addon for xterm.js
*
* Implements the toggleFullscreen function.
*
* If the `fullscreen` argument has been supplied, then
* if it is true, the fullscreen mode gets turned on,
* if it is false or null, the fullscreen mode gets turned off.
*
* If the `fullscreen` argument has not been supplied, the
* fullscreen mode is being toggled.
*/
Terminal.prototype.toggleFullscreen = function (fullscreen) {
var fn;
if (typeof fullscreen == 'undefined') {
fn = (this.element.classList.contains('fullscreen')) ? 'remove' : 'add';
} else if (!fullscreen) {
fn = 'remove';
} else {
fn = 'add';
}
this.element.classList[fn]('fullscreen');
}
+2 -2
View File
@@ -1,5 +1,5 @@
{ {
"name": "xterm.js", "name": "xterm.js",
"version": "0.6", "version": "0.9.2",
"ignore": ["demo", "docs", "test", ".gitignore"] "ignore": ["demo", "docs", "test", ".gitignore"]
} }
+2
View File
@@ -3,8 +3,10 @@
<head> <head>
<title>xterm.js demo</title> <title>xterm.js demo</title>
<link rel="stylesheet" href="../src/xterm.css" /> <link rel="stylesheet" href="../src/xterm.css" />
<link rel="stylesheet" href="../addon/fullscreen/fullscreen.css" />
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<script src="../src/xterm.js"></script> <script src="../src/xterm.js"></script>
<script src="../addon/fullscreen/fullscreen.js"></script>
<script src="main.js" defer></script> <script src="main.js" defer></script>
</head> </head>
<body> <body>
-1
View File
@@ -17,7 +17,6 @@ term.on('key', function (key, ev) {
var printable = (!ev.altKey && !ev.altGraphKey && !ev.ctrlKey && !ev.metaKey); var printable = (!ev.altKey && !ev.altGraphKey && !ev.ctrlKey && !ev.metaKey);
if (ev.keyIdentifier == 'Enter') { if (ev.keyIdentifier == 'Enter') {
ev.preventDefault();
term.prompt(); term.prompt();
} else if (ev.keyCode == 8) { } else if (ev.keyCode == 8) {
term.write('\b \b'); term.write('\b \b');
+5
View File
@@ -40,12 +40,17 @@
color: #fff; color: #fff;
outline: none; outline: none;
font-family: courier-new, courier, monospace; font-family: courier-new, courier, monospace;
position: relative;
} }
.xterm .terminal-cursor { .xterm .terminal-cursor {
background-color: #fff; background-color: #fff;
} }
.xterm .xterm-helpers {
position: absolute;
}
.xterm .xterm-helper-textarea { .xterm .xterm-helper-textarea {
opacity: 0; opacity: 0;
width: 0; width: 0;
+14 -16
View File
@@ -542,6 +542,10 @@ Terminal.prototype.open = function(parent) {
this.element.appendChild(this.helperContainer); this.element.appendChild(this.helperContainer);
this.textarea = document.createElement('textarea'); this.textarea = document.createElement('textarea');
this.textarea.classList.add('xterm-helper-textarea'); this.textarea.classList.add('xterm-helper-textarea');
this.textarea.setAttribute('autocorrect', 'off');
this.textarea.setAttribute('autocapitalize', 'off');
this.textarea.setAttribute('spellcheck', 'false');
this.textarea.tabIndex = 0;
this.helperContainer.appendChild(this.textarea); this.helperContainer.appendChild(this.textarea);
for (; i < this.rows; i++) { for (; i < this.rows; i++) {
@@ -564,9 +568,7 @@ Terminal.prototype.open = function(parent) {
on(this.element, 'mouseup', function() { on(this.element, 'mouseup', function() {
var selection = document.getSelection(); var selection = document.getSelection();
if (selection.type == 'Range') { if (selection.type != 'Range') {
console.log(selection);
} else {
self.focus(); self.focus();
} }
}); });
@@ -2173,14 +2175,17 @@ Terminal.prototype.keyDown = function(ev) {
break; break;
} }
key = '\t'; key = '\t';
this.cancel(ev, true);
break; break;
// return/enter // return/enter
case 13: case 13:
key = '\r'; key = '\r';
this.cancel(ev, true);
break; break;
// escape // escape
case 27: case 27:
key = '\x1b'; key = '\x1b';
this.cancel(ev, true);
break; break;
// left-arrow // left-arrow
case 37: case 37:
@@ -2354,7 +2359,6 @@ Terminal.prototype.keyDown = function(ev) {
this.emit('keydown', ev); this.emit('keydown', ev);
this.emit('key', key, ev); this.emit('key', key, ev);
this.showCursor(); this.showCursor();
this.handler(key); this.handler(key);
@@ -2396,7 +2400,6 @@ Terminal.prototype.keyPress = function(ev) {
this.emit('keypress', key, ev); this.emit('keypress', key, ev);
this.emit('key', key, ev); this.emit('key', key, ev);
this.showCursor(); this.showCursor();
this.handler(key); this.handler(key);
@@ -2534,7 +2537,7 @@ Terminal.prototype.resize = function(x, y) {
Terminal.prototype.fit = function () { Terminal.prototype.fit = function () {
var container = this.element.parentElement, var container = this.element.parentElement,
subjectRow = this.rowContainer.firstElementChild, subjectRow = this.rowContainer.firstElementChild,
rows = parseInt(container.scrollHeight / subjectRow.offsetHeight), rows = parseInt(container.offsetHeight / subjectRow.offsetHeight),
characterWidth, characterWidth,
cols; cols;
@@ -2542,7 +2545,7 @@ Terminal.prototype.fit = function () {
characterWidth = parseInt(subjectRow.offsetWidth / this.cols); characterWidth = parseInt(subjectRow.offsetWidth / this.cols);
subjectRow.style.display = ''; subjectRow.style.display = '';
cols = parseInt(container.scrollWidth / characterWidth); cols = parseInt(container.offsetWidth / characterWidth);
this.resize(cols, rows); this.resize(cols, rows);
} }
@@ -4660,17 +4663,12 @@ function off(el, type, handler, capture) {
el.removeEventListener(type, handler, capture || false); el.removeEventListener(type, handler, capture || false);
} }
function cancel(ev) { function cancel(ev, force) {
if (!this.cancelEvents) { if (!this.cancelEvents && !force) {
return; return;
} }
if (ev.preventDefault) { ev.preventDefault();
ev.preventDefault(); ev.stopPropagation();
}
if (ev.stopPropagation) {
ev.stopPropagation();
}
ev.cancelBubble = true;
return false; return false;
} }