diff --git a/bower.json b/bower.json index 3a97e14173..9199015bec 100644 --- a/bower.json +++ b/bower.json @@ -24,6 +24,8 @@ "requirejs-plugins": "~1.0.3", "text-encoding": "~0.1", "underscore": "components/underscore#~1.8.3", - "xterm.js": "sourcelair/xterm.js#~2.9.2" + "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-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 92b1607538..03ea2ab2ee 100644 --- a/notebook/static/terminal/js/main.js +++ b/notebook/static/terminal/js/main.js @@ -29,13 +29,9 @@ requirejs([ var common_config = new configmod.ConfigSection('common', common_options); common_config.load(); + // This makes the 'logout' button in the top right work. 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;}; - // 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 base_url = utils.get_body_data('baseUrl').replace(/\/?$/, '/'); var ws_path = utils.get_body_data('wsPath'); var ws_url = utils.get_body_data('wsUrl'); @@ -45,31 +41,19 @@ requirejs([ } ws_url = ws_url + base_url + ws_path; - 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}; - } - page.show_header(); - var size = calculate_size(); - var terminal = terminado.make_terminal($("#terminado-container")[0], size, ws_url); + 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.onresize = function() { + terminal.term.fit(); + // send the new size to the server so that it can trigger a resize in the running process. + terminal.socket.send(JSON.stringify(["set_size", terminal.term.rows, terminal.term.cols, $(window).height(), $(window).width()])); }; diff --git a/notebook/static/terminal/js/terminado.js b/notebook/static/terminal/js/terminado.js index 4ae8652e88..3e52d11d65 100644 --- a/notebook/static/terminal/js/terminado.js +++ b/notebook/static/terminal/js/terminado.js @@ -1,14 +1,10 @@ -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); - var term = new Terminal({ - cols: size.cols, - rows: size.rows - }); + Terminal.applyAddon(fit); + var term = new Terminal(); ws.onopen = function(event) { - 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 +14,11 @@ define (["xterm"], function(Terminal) { }); term.open(element); - + term.fit(); + // send the terminal size to the server. + ws.send(JSON.stringify(["set_size", term.rows, term.cols, + window.innerHeight, window.innerWidth])); + ws.onmessage = function(event) { var json_msg = JSON.parse(event.data); switch(json_msg[0]) { diff --git a/notebook/static/terminal/less/terminal.less b/notebook/static/terminal/less/terminal.less index de893f6e46..fa5117e37e 100644 --- a/notebook/static/terminal/less/terminal.less +++ b/notebook/static/terminal/less/terminal.less @@ -15,12 +15,9 @@ padding: @code_padding; border-radius: @border-radius-base; .box-shadow(@global-shadow-dark); + line-height: 1em; + font-size: @notebook_font_size; - &, dummy-screen { - line-height: 1em; - font-size: @notebook_font_size; - } - .xterm-rows { padding: 10px; } @@ -31,7 +28,12 @@ background: white; } + .terminado-container-container { + padding-top: @page-header-padding; + height: 100%; + } + #terminado-container { - margin-top: @page-header-padding; + height: 100%; } } diff --git a/notebook/templates/page.html b/notebook/templates/page.html index edc48ab1d0..ab47da2ea1 100644 --- a/notebook/templates/page.html +++ b/notebook/templates/page.html @@ -42,7 +42,7 @@ 'jquery-ui': 'components/jquery-ui/ui/minified/jquery-ui.min', moment: 'components/moment/min/moment-with-locales', codemirror: 'components/codemirror', - termjs: 'components/xterm.js/dist/xterm', + termjs: 'components/xterm.js/xterm', typeahead: 'components/jquery-typeahead/dist/jquery.typeahead.min', }, map: { // for backward compatibility diff --git a/notebook/templates/terminal.html b/notebook/templates/terminal.html index 12b4d17634..ecdbbbe3fb 100644 --- a/notebook/templates/terminal.html +++ b/notebook/templates/terminal.html @@ -15,7 +15,7 @@ {% block stylesheet %} {{super()}} - + {% endblock %} {% block headercontainer %} @@ -23,44 +23,13 @@ {% endblock headercontainer %} {% block site %} -
+0
-1
-2
-3
-4
-5
-6
-7
-8
-9
-0
-1
-2
-3
-4
-5
-6
-7
-8
-9
-0
-1
-2
-3
-01234567890123456789012345678901234567890123456789012345678901234567890123456789
-
-