ignite-html-toast/ignite-html-toast.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") {
            color = "#ff7979";
        } else if (type == "warning") {
            color = "#ffc107";
        } else if (type == "info") {
            color = "#2196f3";
        } else if (type == "success") {
            color = "#10c469";
        } else {
            color = "#000000";
        }

        document.querySelectorAll(".ignite-html-toast").forEach(element => element.remove());

        var temp = document.createElement('div');
        temp.innerHTML = `
            <div class="ignite-html-toast ${type ? type : ""}" style="display: flex; align-items: center; flex-direction: column; left: 50%; top: 100%; position: absolute; transform: translate(-50%, -100%); z-index: 999999; width: 100%; padding: 2em 1em 2em 1em; background-color: transparent;">
                <div style="box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); border-radius: 7em; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 1em; padding-left: 1em; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; background-color: #fff;">
                    <div class="icon" style="${!icon ? "display: none;" : "display: flex;"}font-size: 1.5em; background-color: ${color}; border-radius: 100%; min-width: 1.5em; min-height: 1.5em; align-items: center; justify-content: center; color: #fff;">${icon ? icon : ""}</div>
                    <div class="message" style="text-align: center;">${content ? content : ""}</div>
                    <button class="close" onClick="this.parentElement.parentElement.remove();" style="${!closable ? "display: none;" : ""} background-color: transparent; border: none; font-size: 1.75em; color: rgba(0,0,0,0.5);">&times;</button>
                </div>
            </div>
        `.trim();
        var toast = temp.firstChild;

        window.document.body.appendChild(toast);

        if (timeout != -1) {
            setTimeout(() => {
                toast.remove();
            }, timeout);
        }

        return toast;
    }
}

window.Toast = Toast;

export {
    Toast
}