Перевод стандартных текстов

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

Основные элементы текста, доступные для перевода

Intro.js использует ряд предопределённых строк, которые выводятся по умолчанию в интерфейсе:

nextLabel — текст кнопки «Далее».
prevLabel — текст кнопки «Назад».
skipLabel — текст кнопки «Пропустить».
doneLabel — текст кнопки «Готово».
tooltipClass — CSS-класс для подсказок (может использоваться для изменения стиля подсказки вместе с текстом).

Каждый из этих параметров можно изменить через объект настроек при инициализации или через глобальный объект локализации.

Пример базовой локализации

introJs().setOptions({
  nextLabel: 'Следующий',
  prevLabel: 'Предыдущий',
  skipLabel: 'Пропустить',
  doneLabel: 'Готово'
}).start();

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

Использование объекта `i18n` для более гибкой локализации

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

const introJsLocales = {
  ru: {
    nextLabel: 'Далее',
    prevLabel: 'Назад',
    skipLabel: 'Пропустить',
    doneLabel: 'Готово'
  },
  en: {
    nextLabel: 'Next',
    prevLabel: 'Back',
    skipLabel: 'Skip',
    doneLabel: 'Done'
  }
};

Использование локализации при запуске:

const userLang = 'ru'; // язык выбирается динамически
introJs().setOptions(introJsLocales[userLang]).start();

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

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

Перевод подсказок и текстовых блоков шагов

Кроме кнопок, каждый шаг интерактивного руководства может содержать текст, который также подлежит переводу. Структура шага задаётся через объект:

introJs().setOptions({
  steps: [
    {
      element: '#step1',
      intro: 'Это первый шаг инструкции',
      position: 'bottom'
    },
    {
      element: '#step2',
      intro: 'Второй шаг с подробной подсказкой',
      position: 'right'
    }
  ]
}).start();

Для локализации текста шагов удобно создавать объект переводов, аналогичный локализации кнопок:

const stepsLocales = {
  ru: [
    { element: '#step1', intro: 'Это первый шаг инструкции', position: 'bottom' },
    { element: '#step2', intro: 'Второй шаг с подробной подсказкой', position: 'right' }
  ],
  en: [
    { element: '#step1', intro: 'This is the first step', position: 'bottom' },
    { element: '#step2', intro: 'Second step with detailed hint', position: 'right' }
  ]
};

introJs().setOptions({ steps: stepsLocales[userLang] }).start();

Динамическая замена текста на лету

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

setOptions({ nextLabel: '...' }) — меняет текст кнопки «Далее».
refresh() — перерисовывает текущую подсказку с новыми настройками.

Пример:

const intro = introJs();
intro.start();

// Через некоторое событие (например, смена языка)
intro.setOptions(introJsLocales['ru']);
intro.refresh();

Настройка текста кнопки завершения с кастомными событиями

Иногда требуется не только изменить текст, но и связать кнопку «Готово» с пользовательской функцией. Для этого используется метод oncomplete:

introJs().setOptions({
  doneLabel: 'Закрыть'
}).oncomplete(function() {
  alert('Инструкция завершена!');
}).start();

Можно комбинировать с локализацией:

introJs().setOptions({
  ...introJsLocales[userLang],
}).oncomplete(() => console.log('Tutorial finished')).start();

Локализация дополнительных элементов интерфейса

Навигационные стрелки могут быть переведены через CSS-псевдоэлементы вместе с локализацией кнопок.
Подсказки внутри шага (tooltip) поддерживают кастомные классы через tooltipClass, что позволяет добавлять переводы изображениями или специфическими стилями.

introJs().setOptions({
  tooltipClass: 'custom-tooltip-ru'
});

В CSS:

.custom-tooltip-ru .introjs-tooltiptext::after {
  content: 'Перевод: дополнительный текст';
}