diff --git a/webssh/static/js/main.js b/webssh/static/js/main.js index f0680ab..2608e25 100644 --- a/webssh/static/js/main.js +++ b/webssh/static/js/main.js @@ -1,9 +1,117 @@ +var jQuery; +var wssh = {}; + + jQuery(function($){ + /*jslint browser:true */ var status = $('#status'), btn = $('.btn-primary'), style = {}; + + function parse_xterm_style() { + var text = $('.xterm-helpers style').text(); + var arr = text.split('xterm-normal-char{width:'); + style.width = parseFloat(arr[1]); + arr = text.split('div{height:'); + style.height = parseFloat(arr[1]); + } + + + function current_geometry() { + if (!style.width || !style.height) { + parse_xterm_style(); + } + + var cols = parseInt(window.innerWidth / style.width, 10) - 1; + var rows = parseInt(window.innerHeight / style.height, 10); + return {'cols': cols, 'rows': rows}; + } + + + function resize_term(term, sock) { + var geometry = current_geometry(), + cols = geometry.cols, + rows = geometry.rows; + // console.log([cols, rows]); + // console.log(term.geometry); + + if (cols !== term.geometry[0] || rows !== term.geometry[1]) { + console.log('resizing term'); + term.resize(cols, rows); + sock.send(JSON.stringify({'resize': [cols, rows]})); + } + } + + + function callback(msg) { + // console.log(msg); + if (msg.status) { + status.text(msg.status); + setTimeout(function(){ + btn.prop('disabled', false); + }, 3000); + return; + } + + var ws_url = window.location.href.replace('http', 'ws'), + join = (ws_url[ws_url.length-1] === '/' ? '' : '/'), + url = ws_url + join + 'ws?id=' + msg.id, + sock = new window.WebSocket(url), + terminal = document.getElementById('#terminal'), + term = new window.Terminal({ + cursorBlink: true, + }); + + console.log(url); + wssh.sock = sock; + wssh.term = term; + + term.on('data', function(data) { + // console.log(data); + sock.send(JSON.stringify({'data': data})); + }); + + sock.onopen = function() { + $('.container').hide(); + term.open(terminal, true); + term.toggleFullscreen(true); + }; + + sock.onmessage = function(msg) { + var reader = new window.FileReader(); + + reader.onloadend = function(){ + var decoder = new window.TextDecoder(); + var text = decoder.decode(reader.result); + // console.log(text); + term.write(text); + if (!term.resized) { + resize_term(term, sock); + term.resized = true; + } + }; + + reader.readAsArrayBuffer(msg.data); + }; + + sock.onerror = function(e) { + console.log(e); + }; + + sock.onclose = function(e) { + console.log(e); + term.destroy(); + wssh.term = undefined; + wssh.sock = undefined; + $('.container').show(); + status.text(e.reason); + btn.prop('disabled', false); + }; + } + + $('form#connect').submit(function(event) { event.preventDefault(); @@ -39,104 +147,9 @@ jQuery(function($){ }); - function parse_xterm_style() { - var text = $('.xterm-helpers style').text(); - var arr = text.split('xterm-normal-char{width:'); - style.width = parseFloat(arr[1]); - arr = text.split('div{height:'); - style.height = parseFloat(arr[1]); - } - - - function current_geometry() { - if (!style.width || !style.height) { - parse_xterm_style(); - } - cols = parseInt(window.innerWidth / style.width) - 1; - rows = parseInt(window.innerHeight / style.height); - return {'cols': cols, 'rows': rows}; - } - - - function resize_term(term, socket) { - var geometry = current_geometry(), - cols = geometry.cols, - rows = geometry.rows; - // console.log([cols, rows]); - // console.log(term.geometry); - if (cols != term.geometry[0] || rows != term.geometry[1]) { - console.log('resizing term'); - term.resize(cols, rows); - socket.send(JSON.stringify({'resize': [cols, rows]})); - } - } - - - function callback(msg) { - // console.log(msg); - if (msg.status) { - status.text(msg.status); - setTimeout(function(){ - btn.prop('disabled', false); - }, 3000); - return; - } - - var ws_url = window.location.href.replace('http', 'ws'), - join = (ws_url[ws_url.length-1] == '/' ? '' : '/'), - url = ws_url + join + 'ws?id=' + msg.id, - terminal = document.getElementById('#terminal'); - socket = new WebSocket(url); - term = new Terminal({ - cursorBlink: true, - }); - - console.log(url); - term.on('data', function(data) { - // console.log(data); - socket.send(JSON.stringify({'data': data})); - }); - - socket.onopen = function(e) { - $('.container').hide(); - term.open(terminal, true); - term.toggleFullscreen(true); - }; - - socket.onmessage = function(msg) { - var reader = new FileReader(); - reader.onloadend = function(event){ - var decoder = new TextDecoder(); - var text = decoder.decode(reader.result); - // console.log(text); - term.write(text); - if (!term.resized) { - resize_term(term, socket); - term.resized = true; - } - }; - reader.readAsArrayBuffer(msg.data); - }; - - socket.onerror = function(e) { - console.log(e); - }; - - socket.onclose = function(e) { - console.log(e); - term.destroy(); - term = undefined; - socket = undefined; - $('.container').show(); - status.text(e.reason); - btn.prop('disabled', false); - }; - } - - $(window).resize(function(){ - if (typeof term != 'undefined' && typeof socket != 'undefined') { - resize_term(term, socket); + if (wssh.term && wssh.sock) { + resize_term(wssh.term, wssh.sock); } });