Хранение переводов

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

Объект translations

Для хранения переводов используется объект translations. Это структура, где ключами выступают коды языков, а значениями — наборы строк для конкретного языка. Каждая запись включает стандартные элементы интерфейса Intro.js:

const translations = {
  en: {
    next: 'Next',
    prev: 'Back',
    skip: 'Skip',
    done: 'Done'
  },
  ru: {
    next: 'Далее',
    prev: 'Назад',
    skip: 'Пропустить',
    done: 'Готово'
  },
  fr: {
    next: 'Suivant',
    prev: 'Retour',
    skip: 'Passer',
    done: 'Terminé'
  }
};

Ключевые моменты:

  • Ключи next, prev, skip, done соответствуют кнопкам управления шагами.
  • Можно добавлять новые языки, расширяя объект.

Применение перевода через метод setOptions

Intro.js позволяет задавать локализацию через параметр tooltipClass и объект i18n. Для применения перевода используется метод setOptions:

introJs().setOptions({
  steps: [
    {
      element: '#step1',
      intro: 'Пример шага 1'
    },
    {
      element: '#step2',
      intro: 'Пример шага 2'
    }
  ],
  i18n: translations['ru']
}).start();

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

  • Объект i18n содержит строки управления для текущего языка.
  • setOptions можно вызывать как один раз при инициализации, так и динамически менять язык перед запуском.

Динамическая смена языка

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

function startIntro(language) {
  introJs().setOptions({
    steps: [
      { element: '#step1', intro: translations[language].step1 || 'Default Step 1' },
      { element: '#step2', intro: translations[language].step2 || 'Default Step 2' }
    ],
    i18n: translations[language]
  }).start();
}

startIntro('fr');

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

  • При динамическом формировании шагов строки intro также могут быть локализованы.
  • Можно использовать fallback на английский язык при отсутствии перевода.

Расширение структуры переводов

Для более сложных интерфейсов можно хранить не только стандартные кнопки, но и переводы текстов шагов, заголовков или описаний элементов:

const translations = {
  ru: {
    buttons: {
      next: 'Далее',
      prev: 'Назад',
      skip: 'Пропустить',
      done: 'Готово'
    },
    steps: {
      step1: 'Описание первого шага',
      step2: 'Описание второго шага'
    }
  }
};

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

introJs().setOptions({
  steps: [
    { element: '#step1', intro: translations.ru.steps.step1 },
    { element: '#step2', intro: translations.ru.steps.step2 }
  ],
  i18n: translations.ru.buttons
}).start();

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

  • Разделение переводов для интерфейсных кнопок и текстов шагов.
  • Удобно для крупных проектов с множеством языков и сложной структурой контента.

Хранение переводов в отдельных файлах

Для проектов с большим количеством языков и шагов переводы рекомендуется хранить в отдельных JSON-файлах:

// ru.json
{
  "buttons": {
    "next": "Далее",
    "prev": "Назад",
    "skip": "Пропустить",
    "done": "Готово"
  },
  "steps": {
    "step1": "Описание первого шага",
    "step2": "Описание второго шага"
  }
}

Загрузка перевода:

fetch('/locales/ru.json')
  .then(response => response.json())
  .then(data => {
    introJs().setOptions({
      steps: [
        { element: '#step1', intro: data.steps.step1 },
        { element: '#step2', intro: data.steps.step2 }
      ],
      i18n: data.buttons
    }).start();
  });

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

  • Легко добавлять новые языки без изменения кода.
  • Поддержка динамической загрузки переводов с сервера или CDN.
  • Структурированное хранение упрощает поддержку и масштабирование.

Советы по управлению переводами

  • Использовать единый объект translations или отдельные JSON-файлы для всех языков.
  • Всегда задавать fallback-значения для ключей, чтобы избежать ошибок при отсутствии перевода.
  • Разделять переводы кнопок и шагов, чтобы было проще масштабировать проект.
  • Для крупных проектов рекомендуется создавать утилиты для загрузки и выбора языка, интегрируя их с Intro.js через setOptions.

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

Оглавление