Module «notify». Простой js notifier

Демо:

https://codepen.io/ildar-meyker/pen/poZyZxj

Плагины:

https://jquery.com

Подключение:

// подключение jquery
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.2/dist/jquery.min.js"></script>

// контейнер для тостов
<div class='notify' id="notify"></div>

Стили:

// стили модуля
.notify {
	position: fixed;
	z-index: 2000;
	bottom: 0;
	right: 0;
	width: 100%;
	max-width: 300px;
	max-height: 100%;
	overflow: auto;

	&__item {
		margin: 10px;
		padding: 1.5em;
		opacity: 0.8;
		font-size: 1.6rem;
		border-radius: 5px;
		color: #fff;

		&--success {
			background: #42d18e;
		}

		&--warning {
			background: rgb(255, 185, 34);
		}

		&--error {
			background: rgb(236, 73, 73);
		}
	}
}

Инициализация:

// код модуля
const Notify = {
	_counter: 0,

	_handleItemClick(e) {
		e.preventDefault();

		$(e.currentTarget).remove();
	},

	_notify(message, colorType) {
		const uniqueId = ++this._counter;
		$(
			'<div id="notify-' +
				uniqueId +
				'" class="notify__item notify__item--' +
				colorType +
				'">' +
				message +
				"</div>"
		).prependTo($("#notify"));

		setTimeout(() => {
			$("#notify-" + uniqueId).remove();
		}, 8000);
	},

	error(message) {
		this._notify(message, "error");
	},

	warning(message) {
		this._notify(message, "warning");
	},

	success(message) {
		this._notify(message, "success");
	},

	init() {
		$(document).on(
			"click",
			".notify__item",
			this._handleItemClick.bind(this)
		);
	},
};

$(function () {
	Notify.init();
});

export default Notify;