diff --git a/package.json b/package.json index d023de2..a7d4f29 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@fwdekker/template", - "version": "3.2.1", + "version": "3.3.0", "description": "The base template for pages on fwdekker.com.", "author": "Florine W. Dekker", "license": "MIT", diff --git a/src/main/js/Validation.ts b/src/main/js/Validation.ts index f5790eb..431a76a 100644 --- a/src/main/js/Validation.ts +++ b/src/main/js/Validation.ts @@ -25,7 +25,7 @@ export function clearFormValidity(form: HTMLFormElement): void { */ export function showMessageType(card: HTMLElement | HTMLFormElement, message?: string, - type?: "error" | "info" | "success" | "warning"): void { + type?: "busy" | "error" | "info" | "success" | "warning"): void { if (card instanceof HTMLFormElement) { const formCard = $(`article[data-status-for="${card.id}"]`); if (formCard == null) return; @@ -34,13 +34,16 @@ export function showMessageType(card: HTMLElement | HTMLFormElement, } const output = $("output", card)!; + card.removeAttribute("aria-busy"); card.classList.remove("hidden", "error", "info", "success", "warning"); if (message == null || type == null) { card.classList.add("hidden"); output.innerHTML = ""; } else { - card.classList.add(type); + if (type === "busy") card.setAttribute("aria-busy", "true"); + else card.classList.add(type); + output.innerHTML = message; } } @@ -54,6 +57,16 @@ export function clearMessageStatus(card: HTMLElement): void { showMessageType(card); } +/** + * Shows a busy message in `card`, i.e. with a loading indicator. + * + * @param card the card to show `message` in + * @param message the message to show in `card` + */ +export function showMessageBusy(card: HTMLElement, message: string): void { + showMessageType(card, message, "busy"); +} + /** * Shows an error message in `card`. * diff --git a/src/test/index.html b/src/test/index.html index b87160f..3479c8d 100644 --- a/src/test/index.html +++ b/src/test/index.html @@ -119,7 +119,7 @@ } }); - validation.showMessageWarning($("#global-status-card"), ":D"); + validation.showMessageBusy($("#global-status-card"), ":D");