From e5d393aea1aaa6d2f7830e0bd26c5b27530939bb Mon Sep 17 00:00:00 2001 From: Alex Rothberg Date: Fri, 9 Feb 2018 08:41:38 -0500 Subject: [PATCH] use fit addon --- bower.json | 3 +- notebook/static/terminal/js/main.js | 37 ++++++++++++------------ notebook/static/terminal/js/terminado.js | 16 +++++----- setupbase.py | 1 + tools/build-main.js | 1 + 5 files changed, 32 insertions(+), 26 deletions(-) diff --git a/bower.json b/bower.json index e87835877..9199015be 100644 --- a/bower.json +++ b/bower.json @@ -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" } } diff --git a/notebook/static/terminal/js/main.js b/notebook/static/terminal/js/main.js index 92b160753..838e6ffe8 100644 --- a/notebook/static/terminal/js/main.js +++ b/notebook/static/terminal/js/main.js @@ -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 diff --git a/notebook/static/terminal/js/terminado.js b/notebook/static/terminal/js/terminado.js index 4ae8652e8..b190f80d3 100644 --- a/notebook/static/terminal/js/terminado.js +++ b/notebook/static/terminal/js/terminado.js @@ -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]) { diff --git a/setupbase.py b/setupbase.py index cb345d1c4..d2f32b5d6 100644 --- a/setupbase.py +++ b/setupbase.py @@ -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"), ]) diff --git a/tools/build-main.js b/tools/build-main.js index 8b4ee0351..d2c85f160 100644 --- a/tools/build-main.js +++ b/tools/build-main.js @@ -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:',