all repos — onyx @ 3f399947f13876b0533979e56e9368bce0d73e36

minimal map annotation and location data sharing tool

add reset button to load from save data
Iris Lightshard nilix@nilfm.cc
PGP Signature 
-----BEGIN PGP SIGNATURE-----

iQIzBAABCAAdFiEEkFh6dA+k/6CXFXU4O3+8IhROY5gFAmL5vecACgkQO3+8IhRO
Y5jnDA/+POf+sULm/y3FFVZbmtGkEBXXa/nlr0lhfHd+sWwSaUOsYq4IlbMWRSpD
DdBOlCLBL0GhYxcvVycocUfr3LsG5oOkQx0/oBoeQN78Xb+tmXKu0orxio5IJLrM
lDYZn5+mJfv2rqdOF2aSxT+3Q5JNZKvnZPeLOdu+tMJdHl5aL3dtosaZoKhC+BVs
Dp3KJ8rG6G7VUFykNfvFsNUb2TasIG+uBaYic1pwPrYgVZmvH5KzJvuGi97vdzDw
v9gjL2ZJDtKLylcuq3XIWf+VbUB04pGjInhDc5iUMz9tmLCy2ygdM8z82SBcAZVZ
y7aqXRC4CzYjNWuM5n3zgcGq8xPyb83SvvuWNPXXlnNDdRuY9jgkxjK1WU9+oAin
J6XieLMTVIf1ZrX360kiiknX4QyYi5ASB88tIscNC014qmcLWCbrrG4OQK7lXN3H
n4EKGoa3WeTU4skg5Yo9naqLxQfG0fihmjYTj4C/L2M2Hyk/Z7KzKjKjXr5m2GIE
YAMHO5S55VT7iIWBBWszpgMMYDmMVV9kwk4WKxvaDbu6GJKBJ508/fT4A5lX56df
XxjY4Ls4lqmLGdWS057lmX29oZEA5+SXxe/31HpPijFDqpLATXmEOJKjVH6BZbfu
UAv9iyemiu1tN1bCAyTnZIMM9eg863OfIMC+DZOfDJXnafyClkI=
=65lx
-----END PGP SIGNATURE-----
commit

3f399947f13876b0533979e56e9368bce0d73e36

parent

5154aff55335e515be73fba4a40d779548385be3

7 files changed, 177 insertions(+), 9 deletions(-)

jump to
A src/23-infoModal.ts 
@@ -0,0 +1,36 @@ 
+class InfoModal {
+
+  constructor() {
+    const _this = this;
+    const closeBtn = document.getElementById("info-closeBtn");
+    if (closeBtn) {
+      closeBtn.onclick = ()=>{_this.setVisible(false)};
+    }
+  }
+  
+  self(): HTMLElement | null {
+    return document.getElementById("info-container");
+  }
+  
+  visible(): boolean {
+    return this.self()?.style.display != "none";
+  }
+  
+  infoMsg(): HTMLElement | null {
+    return document.getElementById("info-content");
+  }
+  
+  setMsg(s: string) {
+    const infoMsg = this.infoMsg();
+    if (infoMsg) {
+      infoMsg.innerText = s;
+    }
+  }
+  
+  setVisible(v: boolean): void {
+    const modal = this.self();
+    if (modal) {
+      modal.style.display = v ? "block" : "none";
+    }
+  }
+}
M src/29-modalCollection.ts → src/29-modalCollection.ts 
@@ -2,15 +2,18 @@ class ModalCollection {
   createOverlay: CreateOverlayModal;
   cancel: CancelModal;
   okCancel: OKCancelModal;
+  info: InfoModal;
   
   constructor(
     createOverlay: CreateOverlayModal,
     cancel: CancelModal,
-    okCancel: OKCancelModal
+    okCancel: OKCancelModal,
+    info: InfoModal
   ) {
     this.createOverlay = createOverlay;
     this.cancel = cancel;
     this.okCancel = okCancel;
+    this.info = info;
   }
   
   closeAll(): void {
M src/40-handlers.ts → src/40-handlers.ts 
@@ -63,6 +63,12 @@ clearBtn.classList.remove("activeBtn");
         }
       } catch {}
       try {
+        const resetBtn = document.getElementById("restore-btn");
+        if (resetBtn) {
+          resetBtn.classList.remove("activeBtn");
+        }
+      } catch {}
+      try {
         const menuBtn = document.getElementById("menu-btn");
         if (menuBtn) {
           menuBtn.classList.remove("activeBtn");

@@ -217,7 +223,42 @@ okBtn.onclick = ()=> {
           OverlayState.save(self.overlays);
           self.modals.okCancel.setVisible(false);
           MapHandler.resetMapClick();
-          // show info modal "Save complete" 
+          self.modals.info.setMsg("Save complete");
+          self.modals.info.setVisible(true);
+        }
+      }
+      const cancelBtn = self.modals.okCancel.cancelBtn();
+      if (cancelBtn) {
+        cancelBtn.onclick = () => {
+          self.modals.okCancel.setVisible(false);
+          MapHandler.resetMapClick();
+        }
+      }
+      self.modals.okCancel.setVisible(true);
+    }
+  }
+  
+  static overlayReset(e: any): void {
+    const self = MapHandler.instance;
+    if (self) {
+      self.modals.closeAll();
+      MapHandler.resetMapClick();
+      (e.target as HTMLElement).classList.add("activeBtn");
+      self.modals.okCancel.setMsg("Restore overlays from saved data?");
+
+      const okBtn = self.modals.okCancel.okBtn();
+      if (okBtn) {
+        okBtn.onclick = ()=> {
+          self.overlays = OverlayState.clear(self.overlays, self.map);
+          self.overlays = OverlayState.load();
+          self.overlays.markers.forEach(m=>m.add(self.map));
+          self.overlays.circles.forEach(m=>m.add(self.map));
+          self.overlays.polygons.forEach(m=>m.add(self.map));
+          self.overlays.polyline.add(self.map);
+          self.modals.okCancel.setVisible(false);
+          MapHandler.resetMapClick();
+          self.modals.info.setMsg("Restored");
+          self.modals.info.setVisible(true);
         }
       }
       const cancelBtn = self.modals.okCancel.cancelBtn();
M src/99-onyx-scry.ts → src/99-onyx-scry.ts 
@@ -31,7 +31,8 @@ 
   const modals = new ModalCollection(
     new CreateOverlayModal(),
     new CancelModal(),
-    new OKCancelModal());
+    new OKCancelModal(),
+    new InfoModal());
 
   MapHandler.init(map, overlays, TileLayerWrapper.layers, modals);
   

@@ -41,6 +42,7 @@ MapHandler.setButtonClick("addPolygon-btn", MapHandler.polygonCollect);
   
   MapHandler.setButtonClick("save-btn", MapHandler.overlaySave);
   MapHandler.setButtonClick("clear-btn", MapHandler.overlayClear);
+  MapHandler.setButtonClick("restore-btn", MapHandler.overlayReset);
   
   MapHandler.setButtonClick("tiles-btn", MapHandler.swapTiles);
 }
M static/index.html → static/index.html 
@@ -24,7 +24,8 @@ <button id="addPolygon-btn">&diamond;</button>
   <div id="subControls">
     <button id="tiles-btn">&Colon;</button>
   <button id="save-btn">&darr;</button>
-  <button id="clear-btn">&olarr;</button>
+  <button id="clear-btn">x</button>
+  <button id="restore-btn">&olarr;</button>
   <button id="menu-btn">&equiv;</button>
   </div>
 </div>

@@ -57,7 +58,7 @@ </div>
 
 <div id="info-container">
   <button class="closeBtn" id="info-closeBtn">x</button>
-  <div class="info-content">
+  <div id="info-content">
   </div>
 </div>
M static/onyx-scry.js → static/onyx-scry.js 
@@ -359,11 +359,43 @@ msg.innerText = s;
         }
     }
 }
+class InfoModal {
+    constructor() {
+        const _this = this;
+        const closeBtn = document.getElementById("info-closeBtn");
+        if (closeBtn) {
+            closeBtn.onclick = () => { _this.setVisible(false); };
+        }
+    }
+    self() {
+        return document.getElementById("info-container");
+    }
+    visible() {
+        var _a;
+        return ((_a = this.self()) === null || _a === void 0 ? void 0 : _a.style.display) != "none";
+    }
+    infoMsg() {
+        return document.getElementById("info-content");
+    }
+    setMsg(s) {
+        const infoMsg = this.infoMsg();
+        if (infoMsg) {
+            infoMsg.innerText = s;
+        }
+    }
+    setVisible(v) {
+        const modal = this.self();
+        if (modal) {
+            modal.style.display = v ? "block" : "none";
+        }
+    }
+}
 class ModalCollection {
-    constructor(createOverlay, cancel, okCancel) {
+    constructor(createOverlay, cancel, okCancel, info) {
         this.createOverlay = createOverlay;
         this.cancel = cancel;
         this.okCancel = okCancel;
+        this.info = info;
     }
     closeAll() {
         this.createOverlay.setVisible(false);

@@ -430,13 +462,20 @@ clearBtn.classList.remove("activeBtn");
                 }
             }
             catch (_e) { }
+            try {
+                const resetBtn = document.getElementById("restore-btn");
+                if (resetBtn) {
+                    resetBtn.classList.remove("activeBtn");
+                }
+            }
+            catch (_f) { }
             try {
                 const menuBtn = document.getElementById("menu-btn");
                 if (menuBtn) {
                     menuBtn.classList.remove("activeBtn");
                 }
             }
-            catch (_f) { }
+            catch (_g) { }
         }
     }
     static addMarker(e) {

@@ -571,7 +610,40 @@ okBtn.onclick = () => {
                     OverlayState.save(self.overlays);
                     self.modals.okCancel.setVisible(false);
                     MapHandler.resetMapClick();
-                    // show info modal "Save complete" 
+                    self.modals.info.setMsg("Save complete");
+                    self.modals.info.setVisible(true);
+                };
+            }
+            const cancelBtn = self.modals.okCancel.cancelBtn();
+            if (cancelBtn) {
+                cancelBtn.onclick = () => {
+                    self.modals.okCancel.setVisible(false);
+                    MapHandler.resetMapClick();
+                };
+            }
+            self.modals.okCancel.setVisible(true);
+        }
+    }
+    static overlayReset(e) {
+        const self = MapHandler.instance;
+        if (self) {
+            self.modals.closeAll();
+            MapHandler.resetMapClick();
+            e.target.classList.add("activeBtn");
+            self.modals.okCancel.setMsg("Restore overlays from saved data?");
+            const okBtn = self.modals.okCancel.okBtn();
+            if (okBtn) {
+                okBtn.onclick = () => {
+                    self.overlays = OverlayState.clear(self.overlays, self.map);
+                    self.overlays = OverlayState.load();
+                    self.overlays.markers.forEach(m => m.add(self.map));
+                    self.overlays.circles.forEach(m => m.add(self.map));
+                    self.overlays.polygons.forEach(m => m.add(self.map));
+                    self.overlays.polyline.add(self.map);
+                    self.modals.okCancel.setVisible(false);
+                    MapHandler.resetMapClick();
+                    self.modals.info.setMsg("Restored");
+                    self.modals.info.setVisible(true);
                 };
             }
             const cancelBtn = self.modals.okCancel.cancelBtn();

@@ -639,13 +711,14 @@ overlays.markers.forEach(m => m.add(map));
     overlays.circles.forEach(m => m.add(map));
     overlays.polygons.forEach(m => m.add(map));
     overlays.polyline.add(map);
-    const modals = new ModalCollection(new CreateOverlayModal(), new CancelModal(), new OKCancelModal());
+    const modals = new ModalCollection(new CreateOverlayModal(), new CancelModal(), new OKCancelModal(), new InfoModal());
     MapHandler.init(map, overlays, TileLayerWrapper.layers, modals);
     MapHandler.setButtonClick("addPoint-btn", MapHandler.markerCollect);
     MapHandler.setButtonClick("addCircle-btn", MapHandler.circleCollect);
     MapHandler.setButtonClick("addPolygon-btn", MapHandler.polygonCollect);
     MapHandler.setButtonClick("save-btn", MapHandler.overlaySave);
     MapHandler.setButtonClick("clear-btn", MapHandler.overlayClear);
+    MapHandler.setButtonClick("restore-btn", MapHandler.overlayReset);
     MapHandler.setButtonClick("tiles-btn", MapHandler.swapTiles);
 }
 init();
M static/style.css → static/style.css 
@@ -226,6 +226,18 @@ width: 100%;
   max-width: fit-content;
 }
 
+#info-content {
+  float: left;
+  line-height: 200%;
+}
+
+#info-container button.closeBtn {
+  font-size: 150%;
+  padding: 0;
+  margin-left: 1ch;
+  
+}
+
 #import-export-container {
   position: fixed;
   width: 100%;