GoTemplate/assets/js/message.js

Object.defineProperty(Object.prototype, "Error", {
	value: null,
	enumerable: false,
});

const NotifyBuild = (function () {
	// локальная область видимости (приватные поля и методы)

	/**
	 * Задержка в миллисекундах перед удалением элемента (сообщения) при клике (должен совпадать с классом removing, в котором происходит анимация исчезновения (transition opacity))
	 */
	const HARDREMOVE_TIME = 100;

	/**
	 * Задержка в миллисекундах перед удалением элемента (сообщения) при автоматическом исчезновении (должен совпадать с классом removing-long, в котором происходит анимация исчезновения (transition opacity))
	 */
	const AUTOREMOVE_TIME = 2000;

	const REMOVING_SHORT = "short";
	const REMOVING_LONG = "long";

	/**
	 * Счётчик ID для создаваемых сообщений
	 */
	let MESSAGE_COUNTER = -1;

	/**
	 * Удаляет сообщение (или другой элемент, к которому было привязано данное событие)
	 * @param {Number} time время, через которое сообщение будет удалено из DOM (в миллисекундах)
	 */
	const removeMessage = function (time = HARDREMOVE_TIME, transition = REMOVING_SHORT) {
		this.classList.add("removing", transition);
		setTimeout(
			function ($elem) {
				$elem.remove();
			},
			time,
			this
		);
	};

	/**
	 * Для автоматического удаления сообщений, вызывается в setTimeout во время создания текущего сообщения
	 */
	const autoRemoveMessage = function () {
		if (this instanceof HTMLElement) {
			removeMessage.call(this, AUTOREMOVE_TIME, REMOVING_LONG);
		}
	};

	/**
	 * Класс создания всплывающих сообщений. Конструктор создаёт элемент-контейнер для помещения элементов-сообщений и добавляет его в конец BODY. Класс имеет один метод - Show - показать сообщение (создать элемент-сообщение и поместить в элемент-контейнер на указанное время жизни (аргумент time))
	 */
	return class Messenger {
		/**
		 * Конструктор сообщений
		 */
		constructor() {
			this.$message = document.createElement("div");
			this.$message.classList.add("messenger");
			this.$message.id = "idMessenger";

			document.body.appendChild(this.$message);
		}

		/**
		 * Вывести сообщение одного из трёх типов. Выводит в прямоугольной области в нижнем правом углу экрана. А также дублируется в лог консоли.
		 * @param {String} msg текст сообщения, допускается HTML формат
		 * @param {MESSAGE_TYPE} type тип отображения сообщения (ошибка, предупреждение, информация)
		 * @param {Number} time время отображения сообщения в миллисекундах
		 */
		Show(msg, type = "info", time = 10000) {
			let message = document.createElement("div");
			message.id = `idMsg${++MESSAGE_COUNTER}`;
			message.innerHTML = msg;
			message.classList.add(type);
			let close = document.createElement("div");
			close.classList.add("close");
			close.onclick = removeMessage.bind(message);
			message.append(close);

			this.$message.appendChild(message);

			setTimeout(autoRemoveMessage.bind(message), time);
		}
	}
})();

var Notify = new NotifyBuild();