reorganize code

.eslintrc.js

@@ -10,5 +10,6 @@ module.exports = {
         "sourceType": "module",
     },
     "rules": {
+        "no-prototype-builtins": false,
     }
 };

src/js/HKCheckCompletion.js

@@ -5,6 +5,18 @@
 import HK from "./hk-database.js";
 import MAP from "./hk-dictionary.js";
 
+/* ----------------- Helper functions --------------------------------------- */
+
+import {
+    CheckboxHintsToggle,
+    CheckboxSpoilersToggle,
+    StorageAvailable
+} from "./page-functions.js";
+
+import {
+    ObjectLength
+} from "./hk-functions.js";
+
 // ---------------- Load image files (necessary for Webpack) ----------------- //
 
 import HEALTH_MASK_IMAGE from "../img/health-mask.png";
@@ -1257,21 +1269,6 @@ function HKReadTextArea(textAreaId = "") {
     }
 }
 
-/**
- * Checks the length of a JavaScript Object like Array.length
- * @param {object} object JavaScript Object
- * @return {number} length of the Object
- */
-function ObjectLength(object) {
-    let length = 0;
-    for (let key in object) {
-        if (object.hasOwnProperty(key)) {
-            ++length;
-        }
-    }
-    return length;
-}
-
 /**
  * Populate all HTML with given ID and their initial data set as false (used at DOM load)
  * @param {object} divIdObj JavaScript Object containing all HTML IDs to populate
@@ -1364,121 +1361,6 @@ function InitialHTMLPopulate(divIdObj) {
     CheckboxSpoilersToggle();
 }
 
-/**
- * Toggles display of "hk-hints". On click with no parameters or on demand when called with a parameter
- * @param {string} param "hide", "show" or none (optional)
- */
-function CheckboxHintsToggle(param = "none") {
-    let checkboxId = document.getElementById("checkbox-hints");
-
-    switch (param) {
-        case "hide":
-            document.getElementById("hk-hints").classList.add("hidden");
-            checkboxId.value = "hints-off";
-            checkboxId.checked = false;
-
-            // remember this choice for subsequent page visits and browser restarts
-            if (StorageAvailable('localStorage')) {
-                localStorage.setItem("hkCheckboxHints", "unchecked");
-            }
-            break;
-        case "show":
-            document.getElementById("hk-hints").classList.remove("hidden");
-            checkboxId.value = "hints-on";
-            checkboxId.checked = true;
-
-            // remember this choice for subsequent page visits and browser restarts
-            if (StorageAvailable('localStorage')) {
-                localStorage.setItem("hkCheckboxHints", "checked");
-            }
-            break;
-        default:
-            // This runs when the checkbox is not checked
-            if (checkboxId.checked === false) {
-                document.getElementById("hk-hints").classList.add("hidden");
-                checkboxId.value = "hints-off";
-
-                // remember this choice for subsequent page visits and browser restarts
-                if (StorageAvailable('localStorage')) {
-                    localStorage.setItem("hkCheckboxHints", "unchecked");
-                }
-            }
-            // This runs when the checkbox is checked
-            else {
-                document.getElementById("hk-hints").classList.remove("hidden");
-                checkboxId.value = "hints-on";
-
-                // remember this choice for subsequent page visits and browser restarts
-                if (StorageAvailable('localStorage')) {
-                    localStorage.setItem("hkCheckboxHints", "checked");
-                }
-            }
-    }
-}
-
-/**
- * Toggles display of ".spoiler-span" class. On click with no parameters or on demand when called with a parameter
- * @param {string} param "hide", "show" or none (optional)
- */
-function CheckboxSpoilersToggle(param = "none") {
-    let checkboxId = document.getElementById("checkbox-spoilers");
-    let allClassElements = document.querySelectorAll(".spoiler-span");
-    let length = allClassElements.length;
-
-    switch (param) {
-        case "hide":
-            for (let i = 0; i < length; i++) {
-                allClassElements[i].classList.add("hidden");
-            }
-            checkboxId.value = "spoilers-off";
-            checkboxId.checked = false;
-
-            // remember this choice for subsequent page visits and browser restarts
-            if (StorageAvailable('localStorage')) {
-                localStorage.setItem("hkCheckboxSpoilers", "unchecked");
-            }
-            break;
-        case "show":
-            for (let i = 0; i < length; i++) {
-                allClassElements[i].classList.remove("hidden");
-            }
-            checkboxId.value = "spoilers-on";
-            checkboxId.checked = true;
-
-            // remember this choice for subsequent page visits and browser restarts
-            if (StorageAvailable('localStorage')) {
-                localStorage.setItem("hkCheckboxSpoilers", "checked");
-            }
-            break;
-        default:
-            // This runs when the checkbox is not checked
-            if (checkboxId.checked === false) {
-                for (let i = 0; i < length; i++) {
-                    allClassElements[i].classList.add("hidden");
-                }
-                checkboxId.value = "spoilers-off";
-
-                // remember this choice for subsequent page visits and browser restarts
-                if (StorageAvailable('localStorage')) {
-                    localStorage.setItem("hkCheckboxSpoilers", "unchecked");
-                }
-                break;
-            }
-            // This runs when the checkbox is checked
-            else {
-                for (let i = 0; i < length; i++) {
-                    allClassElements[i].classList.remove("hidden");
-                }
-                checkboxId.value = "spoilers-on";
-
-                // remember this choice for subsequent page visits and browser restarts
-                if (StorageAvailable('localStorage')) {
-                    localStorage.setItem("hkCheckboxSpoilers", "checked");
-                }
-            }
-    }
-}
-
 /**
  * Zero-fill all "percent" properties in the JSON Object (reset to default)
  * @param {object} jsObj object containing the "percent" properties to be reset to 0
@@ -1540,39 +1422,6 @@ function TranslateMapName(mapCode, dictionary = MAP) {
     return translation;
 }
 
-/**
- * Detects whether Storage is both supported and available.
- * MDN WebDocs https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#feature-detecting_localstorage
- * @param {Storage} type type of storage. Ex. "localStorage" or "sessionStorage"
- * @returns {Boolean}
- */
-function StorageAvailable(type) {
-    var storage;
-    try {
-        storage = window[type];
-        var x = '__storage_test__';
-        storage.setItem(x, x);
-        storage.removeItem(x);
-        return true;
-    } catch (e) {
-        return e instanceof DOMException && (
-                // everything except Firefox
-                e.code === 22 ||
-                // Firefox
-                e.code === 1014 ||
-                // test name field too, because code might not be present
-                // everything except Firefox
-                e.name === 'QuotaExceededError' ||
-                // Firefox
-                e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
-            // acknowledge QuotaExceededError only if there's something already stored
-            (storage && storage.length !== 0);
-    }
-}
-
-// Make functions global so they can be used on click and change events (for Webpack)
-// window.InitialHTMLPopulate = InitialHTMLPopulate;
-
 // Populate HTML at load (before img and css)
 document.addEventListener("DOMContentLoaded", () => {
     InitialHTMLPopulate(HK.DIV_ID);
@@ -1593,10 +1442,6 @@ document.getElementById("save-area-read").addEventListener("click", () => {
     HKReadTextArea("save-area");
 }, false);
 
-// Checkboxes functions
-document.getElementById("checkbox-hints").addEventListener("click", CheckboxHintsToggle, false);
-document.getElementById("checkbox-spoilers").addEventListener("click", CheckboxSpoilersToggle, false);
-
 export {
     // to use in LoadSaveFile.js for auto-analyzing file after decoding
     HKReadTextArea

src/js/hk-functions.js

@@ -0,0 +1,20 @@
+/**
+ * Checks the length of a JavaScript Object like Array.length
+ * @param {object} object JavaScript Object
+ * @return {number} length of the Object
+ */
+function ObjectLength(object) {
+    let length = 0;
+    for (let key in object) {
+        if (object.hasOwnProperty(key)) {
+            ++length;
+        }
+    }
+    return length;
+}
+
+/* ------------------------- Exports ------------------------------- */
+
+export {
+    ObjectLength
+};

src/js/page-functions.js

@@ -38,6 +38,153 @@ function TogglePageScrollElement(root, element, ratio) {
     }
 }
 
+/**
+ * Toggles display of "hk-hints". On click with no parameters or on demand when called with a parameter
+ * @param {string} param "hide", "show" or none (optional)
+ */
+function CheckboxHintsToggle(param = "none") {
+    let checkboxId = document.getElementById("checkbox-hints");
+
+    switch (param) {
+        case "hide":
+            document.getElementById("hk-hints").classList.add("hidden");
+            checkboxId.value = "hints-off";
+            checkboxId.checked = false;
+
+            // remember this choice for subsequent page visits and browser restarts
+            if (StorageAvailable('localStorage')) {
+                localStorage.setItem("hkCheckboxHints", "unchecked");
+            }
+            break;
+        case "show":
+            document.getElementById("hk-hints").classList.remove("hidden");
+            checkboxId.value = "hints-on";
+            checkboxId.checked = true;
+
+            // remember this choice for subsequent page visits and browser restarts
+            if (StorageAvailable('localStorage')) {
+                localStorage.setItem("hkCheckboxHints", "checked");
+            }
+            break;
+        default:
+            // This runs when the checkbox is not checked
+            if (checkboxId.checked === false) {
+                document.getElementById("hk-hints").classList.add("hidden");
+                checkboxId.value = "hints-off";
+
+                // remember this choice for subsequent page visits and browser restarts
+                if (StorageAvailable('localStorage')) {
+                    localStorage.setItem("hkCheckboxHints", "unchecked");
+                }
+            }
+            // This runs when the checkbox is checked
+            else {
+                document.getElementById("hk-hints").classList.remove("hidden");
+                checkboxId.value = "hints-on";
+
+                // remember this choice for subsequent page visits and browser restarts
+                if (StorageAvailable('localStorage')) {
+                    localStorage.setItem("hkCheckboxHints", "checked");
+                }
+            }
+    }
+}
+
+/**
+ * Toggles display of ".spoiler-span" class. On click with no parameters or on demand when called with a parameter
+ * @param {string} param "hide", "show" or none (optional)
+ */
+function CheckboxSpoilersToggle(param = "none") {
+    let checkboxId = document.getElementById("checkbox-spoilers");
+    let allClassElements = document.querySelectorAll(".spoiler-span");
+    let length = allClassElements.length;
+
+    switch (param) {
+        case "hide":
+            for (let i = 0; i < length; i++) {
+                allClassElements[i].classList.add("hidden");
+            }
+            checkboxId.value = "spoilers-off";
+            checkboxId.checked = false;
+
+            // remember this choice for subsequent page visits and browser restarts
+            if (StorageAvailable('localStorage')) {
+                localStorage.setItem("hkCheckboxSpoilers", "unchecked");
+            }
+            break;
+        case "show":
+            for (let i = 0; i < length; i++) {
+                allClassElements[i].classList.remove("hidden");
+            }
+            checkboxId.value = "spoilers-on";
+            checkboxId.checked = true;
+
+            // remember this choice for subsequent page visits and browser restarts
+            if (StorageAvailable('localStorage')) {
+                localStorage.setItem("hkCheckboxSpoilers", "checked");
+            }
+            break;
+        default:
+            // This runs when the checkbox is not checked
+            if (checkboxId.checked === false) {
+                for (let i = 0; i < length; i++) {
+                    allClassElements[i].classList.add("hidden");
+                }
+                checkboxId.value = "spoilers-off";
+
+                // remember this choice for subsequent page visits and browser restarts
+                if (StorageAvailable('localStorage')) {
+                    localStorage.setItem("hkCheckboxSpoilers", "unchecked");
+                }
+                break;
+            }
+            // This runs when the checkbox is checked
+            else {
+                for (let i = 0; i < length; i++) {
+                    allClassElements[i].classList.remove("hidden");
+                }
+                checkboxId.value = "spoilers-on";
+
+                // remember this choice for subsequent page visits and browser restarts
+                if (StorageAvailable('localStorage')) {
+                    localStorage.setItem("hkCheckboxSpoilers", "checked");
+                }
+            }
+    }
+}
+
+/**
+ * Detects whether Storage is both supported and available.
+ * MDN WebDocs https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#feature-detecting_localstorage
+ * @param {Storage} type type of storage. Ex. "localStorage" or "sessionStorage"
+ * @returns {Boolean}
+ */
+function StorageAvailable(type) {
+    var storage;
+    try {
+        storage = window[type];
+        var x = '__storage_test__';
+        storage.setItem(x, x);
+        storage.removeItem(x);
+        return true;
+    } catch (e) {
+        return e instanceof DOMException && (
+                // everything except Firefox
+                e.code === 22 ||
+                // Firefox
+                e.code === 1014 ||
+                // test name field too, because code might not be present
+                // everything except Firefox
+                e.name === 'QuotaExceededError' ||
+                // Firefox
+                e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
+            // acknowledge QuotaExceededError only if there's something already stored
+            (storage && storage.length !== 0);
+    }
+}
+
+/* ----------------------- Event Listeners -------------------------- */
+
 document.addEventListener("scroll", () => {
     TogglePageScrollElement(
         /* the document element root (<html>) */
@@ -50,4 +197,16 @@ document.addEventListener("scroll", () => {
 
 SCROLL_BUTTON.addEventListener("click", () => {
     ScrollToElement(ROOT);
-});
+});
+
+// Checkboxes functions
+document.getElementById("checkbox-hints").addEventListener("click", CheckboxHintsToggle, false);
+document.getElementById("checkbox-spoilers").addEventListener("click", CheckboxSpoilersToggle, false);
+
+/* ------------------------- Exports ------------------------------- */
+
+export {
+    CheckboxHintsToggle,
+    CheckboxSpoilersToggle,
+    StorageAvailable
+};