Переиспользуемые конфигурации

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

Создание базовой конфигурации

Базовая конфигурация хранится в объекте и передается при создании уведомлений. Пример:

const baseConfig = {
    position: 'topRight',
    timeout: 5000,
    progressBar: true,
    close: true,
    pauseOnHover: true,
    theme: 'light',
    transitionIn: 'fadeInDown',
    transitionOut: 'fadeOutUp'
};

Здесь определены ключевые параметры:

  • position — расположение уведомления на экране (topRight, topLeft, bottomRight, bottomLeft, center).
  • timeout — время отображения в миллисекундах.
  • progressBar — отображение индикатора времени.
  • close — наличие кнопки закрытия.
  • pauseOnHover — приостановка таймера при наведении курсора.
  • theme — визуальная тема (light или dark).
  • transitionIn и transitionOut — анимации появления и скрытия уведомления.

Использование базовой конфигурации

Для отображения уведомления с базовой конфигурацией применяется метод iziToast.show() с использованием оператора распространения:

iziToast.show({
    ...baseConfig,
    title: 'Успешно!',
    message: 'Данные сохранены'
});

Оператор ... позволяет объединить базовую конфигурацию с уникальными параметрами, такими как title и message.

Создание специализированных конфигураций

Можно создавать отдельные конфигурации для разных типов уведомлений:

const successConfig = {
    ...baseConfig,
    color: 'green',
    icon: 'fa fa-check'
};

const errorConfig = {
    ...baseConfig,
    color: 'red',
    icon: 'fa fa-times'
};

const infoConfig = {
    ...baseConfig,
    color: 'blue',
    icon: 'fa fa-info'
};

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

iziToast.show({
    ...successConfig,
    title: 'Готово',
    message: 'Операция завершена успешно'
});

iziToast.show({
    ...errorConfig,
    title: 'Ошибка',
    message: 'Не удалось сохранить данные'
});

Функции для генерации уведомлений

Для максимальной переиспользуемости можно создать функции-обертки:

function showSuccess(message, title = 'Успешно!') {
    iziToast.show({
        ...successConfig,
        title,
        message
    });
}

function showError(message, title = 'Ошибка') {
    iziToast.show({
        ...errorConfig,
        title,
        message
    });
}

function showInfo(message, title = 'Информация') {
    iziToast.show({
        ...infoConfig,
        title,
        message
    });
}

Теперь вызов уведомления сводится к одной строке:

showSuccess('Данные успешно обновлены');
showError('Не удалось загрузить файл');
showInfo('Новые обновления доступны');

Расширение конфигураций для проектов

В крупных проектах полезно создавать объект toastConfigs, содержащий все предопределенные конфигурации:

const toastConfigs = {
    base: baseConfig,
    success: successConfig,
    error: errorConfig,
    info: infoConfig,
    warning: {
        ...baseConfig,
        color: 'orange',
        icon: 'fa fa-exclamation-triangle'
    }
};

Это позволяет централизованно управлять стилями уведомлений, изменяя их в одном месте. Например, смена позиции всех уведомлений:

toastConfigs.base.position = 'bottomLeft';

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

Динамическая модификация конфигураций

Библиотека поддерживает создание конфигураций на лету с помощью функций, возвращающих объект настроек:

function createToastConfig(type, message, title) {
    const typeConfigs = {
        success: { color: 'green', icon: 'fa fa-check' },
        error: { color: 'red', icon: 'fa fa-times' },
        info: { color: 'blue', icon: 'fa fa-info' }
    };

    return {
        ...baseConfig,
        ...typeConfigs[type],
        title,
        message
    };
}

iziToast.show(createToastConfig('success', 'Файл загружен', 'Успешно'));

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

Встроенные методы переопределения конфигурации

iziToast также поддерживает методы settings() и destroy(), которые упрощают управление глобальными параметрами:

// Глобальное изменение таймаута
iziToast.settings({
    timeout: 8000
});

// Очистка всех уведомлений
iziToast.destroy();

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

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

Оглавление