Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
1b6ad0fd7b | ||
|
|
189a556408 | ||
|
|
fb1c484224 | ||
|
|
59ebbbaaf0 | ||
|
|
6e6b5dad8c | ||
|
|
0b603952c3 | ||
|
|
9bd2a1c202 | ||
|
|
c7f4658e97 | ||
|
|
96848a6425 | ||
|
|
0997f4398f | ||
|
|
e278837de8 | ||
|
|
e572734a21 | ||
|
|
4f2cadd6c9 |
@@ -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);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
/*
|
||||||
|
* Fit terminal columns and rows to the dimensions of its
|
||||||
|
* DOM element.
|
||||||
|
*
|
||||||
|
* Approach:
|
||||||
|
* - Rows: Truncate the division of the terminal parent element height
|
||||||
|
* by the terminal row height
|
||||||
|
*
|
||||||
|
* - Columns: Truncate the division of the terminal parent element width by
|
||||||
|
* the terminal character width (apply display: inline at the
|
||||||
|
* terminal row and truncate its width with the current number
|
||||||
|
* of columns)
|
||||||
|
*/
|
||||||
|
Terminal.prototype.fit = function () {
|
||||||
|
var container = this.element.parentElement,
|
||||||
|
subjectRow = this.rowContainer.firstElementChild,
|
||||||
|
rows = parseInt(container.offsetHeight / subjectRow.offsetHeight),
|
||||||
|
characterWidth,
|
||||||
|
cols;
|
||||||
|
|
||||||
|
subjectRow.style.display = 'inline';
|
||||||
|
characterWidth = parseInt(subjectRow.offsetWidth / this.cols);
|
||||||
|
subjectRow.style.display = '';
|
||||||
|
|
||||||
|
cols = parseInt(container.offsetWidth / characterWidth);
|
||||||
|
|
||||||
|
this.resize(cols, rows);
|
||||||
|
}
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
.xterm.fullscreen {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
z-index: 255;
|
||||||
|
}
|
||||||
@@ -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');
|
||||||
|
}
|
||||||
+1
-1
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name": "xterm.js",
|
"name": "xterm.js",
|
||||||
"version": "0.3",
|
"version": "0.10",
|
||||||
"ignore": ["demo", "docs", "test", ".gitignore"]
|
"ignore": ["demo", "docs", "test", ".gitignore"]
|
||||||
}
|
}
|
||||||
+5
-2
@@ -3,9 +3,12 @@
|
|||||||
<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="main.js" defer></script>
|
<script src="../addons/fit/fit.js" ></script>
|
||||||
|
<script src="../addons/fullscreen/fullscreen.js" ></script>
|
||||||
|
<script src="main.js" defer ></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>
|
<h1>
|
||||||
|
|||||||
@@ -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');
|
||||||
|
|||||||
@@ -40,12 +40,18 @@
|
|||||||
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;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.xterm .xterm-helper-textarea {
|
.xterm .xterm-helper-textarea {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
width: 0;
|
width: 0;
|
||||||
|
|||||||
+17
-45
@@ -419,7 +419,6 @@ Terminal.bindPaste = function(term) {
|
|||||||
ev.stopPropagation();
|
ev.stopPropagation();
|
||||||
if (ev.clipboardData) {
|
if (ev.clipboardData) {
|
||||||
var text = ev.clipboardData.getData('text/plain');
|
var text = ev.clipboardData.getData('text/plain');
|
||||||
term.write(text);
|
|
||||||
term.handler(text);
|
term.handler(text);
|
||||||
}
|
}
|
||||||
term.textarea.value = '';
|
term.textarea.value = '';
|
||||||
@@ -543,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++) {
|
||||||
@@ -565,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();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -954,7 +955,7 @@ Terminal.prototype.destroy = function() {
|
|||||||
* 1=bold, 2=underline, 4=blink, 8=inverse, 16=invisible
|
* 1=bold, 2=underline, 4=blink, 8=inverse, 16=invisible
|
||||||
*/
|
*/
|
||||||
Terminal.prototype.refresh = function(start, end) {
|
Terminal.prototype.refresh = function(start, end) {
|
||||||
var x, y, i, line, out, ch, width, data, attr, bg, fg, flags, row, parent;
|
var x, y, i, line, out, ch, width, data, attr, bg, fg, flags, row, parent, focused = document.activeElement;
|
||||||
|
|
||||||
if (end - start >= this.rows / 2) {
|
if (end - start >= this.rows / 2) {
|
||||||
parent = this.element.parentNode;
|
parent = this.element.parentNode;
|
||||||
@@ -1087,6 +1088,10 @@ Terminal.prototype.refresh = function(start, end) {
|
|||||||
parent.appendChild(this.element);
|
parent.appendChild(this.element);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Return focus to previously focused element
|
||||||
|
*/
|
||||||
|
focused.focus();
|
||||||
this.emit('refresh', {element: this.element, start: start, end: end});
|
this.emit('refresh', {element: this.element, start: start, end: end});
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -2170,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:
|
||||||
@@ -2351,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);
|
||||||
|
|
||||||
@@ -2393,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);
|
||||||
|
|
||||||
@@ -2515,35 +2521,6 @@ Terminal.prototype.resize = function(x, y) {
|
|||||||
this.emit('resize', {terminal: this, cols: x, rows: y});
|
this.emit('resize', {terminal: this, cols: x, rows: y});
|
||||||
};
|
};
|
||||||
|
|
||||||
/*
|
|
||||||
* Fit terminal columns and rows to the dimensions of its
|
|
||||||
* DOM element.
|
|
||||||
*
|
|
||||||
* Approach:
|
|
||||||
* - Rows: Truncate the division of the terminal parent element height
|
|
||||||
* by the terminal row height
|
|
||||||
*
|
|
||||||
* - Columns: Truncate the division of the terminal parent element width by
|
|
||||||
* the terminal character width (apply display: inline at the
|
|
||||||
* terminal row and truncate its width with the current number
|
|
||||||
* of columns)
|
|
||||||
*/
|
|
||||||
Terminal.prototype.fit = function () {
|
|
||||||
var container = this.element.parentElement,
|
|
||||||
subjectRow = this.rowContainer.firstElementChild,
|
|
||||||
rows = parseInt(container.scrollHeight / subjectRow.offsetHeight),
|
|
||||||
characterWidth,
|
|
||||||
cols;
|
|
||||||
|
|
||||||
subjectRow.style.display = 'inline';
|
|
||||||
characterWidth = parseInt(subjectRow.offsetWidth / this.cols);
|
|
||||||
subjectRow.style.display = '';
|
|
||||||
|
|
||||||
cols = parseInt(container.scrollWidth / characterWidth);
|
|
||||||
|
|
||||||
this.resize(cols, rows);
|
|
||||||
}
|
|
||||||
|
|
||||||
Terminal.prototype.updateRange = function(y) {
|
Terminal.prototype.updateRange = function(y) {
|
||||||
if (y < this.refreshStart) this.refreshStart = y;
|
if (y < this.refreshStart) this.refreshStart = y;
|
||||||
if (y > this.refreshEnd) this.refreshEnd = y;
|
if (y > this.refreshEnd) this.refreshEnd = y;
|
||||||
@@ -4657,17 +4634,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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user