From 6ad2b95410102a8637248d822b8c346d50e1c204 Mon Sep 17 00:00:00 2001
From: "Felix W. Dekker" <felix@fwdekker.com>
Date: Thu, 31 Oct 2019 16:58:13 +0100
Subject: [PATCH] Fix #1

---
 index.html | 78 +++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 75 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index c2c219b..d50dfe4 100644
--- a/index.html
+++ b/index.html
@@ -61,6 +61,15 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/big-integer/1.6.44/BigInteger.min.js"
             integrity="sha256-es+ex6Oj344uak+VnCPyaHY2nzQkqhr7ByWVQgdjATA=" crossorigin="anonymous"></script>
     <script>
+        const stringReplaceAt = function (str, index, replacement) {
+            return str.substr(0, index) + replacement + str.substr(index + replacement.length);
+        };
+
+        const stringReplaceAll = function (str, target, replacement) {
+            return str.split(target).join(replacement);
+        };
+
+
         class NumeralSystem {
             constructor(base, alphabet, caseSensitive) {
                 this.base = base;
@@ -78,7 +87,9 @@
             }
 
             filterBaseString(baseString) {
-                return baseString.replace(new RegExp("[^" + this.alphabet + "]"), "");
+                // Regex from https://stackoverflow.com/a/3561711/
+                const regexSafeAlphabet = this.alphabet.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+                return baseString.replace(new RegExp(`[^${regexSafeAlphabet}]`), "");
             }
         }
 
@@ -114,14 +125,75 @@
             }
         }
 
+        class Base64NumeralSystemInput extends NumeralSystemInput {
+            static defaultAlphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+            static dropdownOptions = {"Standard": ['+', '/'], "Filename": ['-', '_'], "IMAP": ['+', ',']};
+
+
+            constructor(name) {
+                super(name, new NumeralSystem(64, Base64NumeralSystemInput.defaultAlphabet, true));
+
+                this.dropdownLabel = document.createElement("label");
+                this.dropdownLabel.setAttribute("for", `${this.name}Dropdown`);
+                this.dropdownLabel.innerHTML = "Character set";
+                this.dropdownLabel.classList.add("label-inline");
+
+                this.dropdown = document.createElement("select");
+                this.dropdown.id = `${this.name}Dropdown`;
+                this.dropdown.onchange = () => {
+                    const selectedOption = Base64NumeralSystemInput.dropdownOptions[this.dropdown.value];
+                    this.setLastDigits(selectedOption[0], selectedOption[1]);
+                };
+
+                this.dropdownDiv = document.createElement("div");
+                this.dropdownDiv.classList.add("float-right");
+
+                this.options =
+                    Object.keys(Base64NumeralSystemInput.dropdownOptions).map(key => {
+                        const option = document.createElement("option");
+                        option.value = key;
+                        option.text = key + ": " + Base64NumeralSystemInput.dropdownOptions[key].join("");
+                        return option;
+                    });
+            }
+
+
+            setLastDigits(c62, c63) {
+                const oc62 = this.numeralSystem.alphabet[62];
+                const oc63 = this.numeralSystem.alphabet[63];
+
+                this.numeralSystem.alphabet =
+                    stringReplaceAt(stringReplaceAt(this.numeralSystem.alphabet, 62, c62), 63, c63);
+                this.textarea.value =
+                    stringReplaceAll(stringReplaceAll(this.textarea.value, oc62, c62), oc63, c63);
+            }
+
+            addToParent(parent) {
+                this.dropdownDiv.appendChild(this.dropdownLabel);
+                this.options.forEach(option => this.dropdown.appendChild(option));
+                this.dropdownDiv.appendChild(this.dropdown);
+                parent.appendChild(this.dropdownDiv);
+
+                parent.appendChild(this.label);
+                parent.appendChild(this.textarea);
+            }
+        }
+
 
         const inputs = [
             new NumeralSystemInput("Binary", new NumeralSystem(2, "01")),
             new NumeralSystemInput("Octal", new NumeralSystem(8, "01234567")),
             new NumeralSystemInput("Decimal", new NumeralSystem(10, "0123456789")),
             new NumeralSystemInput("Hexadecimal", new NumeralSystem(16, "0123456789abcdef", caseSensitive = false)),
-            new NumeralSystemInput("Base64", new NumeralSystem(64, "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/", caseSensitive = true)),
-            new NumeralSystemInput("ASCII", new NumeralSystem(256, new Array(256).fill(0).map((_, it) => String.fromCharCode(it)).join(""), caseSensitive = true)),
+            new Base64NumeralSystemInput("Base64"),
+            new NumeralSystemInput(
+                "ASCII",
+                new NumeralSystem(
+                    256,
+                    new Array(256).fill(0).map((_, it) => String.fromCharCode(it)).join(""),
+                    caseSensitive = true
+                )
+            ),
         ];
 
         const updateAllInputs = newValue => {