badger / modules / toaster-inator.js

/*
Toaster(-inator) - Easy to use toast message element/library thing.
Copyright (C) 2026 Grant Mulholland <[e-mail]>

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/

class ToasterElement extends HTMLElement {
	#messages = document.createElement("div");
	constructor() {
		super();
		this.#messages.id = "messages";
	}
	connectedCallback() {
		const shadow = this.attachShadow({ mode: "open" });

		const style = document.createElement("style");
		style.textContent = `
			:host {
				--space: 1ch;
			}
			#messages {
				position: absolute;
				left: var(--space);
				bottom: var(--space);
				transition: translate 0.5s;
			}
			.box {
				background-color: #eee;
				border: 0.5ch solid #ccc;
				border-radius: 1ch;
				margin: var(--space);
				padding: 1ch;
				position: relative;
				width: fit-content;
			}
			.box span {
				padding-inline: 1ch;
			}
			@media (prefers-color-scheme: dark) {
				.box {
					background-color: #444;
					border-color: #222;
				}
			}
			.error {
				border-color: indianred;
			}
			.info {
				border-color: dodgerblue;
			}
		`;

		shadow.appendChild(style);
		shadow.appendChild(this.#messages);
	}
	#message(type, msg) {
		const el = document.createElement("div");
		el.classList.add(type, "box");
		
		const btn = document.createElement("button");
		btn.textContent = "×";
		btn.classList.add("close-button");
		btn.addEventListener("click", ()=>{
			el.remove();
		});
		
		const text = document.createElement("span");
		text.textContent = msg;

		el.appendChild(btn);
		el.appendChild(text);

		const oldTop = this.#messages.getBoundingClientRect().top;
		this.#messages.appendChild(el);
		const newTop = this.#messages.getBoundingClientRect().top;
		this.#messages.animate([
			{translate: `0 ${oldTop-newTop}px`},
			{translate: "0 0"}
		], {duration: 500, iterations: 1, easing: "ease"});
	}
	info(msg) {
		this.#message("info", msg);
	}
	error(msg) {
		this.#message("error", msg);
	}
}

if (!customElements.get("toaster-inator")) {
	customElements.define(
		"toaster-inator",
		ToasterElement
	);
}

let instances = document.getElementsByTagName("toaster-inator");
if (instances.length == 0) {
	instances = [document.createElement("toaster-inator")];
	document.body.appendChild(instances[0]);
}
/**
 * @type {ToasterElement} Automatically created toaster instance.
 */
export const toaster = instances[0];
// call it a crime if you want, it's handy
globalThis.toaster = toaster;