onTemplate

В библиотеке Noty опция onTemplate представляет собой один из ключевых механизмов для управления поведением уведомлений на этапе их генерации. Она позволяет выполнить пользовательский код сразу после того, как DOM-шаблон уведомления создан, но до того, как уведомление будет отображено пользователю. Это предоставляет полный контроль над содержимым, стилями и динамическими модификациями уведомления.

Основной синтаксис onTemplate

onTemplate задается как функция в объекте конфигурации при создании уведомления:

new Noty({
    text: 'Пример уведомления',
    type: 'alert',
    onTemplate: function() {
        console.log('Шаблон уведомления создан');
    }
}).show();

Функция не принимает аргументов, но внутри неё доступен контекст this, который указывает на текущий экземпляр уведомления. Через this можно управлять всеми аспектами уведомления:

  • this.barDom — основной контейнер уведомления.
  • this.options — объект конфигурации уведомления.
  • this.text — текст уведомления.

Использование для модификации DOM

Одной из самых распространённых задач onTemplate является модификация DOM перед отображением. Например, добавление кастомного класса или вставка дополнительных элементов:

new Noty({
    text: 'Уведомление с кнопкой',
    type: 'info',
    onTemplate: function() {
        const button = document.createElement('button');
        button.textContent = 'Закрыть';
        button.oncl ick = () => this.close();
        this.barDom.appendChild(button);
        this.barDom.classList.add('custom-noty-style');
    }
}).show();

В этом примере:

  • К уведомлению добавляется кнопка, закрывающая его.
  • Добавляется дополнительный CSS-класс для кастомной стилизации.

Динамическая подстановка контента

onTemplate позволяет динамически изменять текст или HTML уведомления в зависимости от условий. Например, формирование текста на основе данных из API:

fetch('/api/notifications/latest')
    .then(response => response.json())
    .then(data => {
        new Noty({
            text: data.message,
            type: 'success',
            onTemplate: function() {
                if (data.urgent) {
                    this.barDom.style.border = '2px solid red';
                }
            }
        }).show();
    });

Таким образом, можно гибко адаптировать визуальное представление уведомления под контекст.

Комбинация с другими событиями Noty

Опция onTemplate выполняется перед всеми другими событиями, такими как onShow или onAfterShow. Это позволяет:

  1. Подготовить DOM перед его отображением.
  2. Добавить интерактивные элементы (кнопки, ссылки, иконки).
  3. Изменить стили или структуру контейнера.

Пример с комбинацией событий:

new Noty({
    text: 'Важное уведомление',
    type: 'warning',
    onTemplate: function() {
        this.barDom.style.backgroundColor = 'orange';
    },
    onShow: function() {
        console.log('Уведомление отображается');
    },
    onClose: function() {
        console.log('Уведомление закрыто');
    }
}).show();

Ограничения и рекомендации

  • onTemplate вызывается один раз для каждого уведомления при создании DOM.
  • Изменения DOM в onTemplate не влияют на внутреннюю логику Noty, такую как автоматическое закрытие или таймер.
  • Для динамических обновлений после отображения следует использовать onShow или update методы.
  • Любые длительные операции в onTemplate могут задерживать рендер уведомления, поэтому желательно ограничиваться быстрыми изменениями DOM или стилями.

Примеры практического применения

  1. Добавление иконки на основе типа уведомления:
new Noty({
    text: 'Сообщение системы',
    type: 'alert',
    onTemplate: function() {
        const icon = document.createElement('span');
        icon.className = 'noty-icon-alert';
        this.barDom.insertBefore(icon, this.barDom.firstChild);
    }
}).show();
  1. Добавление таймера обратного отсчета:
new Noty({
    text: 'Закрытие через 5 секунд',
    type: 'info',
    timeout: 5000,
    onTemplate: function() {
        const timer = document.createElement('span');
        timer.className = 'noty-timer';
        let count = 5;
        timer.textContent = count;
        this.barDom.appendChild(timer);
        setInterval(() => {
            count--;
            timer.textContent = count;
        }, 1000);
    }
}).show();

onTemplate является мощным инструментом для управления уведомлениями на уровне DOM. Он сочетает в себе гибкость кастомизации и интеграцию с остальными событиями Noty, обеспечивая разработчику полный контроль над визуальной и функциональной частью уведомления.

Оглавление