use fit addon

This commit is contained in:
Alex Rothberg 2018-02-09 08:41:38 -05:00
parent 4616250e2f
commit e5d393aea1
5 changed files with 32 additions and 26 deletions

View File

@ -25,6 +25,7 @@
"text-encoding": "~0.1",
"underscore": "components/underscore#~1.8.3",
"xterm.js": "https://unpkg.com/xterm@~3.1.0/dist/xterm.js",
"xterm.js-css": "https://unpkg.com/xterm@~3.1.0/dist/xterm.css"
"xterm.js-css": "https://unpkg.com/xterm@~3.1.0/dist/xterm.css",
"xterm.js-fit": "https://unpkg.com/xterm@~3.1.0/dist/addons/fit/fit.js"
}
}

View File

@ -32,9 +32,9 @@ requirejs([
var login_widget = new loginwidget.LoginWidget('span#login_widget', common_options);
// Test size: 25x80
var termRowHeight = function(){ return 1.00 * $("#dummy-screen")[0].offsetHeight / 25;};
// var termRowHeight = function(){ return 1.00 * $("#dummy-screen")[0].offsetHeight / 25;};
// 1.02 here arrived at by trial and error to make the spacing look right
var termColWidth = function() { return 1.02 * $("#dummy-screen-rows")[0].offsetWidth / 80;};
// var termColWidth = function() { return 1.02 * $("#dummy-screen-rows")[0].offsetWidth / 80;};
var base_url = utils.get_body_data('baseUrl').replace(/\/?$/, '/');
var ws_path = utils.get_body_data('wsPath');
@ -45,32 +45,33 @@ requirejs([
}
ws_url = ws_url + base_url + ws_path;
var header = $("#header")[0];
// var header = $("#header")[0];
function calculate_size() {
var height = $(window).height() - header.offsetHeight;
var width = $('#terminado-container').width();
var rows = Math.min(1000, Math.max(20, Math.floor(height/termRowHeight())-1));
var cols = Math.min(1000, Math.max(40, Math.floor(width/termColWidth())-1));
console.log("resize to :", rows , 'rows by ', cols, 'columns');
return {rows: rows, cols: cols};
}
// function calculate_size() {
// var height = $(window).height() - header.offsetHeight;
// var width = $('#terminado-container').width();
// var rows = Math.min(1000, Math.max(20, Math.floor(height/termRowHeight())-1))-7;
// var cols = Math.min(1000, Math.max(40, Math.floor(width/termColWidth())-1))-7;
// console.log("resize to :", rows , 'rows by ', cols, 'columns');
// return {rows: rows, cols: cols};
// }
page.show_header();
var size = calculate_size();
var terminal = terminado.make_terminal($("#terminado-container")[0], size, ws_url);
// var size = calculate_size();
var terminal = terminado.make_terminal($("#terminado-container")[0], ws_url);
page.show_site();
utils.load_extensions_from_config(config);
utils.load_extensions_from_config(common_config);
window.onresize = function() {
var geom = calculate_size();
terminal.term.resize(geom.cols, geom.rows);
terminal.socket.send(JSON.stringify(["set_size", geom.rows, geom.cols,
$(window).height(), $(window).width()]));
window.onresize = function() {
terminal.term.fit();
// var geom = calculate_size();
// terminal.term.resize(geom.cols, geom.rows);
// terminal.socket.send(JSON.stringify(["set_size", geom.rows, geom.cols,
// $(window).height(), $(window).width()]));
};
// Expose terminal for fiddling with in the browser

View File

@ -1,14 +1,15 @@
define (["xterm"], function(Terminal) {
define (["xterm", "xtermjs-fit"], function(Terminal, fit) {
"use strict";
function make_terminal(element, size, ws_url) {
function make_terminal(element, ws_url) {
var ws = new WebSocket(ws_url);
Terminal.applyAddon(fit); // Apply the `fit` addon
var term = new Terminal({
cols: size.cols,
rows: size.rows
// cols: size.cols,
// rows: size.rows
});
ws.onopen = function(event) {
ws.send(JSON.stringify(["set_size", size.rows, size.cols,
window.innerHeight, window.innerWidth]));
// ws.send(JSON.stringify(["set_size", size.rows, size.cols,
// window.innerHeight, window.innerWidth]));
term.on('data', function(data) {
ws.send(JSON.stringify(['stdin', data]));
});
@ -18,7 +19,8 @@ define (["xterm"], function(Terminal) {
});
term.open(element);
term.fit();
ws.onmessage = function(event) {
var json_msg = JSON.parse(event.data);
switch(json_msg[0]) {

View File

@ -159,6 +159,7 @@ def find_package_data():
pjoin(components, "moment", "min", "*.js"),
pjoin(components, "xterm.js", "index.js"),
pjoin(components, "xterm.js-css", "index.css"),
pjoin(components, "xterm.js-fit", "fit.js"),
pjoin(components, "text-encoding", "lib", "encoding.js"),
])

View File

@ -25,6 +25,7 @@ var rjs_config = {
moment: 'components/moment/min/moment-with-locales',
codemirror: 'components/codemirror',
xterm: 'components/xterm.js/index',
'xtermjs-fit': 'components/xterm.js-fit/index',
typeahead: 'components/jquery-typeahead/dist/jquery.typeahead',
contents: 'empty:',
custom: 'empty:',