90 lines
2.2 KiB
HTML
90 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Terminado Xterm.js example page</title>
|
|
<style>
|
|
html {
|
|
background: #555;
|
|
height: 100vh;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
#terminal-container {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: auto;
|
|
height: auto;
|
|
z-index: 255;
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="/static/xterm.css"/>
|
|
<script src="/static/xterm.js"></script>
|
|
<script src="/terminado_attach.js"></script>
|
|
<script>
|
|
var term,
|
|
charWidth,
|
|
charHeight;
|
|
|
|
// This chunk of code gratefully stolen/adapted from fit.js
|
|
function calculate_character_dimensions() {
|
|
subjectRow = term.rowContainer.firstElementChild;
|
|
contentBuffer = subjectRow.innerHTML;
|
|
|
|
subjectRow.style.display = 'inline';
|
|
subjectRow.innerHTML = 'W';
|
|
charWidth = subjectRow.getBoundingClientRect().width;
|
|
subjectRow.style.display = '';
|
|
charHeight = parseInt(subjectRow.offsetHeight);
|
|
subjectRow.innerHTML = contentBuffer;
|
|
}
|
|
|
|
function createTerminal(websocket_url) {
|
|
var terminalContainer = document.getElementById('terminal-container');
|
|
|
|
// Clean terminal
|
|
while (terminalContainer.children.length) {
|
|
terminalContainer.removeChild(terminalContainer.children[0]);
|
|
}
|
|
|
|
term = new Terminal({
|
|
cursorBlink: true
|
|
});
|
|
|
|
protocol = (location.protocol === 'https:') ? 'wss://' : 'ws://';
|
|
socketURL = protocol + location.hostname + ((location.port) ? (':' + location.port) : '') + websocket_url;
|
|
|
|
term.open(terminalContainer);
|
|
var socket = new WebSocket(socketURL);
|
|
socket.onopen = function() {
|
|
term.attach(socket);
|
|
term._initialized = true;
|
|
|
|
terminalContainer.style.width = '100vw';
|
|
terminalContainer.style.height = '100vh';
|
|
calculate_character_dimensions();
|
|
window.onresize = function() {
|
|
cols = Math.floor(terminalContainer.getBoundingClientRect().width/charWidth);
|
|
rows = Math.floor(terminalContainer.getBoundingClientRect().height/charHeight);
|
|
term.resize(cols, rows);
|
|
}
|
|
window.onresize()
|
|
}
|
|
}
|
|
|
|
window.onload = function() {
|
|
// Connect to Terminado, listening on /websocket
|
|
createTerminal('/websocket')
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="terminal-container"></div>
|
|
</pre>
|
|
</body>
|