onShown

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

Подключение события

Событие onShown задаётся при создании экземпляра уведомления через объект конфигурации:

let notification = new Noty({
    text: 'Данные успешно сохранены!',
    type: 'success',
    timeout: 3000,
    callbacks: {
        onShown: function() {
            console.log('Уведомление полностью отображено');
        }
    }
});

notification.show();
  • text – текст уведомления.
  • type – тип уведомления (success, error, warning, info).
  • timeout – время жизни уведомления в миллисекундах.
  • callbacks.onShown – функция, вызываемая после отображения уведомления.

В примере выше после появления уведомления в консоль выводится сообщение о том, что оно полностью показано.

Отличие от других колбеков

  • onShow – вызывается в момент запуска анимации показа, до её завершения.
  • onShown – вызывается после завершения анимации, когда уведомление полностью видно.
  • onClose – вызывается при начале закрытия уведомления.
  • onClosed – вызывается после завершения анимации закрытия.

Это различие критично, когда необходимо выполнять действия, зависящие от визуального состояния уведомления, например, измерять размеры элемента или запускать дополнительную анимацию поверх уведомления.

Использование с динамическим контентом

Событие onShown часто применяется, когда уведомление содержит элементы, которые требуют инициализации после рендеринга:

let notification = new Noty({
    text: '<button id="okBtn">OK</button>',
    type: 'info',
    callbacks: {
        onShown: function() {
            document.getElementById('okBtn').addEventListener('click', function() {
                notification.close();
            });
        }
    }
});

notification.show();

В этом примере кнопка OK добавляется динамически и её обработчик событий подключается только после того, как уведомление полностью отображено, что предотвращает ошибки доступа к DOM.

Анимации и onShown

Noty поддерживает различные типы анимаций через опцию animation:

new Noty({
    text: 'Проверка анимации',
    type: 'alert',
    animation: {
        open: 'animated bounceInRight',
        close: 'animated bounceOutLeft'
    },
    callbacks: {
        onShown: function() {
            console.log('Анимация завершена, уведомление видимо полностью');
        }
    }
}).show();
  • open – класс анимации открытия.
  • close – класс анимации закрытия.

Событие onShown вызывается после завершения анимации open, что позволяет точно синхронизировать дополнительные действия с визуальной частью.

Передача контекста в onShown

Функция onShown вызывается с контекстом this, ссылающимся на объект уведомления. Это позволяет управлять самим уведомлением внутри колбека:

new Noty({
    text: 'Контекст внутри onShown',
    callbacks: {
        onShown: function() {
            this.setText('Текст изменён после отображения');
        }
    }
}).show();

Использование this даёт доступ к методам:

  • setText(text) – изменить текст уведомления.
  • close() – закрыть уведомление.
  • setTimeout(time) – изменить таймаут существующего уведомления.

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

Практические сценарии применения

  1. Инициализация элементов DOM внутри уведомления (кнопки, формы, интерактивные блоки).
  2. Запуск таймеров или анимаций, синхронизированных с визуальным показом.
  3. Измерение размеров уведомления для позиционирования других элементов интерфейса.
  4. Логирование событий для аналитики, когда важно зафиксировать именно показ уведомления пользователю.

Событие onShown является мощным инструментом для точной работы с визуальной частью уведомлений, позволяя запускать действия после полной загрузки и отображения контента, исключая ошибки взаимодействия с DOM до появления элемента.

Оглавление