MontoyaTech/ignite-html-toast
MontoyaTech/ignite-html-toast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Cleaned up code, added missing documentation.

Browse Source
This commit is contained in:
MattMo 2023-04-22 12:06:55 -07:00
parent 706a69e5da
commit bc7c94edd8
1 changed files with 42 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
ignite-html-toast.js
View File

@ -1,22 +1,60 @@
import { IgniteProperty } from "../ignite-html/ignite-html.js";
/**
* A utility class to create and show toast messages.
*/
class Toast {
/**
* Creates and shows an info toast.
* @param {String} content The content of the toast.
* @param {Number} timeout The amount of time in miliseconds to show the message, -1 means forever. Default is 4000.
* @param {Boolean} closable Whether or not to show a close button. Default is true.
* @returns {HTMLElement} The toast html element.
*/
static info(content, timeout = 4000, closable = true) {
return this.makeToast("?", content, "info", timeout, closable);
}
/**
* Creates and shows an warning toast.
* @param {String} content The content of the toast.
* @param {Number} timeout The amount of time in miliseconds to show the message, -1 means forever. Default is 4000.
* @param {Boolean} closable Whether or not to show a close button. Default is true.
* @returns {HTMLElement} The toast html element.
*/
static warning(content, timeout = 4000, closable = true) {
return this.makeToast("!", content, "warning", timeout, closable);
}
/**
* Creates and shows an error toast.
* @param {String} content The content of the toast.
* @param {Number} timeout The amount of time in miliseconds to show the message, -1 means forever. Default is 4000.
* @param {Boolean} closable Whether or not to show a close button. Default is true.
* @returns {HTMLElement} The toast html element.
*/
static error(content, timeout = 4000, closable = true) {
return this.makeToast("×", content, "error", timeout, closable);
}
/**
* Creates and shows an success toast.
* @param {String} content The content of the toast.
* @param {Number} timeout The amount of time in miliseconds to show the message, -1 means forever. Default is 4000.
* @param {Boolean} closable Whether or not to show a close button. Default is true.
* @returns {HTMLElement} The toast html element.
*/
static success(content, timeout = 4000, closable = true) {
return this.makeToast("✔", content, "success", timeout, closable);
}
/**
* Creates a toast message with an icon, content, type, and timeout and closable settings.
* @param {String} icon The icon to display if any.
* @param {String} content The content of the toast.
* @param {String} type The type of toast being shown, error, warning, info, success, or default.
* @param {Number} timeout The amount of time in miliseconds to show the toast. -1 is forever.
* @param {Boolean} closable Whether or not this toast can be closed.
* @returns {HTMLElement} The toast html element.
*/
static makeToast(icon, content, type, timeout, closable) {
var color = "";
if (type == "error") {
@ -27,6 +65,8 @@ class Toast {
color = "#2196f3";
} else if (type == "success") {
color = "#10c469";
} else {
color = "#000000";
}
document.querySelectorAll(".ignite-html-toast").forEach(element => element.remove());