refactor(es modules): continue migration

src/main.ts

@@ -1,7 +1,7 @@
 // Azgaar (azgaar.fmg@yandex.com). Minsk, 2017-2022. MIT License
 // https://github.com/Azgaar/Fantasy-Map-Generator
 
-import {PRODUCTION, UINT16_MAX} from "./constants";
+import {UINT16_MAX} from "./constants";
 import {INFO, TIME, WARN, ERROR} from "./config/logging";
 import {
   shouldRegenerateGrid,
@@ -15,32 +15,17 @@ import {createTypedArray} from "./utils/arrayUtils";
 import {drawRivers, drawStates, drawBorders} from "../modules/ui/layers";
 import {invokeActiveZooming} from "../modules/activeZooming";
 import {applyStoredOptions, applyMapSize, randomizeOptions} from "../modules/ui/options";
-import {locked} from "../modules/ui/general";
+import {locked} from "./scripts/options/lock";
 import {Rulers, Ruler, drawScaleBar} from "./modules/measurers";
 import {byId} from "./utils/shorthands";
+import {addGlobalListeners} from "./scripts/listeners";
+
+addGlobalListeners();
 
 window.fmg = {
   modules: {}
 };
 
-if (PRODUCTION && "serviceWorker" in navigator) {
-  window.addEventListener("load", () => {
-    navigator.serviceWorker.register("../sw.js").catch(err => {
-      console.error("ServiceWorker registration failed: ", err);
-    });
-  });
-
-  window.addEventListener(
-    "beforeinstallprompt",
-    async event => {
-      event.preventDefault();
-      const Installation = await import("../modules/dynamic/installation.js");
-      Installation.init(event);
-    },
-    {once: true}
-  );
-}
-
 // default options
 options = {
   pinNotes: false,

src/scripts/listeners.ts

@@ -0,0 +1,29 @@
+import {PRODUCTION} from "../constants";
+import {assignLockBehavior} from "./options/lock";
+
+export function addGlobalListeners() {
+  PRODUCTION && registerServiceWorker();
+  PRODUCTION && addInstallationPrompt();
+  assignLockBehavior();
+}
+
+function registerServiceWorker() {
+  "serviceWorker" in navigator &&
+    window.addEventListener("load", () => {
+      navigator.serviceWorker.register("../../sw.js").catch(err => {
+        console.error("ServiceWorker registration failed: ", err);
+      });
+    });
+}
+
+function addInstallationPrompt() {
+  window.addEventListener(
+    "beforeinstallprompt",
+    async event => {
+      event.preventDefault();
+      const Installation = await import("../../modules/dynamic/installation.js");
+      Installation.init(event);
+    },
+    {once: true}
+  );
+}

src/scripts/options/lock.ts

@@ -0,0 +1,56 @@
+import {store} from "../../utils/shorthands";
+
+export function assignLockBehavior() {
+  const $lockable = document.querySelectorAll("[data-locked]");
+  $lockable.forEach($lockableEl => {
+    $lockableEl.addEventListener("mouseover", showTooltip);
+    $lockableEl.on("click", toggleLock);
+  });
+}
+
+function toggleLock(this: Element) {
+  const id = this.id.slice(5);
+  const isLocked = this.className === "icon-lock";
+  const toggle = isLocked ? unlock : lock;
+  toggle(id);
+}
+
+const lockMessage = "Click to lock the option and always use the current value on new map generation";
+const unlockMessage = "Click to unlock the option and allow it to be randomized on new map generation";
+
+function showTooltip(this: Element, event: Event) {
+  event.stopPropagation();
+  const isLocked = this.className === "icon-lock";
+  const message = isLocked ? unlockMessage : lockMessage;
+  tip(message);
+}
+
+// lock option from regeneration on page refresh
+export function lock(id: string) {
+  const $input = document.querySelector('[data-stored="' + id + '"]');
+  if ($input && $input instanceof HTMLInputElement === false) {
+    store(id, ($input as HTMLInputElement).value);
+  }
+
+  const $lock = document.getElementById("lock_" + id);
+  if ($lock) {
+    $lock.dataset.locked = "1";
+    $lock.className = "icon-lock";
+  }
+}
+
+// unlock option
+function unlock(id: string) {
+  localStorage.removeItem(id);
+  const $lock = document.getElementById("lock_" + id);
+  if ($lock) {
+    $lock.dataset.locked = "0";
+    $lock.className = "icon-lock-open";
+  }
+}
+
+// check if option is locked
+export function locked(id: string) {
+  const $lock = document.getElementById("lock_" + id);
+  return Boolean($lock && $lock.dataset.locked === "1");
+}

src/utils/shorthands.ts

@@ -7,3 +7,11 @@ Node.prototype.on = function (name, fn, options) {
 Node.prototype.off = function (name, fn) {
   this.removeEventListener(name, fn);
 };
+
+export function stored(key: string) {
+  return localStorage.getItem(key) || null;
+}
+
+export function store(key: string, value: string) {
+  return localStorage.setItem(key, value);
+}