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

Кажется, ты используешь 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>

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

comments powered by HyperComments

Не забудь подписаться на группы в социальных сетях, чтобы всегда быть вкурсе последних событий!

Jazzcatt
2015-12-23 16:03:21
sorry, не в json файле а в локалях
Jazzcatt
2015-12-23 16:03:24
указывается в "browser.json" <idname attrname:"enter some text">
Nikita Sp
2015-12-23 16:06:37
т.е. в файле локализации можно указать атрибут для элемента, который нужно локализовать, которого нет в списке разрешенных и оно сработает? Может на jsFiddle сделаете пример? Заранее спасибо.
Steklorez
2016-01-26 17:21:38
Вот и у меня проблема, самый простой пример бы решил все недопонимания. Автор, нельзя ли просто пример для понимания привести?
Nikita Sp
2016-01-26 17:23:07
Спасибо за комментарии. Пример чего вас интересует? Примеры добавления атрибутов и элементов добавлены, читайте внимательно.
Nikita Sp
2016-01-26 18:38:09
Дополнил статью, спасибо за комментарии)
Steklorez
2016-01-26 22:34:44
Спасибо за дополнения!
Steklorez
2016-01-26 23:54:48
Всё получилось по вашим дополненным примерам) Жаль, что на этом плагине http://unitegallery.net/index.php?page=tiles-justified такое не работает. Надписи на картинках не изменить. Ну это уже вопросы к автору задам, может посоветует.
Вверх!

Меню блога

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

Облако тегов