Last panel settings are now saved

Author: makermelissa

js/common/utilities.js

@@ -123,6 +123,23 @@ function readUploadedFileAsArrayBuffer(inputFile) {
     });
 };
 
+// Load a setting from local storage with a default value if it doesn't exist
+function loadSetting(setting, defaultValue) {
+    let value = JSON.parse(window.localStorage.getItem(setting));
+    console.log(`Loading setting ${setting} with value ${value}`);
+    if (value == null) {
+      return defaultValue;
+    }
+
+    return value;
+}
+
+// Save a setting to local storage
+function saveSetting(setting, value) {
+    console.log(`Saving setting ${setting} with value ${value}`);
+    window.localStorage.setItem(setting, JSON.stringify(value));
+}
+
 export {
     isTestHost,
     buildHash,
@@ -136,5 +153,7 @@ export {
     sleep,
     switchUrl,
     switchDevice,
-    readUploadedFileAsArrayBuffer
+    readUploadedFileAsArrayBuffer,
+    loadSetting,
+    saveSetting
 };

js/layout.js

@@ -1,4 +1,5 @@
 import state from './state.js'
+import { loadSetting, saveSetting } from './common/utilities.js';
 
 const btnModeEditor = document.getElementById('btn-mode-editor');
 const btnModeSerial = document.getElementById('btn-mode-serial');
@@ -8,28 +9,57 @@ const editorPage = document.getElementById('editor-page');
 const serialPage = document.getElementById('serial-page');
 const pageSeparator = document.getElementById('page-separator');
 
-btnModeEditor.addEventListener('click', async function (e) {
-    if (btnModeEditor.classList.contains('active') && !btnModeSerial.classList.contains('active')) {
-        // this would cause both editor & serial pages to disappear
-        return;
+const SETTING_EDITOR_VISIBLE = "editor-visible";
+const SETTING_TERMINAL_VISIBLE = "terminal-visible";
+
+const UPDATE_TYPE_EDITOR = 1;
+const UPDATE_TYPE_SERIAL = 2;
+
+function isEditorVisible() {
+    return editorPage.classList.contains('active');
+}
+
+function isSerialVisible() {
+    return serialPage.classList.contains('active');
+}
+
+async function toggleEditor() {
+    if (isSerialVisible()) {
+        editorPage.classList.toggle('active');
+        saveSetting(SETTING_EDITOR_VISIBLE, isEditorVisible());
+        updatePageLayout(UPDATE_TYPE_EDITOR);
     }
-    btnModeEditor.classList.toggle('active');
-    editorPage.classList.toggle('active')
-    updatePageLayout(true, false);
-});
+}
 
-btnModeSerial.addEventListener('click', async function (e) {
-    if (btnModeSerial.classList.contains('active') && !btnModeEditor.classList.contains('active')) {
-        // this would cause both editor & serial pages to disappear
-        return;
+async function toggleSerial() {
+    if (isEditorVisible()) {
+        serialPage.classList.toggle('active');
+        saveSetting(SETTING_TERMINAL_VISIBLE, isSerialVisible());
+        updatePageLayout(UPDATE_TYPE_SERIAL);
     }
-    btnModeSerial.classList.toggle('active');
-    serialPage.classList.toggle('active')
-    updatePageLayout(false, true);
-});
+}
+
+btnModeEditor.removeEventListener('click', toggleEditor);
+btnModeEditor.addEventListener('click', toggleEditor);
+
+btnModeSerial.removeEventListener('click', toggleSerial);
+btnModeSerial.addEventListener('click', toggleSerial);
 
-function updatePageLayout(editor = false, serial = false) {
-    if (editorPage.classList.contains('active') && serialPage.classList.contains('active')) {
+// Show the editor panel if hidden
+export function showEditor() {
+    editorPage.classList.add('active');
+    updatePageLayout(UPDATE_TYPE_EDITOR);
+}
+
+// Show the serial panel if hidden
+export function showSerial() {
+    serialPage.classList.add('active');
+    updatePageLayout(UPDATE_TYPE_SERIAL);
+}
+
+// update type is used to indicate which button was clicked
+function updatePageLayout(updateType) {
+    if (isEditorVisible() && isSerialVisible()) {
         pageSeparator.classList.add('active');
     } else {
         pageSeparator.classList.remove('active');
@@ -40,39 +70,41 @@ function updatePageLayout(editor = false, serial = false) {
         return;
     }
 
+    // Mobile layout, so only show one or the other
     if (mainContent.offsetWidth < 768) {
-        if (editor) {
-            btnModeSerial.classList.remove('active');
+        if (updateType == UPDATE_TYPE_EDITOR && isEditorVisible()) {
             serialPage.classList.remove('active');
-        } else if (serial) {
-            btnModeEditor.classList.remove('active');
+        } else if (updateType == UPDATE_TYPE_SERIAL && isSerialVisible()) {
             editorPage.classList.remove('active');
         }
+
+        // Make sure the separator is hidden for mobile
         pageSeparator.classList.remove('active');
     } else {
         let w = mainContent.offsetWidth;
         let s = pageSeparator.offsetWidth;
         editorPage.style.width = ((w - s) / 2) + 'px';
-        editorPage.style.flex = '0 0 auto';
+        editorPage.style.flex = 'none';
         serialPage.style.width = ((w - s) / 2) + 'px';
-        serialPage.style.flex = '0 0 auto';
+        serialPage.style.flex = 'none';
     }
 
-    if (serial) {
-        refitTerminal();
+    // Match the button state to the panel state to avoid getting out of sync
+    if (isEditorVisible()) {
+        btnModeEditor.classList.add('active');
+    } else {
+        btnModeEditor.classList.remove('active');
     }
-}
 
-export function showEditor() {
-    btnModeEditor.classList.add('active');
-    editorPage.classList.add('active');
-    updatePageLayout(true, false);
-}
+    if (isSerialVisible()) {
+        btnModeSerial.classList.add('active');
+    } else {
+        btnModeSerial.classList.remove('active');
+    }
 
-export function showSerial() {
-    btnModeSerial.classList.add('active');
-    serialPage.classList.add('active');
-    updatePageLayout(false, true);
+    if (isSerialVisible()) {
+        refitTerminal();
+    }
 }
 
 function refitTerminal() {
@@ -94,12 +126,12 @@ function refitTerminal() {
 function fixViewportHeight(e) {
     let vh = window.innerHeight * 0.01;
     document.documentElement.style.setProperty('--vh', `${vh}px`);
-    updatePageLayout();
+    updatePageLayout(UPDATE_TYPE_EDITOR);
 }
-fixViewportHeight();
-window.addEventListener("resize", fixViewportHeight);
 
+// Resize the panes when the separator is moved
 function resize(e) {
+    console.log("Resized");
     const w = mainContent.offsetWidth;
     const gap = pageSeparator.offsetWidth;
     const ratio = e.clientX / w;
@@ -124,6 +156,31 @@ function resize(e) {
     serialPage.style.width = (w - e.clientX - gap / 2) + 'px';
 }
 
+// For the moment, we're going to just use this to keep track of the shown and hidden states
+// of the terminal and editor (possibly plotter)
+function loadPanelSettings() {
+    // Load all saved settings or defaults
+    // Update the terminal first
+    if (loadSetting(SETTING_EDITOR_VISIBLE, true)) {
+        editorPage.classList.add('active');
+    } else {
+        editorPage.classList.remove('active');
+    }
+
+    if (loadSetting(SETTING_TERMINAL_VISIBLE, false)) {
+        serialPage.classList.add('active');
+    } else {
+        serialPage.classList.remove('active');
+    }
+
+    // Make sure at lest one is visible
+    if (!isEditorVisible() && !isSerialVisible()) {
+        editorPage.classList.add('active');
+    }
+
+    updatePageLayout(UPDATE_TYPE_SERIAL);
+}
+
 function stopResize(e) {
     window.removeEventListener('mousemove', resize, false);
     window.removeEventListener('mouseup', stopResize, false);
@@ -133,3 +190,7 @@ pageSeparator.addEventListener('mousedown', async function (e) {
     window.addEventListener('mousemove', resize, false);
     window.addEventListener('mouseup', stopResize, false);
 });
+
+fixViewportHeight();
+window.addEventListener("resize", fixViewportHeight);
+loadPanelSettings();

js/script.js

@@ -148,7 +148,7 @@ btnClear.addEventListener('click', async function(e) {
 // Plotter Button
 btnPlotter.addEventListener('click', async function(e){
     serialPlotter.classList.toggle("hidden");
-    if (!workflow.plotterEnabled){
+    if (workflow && !workflow.plotterEnabled){
         await setupPlotterChart(workflow);
         workflow.plotterEnabled = true;
     }