diff --git a/hastexo/public/js/client.js b/hastexo/public/js/client.js index 5fca4763..79d06fe7 100644 --- a/hastexo/public/js/client.js +++ b/hastexo/public/js/client.js @@ -240,6 +240,10 @@ function HastexoGuacamoleClient(configuration) { onidle(pause) { return pause; + }, + + sendSize(height, width) { + guac_client.sendSize(height, width); } } diff --git a/hastexo/public/js/main.js b/hastexo/public/js/main.js index 935613f3..72815f96 100644 --- a/hastexo/public/js/main.js +++ b/hastexo/public/js/main.js @@ -90,6 +90,15 @@ function HastexoXBlock(runtime, element, configuration) { /* Show the terminal. */ $("#terminal").append(terminal_element); + // Observe the lab size in the browser and adjust when necessary + var lab = $('#terminal')[0]; + const resizeObserver = new ResizeObserver(entries => { + for (const entry of entries) { + terminal_client.sendSize(entry.contentRect.width, entry.contentRect.height); + } + }); + resizeObserver.observe(lab); + /* Disconnect on tab close. */ window.onunload = function() { terminal_client.disconnect(); diff --git a/hastexo/static/html/lab.html b/hastexo/static/html/lab.html index 723d5d7a..0b7494e4 100644 --- a/hastexo/static/html/lab.html +++ b/hastexo/static/html/lab.html @@ -44,6 +44,15 @@ terminal_element = terminal_client.getDisplay().getElement(); display.appendChild(terminal_element); + // Observe the lab size in the browser and adjust when necessary + var lab = document.getElementById('terminal'); + const resizeObserver = new ResizeObserver(entries => { + for (const entry of entries) { + terminal_client.sendSize(entry.contentRect.width, entry.contentRect.height); + } + }); + resizeObserver.observe(lab); + // Error handler terminal_client.onerror = function(error) { alert(error.message); @@ -73,12 +82,6 @@ } } - // reload the window on resize to reconnect with new - // height and width. - window.onresize = function() { - location.reload(); - } - /* Disconnect on tab close. */ window.onunload = function() { terminal_client.disconnect();