diff --git a/src/ViperIDE.html b/src/ViperIDE.html index bd0cbe6..9369232 100644 --- a/src/ViperIDE.html +++ b/src/ViperIDE.html @@ -134,7 +134,7 @@ or : ${settingElement}`) + } + + // set our local cache + settings[setting] = newValue + + // inform any subscribers + _notify(setting, newValue) + + // persist to local storage + _persistSettings(settings) +} + + +/** + * + * @param {string} setting The name of the setting to set a callback for + * @param {function(string):void} callback A callback function that will receive the new value of the setting + */ +export function onSettingChange(setting, callback) { + if (!callbacks.has(setting)) { + callbacks.set(setting, []) + } + callbacks.get(setting).push(callback) +} + + +settingsElement.addEventListener("change", (event) => { + settings = _persistSettings() + _notify(event.target.id, settings[event.target.id]) +}) + + +function _loadSettings() { + // get settings from either localstorage or read from the DOM (and populate local storage) + let loadedSettings = JSON.parse(localStorage.getItem("settings")) + if (!loadedSettings) { + _persistSettings() + loadedSettings = JSON.parse(localStorage.getItem("settings")) + } + + function _setLoadedValue(setting, loadedValue, domValue, setter) { + // if we loaded nothing, then don't try to set the DOM (perhaps a brand new setting and + // therefore should use the default) + if (loadedValue != undefined) { + // set the loaded value to the DOM + setter(loadedValue) + } else { + loadedSettings[setting] = domValue + loadedValue = domValue + } + + // notify any code that might need to know about what we loaded + _notify(setting, loadedValue) + } + + // loop over all DOM settings elements and load them with the value from local storage + settingsElement.querySelectorAll("input[type='checkbox']").forEach(element => { + _setLoadedValue(element.id, loadedSettings[element.id], element.checked, (value) => element.checked = value) + }) + settingsElement.querySelectorAll("select").forEach(element => { + _setLoadedValue(element.id, loadedSettings[element.id], element.value, (value) => element.value = value) + }) + + return loadedSettings +} + + +function _persistSettings(newSettings = undefined) { + if (!newSettings) { + // nothing passed into us, so lets read from the DOM and persist that + newSettings = new Object() + settingsElement.querySelectorAll("input[type='checkbox']").forEach(element => { + newSettings[element.id] = element.checked + }) + settingsElement.querySelectorAll("select").forEach(element => { + newSettings[element.id] = element.value + }) + } + + localStorage.setItem("settings", JSON.stringify(newSettings)) + return newSettings +} + + +function _notify(setting, newValue) { + // If there are any callbacks for this setting update, then let's call them + if (callbacks.has(setting)) { + for (let callback of callbacks.get(setting)) { + callback(newValue) + } + } +}