Бесконечные уведомления

Noty — это легковесная JavaScript-библиотека для создания уведомлений на веб-страницах. Уведомления, генерируемые Noty, можно полностью настраивать: от внешнего вида и позиции на экране до поведения при взаимодействии пользователя. Ключевая особенность — поддержка «бесконечных уведомлений», то есть уведомлений, которые могут появляться непрерывно без ограничения по количеству или времени отображения.

Каждое уведомление создаётся через объект Noty с набором параметров:

new Noty({
    text: 'Пример уведомления',
    type: 'success', // тип уведомления: success, error, warning, info, alert
    layout: 'topRight', // позиция на экране
    timeout: 3000, // время жизни уведомления в миллисекундах
    theme: 'mint', // тема оформления
}).show();

Ключевые параметры:

  • text — содержимое уведомления, может содержать HTML.
  • type — визуальное обозначение типа: success (зелёное), error (красное), warning (жёлтое), info (синее), alert (нейтральное).
  • layout — место появления уведомления: topRight, topLeft, bottomRight, bottomLeft, topCenter, bottomCenter, center.
  • timeout — через сколько миллисекунд уведомление исчезнет; если false, уведомление остаётся до закрытия вручную.
  • theme — оформление, которое можно кастомизировать через CSS.

Бесконечные уведомления

Для реализации непрерывного потока уведомлений используется параметр timeout: false или динамическое создание новых уведомлений через цикл или события.

Простейший пример бесконечного уведомления:

function generateInfiniteNoty() {
    new Noty({
        text: 'Непрерывное уведомление',
        type: 'info',
        layout: 'topRight',
        timeout: false, // уведомление не исчезает автоматически
    }).show();
}

setInterval(generateInfiniteNoty, 2000); // создаёт новое уведомление каждые 2 секунды

В данном примере каждое уведомление остаётся на экране, создавая эффект непрерывного потока. Для предотвращения переполнения экрана можно использовать метод close() для старых уведомлений или лимитировать количество одновременно отображаемых:

let activeNotifications = [];

function generateLimitedInfiniteNoty() {
    const noty = new Noty({
        text: 'Бесконечное уведомление с лимитом',
        type: 'success',
        layout: 'topRight',
        timeout: false,
    }).show();

    activeNotifications.push(noty);

    if (activeNotifications.length > 5) {
        activeNotifications.shift().close(); // закрываем самое старое уведомление
    }
}

setInterval(generateLimitedInfiniteNoty, 1500);

Анимации и взаимодействие

Noty поддерживает кастомные анимации при открытии (animation.open) и закрытии (animation.close). Для бесконечных уведомлений особенно полезно плавное появление и исчезновение:

new Noty({
    text: 'Анимированное уведомление',
    type: 'alert',
    layout: 'topCenter',
    timeout: false,
    animation: {
        open: 'animated bounceInDown',
        close: 'animated bounceOutUp'
    }
}).show();

Интерактивные уведомления позволяют закрывать уведомления кликом или свайпом. Для этого используются параметры:

  • closeWith — массив способов закрытия: 'click', 'button', 'hover'.
  • buttons — массив кнопок с колбэками для выполнения действий.

Пример уведомления с кнопкой:

new Noty({
    text: 'Нажмите кнопку для закрытия',
    type: 'warning',
    layout: 'bottomLeft',
    timeout: false,
    buttons: [
        Noty.button('Закрыть', 'btn btn-danger', function(n) {
            n.close();
        })
    ]
}).show();

Управление памятью и производительностью

Бесконечные уведомления могут быстро перегрузить DOM. Для оптимизации рекомендуется:

  • Ограничивать количество одновременно отображаемых уведомлений.
  • Использовать timeout для автоматического удаления старых уведомлений.
  • Хранить уведомления в массиве для последующего закрытия методом close().
  • Кэшировать часто используемые шаблоны уведомлений, чтобы не создавать новый объект каждый раз.

Использование событий

Noty предоставляет события для отслеживания жизненного цикла уведомлений:

  • onShow — срабатывает при появлении уведомления.
  • onClose — срабатывает при закрытии уведомления.
  • onClick — срабатывает при клике на уведомление.

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

const noty = new Noty({
    text: 'Событийное уведомление',
    type: 'info',
    timeout: false
}).show();

noty.on('onClick', function() {
    alert('Вы кликнули на уведомление!');
});

noty.on('onClose', function() {
    console.log('Уведомление закрыто');
});

Настройка тем и стилей

Noty позволяет создавать собственные темы, подключая CSS. Базовая структура темы:

/* Пример кастомной темы */
.noty_theme_custom {
    background-color: #222;
    color: #fff;
    border-radius: 5px;
    padding: 15px;
    font-family: Arial, sans-serif;
}

Применение темы при создании уведомления:

new Noty({
    text: 'Кастомная тема',
    type: 'alert',
    layout: 'topCenter',
    theme: 'custom',
    timeout: false
}).show();

Интеграция с другими библиотеками

Noty легко комбинируется с фреймворками типа Vue, React или Angular. Можно оборачивать генерацию уведомлений в отдельный сервис, что особенно удобно для «бесконечных уведомлений», управляемых состоянием приложения.

Пример интеграции с React:

function notifyReact(message) {
    new Noty({
        text: message,
        type: 'success',
        layout: 'topRight',
        timeout: false
    }).show();
}

// Вызывается при изменении состояния
notifyReact('Новое уведомление из React');

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

Оглавление