Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
59ebbbaaf0 | ||
|
|
6e6b5dad8c | ||
|
|
0b603952c3 | ||
|
|
9bd2a1c202 | ||
|
|
c7f4658e97 | ||
|
|
96848a6425 | ||
|
|
0997f4398f |
@@ -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,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');
|
||||||
|
}
|
||||||
+2
-2
@@ -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"]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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,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
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user