Implement `busy` message type for forms
This commit is contained in:
parent
b97afae983
commit
537d8db0e2
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@fwdekker/template",
|
"name": "@fwdekker/template",
|
||||||
"version": "3.2.1",
|
"version": "3.3.0",
|
||||||
"description": "The base template for pages on fwdekker.com.",
|
"description": "The base template for pages on fwdekker.com.",
|
||||||
"author": "Florine W. Dekker",
|
"author": "Florine W. Dekker",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
|
|
@ -25,7 +25,7 @@ export function clearFormValidity(form: HTMLFormElement): void {
|
||||||
*/
|
*/
|
||||||
export function showMessageType(card: HTMLElement | HTMLFormElement,
|
export function showMessageType(card: HTMLElement | HTMLFormElement,
|
||||||
message?: string,
|
message?: string,
|
||||||
type?: "error" | "info" | "success" | "warning"): void {
|
type?: "busy" | "error" | "info" | "success" | "warning"): void {
|
||||||
if (card instanceof HTMLFormElement) {
|
if (card instanceof HTMLFormElement) {
|
||||||
const formCard = $(`article[data-status-for="${card.id}"]`);
|
const formCard = $(`article[data-status-for="${card.id}"]`);
|
||||||
if (formCard == null) return;
|
if (formCard == null) return;
|
||||||
|
@ -34,13 +34,16 @@ export function showMessageType(card: HTMLElement | HTMLFormElement,
|
||||||
}
|
}
|
||||||
const output = $("output", card)!;
|
const output = $("output", card)!;
|
||||||
|
|
||||||
|
card.removeAttribute("aria-busy");
|
||||||
card.classList.remove("hidden", "error", "info", "success", "warning");
|
card.classList.remove("hidden", "error", "info", "success", "warning");
|
||||||
|
|
||||||
if (message == null || type == null) {
|
if (message == null || type == null) {
|
||||||
card.classList.add("hidden");
|
card.classList.add("hidden");
|
||||||
output.innerHTML = "";
|
output.innerHTML = "";
|
||||||
} else {
|
} else {
|
||||||
card.classList.add(type);
|
if (type === "busy") card.setAttribute("aria-busy", "true");
|
||||||
|
else card.classList.add(type);
|
||||||
|
|
||||||
output.innerHTML = message;
|
output.innerHTML = message;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -54,6 +57,16 @@ export function clearMessageStatus(card: HTMLElement): void {
|
||||||
showMessageType(card);
|
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`.
|
* Shows an error message in `card`.
|
||||||
*
|
*
|
||||||
|
|
|
@ -119,7 +119,7 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
validation.showMessageWarning($("#global-status-card"), ":D");
|
validation.showMessageBusy($("#global-status-card"), ":D");
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in New Issue