diff --git a/package-lock.json b/package-lock.json index 6fc4d74..c107fd8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@codemirror/theme-one-dark": "^6.1.0", "@gkucmierz/utils": "^1.12.1", "codemirror": "^6.0.1", + "eventemitter3": "^4.0.7", "javascript-stringify": "^2.1.0", "meriyah": "^4.3.3", "normalize.css": "^8.0.1", @@ -3369,6 +3370,11 @@ "node": ">=0.10.0" } }, + "node_modules/eventemitter3": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", + "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==" + }, "node_modules/events": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz", @@ -8738,6 +8744,11 @@ "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", "dev": true }, + "eventemitter3": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", + "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==" + }, "events": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz", diff --git a/package.json b/package.json index 96aa5b7..500e539 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@codemirror/theme-one-dark": "^6.1.0", "@gkucmierz/utils": "^1.12.1", "codemirror": "^6.0.1", + "eventemitter3": "^4.0.7", "javascript-stringify": "^2.1.0", "meriyah": "^4.3.3", "normalize.css": "^8.0.1", diff --git a/src/app.config.mjs b/src/app.config.mjs index 831db25..fe1ac42 100644 --- a/src/app.config.mjs +++ b/src/app.config.mjs @@ -13,3 +13,7 @@ for (let i = 0; i < 42; ++i) { } `; + +// storage unique keys: +export const STORAGE_KEY_CODE = 'code'; +export const STORAGE_KEY_SETTINGS = 'settings'; diff --git a/src/services/settingsService.mjs b/src/services/settingsService.mjs new file mode 100644 index 0000000..fd58023 --- /dev/null +++ b/src/services/settingsService.mjs @@ -0,0 +1,41 @@ + +import EventEmitter from 'eventemitter3'; +import { STORAGE_KEY_SETTINGS } from '../app.config'; + +// const ee = new EventEmitter(); +let data; + +const init = () => { + try { + data = JSON.parse(localStorage.getItem(STORAGE_KEY_SETTINGS) ?? '{}'); + } catch(e) { + data = {}; + } +}; + +const save = () => { + const str = JSON.stringify(data); + localStorage.setItem(STORAGE_KEY_SETTINGS, str); +}; + +const settingsService = { + getItem(item) { + return data[item]; + }, + setItem(item, value) { + data[item] = value; + save(); + }, + get() { + return data; + }, + set(value) { + data = value; + save(); + }, + // ee, +}; + +export default settingsService; + +init(); diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 16a54f3..6c7fa05 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -2,7 +2,7 @@ import Result from '../components/Result.vue'; import Code from '../components/Code.vue'; -import { WELCOME_CODE } from '../app.config'; +import { WELCOME_CODE, STORAGE_KEY_CODE } from '../app.config'; import Worker from '../file.worker.js?worker'; @@ -13,8 +13,6 @@ import SplitterPanel from 'primevue/splitterpanel'; import { defineComponent, shallowRef } from 'vue'; -const STORAGE_KEY_CODE = 'code'; - export default defineComponent({ components: { Splitter, SplitterPanel, diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue index 9080625..eeb7c7b 100644 --- a/src/views/SettingsView.vue +++ b/src/views/SettingsView.vue @@ -2,6 +2,13 @@ import { defineComponent } from 'vue'; import InputSwitch from 'primevue/inputswitch'; +import settingsService from '../services/settingsService'; + +const DEFAULT_SETTINGS = { + autoScroll: false, + autoPrint: true, +}; + export default defineComponent({ components: { InputSwitch, @@ -17,10 +24,18 @@ export default defineComponent({ }; return { escDown, - autoScroll: false, - autoPrint: true, + so: Object.keys(DEFAULT_SETTINGS).reduce((so, key) => { + so[key] = settingsService.getItem(key) ?? DEFAULT_SETTINGS[key]; + return so; + }, {}), }; }, + watch: { + so: { + deep: true, + handler: val => settingsService.set(val), + }, + }, mounted() { window.addEventListener('keydown', this.escDown); }, @@ -44,14 +59,15 @@ label {

App Settings

- +

- +

+
{{ so }}