Форки и кастомизация исходного кода

Понимание структуры библиотеки Toastify — это легковесная библиотека для отображения уведомлений в веб-приложениях на JavaScript. В основе её работы лежит один универсальный класс Toastify, который управляет созданием, отображением и удалением уведомлений. Для успешной кастомизации необходимо понимать ключевые элементы исходного кода:

  • Конструктор – отвечает за инициализацию уведомления с настройками: текст, длительность, позиция, тип иконки и callback-функции.
  • Методы показа и скрытия (showToast(), hideToast()) – контролируют добавление уведомления в DOM и его плавное исчезновение.
  • CSS-инъекции – библиотека содержит встроенные стили, которые можно переопределять через опции style или через внешние CSS-классы.
  • Обработчики событий – onClick, onClose, onOpen обеспечивают гибкость взаимодействия с уведомлениями.

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

Форки Toastify

Форк — это создание собственной версии библиотеки с модификациями. Основные шаги при форке:

  1. Клонирование репозитория Получение исходного кода через Git позволяет работать с полной версией библиотеки. Обычно используется команда:

    git clone https://github.com/apvarun/toastify-js.git

  2. Изменение настроек по умолчанию В исходном коде определён объект defaults, который содержит базовые параметры уведомлений:

    const defaults = {
    text: "",
    duration: 3000,
    gravity: "top",
    position: "right",
    backgroundColor: "#333",
    stopOnFocus: true,
};

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

  3. Добавление новых методов Например, метод для показа уведомления с анимацией по кривой Безье:

    Toastify.prototype.showBezierToast = function(options) {
    this.options = { ...this.options, ...options };
    this.element.style.transitionTimingFunction = 'cubic-bezier(0.68, -0.55, 0.27, 1.55)';
    this.showToast();
};

  4. Интеграция с другими библиотеками Форки позволяют подключать Toastify к Vue, React или Angular без потери нативной функциональности. Для этого создаются адаптеры, которые вызывают showToast() через хуки компонентов.

Кастомизация уведомлений

Стилизация

  • style — объект CSS для прямого применения к DOM-элементу уведомления.
  • className — позволяет подключать внешние классы и использовать CSS-переменные, например:
Toastify({
    text: "Уведомление с кастомным стилем",
    className: "custom-toast",
    duration: 5000
}).showToast();

В CSS:

.custom-toast {
    background-color: #0066cc;
    border-radius: 8px;
    font-weight: bold;
}

Позиция и анимация

  • gravity — определяет вертикальное расположение (top или bottom).
  • position — горизонтальное расположение (left, center, right).
  • stopOnFocus — останавливает исчезновение уведомления при наведении мыши.
  • Для кастомной анимации можно переопределить метод showToast() и добавить keyframes для плавного появления и исчезновения.

Расширение функционала

  • Возможность добавлять кнопки внутри уведомлений через node:
Toastify({
    node: (() => {
        const div = document.createElement("div");
        div.innerHTML = "Нажми меня";
        div.addEventListener("click", () => alert("Кнопка нажата"));
        return div;
    })()
}).showToast();
  • Поддержка нескольких уведомлений одновременно с различными типами: успех, ошибка, предупреждение.

Работа с исходным кодом для расширений

  1. Модули ES6 Разделение исходного кода на модули позволяет подключать только необходимые функции, уменьшая размер сборки.

    import Toastify from './toastify.js';

  2. Тестирование изменений Для форков критически важно проверять совместимость с браузерами и существующими проектами. Используются простые HTML-страницы с набором уведомлений разных типов.

  3. Документация и комментарии Комментарии в исходном коде помогают при расширении функционала и служат ориентиром для командной разработки.

Практические приёмы форка

  • Создание темы по умолчанию — изменение цветов, шрифтов и теней для всего проекта.
  • Добавление событий логирования — можно отслеживать клики и закрытия уведомлений для аналитики.
  • Интеграция с API — например, уведомления о новых сообщениях из WebSocket, где кастомный Toastify обрабатывает данные в реальном времени.

Использование форков и кастомизации исходного кода позволяет полностью адаптировать Toastify под уникальные требования проекта, сохраняя лёгкость и простоту библиотеки, но расширяя возможности до уровня сложных корпоративных интерфейсов.

Оглавление