Changeset 35902

Timestamp:

2022-01-07T16:42:07+13:00 (2 years ago)

Author:

cstephen

Message:

Save preferences to localStorage and introduce localStorage polyfill

Location:

main/trunk/model-interfaces-dev/atea/macron-restoration/src

Files:

• components/DirectInput.vue (modified) (4 diffs)
• main.js (modified) (1 diff)

main/trunk/model-interfaces-dev/atea/macron-restoration/src/components/DirectInput.vue

@@ -12 +12 @@
     data() {
         return {
-            preserveExistingMacrons: true,
-            showMacronisedWords: false,
             macroniseWaitTimeout: null,
             waitingToMacronise: false,
-            errorState: false,
-            normaliseLinebreaks: false
+            errorState: false
         }
     },
     computed: {
+        preserveExistingMacrons: {
+            get() {
+                const value = localStorage.getItem("preserveExistingMacrons");
+                return value ?? true;
+            },
+            set(newValue) {
+                localStorage.setItem("preserveExistingMacrons", newValue);
+            }
+        },
+        enableSpellcheck: {
+            get() {
+                return localStorage.getItem("enableSpellcheck");
+            },
+            set(newValue) {
+                localStorage.setItem("enableSpellcheck", newValue);
+            }
+        },
+        showMacronisedWords: {
+            get() {
+                const value = localStorage.getItem("showMacronisedWords");
+                return value ?? true;
+            },
+            set(newValue) {
+                localStorage.setItem("showMacronisedWords", newValue);
+            }
+        },
+        normaliseLinebreaks: {
+            get() {
+                return localStorage.getItem("normaliseLinebreaks");
+            },
+            set(newValue) {
+                localStorage.setItem("normaliseLinebreaks", newValue);
+            }
+        },
         canDownload() {
             return this.restored.length > 0 && !this.waitingToMacronise;
@@ -160 +191 @@
 <div class="root">
     <textarea class="text-input input-area" @input="onTextInput" autocomplete="off"
-        v-model="input" :placeholder="translations.get('DirectInput_InputPlaceholder')" />
+        v-model="input" :placeholder="translations.get('DirectInput_InputPlaceholder')"
+        :spellcheck="enableSpellcheck ? 'yes' : 'no'" />
 
     <div class="text-container">
@@ -179 +211 @@
     </div>
 
-    <div class="flex right-column">
+    <div class="flex">
+        <input type="checkbox" id="i-enable-spellcheck" v-model="enableSpellcheck" />
+        <label for="i-enable-spellcheck">{{ translations.get('DirectInput_EnableSpellcheck') }}</label>
+    </div>
+
+    <div class="flex">
         <input type="checkbox" id="i-show-macronised-words" v-model="normaliseLinebreaks" :disabled="restored.length === 0" />
         <label for="i-show-macronised-words">{{ translations.get('DirectInput_NormaliseLinebreaks') }}</label>
@@ -216 +253 @@
 }
 
+.left-column {
+    grid-column: 1;
+}
+
 .right-column {
     grid-column: 2;

main/trunk/model-interfaces-dev/atea/macron-restoration/src/main.js

@@ -4 +4 @@
 import App from "./App.vue";
 import ToggleButton from "./components/ToggleButton.vue"
+
+// Polyfill localstorage with an in-memory solution for old browsers.
+// Adapted from https://gist.github.com/juliocesar/926500#gistcomment-1620487
+try {
+    window.localStorage.setItem("test_localstorage_available", "1");
+    window.localStorage.removeItem("test_localstorage_available");
+}
+catch (error) {
+    window.localStorage = {
+        _data: {},
+        setItem: function (id, val) {
+            this._data[id] = String(val);
+        },
+        getItem: function (id) {
+            return Object.prototype.hasOwnProperty.call(this._data, id) ? this._data[id] : undefined;
+        },
+        removeItem: function (id) {
+            return delete this._data[id];
+        },
+        clear: function () {
+            this._data = {};
+        }
+    };
+}
 
 const store = createStore({