Update IbanGenerator and UUIDGenerator styles, Updated standalone style

Update extra.css, nibblepoker.min.css, and 2 more files...
Updated and fixed IbanGenerator tool
2025-08-25 00:00:15 +02:00 · 2025-08-24 18:55:54 +02:00
9 changed files with 108 additions and 47 deletions
--- a/data/articles/purebasic-structure-on-stack.md
+++ b/data/articles/purebasic-structure-on-stack.md
--- a/data/strings/en/iban-generator.yml
+++ b/data/strings/en/iban-generator.yml
@@ -9,12 +9,18 @@ meta.description.light: "Web application that allows you to generate IBANs in bu
 country.label: "Country"

 option.count: "IBAN Count"
-option.human.readable: "Format for readability"
-option.prefer.numbers: "Prefer numbers over letters"
 option.for.each: "Generate <i>X</i> for each country"
 option.sepa.enable: "Enable SEPA countries"
 option.non-sepa.enable: "Enable non-SEPA countries"

+option.prefer.random: "Do not prefer letters nor numbers"
+option.prefer.numbers: "Prefer numbers over letters"
+option.prefer.letters: "Prefer letters over numbers"
+
+option.human.format.none: "No formatting"
+option.human.format.standard: "Use recommended spacing"
+option.human.format.4by4: "Use 4 character-wide spacing"
+
 license.1: "The code for this project is released in the public domain."
 license.2: "The original source code can be found on <a href=\"https://github.com/aziascreations/Web-NibblePoker\">GitHub</a>."
 license.3: "Data from Swift's 
--- a/data/strings/fr/iban-generator.yml
+++ b/data/strings/fr/iban-generator.yml
@@ -9,12 +9,18 @@ meta.description.light: "Application web qui vous permet de générer des IBANs
 country.label: "Pays"

 option.count: "Nombre d'IBAN"
-option.human.readable: "Formatter pour lecture"
-option.prefer.numbers: "Favoriser les nombres aux lettres"
 option.for.each: "Générer <i>X</i> pour chaque pays"
 option.sepa.enable: "Activer les pays SEPA"
 option.non-sepa.enable: "Activer les pays non-SEPA"

+option.prefer.random: "Pas de favorisation des lettres ou nombres"
+option.prefer.numbers: "Favoriser les nombres aux lettres"
+option.prefer.letters: "Favoriser les lettres aux nombres"
+
+option.human.format.none: "Aucun formatage"
+option.human.format.standard: "Utiliser le format standard des pays"
+option.human.format.4by4: "Formater en segments de 4 caractères"
+
 license.1: "Le code de ce projet est publié dans le domaine public."
 license.2: "Le code source original peut être trouvé sur <a href=\"https://github.com/aziascreations/Web-NibblePoker\">GitHub</a>."
 license.3: "Les données du 
--- a/static/resources/NibblePoker/applets/iban-generator/iban-generator.mjs
+++ b/static/resources/NibblePoker/applets/iban-generator/iban-generator.mjs
@@ -30,10 +30,20 @@ import {initCore} from "../../js/nibblepoker-core.mjs";

    /** @type {HTMLInputElement} */
    const eOptionCount = document.querySelector("input#iban-generator-option-count");
-    /** @type {HTMLInputElement} */
-    const eOptionPrettyPrint = document.querySelector("input#iban-generator-option-pretty");
+
+    ///** @type {HTMLInputElement} */
+    //const eOptionPreferRandom = document.querySelector("input#iban-generator-option-prefer-random");
    /** @type {HTMLInputElement} */
    const eOptionPreferNumbers = document.querySelector("input#iban-generator-option-prefer-numbers");
+    /** @type {HTMLInputElement} */
+    const eOptionPreferLetters = document.querySelector("input#iban-generator-option-prefer-letters");
+
+    /** @type {HTMLInputElement} */
+    const eOptionFormatNone = document.querySelector("input#iban-generator-option-format-none");
+    /** @type {HTMLInputElement} */
+    const eOptionFormatStandard = document.querySelector("input#iban-generator-option-format-standard");
+    /** @type {HTMLInputElement} */
+    const eOptionFormat4By4 = document.querySelector("input#iban-generator-option-format-4by4");

    /** @type {HTMLElement} */
    const eGenerateButton = document.querySelector("#iban-generator-generate");
@@ -75,14 +85,14 @@ import {initCore} from "../../js/nibblepoker-core.mjs";

    /** @returns {number} */
    function getDesiredCount() {
-        return getInputCount(eOptionCount, 1, 1000);
+        return getInputCount(eOptionCount, 1, 10000);
    }

    function changeDesiredCount(difference = 0) {
        if(difference !== 0) {
-            eOptionCount.value = getDesiredCount(eOptionCount, 1, 1000) + difference;
+            eOptionCount.value = getDesiredCount(eOptionCount, 1, 10000) + difference;
        }
-        eOptionCount.value = getDesiredCount(eOptionCount, 1, 1000);
+        eOptionCount.value = getDesiredCount(eOptionCount, 1, 10000);
    }

    window.onload = function () {
@@ -108,12 +118,28 @@ import {initCore} from "../../js/nibblepoker-core.mjs";
            let desiredCount = getDesiredCount();

            let preferNumbers = eOptionPreferNumbers.checked;
-            let prettyIban = eOptionPrettyPrint.checked;
+            let preferLetters = eOptionPreferLetters.checked;
+
+            let ibanFormat = (
+                eOptionFormatNone.checked ? 0 : (
+                    eOptionFormatStandard.checked ? 1 : (
+                        eOptionFormat4By4.checked ? 2 : 0
+                    )
+                )
+            );

            /** @type {IbanSpecification[]} */
            let targetSpecs;
            if(eOptionForEach.checked) {
                targetSpecs = Object.values(countriesSpecs);
+
+                // BUGFIX: Removing unwanted specs.
+                if(!eOptionEnableSepa.checked) {
+                    targetSpecs = targetSpecs.filter(ibanSpec => !ibanSpec.isSepa);
+                }
+                if(!eOptionEnableNonSepa.checked) {
+                    targetSpecs = targetSpecs.filter(ibanSpec => ibanSpec.isSepa);
+                }
            } else {
                targetSpecs = [countriesSpecs[eOptionCountry.value]];
            }
@@ -123,15 +149,27 @@ import {initCore} from "../../js/nibblepoker-core.mjs";
                    return;
                }
                for(let i = 0; i < desiredCount; i++) {
-                    if(prettyIban) {
+                    if(ibanFormat === 1) {
+                        // standard
                        lastIBANs.push(
                            spec.getFormattedIban(
-                                new StandardIban(spec.countryCode, spec.generateRandomBban(preferNumbers), spec).toString()
+                                new StandardIban(spec.countryCode, spec.generateRandomBban(preferNumbers, preferLetters), spec)
+                                    .toString()
                            )
                        );
-                    } else {
+                    } else if(ibanFormat === 2) {
+                        // 4-by-4
                        lastIBANs.push(
-                            new StandardIban(spec.countryCode, spec.generateRandomBban(preferNumbers), spec).toString()
+                            new StandardIban(spec.countryCode, spec.generateRandomBban(preferNumbers, preferLetters), spec)
+                                .toString()
+                                .match(/.{1,4}/g)
+                                .join(' ')
+                        );
+                    } else {
+                        // none
+                        lastIBANs.push(
+                            new StandardIban(spec.countryCode, spec.generateRandomBban(preferNumbers, preferLetters), spec)
+                                .toString()
                        );
                    }
                }
--- a/static/resources/NibblePoker/css/extra.css
+++ b/static/resources/NibblePoker/css/extra.css
@@ -15,22 +15,6 @@ input[type=file].np-file-input-drop {
    cursor: pointer;
 }

-/* Nicer checkboxes, move to CSS 8 */
-input[type=checkbox] {
-    text-align: center;
-    padding: 0;
-
-    &:before {
-        content: "✘";
-    }
-
-    &:checked {
-        &:before {
-            content: "✔";
-        }
-    }
-}
-
 /* Top margin trimmer for heading renderer */


--- a/static/resources/NibblePoker/libs/iban.mjs
+++ b/static/resources/NibblePoker/libs/iban.mjs
@@ -269,7 +269,7 @@ export class IbanSpecification {
        return iban.match(/.{1,4}/g).join(' ');
    }

-    generateRandomBban(preferNumbers = false) {
+    generateRandomBban(preferNumbers = false, preferLetters = false) {
        let returnedBban = "";
        let patternParts = ("_" + this.bbanFormat + "0").split("!");

@@ -290,9 +290,13 @@ export class IbanSpecification {
                case 'C':
                    if(preferNumbers) {
                        elementChoices = charsN;
+                    } else {
+                        if(preferLetters) {
+                             elementChoices = charsA;
                        } else {
                             elementChoices = charsC;
                        }
+                    }
                    break;
                case 'a':
                case 'A':
--- a/static/resources/Standalone/nibblepoker.min.css
+++ b/static/resources/Standalone/nibblepoker.min.css
--- a/templates/applets/iban-generator.jinja
+++ b/templates/applets/iban-generator.jinja
@@ -2,17 +2,12 @@
 <!-- {{ render_h2(l10n("disclaimer.title", applet_data.id, user_lang)) }} -->

 <label for="iban-generator-option-enable-sepa" class="mr-xxs">{{ l10n("option.sepa.enable", "iban-generator", user_lang) }}:</label>
-<input id="iban-generator-option-enable-sepa" class="r-m border" type="checkbox" checked>
+<input id="iban-generator-option-enable-sepa" class="r-m border cb-pretty" type="checkbox" checked>

 <br>

 <label for="iban-generator-option-enable-non-sepa" class="mr-xxs">{{ l10n("option.non-sepa.enable", "iban-generator", user_lang) }}:</label>
-<input id="iban-generator-option-enable-non-sepa" class="r-m border" type="checkbox" checked>
-
-<br>
-
-<label for="iban-generator-option-foreach" class="mr-xxs">{{ l10n("option.for.each", "iban-generator", user_lang) }}:</label>
-<input id="iban-generator-option-foreach" class="r-m border" type="checkbox">
+<input id="iban-generator-option-enable-non-sepa" class="r-m border cb-pretty" type="checkbox" checked>

 <hr class="subtle">

@@ -113,17 +108,45 @@
 <br>

 <label for="iban-generator-option-count" class="mr-xs">{{ l10n("option.count", "iban-generator", user_lang) }}:</label>
-<input id="iban-generator-option-count" class="p-xxs border r-s" type="number" value="4" min="1" max="1000">
+<input id="iban-generator-option-count" class="p-xxs border r-s" type="number" value="4" min="1" max="10000">

 <br>

-<label for="iban-generator-option-pretty" class="mr-xxs">{{ l10n("option.human.readable", "iban-generator", user_lang) }}:</label>
-<input id="iban-generator-option-pretty" class="r-m border" type="checkbox" checked>
+<label for="iban-generator-option-foreach" class="mr-xxs">{{ l10n("option.for.each", "iban-generator", user_lang) }}:</label>
+<input id="iban-generator-option-foreach" class="r-m border cb-pretty" type="checkbox">
+
+<hr class="subtle">
+
+
+<input type="radio" id="iban-generator-option-prefer-random" name="iban_charset" value="0" class="radio-solid border mr-xxs radio-unchecked-subtle" checked>
+<label for="iban-generator-option-prefer-random">{{ l10n("option.prefer.random", "iban-generator", user_lang) }}</label>

 <br>

-<label for="iban-generator-option-prefer-numbers" class="mr-xxs">{{ l10n("option.prefer.numbers", "iban-generator", user_lang) }}:</label>
-<input id="iban-generator-option-prefer-numbers" class="r-m border" type="checkbox">
+<input type="radio" id="iban-generator-option-prefer-numbers" name="iban_charset" value="0" class="radio-solid border mr-xxs radio-unchecked-subtle">
+<label for="iban-generator-option-prefer-numbers">{{ l10n("option.prefer.numbers", "iban-generator", user_lang) }}</label>
+
+<br>
+
+<input type="radio" id="iban-generator-option-prefer-letters" name="iban_charset" value="0" class="radio-solid border mr-xxs radio-unchecked-subtle">
+<label for="iban-generator-option-prefer-letters">{{ l10n("option.prefer.letters", "iban-generator", user_lang) }}</label>
+
+<hr class="subtle">
+
+
+<input type="radio" id="iban-generator-option-format-none" name="iban_format" value="none" class="radio-solid border mr-xxs radio-unchecked-subtle" checked>
+<label for="iban-generator-option-format-none">{{ l10n("option.human.format.none", "iban-generator", user_lang) }}</label>
+
+<br>
+
+<input type="radio" id="iban-generator-option-format-standard" name="iban_format" value="standard" class="radio-solid border mr-xxs radio-unchecked-subtle">
+<label for="iban-generator-option-format-standard">{{ l10n("option.human.format.standard", "iban-generator", user_lang) }}</label>
+
+<br>
+
+<input type="radio" id="iban-generator-option-format-4by4" name="iban_format" value="4by4" class="radio-solid border mr-xxs radio-unchecked-subtle">
+<label for="iban-generator-option-format-4by4">{{ l10n("option.human.format.4by4", "iban-generator", user_lang) }}</label>
+


 <hr class="subtle">
--- a/templates/applets/uuid-generator.jinja
+++ b/templates/applets/uuid-generator.jinja
@@ -12,12 +12,12 @@
 <br>

 <label for="uuid-generator-option-hyphens" class="mr-xxs">{{ l10n("option.hyphen", "uuid-generator", user_lang) }}:</label>
-<input id="uuid-generator-option-hyphens" class="r-m border" type="checkbox" checked>
+<input id="uuid-generator-option-hyphens" class="r-m border cb-pretty" type="checkbox" checked>

 <br>

 <label for="uuid-generator-option-guid-brackets" class="mr-xxs">{{ l10n("option.guid_brackets", "uuid-generator", user_lang) }}:</label>
-<input id="uuid-generator-option-guid-brackets" class="r-m border" type="checkbox">
+<input id="uuid-generator-option-guid-brackets" class="r-m border cb-pretty" type="checkbox">

 <hr class="subtle">
Author	SHA1	Message	Date
Herwin Bozet	a20b45d86e	Update IbanGenerator and UUIDGenerator styles, Updated standalone style Update extra.css, nibblepoker.min.css, and 2 more files...	2025-08-25 00:00:15 +02:00
Herwin Bozet	690b3179ed	Updated and fixed IbanGenerator tool Update purebasic-structure-on-stack.md, iban-generator.yml, and 4 more files...	2025-08-24 18:55:54 +02:00