Настройка текстов по умолчанию

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

К текстовым параметрам относятся:

  • title — заголовок уведомления
  • message — основное содержимое
  • iconText — текст внутри иконки (если используется)
  • progressBarColor — косвенно влияет на визуальное восприятие текста
  • transitionIn / transitionOut — анимации, влияющие на восприятие текста

Глобальная настройка через iziToast.settings

Глобальные значения задаются через метод:

iziToast.settings({
    title: 'Уведомление',
    message: 'Стандартное сообщение',
});

После этого все вызовы iziToast.show() будут использовать указанные значения, если они явно не переопределены.

Пример:

iziToast.settings({
    title: 'Информация',
    message: 'Операция выполнена успешно'
});

iziToast.show(); // Использует оба значения по умолчанию

Переопределение значений при вызове

Любой параметр можно изменить локально:

iziToast.show({
    title: 'Ошибка',
    message: 'Что-то пошло не так'
});

При этом:

  • title и message из вызова имеют приоритет над глобальными
  • отсутствующие параметры берутся из settings

Частичное задание текста

Если задан только один параметр:

iziToast.settings({
    title: 'Система',
    message: 'Общее сообщение'
});

iziToast.show({
    message: 'Конкретное сообщение'
});

Результат:

  • title: “Система” (из настроек)
  • message: “Конкретное сообщение” (локально)

Сброс настроек

Для возврата к стандартному поведению используется:

iziToast.destroy();

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

Работа с локализацией

Централизация текстов особенно полезна при мультиязычной поддержке. Часто используется связка с объектами переводов:

const locale = {
    title: 'Успех',
    message: 'Данные сохранены'
};

iziToast.settings(locale);

При смене языка:

iziToast.settings({
    title: 'Success',
    message: 'Data saved'
});

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

Использование шаблонов

Для динамических сообщений можно применять шаблоны:

iziToast.settings({
    message: 'Пользователь {name} успешно создан'
});

Далее подстановка:

const name = 'Иван';

iziToast.show({
    message: iziToast.settings().message.replace('{name}', name)
});

Хотя встроенной поддержки шаблонов нет, такой подход широко используется.

Разделение по типам уведомлений

Практика показывает, что удобно задавать разные значения для разных типов сообщений:

const toastDefaults = {
    success: {
        title: 'Успех',
        message: 'Операция выполнена'
    },
    error: {
        title: 'Ошибка',
        message: 'Произошла ошибка'
    }
};

Применение:

iziToast.show(toastDefaults.success);
iziToast.show(toastDefaults.error);

Интеграция с кастомными обертками

В крупных проектах часто создаётся функция-обёртка:

function showToast(options = {}) {
    const defaults = {
        title: 'Система',
        message: 'Сообщение не задано'
    };

    iziToast.show({
        ...defaults,
        ...options
    });
}

Преимущества:

  • единая точка управления текстами
  • упрощённая замена библиотеки в будущем
  • стандартизация сообщений

Динамическое обновление настроек

Настройки можно изменять во время работы приложения:

iziToast.settings({
    title: 'Новое состояние системы'
});

Все последующие уведомления будут использовать обновлённый заголовок.

Влияние HTML в тексте

Параметры title и message поддерживают HTML:

iziToast.settings({
    title: '<b>Важно</b>',
    message: '<i>Обновление завершено</i>'
});

Особенности:

  • HTML не экранируется автоматически
  • требуется контроль входящих данных
  • возможно внедрение XSS при неправильной обработке

Ограничение длины текста

Длинные сообщения могут нарушать внешний вид уведомления. Практика включает:

function truncate(text, maxLength = 100) {
    return text.length > maxLength
        ? text.slice(0, maxLength) + '...'
        : text;
}

Использование:

iziToast.show({
    message: truncate(longText)
});

Связь с визуальными настройками

Тексты воспринимаются в контексте оформления:

  • короткие сообщения — подходят для position: 'topRight'
  • длинные — лучше отображаются в центре (center)
  • заголовок можно опускать при минималистичном дизайне

Пример:

iziToast.settings({
    title: '',
    message: 'Короткое уведомление'
});

Типовые ошибки при работе с текстами

  1. Дублирование строк Решается через settings или централизованные объекты

  2. Жёстко закодированные значения Усложняют локализацию

  3. Смешивание логики и текста Лучше выносить текст отдельно от бизнес-логики

  4. Отсутствие fallback-значений Может привести к пустым уведомлениям

Практический пример полной настройки

iziToast.settings({
    title: 'Система',
    message: 'Ожидание действия пользователя',
    timeout: 3000,
    position: 'topRight'
});

function notifySuccess(text) {
    iziToast.show({
        title: 'Успех',
        message: text
    });
}

function notifyError(text) {
    iziToast.show({
        title: 'Ошибка',
        message: text
    });
}

Такой подход сочетает:

  • глобальные значения
  • локальные переопределения
  • структурированную работу с текстами
Оглавление