Изменения в API между версиями

iziToast — это легкая библиотека для уведомлений в JavaScript, которая активно развивается. При переходе между версиями могут возникать изменения в API, влияющие на синтаксис вызова, доступные опции и обработку событий. Рассмотрим ключевые изменения и новые возможности, которые следует учитывать при обновлении.

Изменения в способе вызова уведомлений

В ранних версиях iziToast уведомления создавались через простую функцию iziToast.show({ ... }), где объект содержал все параметры. В новых версиях появилась поддержка отдельных типов уведомлений через методы:

// Старый синтаксис
iziToast.show({
    title: 'Пример',
    message: 'Сообщение'
});

// Новый синтаксис
iziToast.success({
    title: 'Успех',
    message: 'Сообщение успешно отправлено'
});

iziToast.error({
    title: 'Ошибка',
    message: 'Произошла ошибка'
});

Ключевой момент: новые методы success, error, info, warning являются удобной оберткой над универсальным show, но при этом имеют стандартные стили и иконки. Для кастомных типов уведомлений по-прежнему можно использовать show.

Обновленные параметры конфигурации

1. Позиционирование

Ранее позиция задавалась через параметр position с простыми значениями: "topRight", "bottomLeft" и т.д. В новых версиях поддерживаются расширенные варианты, включая выравнивание по горизонтали и вертикали:

iziToast.show({
    title: 'Информация',
    message: 'Сообщение с точным позиционированием',
    position: 'topCenter', // стандартные значения
    layout: 2 // новая опция для размещения нескольких уведомлений
});

Новая опция layout позволяет управлять порядком расположения уведомлений: горизонтально или вертикально, что особенно полезно для панели уведомлений с несколькими элементами.

2. Анимации

Ранее анимации задавались через transitionIn и transitionOut. В последних версиях добавлена возможность указания CSS-классов для кастомной анимации:

iziToast.show({
    title: 'Анимация',
    message: 'Пользовательская анимация',
    animateInside: true,
    transitionIn: 'fadeInDown',
    transitionOut: 'fadeOutUp',
    transitionInMobile: 'fadeIn',
    transitionOutMobile: 'fadeOut'
});

Ключевой момент: появились отдельные параметры для мобильных устройств (transitionInMobile, transitionOutMobile), что позволяет создавать адаптивные уведомления.

3. Тайм-аут и автозакрытие

Ранее для автоматического закрытия использовался параметр timeout. В новых версиях добавлена возможность отключать автозакрытие и управлять паузой при наведении мыши:

iziToast.show({
    title: 'Тайм-аут',
    message: 'Уведомление не закроется автоматически',
    timeout: false,
    pauseOnHover: true
});

Изменение: timeout: false полностью блокирует автозакрытие, а pauseOnHover позволяет пользователю читать длинные уведомления без спешки.

Обработка событий

В новых версиях iziToast расширена система событий:

  • onOpening — вызывается перед появлением уведомления
  • onOpened — после появления
  • onClosing — перед закрытием
  • onClosed — после закрытия
  • onClick — по клику на уведомление
iziToast.show({
    title: 'События',
    message: 'Пример использования событий',
    onOpening: function(instance, toast) {
        console.log('Уведомление открывается');
    },
    onClick: function(instance, toast) {
        console.log('Нажатие на уведомление');
    }
});

Ключевой момент: события теперь поддерживают два параметра — экземпляр iziToast и DOM-элемент уведомления, что упрощает интеграцию с динамическими интерфейсами.

Кастомизация кнопок и действий

Ранее для добавления кнопок использовался параметр buttons с массивом функций. В последних версиях добавлен более гибкий синтаксис с возможностью задавать текст, классы и обработчики событий:

iziToast.show({
    title: 'Кнопки',
    message: 'Пример кастомных кнопок',
    buttons: [
        ['<button>OK</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
        }],
        ['<button>Отмена</button>', function (instance, toast) {
            console.log('Отмена нажата');
        }]
    ]
});

Изменение: кнопки теперь могут быть полностью HTML-элементами, что позволяет использовать иконки и стили, не ограничиваясь стандартными возможностями библиотеки.

Новые возможности работы с DOM

В новых версиях iziToast появилась поддержка вставки уведомлений в конкретный контейнер:

iziToast.show({
    title: 'Контейнер',
    message: 'Уведомление внутри div',
    appendTo: '#customContainer'
});

Ключевой момент: appendTo позволяет интегрировать уведомления в сложные UI, не создавая глобальные всплывающие элементы, что упрощает работу в SPA и административных панелях.

Итоговая таблица изменений ключевых параметров

Параметр Старый синтаксис Новый синтаксис / изменения
Вызов уведомления iziToast.show({...}) iziToast.success({...}), iziToast.error({...})
Позиция position: "topRight" position: "topCenter", layout: 2
Анимации transitionIn, transitionOut Добавлены transitionInMobile, animateInside
Тайм-аут timeout: 5000 timeout: false, pauseOnHover: true
События Ограниченные onOpening, onOpened, onClosing, onClosed, onClick
Кнопки Простые функции HTML-кнопки с кастомными классами и обработчиками
Контейнер Всегда body appendTo: '#customContainer'

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

Оглавление