Moved applet-core functionalities to individual libs, Updated UUID and IBAN generators

Update iban-generator.mjs, uuid-generator.mjs, and 4 more files...

static/resources/NibblePoker/applets/iban-generator/iban-generator.mjs

@@ -10,11 +10,93 @@ import {
     StandardIban
 } from "../../libs/iban.mjs";
 
-//console.log(getIbanChecksumFromParts("CH", "002300A1023502601"));
+import {getInputCount} from "../../libs/input-utils.mjs"
 
-console.log(parseStandardIban("LU220108783391941421"));
+import {downloadStringAsFile} from "../../libs/download-helper.mjs";
 
-console.log(new StandardIban("LU", "0108783391941421", countriesSpecs.LU).toString());
+import {initCore} from "../../js/nibblepoker-core.mjs";
-console.log(new StandardIban("LU", "123456ABCDEFGHIL", countriesSpecs.LU).toString());
 
-console.log(Object.keys(countriesSpecs));
+// Tool-centric stuff
+{
+    initCore();
+
+    /** @type {HTMLInputElement} */
+    const eOptionEnableSepa = document.querySelector("input#iban-generator-option-enable-sepa");
+    /** @type {HTMLInputElement} */
+    const eOptionEnableNonSepa = document.querySelector("input#iban-generator-option-enable-non-sepa");
+    /** @type {HTMLInputElement} */
+    const eOptionForEach = document.querySelector("input#iban-generator-option-foreach");
+
+    /** @type {HTMLSelectElement} */
+    const eOptionCountry = document.querySelector("select#iban-generator-option-country");
+
+    /** @type {HTMLInputElement} */
+    const eOptionCount = document.querySelector("input#iban-generator-option-count");
+    /** @type {HTMLInputElement} */
+    const eOptionPrettyPrint = document.querySelector("input#iban-generator-option-pretty");
+
+    /** @type {HTMLElement} */
+    const eGenerateButton = document.querySelector("#iban-generator-generate");
+    /** @type {HTMLElement} */
+    const eDownloadRawButton = document.querySelector("#iban-generator-download-raw");
+    /** @type {HTMLElement} */
+    const eDownloadJsonButton = document.querySelector("#iban-generator-download-json");
+    /** @type {HTMLElement} */
+    const eDownloadYamlButton = document.querySelector("#iban-generator-download-yaml");
+
+    /** @type {HTMLTextAreaElement} */
+    const ePreviewTextArea = document.querySelector("textarea#iban-generator-preview");
+
+    let lastIBANs = [];
+
+    /** @returns {number} */
+    function getDesiredCount() {
+        return getInputCount(eOptionCount, 1, 1000);
+    }
+
+    function changeDesiredCount(difference = 0) {
+        if(difference !== 0) {
+            eOptionCount.value = getDesiredCount(eOptionCount, 1, 1000) + difference;
+        }
+        eOptionCount.value = getDesiredCount(eOptionCount, 1, 1000);
+    }
+
+    window.onload = function () {
+
+        // Count option
+        eOptionCount.addEventListener("change", function() {
+            changeDesiredCount(0);
+        });
+        eOptionCount.addEventListener("mousewheel", function(e) {
+            // Handling wheel scroll on count field.
+            if(e.wheelDelta < 0) {
+                changeDesiredCount(-1);
+            } else {
+                changeDesiredCount(1);
+            }
+        });
+
+        // Download buttons
+        eDownloadRawButton.addEventListener("click", function() {
+            if (lastIBANs.length <= 0) {
+                return;
+            }
+            downloadStringAsFile(lastIBANs.join("\n"), "uuids.txt", "text/plain");
+        });
+        eDownloadJsonButton.addEventListener("click", function() {
+            if (lastIBANs.length <= 0) {
+                return;
+            }
+            downloadStringAsFile(JSON.stringify(lastIBANs, null, 4), "uuids.json", "application/json");
+        });
+        eDownloadYamlButton.addEventListener("click", function() {
+            if (lastIBANs.length <= 0) {
+                return;
+            }
+            downloadStringAsFile("- \"" + lastIBANs.join("\"\n- \"") + "\"", "uuids.yaml", "text/yaml");
+        });
+    };
+
+    console.log(new StandardIban("LU", "0108783391941421", countriesSpecs.LU).toString());
+    console.log(new StandardIban("LU", "123456ABCDEFGHIL", countriesSpecs.LU).toString());
+}

static/resources/NibblePoker/applets/uuid-generator/uuid-generator.mjs

@@ -1,20 +1,14 @@
-/**
+import {getInputCount} from "../../libs/input-utils.mjs";
- * Generates a random UUID4 and returns its string representation
+
- * @returns {`${string}-${string}-${string}-${string}-${string}`}
+import {generateUUID4} from "../../libs/uuid.mjs";
- */
+
-export function generateUUID4(addHyphens, addGuidBrackets) {
+import {downloadStringAsFile} from "../../libs/download-helper.mjs";
-    let uuid4 = crypto.randomUUID();
+import {initCore} from "../../js/nibblepoker-core.mjs";
-    if(!addHyphens) {
-        uuid4 = uuid4.replace(/-/g, "");
-    }
-    if(addGuidBrackets) {
-        uuid4 = "{" + uuid4 + "}";
-    }
-    return uuid4;
-}
 
 // Tool-centric stuff
 {
+    initCore();
+
     /** @type {HTMLSelectElement} */
     const eOptionTypeSelect = document.querySelector("select#uuid-generator-option-type");
 
@@ -42,22 +36,7 @@ export function generateUUID4(addHyphens, addGuidBrackets) {
 
     /** @returns {number} */
     function getDesiredCount() {
-        let desiredCount = null;
+        return getInputCount(eOptionCountInput, 1, 1000);
-        try {
-            desiredCount = parseInt(eOptionCountInput.value);
-        } catch (e) {
-            console.error(e);
-        }
-        if(desiredCount === null) {
-            desiredCount = 1;
-        }
-        if(desiredCount < 1) {
-            desiredCount = 1;
-        }
-        if(desiredCount > 1000) {
-            desiredCount = 1000;
-        }
-        return desiredCount;
     }
 
     function changeDesiredCount(difference = 0) {
@@ -67,22 +46,6 @@ export function generateUUID4(addHyphens, addGuidBrackets) {
         eOptionCountInput.value = getDesiredCount();
     }
 
-
-    function downloadStringAsFile(content, filename, contentType) {
-        const blob = new Blob([content], { type: contentType });
-        const link = document.createElement('a');
-        const url = URL.createObjectURL(blob);
-
-        link.href = url;
-        link.download = filename;
-
-        document.body.appendChild(link);
-        link.click();
-
-        document.body.removeChild(link);
-        URL.revokeObjectURL(url);
-    }
-
     window.onload = function () {
         eGenerateButton.addEventListener("click", function() {
             ePreviewTextArea.value = "";
@@ -100,6 +63,8 @@ export function generateUUID4(addHyphens, addGuidBrackets) {
             }
             ePreviewTextArea.value = lastUUIDs.join("\n");
         });
+
+        // Count option
         eOptionCountInput.addEventListener("change", function() {
             changeDesiredCount(0);
         });
@@ -112,6 +77,7 @@ export function generateUUID4(addHyphens, addGuidBrackets) {
             }
         });
 
+        // Download buttons
         eDownloadRawButton.addEventListener("click", function() {
             if (lastUUIDs.length <= 0) {
                 return;

static/resources/NibblePoker/libs/download-helper.mjs

@@ -0,0 +1,18 @@
+// NibblePoker - Download Helpers
+// Author: Herwin Bozet (@NibblePoker)
+// License: Public Domain (This code, except for the data)
+
+export function downloadStringAsFile(content, filename, contentType) {
+    const blob = new Blob([content], { type: contentType });
+    const link = document.createElement('a');
+    const url = URL.createObjectURL(blob);
+
+    link.href = url;
+    link.download = filename;
+
+    document.body.appendChild(link);
+    link.click();
+
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+}

static/resources/NibblePoker/libs/input-utils.mjs

@@ -0,0 +1,36 @@
+// NibblePoker - HTML Input Utils
+// Author: Herwin Bozet (@NibblePoker)
+// License: Public Domain (This code)
+
+/**
+ * Retrieves the number from an `HTMLInputElement`
+ * @param eInput {HTMLInputElement} The `HTMLInputElement` from which the value will be retrieved.
+ * @param min {number|null} If given, sets a minimum the value can have when returned.
+ * @param max {number|null} If given, sets a maximum the value can have when returned.
+ * @returns {number} The value from the given `HTMLInputElement`, or `1` if no valid one was given.
+ */
+export function getInputCount(eInput, min = null, max = null) {
+    let desiredCount = null;
+    try {
+        desiredCount = parseInt(eInput.value);
+    } catch (e) {
+        console.error(e);
+    }
+
+    if (desiredCount === null) {
+        desiredCount = 1;
+    }
+
+    if (typeof min === 'number') {
+        if (desiredCount < min) {
+            desiredCount = min;
+        }
+    }
+    if (typeof max === 'number') {
+        if (desiredCount > max) {
+            desiredCount = max;
+        }
+    }
+
+    return desiredCount;
+}

static/resources/NibblePoker/libs/uuid.mjs

@@ -0,0 +1,14 @@
+/**
+ * Generates a random UUID4 and returns its string representation
+ * @returns {`${string}-${string}-${string}-${string}-${string}`}
+ */
+export function generateUUID4(addHyphens, addGuidBrackets) {
+    let uuid4 = crypto.randomUUID();
+    if(!addHyphens) {
+        uuid4 = uuid4.replace(/-/g, "");
+    }
+    if(addGuidBrackets) {
+        uuid4 = "{" + uuid4 + "}";
+    }
+    return uuid4;
+}

templates/applets/iban-generator.jinja

@@ -130,13 +130,13 @@
 <button class="p-xs r-s border b-light primary rr-0 br-0">
     <i class="fa-duotone fa-solid fa-download"></i>
 </button>
-<button id="iban-generator-generator-download-raw" class="p-xs r-s border b-light primary ml-0 r-0 br-0">
+<button id="iban-generator-download-raw" class="p-xs r-s border b-light primary ml-0 r-0 br-0">
     {{ l10n("format.raw", "commons", user_lang) }}
 </button>
-<button id="iban-generator-generator-download-json" class="p-xs r-s border b-light primary ml-0 r-0 br-0">
+<button id="iban-generator-download-json" class="p-xs r-s border b-light primary ml-0 r-0 br-0">
     {{ l10n("format.json", "commons", user_lang) }}
 </button>
-<button id="iban-generator-generator-download-yaml" class="p-xs r-s border b-light primary ml-0 rl-0">
+<button id="iban-generator-download-yaml" class="p-xs r-s border b-light primary ml-0 rl-0">
     {{ l10n("format.yaml", "commons", user_lang) }}
 </button>