Реализация функции переключения языков

Приступим к созданию интерактивного элемента на html-странице - toolbar с переключателем.

Напишем код в html, отображающий toolbar на странице.

Также пропишем код scss. Чтобы элементы все отображались на странице корректно, нужно задать родительскому блоку свойство в стилях position: relative; так как элемент toolbar отображается с помощью абсолютного позиционирования.

Создадим коллекцию из 2-х элементов, по которым будет происходить клик - русский язык или английский, запишем её в переменную toolbarItems и с помощью метода forEach создадим обработчик событий для каждого элемента данной коллекции. Далее, запишем в переменную lang строку ru или en в зависимости от клика на элемент (у каждого элемента есть дата-атрибут data-lang), и с помощью свойства строки браузера location.href добавим в строку браузера hash - ru или en в зависимости от того, на какой элементы мы кликнем, - выберем русский язык или английский. И перезагрузим страницу используя метод location.reload().

Для начала, перед созданием основной функции создадим две вспомогательные, которые будут добавлять или удалять активный класс toolbar--active, который добавляет элементу, по которому произошло событие клика, в интерактивном элементе toolbar, - нижнее подчеркивание и выделяет элемент жирным цветом (font-weight: 600):

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

Далее мы получаем значение hash, которое создали на этапе клика по элементу в toolbar, с помощью метода substring(1), обрезаем hash слева на один символ (#ru или #en в зависимости от нажатия на элемент в toolbar) - получаем ru или en в переменную hash.

Далее, через if - statement проверяем, если hash = ru, запускаем выше созданную функцию, которая добавляет элементу RU в toolbar активный класс toolbar--active, делающий букву с подчеркиванием и добавлением font-weight: 600, если hash = en, тогда добаляем класс элементу EN из toolbar.

Далее, проверяем, если пользователь зашел на страницу и ничего пока что не выбирал (никакой из языков), тогда нужно сделать язык по умолчанию, проверив, есть ли в массиве allLangs значение hash (ru или en), то есть таким образом мы проверяем нажатие на один из элементов в toolbar. Если его нет, - значит hash в строке браузера еще не установлен, следовательно нужно его установить принудительно и обновить страницу.

Далее через цикл for нужно пройтись по всем ключам, созданным в объекте langs, который мы создавали в самом начале, и найти все элементы на странице, которые имеют префикс '.lang-'. То есть теперь, когда мы создаем элемент, в html, к примеру, какой - то текст в теге p, и нам нужно сделать его перевод, нужно просто добавить к нему класс lang-class-name, где вместо класса - любой нужный класс. Всё, что находится после lang-, а именно class-name, нужно записать в качестве ключа в объекте langs. Таким образом мы нашли все элементы на странице, которые содержат префикс lang- .

Далее, с помощью проверки, смотрим, есть ли сам элемент на странице html, а также, имеет ли объект langs ключ, а именно класс элемента, который требуется перевести, и значение - хранящееся в объекте, который в свою очередь хранит в качестве ключей - язык, а в качестве значения - перевод. И если объект содержит нужный класс элемета, - остается только заменить текст нужных элементов на html - странице c помощью метода innerHTML, присвоив значение из объекта langs - langs[key][hash], где key - нужный класс выбранного элемента для перевода, а hash - значение в браузерной строке после # - ru или en в зависимости от выбранного языка. Таким образом в выбранный элемент для перевода на странице html вставляется значение перевода из объекта langs.

При разработке сайта, функционала, который мы описали выше, может быть недостаточно. Могут возникнуть случаи, когда на странице html есть однотипные повторяющиеся элементы. Например, нужно перевести текст, который содержится в слайдере. Здесь мы имеем дело с повторяющимися однотипными элементами. В таком случае функция changeLang() работать не будет должным образом, и чтобы всё работало, нужно добавить следующий блок кода в функцию changeLang():

С помощью этого блока кода мы получаем на странице все однотипные элементы и в каждый такой элемент с помощью метода innerHTML вставляем значение перевода из нового объекта repeatElems, который по структуре ни чем не отличается от объекта langs. Просто в него мы будем складывать все ключи повторяющихся элементов на странице html.

При работе с плейсхолдерами, - надписями, которые содержатся в текстовых формах ввода, таких как input, textarea, следующий код поможет переводить текст плейсхолдера. Его также нужно поместить в функцию changeLang(). По аналогии, нужно дополнительно создать объект placeholders, который по структуре ничем не отличается от объектов langs и repeatElems. В него нужно помещать в качестве ключей название классов у элементов, которые имеют атрибут placeholder. А в качество значений - объект с переводом на английский и русский, как было описано ранее.

При разработке одного сайта мне потребовалось переводить всплывающие подсказки у элементов. То есть, при наводе на некоторые элементы пользователь может увидеть всплывающие подсказки с текстом. Это делается с помощью атрибута title в html-элементе. Следующий код реализует перевод таких всплывающих подсказок, - как для одного элемента, так и для множества однотипных. Для этого нужно также создать 2 дополнительных объекта titles и repeatTitles по аналогии с предыдущими объектами langs, repeatElems и placeholders. Блок кода помещается в основную функцию changeLang().