Работа в Svelte

Для начала необходимо установить библиотеку через npm:

npm install intro.js

После установки можно импортировать необходимые стили и скрипты в компонент Svelte:

Важно подключать CSS Intro.js, иначе подсказки будут отображаться без стилизации.

---

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

Intro.js работает через создание экземпляра с помощью функции introJs() и вызова метода start() для запуска тура:

Начать тур

Это минимальный пример, где тур стартует при нажатии кнопки. По умолчанию Intro.js ищет элементы с атрибутом data-intro.

---

Настройка шагов тура

Каждый шаг тура можно определить через атрибуты HTML:

Элемент 1
Элемент 2

Альтернативно шаги можно задавать программно при инициализации:

const steps = [
  { element: '#step1', intro: 'Первый шаг' },
  { element: '#step2', intro: 'Второй шаг' },
];

function startTour() {
  introJs().setOptions({ steps }).start();
}

Ключевые опции:

• element — селектор или DOM-элемент, к которому привязан шаг.
• intro — текст подсказки.
• position — положение подсказки относительно элемента (top, right, left, bottom, auto).

---

Управление событиями тура

Intro.js предоставляет ряд событий, на которые можно подписаться для управления логикой приложения:

const tour = introJs();

tour.onbeforechange(function(targetElement) {
  console.log('Перед сменой шага:', targetElement);
});

tour.onafterchange(function(targetElement) {
  console.log('После смены шага:', targetElement);
});

tour.onexit(function() {
  console.log('Тур завершен или прерван');
});

tour.start();

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

---

Интеграция с реактивностью Svelte

Svelte позволяет реактивно управлять элементами и состоянием, что удобно использовать совместно с Intro.js:

Старт тура
Элемент 1
Элемент 2

Реактивная переменная isTourActive позволяет запускать тур в нужный момент жизненного цикла компонента.

---

Работа с динамически создаваемыми элементами

Если элементы появляются после рендера, необходимо запускать Intro.js после того, как DOM обновился:

import { tick } from 'svelte';

async function startDynamicTour() {
  // Подождать рендер динамических элементов
  await tick();

  introJs().setOptions({
    steps: [
      { element: '#dynamic1', intro: 'Динамический шаг 1' },
      { element: '#dynamic2', intro: 'Динамический шаг 2' },
    ]
  }).start();
}

Использование tick() гарантирует, что все элементы будут присутствовать в DOM перед запуском тура.

---

Кастомизация внешнего вида

Intro.js позволяет изменять стили подсказок через CSS или классы:

.introjs-tooltip {
  background-color: #333;
  color: #fff;
  font-size: 14px;
  border-radius: 8px;
}

.introjs-arrow {
  border-color: #333;
}

Для Svelte проектa рекомендуется использовать scoped стили в