Здравствуй, уважаемый друг!

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

Спасибо за понимание.

Теперь мы команда!

Локализация атрибутов при помощи l20n

Автор: в категории Статьи о JavaScript 8 комментариев

В прошлый раз мы познакомились с фреймворком l20n, который позволяет добавить на ваш сайт локализацию при помощи JavaScript. Однако, в некоторых случаях, как показал опыт, необходима локализация не только текста внутри HTML-элементов (тегов), но и их атрибутов.

Добавление тегов и атрибутов в L20N

Дело в том что при локализации сайта, в некоторых случаях, приходится использовать, например, разные классы стилей оформления для разных языков сайта. Ярким примером такой необходимости является использование изображений, содержащих текст на разных языках, в качестве фона элемента.

Итак, для решения проблемы локализации любого атрибута с помощью JavaScript фреймворка l20n, нам необходимо открыть сам файл скрипта и найти следующие строки:

z = {
    elements: ["a", "em", "strong", "small", "s", "cite", "q", "dfn", "abbr", "data", "time", "code", "var", "samp", "kbd", "sub", "sup", "i", "b", "u", "mark", "ruby", "rt", "rp", "bdi", "bdo", "span", "br", "wbr"],
    attributes: {
        global: ["title", "aria-label"],
        a: ["download"],
        area: ["download", "alt"],
        input: ["alt", "placeholder"],
        menuitem: ["label"],
        menu: ["label"],
        optgroup: ["label"],
        option: ["label"],
        track: ["label"],
        img: ["alt"],
        textarea: ["placeholder"],
        th: ["abbr"]
    }
}

Обратите внимание: в данной статье приводится не минифицированный кусок кода, поэтому при поиске по файлу лучше пользоваться просто тегами или атрибутами. Например: «placeholder», «small» и т.д.

В данном объекте (z) определяются все возможные элементы для локализации их скриптом, а также доступные для обработки атрибуты. Если вам необходимо добавить элемент для локализации, которого нет в списке, достаточно добавить его в массив elements объекта z. Пример добавления элемента для локализации:

z = {
    elements: ["a", "em", "strong", "small", "s", "cite", "q", "dfn", "abbr", "data", "time", "code", "var", "samp", "kbd", "sub", "sup", "i", "b", "u", "mark", "ruby", "rt", "rp", "bdi", "bdo", "span", "br", "wbr", "YOUR_ELEMENT"],
    attributes: {
        global: ["title", "aria-label"],
        a: ["download"],
        area: ["download", "alt"],
        input: ["alt", "placeholder"],
        menuitem: ["label"],
        menu: ["label"],
        optgroup: ["label"],
        option: ["label"],
        track: ["label"],
        img: ["alt"],
        textarea: ["placeholder"],
        th: ["abbr"]
    }
}

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

Пример добавления общего атрибута для локализации (атрибут будет локализован для всех элементов страницы):

z = {
    elements: ["a", "em", "strong", "small", "s", "cite", "q", "dfn", "abbr", "data", "time", "code", "var", "samp", "kbd", "sub", "sup", "i", "b", "u", "mark", "ruby", "rt", "rp", "bdi", "bdo", "span", "br", "wbr"],
    attributes: {
        global: ["title", "aria-label", "class"],
        a: ["download"],
        area: ["download", "alt"],
        input: ["alt", "placeholder"],
        menuitem: ["label"],
        menu: ["label"],
        optgroup: ["label"],
        option: ["label"],
        track: ["label"],
        img: ["alt"],
        textarea: ["placeholder"],
        th: ["abbr"]
    }
}

Пример добавления локализации атрибута для определенного элемента (атрибут будет локализован только для указанного элемента):

z = {
    elements: ["a", "em", "strong", "small", "s", "cite", "q", "dfn", "abbr", "data", "time", "code", "var", "samp", "kbd", "sub", "sup", "i", "b", "u", "mark", "ruby", "rt", "rp", "bdi", "bdo", "span", "br", "wbr"],
    attributes: {
        global: ["title", "aria-label"],
        a: ["download"],
        area: ["download", "alt"],
        input: ["alt", "placeholder"],
        menuitem: ["label"],
        menu: ["label"],
        optgroup: ["label"],
        option: ["label"],
        track: ["label"],
        img: ["alt"],
        textarea: ["placeholder"],
        th: ["abbr"],
        your_element: ["param1", "param2", "etc"]
    }
}

Вот таким простым образом вы можете модифицировать фреймворк l20n для локализации сайта на JavaScript. Данное решение было найдено в достаточно поспешном темпе, и если вы знакомы более красивым и лаконичным решением (без редактирования файла фрейморка), буду рад если поделитесь им в комментариях.

UPD: после того как мы добавили необходимые атрибуты в список разрешенных, их необходимо локализовать в файле локализации. Локализация атрибутов производится следующим образом в файле локализации:

<testimg alt:"Тестовый альт" title:"Тестовый заголовок">
<testp "Текст для параграфа" class:"Локализованный класс">

А в файле html будет выглядеть так:

<img src="image.png" alt="Test alt" title="Test title" data-l10n-id="testimg">
<p class="localized class" data-l10n-id="testp>Text for the paragraph</p>

Спасибо пользователям, которые указали на недостаток в статье по локализации атрибутов. По какой-то причине, на момент написания статьи, я счел это очевидным. 🙂

8 комментариев

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

      Может на jsFiddle сделаете пример?
      Заранее спасибо.

  • Вот и у меня проблема, самый простой пример бы решил все недопонимания.
    Автор, нельзя ли просто пример для понимания привести?

    • Спасибо за комментарии.
      Пример чего вас интересует?
      Примеры добавления атрибутов и элементов добавлены, читайте внимательно.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.

Вверх!

Меню блога

Категории блога

Облако тегов