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

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

Подключение языковых пакетов

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

<script src="https://cdn.jsdelivr.net/npm/intro.js/minified/intro.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/intro.js/minified/introjs-ru.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/intro.js/minified/introjs-fr.min.js"></script>

Каждый файл содержит объект introJs().setOptions({ ... }) с предопределёнными текстами подсказок, кнопок и заголовков.

Настройка текста интерфейса

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

var intro = introJs();
intro.setOptions({
    steps: [
        { 
            element: '#step1', 
            intro: 'Это первый шаг инструкции' 
        },
        { 
            element: '#step2', 
            intro: 'Это второй шаг инструкции' 
        }
    ],
    // Пользовательские надписи
    nextLabel: 'Далее',
    prevLabel: 'Назад',
    skipLabel: 'Пропустить',
    doneLabel: 'Готово'
});

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

Для изменения языка без пересоздания шагов используется метод setOptions или обновление объекта labels:

function changeLanguage(lang) {
    const translations = {
        ru: { nextLabel: 'Далее', prevLabel: 'Назад', skipLabel: 'Пропустить', doneLabel: 'Готово' },
        en: { nextLabel: 'Next', prevLabel: 'Back', skipLabel: 'Skip', doneLabel: 'Done' },
        fr: { nextLabel: 'Suivant', prevLabel: 'Précédent', skipLabel: 'Passer', doneLabel: 'Terminé' }
    };

    intro.setOptions(translations[lang]);
}

Вызов changeLanguage('fr') немедленно обновляет кнопки текущей инструкции, сохраняя текущий шаг и состояние подсказки.

Перевод текстов шагов

Если необходимо переводить не только кнопки, но и тексты самих шагов, удобно хранить контент шагов в отдельной структуре:

const steps = {
    ru: [
        { element: '#step1', intro: 'Первый шаг на русском' },
        { element: '#step2', intro: 'Второй шаг на русском' }
    ],
    en: [
        { element: '#step1', intro: 'First step in English' },
        { element: '#step2', intro: 'Second step in English' }
    ]
};

function updateSteps(lang) {
    intro.setOptions({ steps: steps[lang] });
}

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

Адаптация подсказок под язык

Иногда длина текста подсказки меняется в зависимости от языка. Для корректного отображения рекомендуется использовать следующие методы:

  • introJs().refresh() — пересчитывает позиции подсказок после изменения текста.
  • Настройка CSS через классы .introjs-tooltip и .introjs-tooltiptext для адаптивной ширины и переноса текста.

Пример обновления после смены языка:

updateSteps('en');
changeLanguage('en');
intro.refresh();

Интеграция с языковыми переключателями

Для интерфейсов с языковыми переключателями удобно комбинировать события click с функциями updateSteps и changeLanguage:

document.querySelectorAll('.lang-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        const lang = btn.dataset.lang;
        updateSteps(lang);
        changeLanguage(lang);
        intro.refresh();
    });
});

Это обеспечивает мгновенную локализацию подсказок и кнопок, даже если инструкция уже запущена.

Особенности работы с многоязычными проектами

  • Сохранять контент шагов в единой структуре для всех языков.
  • Избегать хардкода текста прямо в вызовах introJs().start().
  • Использовать intro.refresh() после изменения длины текста или смены языка для корректного позиционирования подсказок.
  • Проверять локализацию динамически на разных разрешениях экрана, так как длинные переводы могут вызывать обрезание текста или выход за границы окна.

Заключение по динамической смене языка

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

Оглавление