diff --git a/Gruntfile.js b/Gruntfile.js
index f506339..ee89b15 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -7,18 +7,21 @@ module.exports = grunt => {
default: ["dist/"],
},
copy: {
+ css: {
+ files: [{expand: true, cwd: "src/main/", src: "**/*.css", dest: "dist/", flatten: true}],
+ },
html: {
- files: [{expand: true, cwd: "src/main/", src: "**/*.html", dest: "dist/", flatten: true}]
+ files: [{expand: true, cwd: "src/main/", src: "**/*.html", dest: "dist/", flatten: true}],
},
},
focus: {
dev: {
- include: ["html", "js"],
+ include: ["css", "html", "js"],
},
},
replace: {
dev: {
- src: ["./dist/*.html", "./dist/*.js"],
+ src: ["./dist/**/*.html", "./dist/**/*.js"],
replacements: [
{
from: "%%VERSION_NUMBER%%",
@@ -28,7 +31,7 @@ module.exports = grunt => {
overwrite: true
},
deploy: {
- src: ["./dist/*.html", "./dist/*.js"],
+ src: ["./dist/**/*.html", "./dist/**/*.js"],
replacements: [
{
from: "%%VERSION_NUMBER%%",
@@ -39,6 +42,10 @@ module.exports = grunt => {
},
},
watch: {
+ css: {
+ files: ["src/main/**/*.css"],
+ tasks: ["copy:css"],
+ },
html: {
files: ["src/main/**/*.html"],
tasks: ["copy:html"],
@@ -88,6 +95,7 @@ module.exports = grunt => {
// Pre
"clean",
// Copy files
+ "copy:css",
"copy:html",
// Compile JS
"webpack:dev",
@@ -98,6 +106,7 @@ module.exports = grunt => {
// Pre
"clean",
// Copy files
+ "copy:css",
"copy:html",
// Compile JS
"webpack:deploy",
diff --git a/package-lock.json b/package-lock.json
index 0c007a4..1021cbb 100644
Binary files a/package-lock.json and b/package-lock.json differ
diff --git a/package.json b/package.json
index e817b95..9e7ac21 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "converter",
- "version": "1.4.14",
+ "version": "1.5.0",
"description": "Convert numbers to and from various bases.",
"author": "Florine W. Dekker",
"browser": "dist/bundle.js",
diff --git a/src/main/css/main.css b/src/main/css/main.css
new file mode 100644
index 0000000..48fd845
--- /dev/null
+++ b/src/main/css/main.css
@@ -0,0 +1,16 @@
+#inputs {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: start;
+ justify-content: left;
+ /*noinspection CssUnresolvedCustomProperty*/
+ gap: var(--spacing);
+}
+
+#inputs article {
+ margin: 0;
+}
+
+#inputs textarea {
+ display: block;
+}
diff --git a/src/main/index.html b/src/main/index.html
index 8a69665..1530dee 100644
--- a/src/main/index.html
+++ b/src/main/index.html
@@ -8,6 +8,7 @@
+
@@ -17,6 +18,8 @@
Converter | FWDekker
+
+
@@ -31,19 +34,24 @@
-
+
-
diff --git a/src/main/js/main.js b/src/main/js/main.js
index cf07a39..c9d77c0 100644
--- a/src/main/js/main.js
+++ b/src/main/js/main.js
@@ -1,5 +1,5 @@
// noinspection JSUnresolvedVariable
-const {$, doAfterLoad} = window.fwdekker;
+const {$, doAfterLoad, stringToHtml} = window.fwdekker;
import bigInt from "big-integer"
@@ -11,8 +11,9 @@ import bigInt from "big-integer"
* @param replacement the replacement to insert into the string
* @returns {string} the input string with one character replaced
*/
-const stringReplaceAt = (str, index, replacement) =>
- str.substring(0, index) + replacement + str.substring(index + replacement.length);
+function stringReplaceAt(str, index, replacement) {
+ return str.substring(0, index) + replacement + str.substring(index + replacement.length);
+}
/**
* Replaces all instances of the target with the replacement.
@@ -22,8 +23,9 @@ const stringReplaceAt = (str, index, replacement) =>
* @param replacement the replacement to insert into the string
* @returns {string} the input string with all instances of the target replaced
*/
-const stringReplaceAll = (str, target, replacement) =>
- str.split(target).join(replacement);
+function stringReplaceAll(str, target, replacement) {
+ return str.split(target).join(replacement);
+}
/**
* Runs `stringReplaceAll` for each character in `targets` and `replacements`.
@@ -34,9 +36,10 @@ const stringReplaceAll = (str, target, replacement) =>
* in the targets string
* @returns {string} the input string with all instances of the targets replaced
*/
-const stringReplaceAlls = (str, targets, replacements) =>
- Array.from(targets).reduce((output, target, index) =>
- stringReplaceAll(output, target, replacements[index]), str);
+function stringReplaceAlls(str, targets, replacements) {
+ return Array.from(targets)
+ .reduce((output, target, index) => stringReplaceAll(output, target, replacements[index]), str);
+}
class NumeralSystem {
@@ -71,26 +74,25 @@ class NumeralSystemInput {
this.name = name;
this.numeralSystem = numeralSystem;
- this.label = document.createElement("label");
- this.label.setAttribute("for", `${this.name}Input`);
- this.label.innerHTML = this.name;
+ this.label = stringToHtml(``);
- this.textarea = document.createElement("textarea");
- this.textarea.id = `${this.name}Input`;
- this.textarea.className = "numberInput";
+ this.textarea = stringToHtml(``);
this.textarea.oninput = () => {
- if (this.textarea.value === undefined || this.textarea.value === null || this.textarea.value === "")
+ if (this.textarea.value == null || this.textarea.value === "")
return;
this.textarea.value = this.numeralSystem.filterBaseString(this.textarea.value);
updateAllInputs(this, this.numeralSystem.baseToDecimal(this.textarea.value));
};
+
+ this.wrapper = document.createElement("article");
+ this.wrapper.appendChild(this.label);
+ this.wrapper.appendChild(this.textarea);
}
addToParent(parent) {
- parent.appendChild(this.label);
- parent.appendChild(this.textarea);
+ parent.appendChild(this.wrapper);
}
update(decimalNumber) {
@@ -98,6 +100,7 @@ class NumeralSystemInput {
}
}
+
class Base64NumeralSystem extends NumeralSystem {
// TODO Convert static methods to static properties once supported by Firefox
static defaultAlphabet() {
@@ -148,20 +151,21 @@ class Base64NumeralSystemInput extends NumeralSystemInput {
constructor(name) {
super(name, new Base64NumeralSystem(Base64NumeralSystem.defaultAlphabet()));
- this.dropdown = document.createElement("select");
- this.dropdown.id = `${this.name}-dropdown`;
+ this.dropdown = stringToHtml(``);
this.dropdown.onchange = () => {
const selectedOption = Base64NumeralSystemInput.dropdownOptions()[this.dropdown.value];
this.setLastDigits(selectedOption[0], selectedOption[1]);
};
- 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;
+ Object
+ .keys(Base64NumeralSystemInput.dropdownOptions())
+ .forEach(key => {
+ const text = key + ": " + Base64NumeralSystemInput.dropdownOptions()[key].join("");
+ const option = stringToHtml(``);
+ this.dropdown.appendChild(option);
});
+
+ this.wrapper.appendChild(this.dropdown);
}
@@ -174,14 +178,6 @@ class Base64NumeralSystemInput extends NumeralSystemInput {
this.textarea.value =
stringReplaceAll(stringReplaceAll(this.textarea.value, oc62, c62), oc63, c63);
}
-
- addToParent(parent) {
- this.options.forEach(option => this.dropdown.appendChild(option));
-
- parent.appendChild(this.label);
- parent.appendChild(this.dropdown);
- parent.appendChild(this.textarea);
- }
}
@@ -202,21 +198,18 @@ const inputs = [
),
];
-const updateAllInputs = (source, newValue) => {
+function updateAllInputs(source, newValue) {
for (const input of inputs)
if (input !== source)
input.update(newValue);
-};
+}
doAfterLoad(() => {
- const inputParent = $("#inputs");
-
+ const form = $("#inputs");
for (const input of inputs)
- input.addToParent(inputParent);
+ input.addToParent(form);
updateAllInputs(undefined, bigInt(42));
inputs[0].textarea.focus();
-
- $("main").classList.remove("hidden");
});