Changeset 35954 for main

Timestamp:

2022-01-11T11:32:12+13:00 (2 years ago)

Author:

cstephen

Message:

Save magnifier settings to localStorage and hide magnifier when cursor leaves the image

Location:

main/trunk/model-interfaces-dev/atea/ocr/src

Files:

• components/OcrImageDisplay.vue (modified) (5 diffs)
• main.js (modified) (1 diff)

main/trunk/model-interfaces-dev/atea/ocr/src/components/OcrImageDisplay.vue

@@ -146 +146 @@
             }, 100);
         },
-        magnifierZoom() {
+        magnifierZoom(newValue) {
             if (this.showThresholdedImage) {
                 this.updateMagnifier(this.$refs.thresholdedImage);
@@ -153 +153 @@
                 this.updateMagnifier(this.$refs.ocrImage);
             }
-        }
+
+            localStorage.setItem("magnifierZoom", newValue);
+        },
+        enableMagnifier(newValue) {
+            localStorage.setItem("enableMagnifier", newValue);
+        }
+    },
+    beforeMount() {
+        this.enableMagnifier = localStorage.getItem("enableMagnifier") === "true";
     },
     mounted() {
@@ -159 +167 @@
             this.updateMagnifier(this.$refs.ocrImage);
         }, 100);
+
+        this.magnifierZoom = localStorage.getItem("magnifierZoom") ?? "1.5";
     }
 }
@@ -218 +228 @@
 
         .controls {
+            opacity: 1;
+        }
+
+        .magnifier {
             opacity: 1;
         }
@@ -274 +288 @@
     cursor: none;
     border-radius: 40%;
+
+    transition: opacity var(--transition-duration);
+    opacity: 0;
 }
 </style>

main/trunk/model-interfaces-dev/atea/ocr/src/main.js

@@ -3 +3 @@
 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({