|
@@ -0,0 +1,89 @@
|
|
|
+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();
|