made some updates and moved some stuff to auto-save js

ui/index.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="/media/css/fonts.css?v=1">
     <link rel="stylesheet" href="/media/css/themes.css?v=1">
     <link rel="stylesheet" href="/media/css/main.css?v=1">
+    <link rel="stylesheet" href="/media/css/auto-save.css?v=1">
     <link rel="stylesheet" href="/media/css/modifier-thumbnails.css?v=1">
     <link rel="stylesheet" href="/media/css/fontawesome-all.min.css?v=1">
     <link rel="stylesheet" href="/media/css/drawingboard.min.css">

ui/media/css/auto-save.css

@@ -14,7 +14,7 @@
 }
 
 #save-settings-config > div {
-    background: var(--background-color2);
+    background: var(--background-color3);
     max-width: 600px;
     margin: auto;
     margin-top: 100px;

ui/media/js/auto-save.js

@@ -29,7 +29,14 @@ var SETTINGS_IDS_LIST = [
     "upscale_model",
     "preview-image",
     "modifier-card-size-slider",
-    "theme"
+    "theme",
+    "save_to_disk",
+    "diskPath",
+    "sound_toggle",
+    "turbo",
+    "use_cpu",
+    "use_full_precision",
+    "auto_save_settings"
 ]
 
 async function initSettings() {
@@ -46,6 +53,9 @@ async function initSettings() {
 }
 
 function getSetting(element) {
+    if (element instanceof String) {
+        element = SETTINGS_TO_SAVE.find(e => e.id == element);
+    }
     if (element.type == "checkbox") {
         return element.checked
     }

ui/media/js/main.js

@@ -1,19 +1,4 @@
 "use strict" // Opt in to a restricted variant of JavaScript
-const SOUND_ENABLED_KEY = "soundEnabled"
-const SAVE_TO_DISK_KEY = "saveToDisk"
-const USE_CPU_KEY = "useCPU"
-const USE_FULL_PRECISION_KEY = "useFullPrecision"
-const USE_TURBO_MODE_KEY = "useTurboMode"
-const DISK_PATH_KEY = "diskPath"
-const ADVANCED_PANEL_OPEN_KEY = "advancedPanelOpen"
-const MODIFIERS_PANEL_OPEN_KEY = "modifiersPanelOpen"
-const NEGATIVE_PROMPT_PANEL_OPEN_KEY = "negativePromptPanelOpen"
-const USE_FACE_CORRECTION_KEY = "useFaceCorrection"
-const USE_UPSCALING_KEY = "useUpscaling"
-const SHOW_ONLY_FILTERED_IMAGE_KEY = "showOnlyFilteredImage"
-const STREAM_IMAGE_PROGRESS_KEY = "streamImageProgress"
-const OUTPUT_FORMAT_KEY = "outputFormat"
-const AUTO_SAVE_SETTINGS_KEY = "autoSaveSettings"
 const HEALTH_PING_INTERVAL = 5 // seconds
 const MAX_INIT_IMAGE_DIMENSION = 768
 
@@ -77,7 +62,6 @@ let clearAllPreviewsBtn = document.querySelector("#clear-all-previews")
 // let maskImagePreviewContainer = document.querySelector('#mask_preview_container')
 // let maskImageClearBtn = document.querySelector('#mask_clear')
 let maskSetting = document.querySelector('#enable_mask')
-let negativePromptPanelHandle = document.querySelector('#negative_prompt_handle')
 
 let imagePreview = document.querySelector("#preview")
 
@@ -93,8 +77,6 @@ let soundToggle = document.querySelector('#sound_toggle')
 let serverStatusColor = document.querySelector('#server-status-color')
 let serverStatusMsg = document.querySelector('#server-status-msg')
 
-let advancedPanelHandle = document.querySelector("#editor-settings .collapsible")
-let modifiersPanelHandle = document.querySelector("#editor-modifiers .collapsible")
 
 document.querySelector('.drawing-board-control-navigation-back').innerHTML = '<i class="fa-solid fa-rotate-left"></i>'
 document.querySelector('.drawing-board-control-navigation-forward').innerHTML = '<i class="fa-solid fa-rotate-right"></i>'
@@ -111,15 +93,6 @@ let bellPending = false
 let taskQueue = []
 let currentTask = null
 
-function getLocalStorageItem(key, fallback) {
-    let item = localStorage.getItem(key)
-    if (item === null) {
-        return fallback
-    }
-
-    return item
-}
-
 function getLocalStorageBoolItem(key, fallback) {
     let item = localStorage.getItem(key)
     if (item === null) {
@@ -142,63 +115,11 @@ function handleStringSettingChange(key) {
 }
 
 function isSoundEnabled() {
-    return getLocalStorageBoolItem(SOUND_ENABLED_KEY, true)
+    return getSetting("sound_toggle")
-}
-
-function isFaceCorrectionEnabled() {
-    return getLocalStorageBoolItem(USE_FACE_CORRECTION_KEY, false)
-}
-
-function isUpscalingEnabled() {
-    return getLocalStorageBoolItem(USE_UPSCALING_KEY, false)
-}
-
-function isShowOnlyFilteredImageEnabled() {
-    return getLocalStorageBoolItem(SHOW_ONLY_FILTERED_IMAGE_KEY, true)
-}
-
-function isSaveToDiskEnabled() {
-    return getLocalStorageBoolItem(SAVE_TO_DISK_KEY, false)
-}
-
-function isUseCPUEnabled() {
-    return getLocalStorageBoolItem(USE_CPU_KEY, false)
-}
-
-function isUseFullPrecisionEnabled() {
-    return getLocalStorageBoolItem(USE_FULL_PRECISION_KEY, false)
-}
-
-function isAutoSaveSettingsEnabled() {
-    return getLocalStorageBoolItem(AUTO_SAVE_SETTINGS_KEY, true)
-}
-
-function isUseTurboModeEnabled() {
-    return getLocalStorageBoolItem(USE_TURBO_MODE_KEY, true)
 }
 
 function getSavedDiskPath() {
-    return getLocalStorageItem(DISK_PATH_KEY, '')
+    return getSetting("diskPath")
-}
-
-function isAdvancedPanelOpenEnabled() {
-    return getLocalStorageBoolItem(ADVANCED_PANEL_OPEN_KEY, false)
-}
-
-function isModifiersPanelOpenEnabled() {
-    return getLocalStorageBoolItem(MODIFIERS_PANEL_OPEN_KEY, false)
-}
-
-function isNegativePromptPanelOpenEnabled() {
-    return getLocalStorageBoolItem(NEGATIVE_PROMPT_PANEL_OPEN_KEY, false)
-}
-
-function isStreamImageProgressEnabled() {
-    return getLocalStorageBoolItem(STREAM_IMAGE_PROGRESS_KEY, false)
-}
-
-function getOutputFormat() {
-    return getLocalStorageItem(OUTPUT_FORMAT_KEY, 'jpeg')
 }
 
 function setStatus(statusType, msg, msgType) {
@@ -1056,40 +977,6 @@ stopImageBtn.addEventListener('click', async function() {
     await stopAllTasks()
 })
 
-soundToggle.addEventListener('click', handleBoolSettingChange(SOUND_ENABLED_KEY))
-soundToggle.checked = isSoundEnabled()
-
-saveToDiskField.checked = isSaveToDiskEnabled()
-diskPathField.disabled = !saveToDiskField.checked
-
-useFaceCorrectionField.addEventListener('click', handleBoolSettingChange(USE_FACE_CORRECTION_KEY))
-useFaceCorrectionField.checked = isFaceCorrectionEnabled()
-
-useUpscalingField.checked = isUpscalingEnabled()
-upscaleModelField.disabled = !useUpscalingField.checked
-
-showOnlyFilteredImageField.addEventListener('click', handleBoolSettingChange(SHOW_ONLY_FILTERED_IMAGE_KEY))
-showOnlyFilteredImageField.checked = isShowOnlyFilteredImageEnabled()
-
-useCPUField.addEventListener('click', handleBoolSettingChange(USE_CPU_KEY))
-useCPUField.checked = isUseCPUEnabled()
-
-useFullPrecisionField.addEventListener('click', handleBoolSettingChange(USE_FULL_PRECISION_KEY))
-useFullPrecisionField.checked = isUseFullPrecisionEnabled()
-
-autoSaveSettingsField.addEventListener('click', handleBoolSettingChange(AUTO_SAVE_SETTINGS_KEY))
-autoSaveSettingsField.checked = isAutoSaveSettingsEnabled()
-
-turboField.addEventListener('click', handleBoolSettingChange(USE_TURBO_MODE_KEY))
-turboField.checked = isUseTurboModeEnabled()
-
-streamImageProgressField.addEventListener('click', handleBoolSettingChange(STREAM_IMAGE_PROGRESS_KEY))
-streamImageProgressField.checked = isStreamImageProgressEnabled()
-
-outputFormatField.addEventListener('change', handleStringSettingChange(OUTPUT_FORMAT_KEY))
-outputFormatField.value = getOutputFormat()
-
-diskPathField.addEventListener('change', handleStringSettingChange(DISK_PATH_KEY))
 widthField.addEventListener('change', onDimensionChange)
 heightField.addEventListener('change', onDimensionChange)
 
@@ -1105,32 +992,12 @@ function onDimensionChange() {
 
 saveToDiskField.addEventListener('click', function(e) {
     diskPathField.disabled = !this.checked
-    handleBoolSettingChange(SAVE_TO_DISK_KEY)(e)
 })
 
 useUpscalingField.addEventListener('click', function(e) {
     upscaleModelField.disabled = !this.checked
-    handleBoolSettingChange(USE_UPSCALING_KEY)(e)
 })
 
-function setPanelOpen(panelHandle) {
-    let panelContents = panelHandle.nextElementSibling
-    panelHandle.classList.add('active')
-    panelContents.style.display = 'block'
-}
-
-if (isAdvancedPanelOpenEnabled()) {
-    setPanelOpen(advancedPanelHandle)
-}
-
-if (isModifiersPanelOpenEnabled()) {
-    setPanelOpen(modifiersPanelHandle)
-}
-
-if (isNegativePromptPanelOpenEnabled()) {
-    setPanelOpen(negativePromptPanelHandle)
-}
-
 makeImageBtn.addEventListener('click', makeImage)
 
 

ui/media/js/utils.js

@@ -14,13 +14,58 @@ function getNextSibling(elem, selector) {
 	}
 }
 
-function createCollapsibles(node) {
-    if (!node) {
-        node = document
-    }
 
+
+/* Panel Stuff */
+
+// true = open
+var COLLAPSIBLES_INITIALIZED = false;
+const COLLAPSIBLES_KEY = "collapsibles";
+const COLLAPSIBLE_PANELS = []; // filled in by createCollapsibles with all the elements matching .collapsible
+
+// on-init call this for any panels that are marked open
+function toggleCollapsible(element) {
+    var collapsibleHeader = element.querySelector(".collapsible");
+    var handle = element.firstChild;
+    collapsibleHeader.classList.toggle("active")
+    let content = getNextSibling(collapsibleHeader, '.collapsible-content')
+    if (content.style.display === "block") {
+        content.style.display = "none"
+        handle.innerHTML = '➕' // plus
+    } else {
+        content.style.display = "block"
+        handle.innerHTML = '➖' // minus
+    }
+    
+    if (COLLAPSIBLES_INITIALIZED && COLLAPSIBLE_PANELS.includes(element.parentElement)) {
+        saveCollapsibles();
+    }
+}
+
+function saveCollapsibles() {
+    var values = {};
+    console.log(COLLAPSIBLE_PANELS);
+    COLLAPSIBLE_PANELS.forEach(element => {
+        values[element.id] = element.querySelector(".collapsible").className.indexOf("active") !== -1;
+    });
+    localStorage.setItem(COLLAPSIBLES_KEY, JSON.stringify(values));
+}
+
+function createCollapsibles(node) {
+    var save = false;
+    if (!node) {
+        node = document;
+        save = true;
+    }
+    // FIX: problem here is that the elements we're getting in c are the buttons, and they are the children of the things with collapsible stuff
+    // FIX: gotta get parent
+
+    // default closed.
     let collapsibles = node.querySelectorAll(".collapsible")
     collapsibles.forEach(function(c) {
+        if (save && c.parentElement.id) {
+            COLLAPSIBLE_PANELS.push(c.parentElement);
+        }
         let handle = document.createElement('span')
         handle.className = 'collapsible-handle'
 
@@ -32,28 +77,24 @@ function createCollapsibles(node) {
         c.insertBefore(handle, c.firstChild)
 
         c.addEventListener('click', function() {
-            this.classList.toggle("active")
+            toggleCollapsible(c.parentElement);
-            let content = getNextSibling(this, '.collapsible-content')
+        });
-            if (content.style.display === "block") {
+    });
-                content.style.display = "none"
+    if (save) {
-                handle.innerHTML = '➕' // plus
+        var saved = localStorage.getItem(COLLAPSIBLES_KEY);
-            } else {
+        if (!saved) {
-                content.style.display = "block"
+            saveCollapsibles();
-                handle.innerHTML = '➖' // minus
+            saved = localStorage.getItem(COLLAPSIBLES_KEY);
+        }
+        var values = JSON.parse(saved);
+        Object.keys(values).forEach(element_id => {
+            if (values[element_id]) {
+                var element = COLLAPSIBLE_PANELS.find(e => e.id == element_id);
+                toggleCollapsible(element);
             }
-
+        });
-            if (this == advancedPanelHandle) {
+        COLLAPSIBLES_INITIALIZED = true;
-                let state = (content.style.display === 'block' ? 'true' : 'false')
+    }
-                localStorage.setItem(ADVANCED_PANEL_OPEN_KEY, state)
-            } else if (this == modifiersPanelHandle) {
-                let state = (content.style.display === 'block' ? 'true' : 'false')
-                localStorage.setItem(MODIFIERS_PANEL_OPEN_KEY, state)
-            } else if (this == negativePromptPanelHandle) {
-                let state = (content.style.display === 'block' ? 'true' : 'false')
-                localStorage.setItem(NEGATIVE_PROMPT_PANEL_OPEN_KEY, state)
-            }
-        })
-    })
 }
 
 function permute(arr) {