Популярные форки библиотеки

Форки библиотеки Intro.js представляют собой модифицированные версии оригинальной библиотеки, создаваемые сообществом разработчиков для расширения функциональности, устранения ограничений или адаптации под специфические сценарии использования. Основная идея форка — сохранить ядро Intro.js, обеспечивающее пошаговые интерактивные руководства, но при этом добавить новые возможности, улучшить совместимость или изменить визуальное оформление.

Ключевые направления развития форков включают:

  • Дополнительные визуальные эффекты: плавные анимации, затемнения фона, кастомные подсветки элементов.
  • Расширенные события и коллбеки: события onStepChange, onExit, onComplete дополняются новыми, например onStepSkip, onPopoverRender.
  • Поддержка адаптивного интерфейса: корректное отображение на мобильных устройствах и в динамически изменяемых DOM-структурах.
  • Локализация и мультиязычность: возможность легко подключать новые языковые пакеты и переключать тексты подсказок.

Основные популярные форки

1. Intro.js Extended

Intro.js Extended расширяет стандартный функционал:

  • Позволяет использовать HTML внутри подсказок, включая изображения, ссылки и интерактивные элементы.
  • Поддерживает динамическое изменение шагов во время работы сценария.
  • Добавляет новые опции позиционирования поповеров, включая позицию по центру окна и фиксированное закрепление относительно скролла.

Пример инициализации:

var tour = introJs();
tour.setOptions({
    steps: [
        { element: '#header', intro: 'Главная панель', position: 'bottom' },
        { element: '#menu', intro: 'Меню с функциями', position: 'right' }
    ],
    showStepNumbers: true,
    exitOnOverlayClick: false
});
tour.start();

2. Shepherd.js (форк концепции Intro.js)

Shepherd.js создавался как альтернатива с упором на модульность и расширяемость:

  • Каждый шаг является отдельным объектом с возможностью полного контроля событий.
  • Возможность использования Promise для асинхронных действий между шагами.
  • Гибкая интеграция с фреймворками типа React и Vue через адаптеры.

Особенность: полностью настраиваемый UI, включая кнопки навигации, анимацию появления поповеров и стили подсветки.

3. Intro.js React Fork

Форк для React позволяет:

  • Обертывать компоненты в для автоматического определения шага.
  • Управлять состоянием через React hooks и контекст приложения.
  • Динамически изменять шаги в зависимости от состояния компонента, что особенно полезно для SPA с множеством маршрутов.

Пример использования в React:

import { IntroStep, IntroTour } from 'introjs-react';

function AppTour() {
  const steps = [
    { element: '#button1', intro: 'Это кнопка 1' },
    { element: '#button2', intro: 'Это кнопка 2' }
  ];

  return ;
}

Кастомизация и стилизация форков

Форки предоставляют расширенные возможности кастомизации стилей, которые в оригинальном Intro.js ограничены.

  • CSS-переменные позволяют изменять цвет фона, шрифт подсказок, рамки поповеров.
  • Возможность подключения анимационных библиотек (например, Animate.css) для плавного появления и исчезновения подсказок.
  • Поддержка темной и светлой темы без необходимости переписывать основной CSS.

Пример подключения кастомного стиля:

.introjs-tooltip {
    background-color: #2c3e50;
    color: #ecf0f1;
    border-radius: 8px;
}
.introjs-tooltip-arrow {
    border-top-color: #2c3e50;
}

Расширение API форков

Многие форки добавляют новые методы и события:

  • addStep(stepConfig) — добавление шага динамически.
  • removeStep(stepId) — удаление шага.
  • goToStep(stepNumber) — переход к конкретному шагу без последовательного вызова nextStep.
  • События типа onStepSkipped или onStepPaused позволяют полностью контролировать логику пользовательского пути.

Использование расширенного API:

tour.onStepSkipped(function(step) {
    console.log('Пользователь пропустил шаг:', step);
});
tour.addStep({
    element: '#footer',
    intro: 'Подвал страницы',
    position: 'top'
});

Применение в реальных проектах

Форки широко используются для:

  • Веб-приложений с динамически загружаемым контентом, где стандартный Intro.js не всегда корректно определяет элементы.
  • Многостраничных и SPA-приложений, где требуется сохранение состояния тура между страницами.
  • Корпоративных порталов, где нужны кастомные дизайны и строгая локализация.

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

Оглавление