Pull in Beta Features

index.html

@@ -90,7 +90,7 @@
                         </ul>
                     </nav>
                 </div>
-                <div id="editor"></div>
+                <div id="editor" tabindex="0"></div>
             </div>
             <div id="page-separator" class=""></div>
             <div id="serial-page" class="">
@@ -113,13 +113,14 @@
                     </select>
                     <canvas id="plotter-canvas"></canvas>
                 </div>
-                <div id="terminal"></div>
+                <div id="terminal" tabindex="1"></div>
             </div>
         </div>
         <div id="footer-bar">
             <button id="btn-mode-editor" class="mode-button active">Editor</button>
             <button id="btn-mode-serial" class="mode-button">Serial</button>
             <div class="spacer"></div>
+            <button class="purple-button btn-settings">Settings<i class="fa-solid fa-gear"></i></button>
             <button class="purple-button btn-info" disabled>Info<i class="fa-solid fa-info-circle"></i></button>
         </div>
     </div>
@@ -153,6 +154,14 @@
             <button class="purple-button cancel-button">Cancel</button>
         </div>
     </div>
+    <div class="popup-modal shadow settings-dialog closable" data-popup-modal="settings">
+        <i class="fa-solid fa-2x fa-xmark text-white bg-primary p-3 popup-modal__close"></i>
+        <div id="settings-content"></div>
+        <div class="buttons centered">
+            <button class="purple-button ok-button">Save</button>
+            <button class="purple-button cancel-button">Cancel</button>
+        </div>
+    </div>
     <div class="popup-modal shadow file-dialog closable" data-popup-modal="folder-select">
         <span id="current-path"></span>
         <i class="fa-solid fa-2x fa-xmark text-white bg-primary p-3 popup-modal__close"></i>
@@ -186,12 +195,27 @@
             <button id="usb-workflow" class="purple-button files-button" value="usb">USB<i class="fa-brands fa-usb"></i></button>
         </div>
     </div>
+    <div class="popup-modal shadow prompt closable" data-popup-modal="ok-cancel">
+        <div id="message"></div>
+        <div class="buttons centered">
+            <button class="purple-button ok-button" value="ok">OK</button>
+            <button class="purple-button cancel-button" value="cancel">Cancel</button>
+        </div>
+    </div>
     <div class="popup-modal shadow prompt closable" data-popup-modal="message">
         <div id="message"></div>
         <div class="buttons centered">
             <button class="purple-button ok-button">Ok</button>
         </div>
     </div>
+    <div class="popup-modal shadow prompt" data-popup-modal="input">
+        <div id="message"></div>
+        <input type="text" id="inputvalue" />
+        <div class="buttons centered">
+            <button class="purple-button ok-button">Ok</button>
+            <button class="purple-button cancel-button">Cancel</button>
+        </div>
+    </div>
     <div class="popup-modal shadow prompt" data-popup-modal="progress" data-tabbable="false">
         <div class="label centered" id="status"></div>
         <div class="label centered" id="percentage"></div>

js/common/dialogs.js

@@ -241,6 +241,26 @@ class MessageModal extends GenericModal {
     }
 }
 
+class InputModal extends GenericModal {
+    _handleOkButton(event) {
+        this._returnValue(this._getElement('inputValueField').value);
+    }
+
+    async open(message, defaultValue="") {
+        let p = super.open();
+        const cancelButton = this._currentModal.querySelector("button.cancel-button");
+        this._addDialogElement('cancelButton', cancelButton, 'click', this._closeModal);
+        const okButton = this._currentModal.querySelector("button.ok-button");
+        this._addDialogElement('okButton', okButton, 'click', this._handleOkButton);
+        const inputValueField = this._currentModal.querySelector("#inputvalue");
+        this._addDialogElement('inputValueField', inputValueField);
+        this._setElementValue('inputValueField', defaultValue);
+        this._currentModal.querySelector("#message").innerHTML = message;
+
+        return p;
+    }
+}
+
 class ProgressDialog extends GenericModal {
     async open() {
         let p = super.open();
@@ -424,5 +444,6 @@ export {
     UnsavedDialog,
     DiscoveryModal,
     ProgressDialog,
-    DeviceInfoModal
-};
+    DeviceInfoModal,
+    InputModal
+};

js/common/file_dialog.js

@@ -1,4 +1,4 @@
-import {GenericModal, ProgressDialog, ButtonValueDialog} from './dialogs.js';
+import {GenericModal, ProgressDialog, ButtonValueDialog, InputModal} from './dialogs.js';
 import {readUploadedFileAsArrayBuffer} from './utilities.js';
 import {saveAs} from 'file-saver';
 import JSZip from 'jszip';
@@ -321,6 +321,11 @@ class FileDialog extends GenericModal {
         return selectedItems > 1;
     }
 
+    async _prompt(message, defaultValue="") {
+        const inputModal = new InputModal("input");
+        return await inputModal.open(message, defaultValue);
+    }
+
     _updateToolbar() {
         this._setElementEnabled('delButton', this._canPerformWritableFileOperation());
         this._setElementEnabled('renameButton', !this._multipleItemsSelected() && this._canPerformWritableFileOperation());
@@ -653,7 +658,8 @@ class FileDialog extends GenericModal {
             return;
         }
         oldName = oldName[0];
-        let newName = prompt("Enter a new folder name", oldName);
+        let newName = await this._prompt("Enter a new name", oldName);
+
         // If cancelled, do nothing
         if (!newName) {
             return;
@@ -688,7 +694,7 @@ class FileDialog extends GenericModal {
     async _handleNewFolderButton() {
         if (this._readOnlyMode) return;
         // prompt for new folder name
-        let folderName = prompt("Enter a new folder name");
+        let folderName = await this._prompt("Enter a new folder name");
         // If cancelled, do nothing
         if (!folderName) {
             return;

js/common/settings.js

@@ -0,0 +1,125 @@
+import {GenericModal} from './dialogs.js';
+
+class SettingsDialog extends GenericModal {
+    constructor(modalId, settingsData) {
+        super(modalId);
+        this._settingsData = settingsData;
+        this._settings = {}
+    }
+
+    async open(settings) {
+        let p = super.open();
+        const cancelButton = this._currentModal.querySelector("button.cancel-button");
+        this._addDialogElement('cancelButton', cancelButton, 'click', this._closeModal);
+        const okButton = this._currentModal.querySelector("button.ok-button");
+        this._addDialogElement('okButton', okButton, 'click', this._handleOkButton);
+
+        const contentDiv = this._currentModal.querySelector("#settings-content");
+        contentDiv.innerHTML = '';
+
+        for (const setting of this._settingsData) {
+            const label = document.createElement('label');
+            label.textContent = setting.label;
+            if (setting.icon) {
+                const icon = document.createElement('i');
+                icon.className = `fa-solid fa-${setting.icon} setting-item-icon`;
+                label.prepend(icon);
+            }
+            label.htmlFor = `setting-${setting.key}`;
+            contentDiv.appendChild(label);
+
+            const control = await this._createControl(setting);
+            control.value = settings[setting.key];
+            contentDiv.appendChild(control);
+        }
+
+        return p;
+    }
+
+    async _handleOkButton() {
+        let settings = {}
+        for (const setting of this._settingsData) {
+            const control = this._currentModal.querySelector(`#setting-${setting.key}`);
+            settings[setting.key] = control.value;
+        }
+        this._returnValue(settings);
+    }
+
+    async _createControl(settingData) {
+        // Return the created control
+        let control;
+        if (settingData.type === 'select') {
+            control = document.createElement('select');
+            for (const optionValue of settingData.options) {
+                const option = document.createElement('option');
+                option.value = optionValue;
+                option.textContent = optionValue.charAt(0).toUpperCase() + optionValue.slice(1);
+                control.appendChild(option);
+            }
+        }
+        control.id = `setting-${settingData.key}`;
+
+        // this will also call this._addDialogElement to add event listeners as needed
+        this._addDialogElement(`setting-${settingData.key}`, control);
+        return control;
+    }
+}
+
+class Settings {
+    // This is a class that handles loading/saving settings as well as providing a settings dialog
+    constructor() {
+        // This will hold the layout/save data for the settings
+        this._settingsData = [
+            { key: 'theme', type: 'select', label: 'Editor Theme', icon: 'palette', options: ['dark', 'light'], default: 'dark' }
+        ];
+        this._settings = {};
+        this._loadSettings();
+
+        this._settingsDialog = new SettingsDialog('settings', this._settingsData);
+    }
+
+    _loadSettings() {
+        // Load all saved settings or defaults
+        for (const setting of this._settingsData) {
+            this._settings[setting.key] = this._loadSetting(setting.key, setting.default);
+        }
+    }
+
+    _saveSettings() {
+        // Save all settings
+        for (const key in this._settings) {
+            this._saveSetting(key, this._settings[key]);
+        }
+    }
+
+    _loadSetting(setting, defaultValue) {
+        let value = JSON.parse(window.localStorage.getItem(setting));
+        if (value == null) {
+            return defaultValue;
+        }
+
+        return value;
+    }
+
+    _saveSetting(setting, value) {
+        window.localStorage.setItem(setting, JSON.stringify(value));
+    }
+
+    getSetting(key) {
+        return this._settings[key];
+    }
+
+    async showDialog() {
+        this._settings = await this._settingsDialog.open(this._settings);
+        if (this._settings) {
+            this._saveSettings();
+            return true;
+        }
+        return false;
+    }
+}
+
+
+export {
+    Settings
+};

js/common/utilities.js

@@ -53,7 +53,7 @@ function isIp() {
 
 // Check if the current url is a Web Workflow, IP, or Test Address and current path is /code/
 function isLocal() {
-    return (isMdns() || location.hostname == "localhost" || isIp()) && (location.pathname == "/code/");
+    return location.hostname == "localhost" || ((isMdns() || isIp()) && location.pathname == "/code/");
 }
 
 // Test to see if browser is running on Microsoft Windows OS
@@ -67,7 +67,7 @@ function isMicrosoftWindows() {
     return false;
 }
 
-// Test to see if browser is running on Microsoft Windows OS
+// Test to see if browser is running on Chrome OS
 function isChromeOs() {
     if (navigator.userAgent.includes("CrOS")) {
         return true;

js/layout.js

@@ -26,12 +26,49 @@ function isSerialVisible() {
     return serialPage.classList.contains('active');
 }
 
+function setupPanelFocusHandlers() {
+    // Removing existing handlers to avoid duplicates
+    serialPage.removeEventListener('click', handleActivePanel);
+    editorPage.removeEventListener('click', handleActivePanel);
+
+    // Adding new handlers
+    serialPage.addEventListener('click', handleActivePanel);
+    editorPage.addEventListener('click', handleActivePanel);
+}
+
+function handleActivePanel(event) {
+    const panel = event.currentTarget;
+    setActivePanel(panel);
+}
+
+function setActivePanel(panel) {
+    editorPage.classList.remove('focused-panel');
+    serialPage.classList.remove('focused-panel');
+
+    if (panel === serialPage && isSerialVisible()) {
+        // Serial panel requested and visible
+        serialPage.classList.add('focused-panel');
+    } else if (panel === editorPage && isEditorVisible()) {
+        // Editor panel requested and visible
+        editorPage.classList.add('focused-panel');
+    } else {
+        // Requested panel is not visible, set other panel as focused
+        if (isEditorVisible()) {
+            editorPage.classList.add('focused-panel');
+        } else {
+            serialPage.classList.add('focused-panel');
+        }
+    }
+}
+
 async function toggleEditor() {
     if (isSerialVisible()) {
         editorPage.classList.toggle('active');
         saveSetting(SETTING_EDITOR_VISIBLE, isEditorVisible());
         updatePageLayout(UPDATE_TYPE_EDITOR);
     }
+    setupPanelFocusHandlers();
+    setActivePanel(editorPage);
 }
 
 async function toggleSerial() {
@@ -40,6 +77,8 @@ async function toggleSerial() {
         saveSetting(SETTING_TERMINAL_VISIBLE, isSerialVisible());
         updatePageLayout(UPDATE_TYPE_SERIAL);
     }
+    setupPanelFocusHandlers();
+    setActivePanel(serialPage);
 }
 
 btnModeEditor.removeEventListener('click', toggleEditor);
@@ -229,4 +268,6 @@ pageSeparator.addEventListener('mousedown', async function (e) {
 
 fixViewportHeight();
 window.addEventListener("resize", fixViewportHeight);
-loadPanelSettings();
+loadPanelSettings();
+setupPanelFocusHandlers();
+setActivePanel(editorPage);