Converting over to xterm.js
This commit is contained in:
billchurch
parent
34af6b548d
commit
3e3a8be5c9
4 changed files with 116 additions and 2192 deletions
|
|
@ -1,22 +1,22 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Web SSH</title>
|
||||
<link rel="stylesheet" href="/xterm.css" />
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
<script src="/term.js"></script>
|
||||
<script src="/client.js"></script>
|
||||
<link rel="stylesheet" href="/src/xterm.css" />
|
||||
<link rel="stylesheet" href="/style/style.css" />
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="/src/xterm.js"></script>
|
||||
<script src="/addons/fit/fit.js"></script>
|
||||
<script src="/client.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<div id="header"></div>
|
||||
<div id="terminal" class="terminal">
|
||||
<script>
|
||||
client.run();
|
||||
</script>
|
||||
</div>
|
||||
<div id="terminal-container" class="terminal"></div>
|
||||
<div id="bottomdiv">
|
||||
<div id="footer"></div>
|
||||
<div id="status"></div>
|
||||
<div id="credentials"><a class="credentials" href="" onclick="return false;">CREDENTIALS</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,10 +1,39 @@
|
|||
var client = {};
|
||||
client.run = function(options) {
|
||||
options = options || {};
|
||||
window.addEventListener('load', function() {
|
||||
var socket = io.connect();
|
||||
socket.on('connect', function() {
|
||||
var term = new Terminal();
|
||||
var terminalContainer = document.getElementById('terminal-container'),
|
||||
term = new Terminal({
|
||||
cursorBlink: true
|
||||
}),
|
||||
socket,
|
||||
termid;
|
||||
term.open(terminalContainer);
|
||||
term.fit();
|
||||
var cols = term.cols,
|
||||
rows = term.rows;
|
||||
if (document.location.pathname) {
|
||||
var parts = document.location.pathname.split('/'),
|
||||
base = parts.slice(0, parts.length - 1).join('/') + '/',
|
||||
resource = base.substring(1) + 'socket.io';
|
||||
socket = io.connect(null, {
|
||||
resource: resource
|
||||
});
|
||||
} else {
|
||||
socket = io.connect();
|
||||
}
|
||||
var credentialReplay = document.getElementById('credentials')
|
||||
credentialReplay.onclick = replayCredentials;
|
||||
|
||||
function replayCredentials() {
|
||||
socket.emit('control', 'replayCredentials');
|
||||
//term.writeln('sending credentials');
|
||||
return true;
|
||||
}
|
||||
socket.emit('create', term.cols, term.rows, function(err, data) {
|
||||
if (err) return self._destroy();
|
||||
self.pty = data.pty;
|
||||
self.id = data.id;
|
||||
termid = self.id;
|
||||
term.emit('open tab', self);
|
||||
});
|
||||
socket.on('connect', function() {
|
||||
term.on('data', function(data) {
|
||||
socket.emit('data', data);
|
||||
});
|
||||
|
|
@ -20,9 +49,16 @@ client.run = function(options) {
|
|||
document.getElementById('footer').innerHTML = data;
|
||||
}).on('statusBackground', function(data) {
|
||||
document.getElementById('status').style.backgroundColor = data;
|
||||
});
|
||||
term.open(document.getElementById("terminal"));
|
||||
socket.on('data', function(data) {
|
||||
}).on('allowreplay', function(data) {
|
||||
console.log ('allowreplay: ' + data);
|
||||
if (data == 'true') {
|
||||
document.getElementById('credentials').style.display = 'inline';
|
||||
console.log ('display: block');
|
||||
} else {
|
||||
document.getElementById('credentials').style.display = 'none';
|
||||
console.log ('display: none');
|
||||
}
|
||||
}).on('data', function(data) {
|
||||
term.write(data);
|
||||
}).on('disconnect', function() {
|
||||
document.getElementById('status').style.backgroundColor = 'red';
|
||||
|
|
@ -32,6 +68,4 @@ client.run = function(options) {
|
|||
document.getElementById('status').style.backgroundColor = 'red';
|
||||
document.getElementById('status').innerHTML = 'ERROR ' + err;
|
||||
});
|
||||
});
|
||||
}, false);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ body {
|
|||
color: #111;
|
||||
background-color: rgb(0, 0, 0);
|
||||
color: rgb(240, 240, 240);
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#header {
|
||||
|
|
@ -14,23 +16,30 @@ body {
|
|||
border-style: none none solid none;
|
||||
border-width: 1px;
|
||||
text-align: center;
|
||||
flex: 0 1 auto;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
#terminal {
|
||||
width: 960px;
|
||||
height: 600px;
|
||||
.box {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#terminal-container {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
#terminal .terminal {
|
||||
background-color: #111;
|
||||
#terminal-container .terminal {
|
||||
background-color: #000000;
|
||||
color: #fafafa;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
#terminal .terminal .terminal-cursor {
|
||||
#terminal-container .terminal:focus .terminal-cursor {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
|
|
@ -41,6 +50,7 @@ body {
|
|||
border-style: solid none none none;
|
||||
border-width: 1px;
|
||||
z-index: 99;
|
||||
flex: 0 1 30px;
|
||||
}
|
||||
|
||||
#footer {
|
||||
|
|
@ -64,3 +74,19 @@ body {
|
|||
text-align: left;
|
||||
z-index: 100;
|
||||
}
|
||||
#credentials {
|
||||
display: inline-block;
|
||||
color: rgb(51, 51, 51);
|
||||
background-color: rgb(255, 127, 0);
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
border-color: white;
|
||||
border-style: none solid none none;
|
||||
border-width: 1px;
|
||||
text-align: left;
|
||||
z-index: 100;
|
||||
}
|
||||
a.credentials {
|
||||
color: rgb(51, 51, 51);
|
||||
text-decoration: none;
|
||||
}
|
||||
2136
public/xterm.css
2136
public/xterm.css
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue