-
+
-
-
-
+
+ Day
+
+
+
+
-
+
-
-
-
+
+
-
-
+
diff --git a/src/main/js/Main.ts b/src/main/js/Main.ts
index 910ce6e..e29cd2e 100644
--- a/src/main/js/Main.ts
+++ b/src/main/js/Main.ts
@@ -1,5 +1,7 @@
// @ts-ignore
-const {$, doAfterLoad, footer, header, nav} = window.fwdekker;
+const {$, doAfterLoad} = window.fwdekker;
+// @ts-ignore
+const {clearInputValidity, showInputInvalid, showInputValid} = window.fwdekker.validation;
import {DateTime} from "luxon";
@@ -62,8 +64,6 @@ class ValidatableInput {
* Handles the user submitting the input.
*/
onSubmit(): void {
- this.input.dataset["entered"] = "true";
-
if (this.isValid(this.input.value)) {
this.showSuccess();
this.onValidInput();
@@ -110,39 +110,25 @@ class ValidatableInput {
*/
reset(): void {
this.input.value = "";
- this.input.dataset["entered"] = "false";
this.showSuccess();
this.updateTitle();
- this.titleLabel.classList.remove("success-message");
- this.button.classList.remove("success-box");
+ clearInputValidity(this.input);
}
/**
* Marks the input as invalid.
*/
showError(): void {
- this.input.setCustomValidity("Incorrect");
-
- this.titleLabel.classList.remove("success-message");
- this.titleLabel.classList.add("error-message");
-
- this.button.classList.remove("success-box");
- this.button.classList.add("error-box");
+ showInputInvalid(this.input);
}
/**
* Marks the input as valid.
*/
showSuccess(): void {
- this.input.setCustomValidity("");
-
- this.titleLabel.classList.remove("error-message");
- this.titleLabel.classList.add("success-message");
-
- this.button.classList.remove("error-box");
- this.button.classList.add("success-box");
+ showInputValid(this.input);
}
/**
@@ -351,19 +337,6 @@ class DoomsdayDate {
doAfterLoad(() => {
- // Initialize template
- $("#nav").appendChild(nav("/Tools/Doomsday/"));
- $("#header").appendChild(header({
- title: "Doomsday",
- description: `
- Test your mastery of \
-
⎋ Conway's Doomsday rule
- `
- }));
- $("#footer").appendChild(footer({
- vcsURL: "https://git.fwdekker.com/tools/doomsday/",
- version: "v%%VERSION_NUMBER%%"
- }));
$("main").classList.remove("hidden");
@@ -384,6 +357,13 @@ doAfterLoad(() => {
yearInput.updateTitle();
}
}("year", $("#year-details"));
+ const dayDetails = new class extends ToggleableSection {
+ onToggle(isOpened: boolean): void {
+ super.onToggle(isOpened);
+ if (isOpened) dayInput.selectInput();
+ dayInput.updateTitle();
+ }
+ }("day", $("#day-details"));
const centuryInput = new class extends ValidatableInput {
isValid(value: string): boolean {
@@ -398,8 +378,10 @@ doAfterLoad(() => {
this.input.value = DoomsdayDate.expandDayString(this.input.value);
if (yearDetails.isOpened())
yearInput.selectInput();
- else
+ else if (dayDetails.isOpened())
dayInput.selectInput();
+ else
+ resetButton.focus();
}
onInvalidInput() {
@@ -424,7 +406,10 @@ doAfterLoad(() => {
onValidInput() {
this.input.value = DoomsdayDate.expandDayString(this.input.value);
- dayInput.selectInput();
+ if (dayDetails.isOpened())
+ dayInput.selectInput();
+ else
+ resetButton.focus();
}
onInvalidInput() {
@@ -457,7 +442,10 @@ doAfterLoad(() => {
}
updateTitle() {
- this.titleLabel.innerText = `Weekday of ${quizDate.date.toISODate()}?`;
+ if (dayDetails.isOpened())
+ this.titleLabel.innerText = `Weekday of ${quizDate.date.toISODate()}?`;
+ else
+ this.titleLabel.innerText = `Day`;
}
}($("#day-input"), $("#day-title-label"), $("#day-submit"));
@@ -489,8 +477,10 @@ doAfterLoad(() => {
centuryInput.selectInput();
else if (yearDetails.isOpened())
yearInput.selectInput();
- else
+ else {
+ dayDetails.setOpened(true);
dayInput.selectInput();
+ }
}
// Let the fun begin