Lots of bug fixes

js/common/dialogs.js

@@ -1,4 +1,5 @@
 import {sleep, isIp, switchDevice} from './utilities.js';
+import * as focusTrap from 'focus-trap';
 
 const SELECTOR_CLOSE_BUTTON = ".popup-modal__close";
 const SELECTOR_BLACKOUT = "#blackout";
@@ -16,6 +17,7 @@ class GenericModal {
         this.closeModal = this._closeModal.bind(this);
         this._elements = {};
         this._modalLayerId;
+        this._trap = null;
     }
 
     _addDialogElement(elementId, domElement, eventName = null, eventHandler = null) {
@@ -99,6 +101,13 @@ class GenericModal {
         this._modalLayerId = modalLayers.length;
         modal.style.zIndex = BLACKOUT_ZINDEX + 1 + (this._modalLayerId * 2);
 
+        if (!this._trap){
+            this._trap = focusTrap.createFocusTrap(modal, {
+                initialFocus: () => modal,
+                allowOutsideClick: true,
+            });
+        }
+
         if (modalLayers.length >= 2) {
             // Then we will make it so the clickblock layer appears
             const clickBlock = document.querySelector(SELECTOR_CLICKBLOCK);
@@ -168,6 +177,10 @@ class GenericModal {
         }
 
         if (this._currentModal) {
+            if (this._trap) {
+                this._trap.deactivate();
+                this._trap = null;
+            }
             this._removeTopModalLayer();
             this._removeAllDialogElements();
             this._currentModal.classList.remove('is--visible');
@@ -206,6 +219,9 @@ class GenericModal {
             this._reject = reject;
         });
 
+        if (this._trap) {
+            this._trap.activate();
+        }
         return p;
     }
 }

js/layout.js

@@ -91,10 +91,10 @@ function refitTerminal() {
 
 // Fix the viewport height for mobile devices by setting
 // the --vh css variable to 1% of the window inner height
-function fixViewportHeight() {
+function fixViewportHeight(e) {
     let vh = window.innerHeight * 0.01;
     document.documentElement.style.setProperty('--vh', `${vh}px`);
-    refitTerminal();
+    updatePageLayout();
 }
 fixViewportHeight();
 window.addEventListener("resize", fixViewportHeight);

js/script.js

@@ -29,6 +29,7 @@ workflows[CONNTYPE.Web] = new WebWorkflow();
 
 let workflow = null;
 let unchanged = 0;
+let connectionPromise = null;
 
 const btnRestart = document.querySelector('.btn-restart');
 const btnClear = document.querySelector('.btn-clear');
@@ -253,8 +254,10 @@ function setFilename(path) {
 }
 
 async function chooseConnection() {
+    // Don't allow more than one dialog
+    if (connectionPromise) return;
     // Get the promise first
-    let p = connectionType.open();
+    connectionPromise = connectionType.open();
 
     // Disable any buttons in validBackends, but not in workflows
     let modal = connectionType.getModal();
@@ -266,7 +269,8 @@ async function chooseConnection() {
     };
 
     // Wait for the user to click a button
-    let connType = await p;
+    let connType = await connectionPromise;
+    connectionPromise = null
     if (isValidBackend(connType)) {
         return getBackendWorkflow(connType);
     }
@@ -507,7 +511,7 @@ editor = new EditorView({
     parent: document.querySelector('#editor')
 });
 
-function setupXterm() {
+async function setupXterm() {
     state.terminal = new Terminal({
         theme: {
             background: '#333',
@@ -522,8 +526,10 @@ function setupXterm() {
     state.terminal.loadAddon(new WebLinksAddon());
 
     state.terminal.open(document.getElementById('terminal'));
-    state.terminal.onData((data) => {
-        workflow.serialTransmit(data);
+    state.terminal.onData((data) => async function(e) {
+        if (await checkConnected()) {
+            workflow.serialTransmit(data);
+        }
     });
 }
 
@@ -547,7 +553,7 @@ function loadParameterizedContent() {
 }
 
 document.addEventListener('DOMContentLoaded', async (event) => {
-    setupXterm();
+    await setupXterm();
     btnConnect.forEach((element) => {
         element.addEventListener('click', async function(e) {
             e.preventDefault();

package.json

@@ -15,14 +15,15 @@
   "dependencies": {
     "@codemirror/lang-python": "^6.1.6",
     "@fortawesome/fontawesome-free": "^6.5.2",
-    "idb-keyval": "^6.2.1",
-    "jszip": "^3.10.1",
+    "ble-file-transfer-js": "adafruit/ble-file-transfer-js#1.0.2",
+    "circuitpython-repl-js": "adafruit/circuitpython-repl-js#1.2.3",
     "codemirror": "^6.0.1",
     "file-saver": "^2.0.5",
+    "focus-trap": "^7.5.4",
+    "idb-keyval": "^6.2.1",
+    "jszip": "^3.10.1",
     "xterm": "^5.3.0",
     "xterm-addon-fit": "^0.8.0",
-    "xterm-addon-web-links": "^0.9.0",
-    "ble-file-transfer-js": "adafruit/ble-file-transfer-js#1.0.2",
-    "circuitpython-repl-js": "adafruit/circuitpython-repl-js#1.2.3"
+    "xterm-addon-web-links": "^0.9.0"
   }
 }