Локализация текстов

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

Настройка текста кнопок

Все кнопки управления гидом — Next, Previous, Close, Done — могут быть локализованы через объект options. Для этого в конфигурации создаётся объект buttons:

const driver = new Driver({
    animate: true,
    opacity: 0.7,
    padding: 10,
    allowClose: false,
    overlayClickNext: true,
    doneBtnText: 'Готово',
    closeBtnText: 'Закрыть',
    nextBtnText: 'Далее',
    prevBtnText: 'Назад'
});

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

  • doneBtnText — текст кнопки завершения гида.
  • closeBtnText — текст кнопки закрытия всплывающей подсказки.
  • nextBtnText и prevBtnText — тексты навигационных кнопок.

Благодаря этим настройкам можно полностью перевести элементы управления на любой язык.

Локализация заголовков и описаний шагов

Каждый шаг гида задается объектом с ключами:

driver.defineSteps([
    {
        element: '#username',
        popover: {
            title: 'Имя пользователя',
            description: 'Введите здесь ваше имя для идентификации в системе.',
            position: 'bottom'
        }
    },
    {
        element: '#submit',
        popover: {
            title: 'Отправить данные',
            description: 'Нажмите, чтобы подтвердить ввод информации.',
            position: 'top'
        }
    }
]);

Важно:

  • Поля title и description полностью управляются разработчиком.
  • Для мульти-язычной поддержки удобно хранить тексты в отдельной структуре, например JSON:
const localization = {
    ru: {
        usernameTitle: 'Имя пользователя',
        usernameDesc: 'Введите здесь ваше имя для идентификации в системе.',
        submitTitle: 'Отправить данные',
        submitDesc: 'Нажмите, чтобы подтвердить ввод информации.'
    },
    en: {
        usernameTitle: 'Username',
        usernameDesc: 'Enter your name for identification in the system.',
        submitTitle: 'Submit Data',
        submitDesc: 'Click to confirm your information input.'
    }
};

И подставлять нужные значения при создании шагов:

driver.defineSteps([
    {
        element: '#username',
        popover: {
            title: localization.ru.usernameTitle,
            description: localization.ru.usernameDesc,
            position: 'bottom'
        }
    }
]);

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

Для приложений с переключением языков на лету можно использовать функцию для пересоздания шагов:

function setLanguage(lang) {
    const steps = [
        {
            element: '#username',
            popover: {
                title: localization[lang].usernameTitle,
                description: localization[lang].usernameDesc,
                position: 'bottom'
            }
        },
        {
            element: '#submit',
            popover: {
                title: localization[lang].submitTitle,
                description: localization[lang].submitDesc,
                position: 'top'
            }
        }
    ];

    driver.defineSteps(steps);
    driver.start();
}

// Пример вызова:
setLanguage('en');

Этот подход позволяет полностью локализовать гид без необходимости изменения кода самих шагов.

Настройка позиционирования и текста для разных языков

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

  • popover.width — ширина подсказки, чтобы длинные описания помещались без переноса текста.
  • padding — отступы между элементом и подсказкой.
  • position — адаптация положения подсказки, чтобы не перекрывать важные элементы интерфейса.
driver.defineSteps([
    {
        element: '#email',
        popover: {
            title: localization.ru.emailTitle,
            description: localization.ru.emailDesc,
            position: 'right',
            width: 300
        }
    }
]);

Интеграция с внешними библиотеками локализации

Driver.js легко интегрируется с системами, такими как i18next, Vue i18n или React Intl. Например, с i18next:

import i18next from 'i18next';

driver.defineSteps([
    {
        element: '#login',
        popover: {
            title: i18next.t('loginTitle'),
            description: i18next.t('loginDesc'),
            position: 'bottom'
        }
    }
]);

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

Выводы по локализации

  • Локализация в Driver.js полностью управляется через конфигурацию шагов и текстов кнопок.
  • Поддержка нескольких языков реализуется через структуру хранения текстов и динамическое создание шагов.
  • Управление позиционированием и шириной подсказок позволяет адаптировать гид под любые языковые особенности.
  • Интеграция с внешними библиотеками локализации упрощает поддержку и синхронизацию контента.

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

Оглавление