Smart selectors to be used with i18next (same API as jquery-i18next but with html5 selectors)
Switch branches/tags
Nothing to show
Clone or download
Latest commit 7bc6bea Oct 9, 2018

README.md

loc-i18next

Introduction

A replicate of jquery-i18next module (which is great by the way!), intended for use without jquery.

Comparaison with jquery-i18next

jquery-i18next plugin :

jqueryI18next.init(i18nextInstance, $);
$(".nav").localize();

loc-i18next :

localize = locI18next.init(i18nextInstance);
localize(".nav");

Initialize the plugin

With options :

localize = locI18next.init(i18nextInstance, {
  selectorAttr: 'data-i18n', // selector for translating elements
  targetAttr: 'i18n-target',
  optionsAttr: 'i18n-options',
  useOptionsAttr: false,
  parseDefaultValueFromContent: true
});

Using default values :

localize = locI18next.init(i18nextInstance);

Using options in translation function

<a id="btn1" href="#" data-i18n="myKey"></a>
localize("#btn1", options);

or

<a id="btn1" href="#" data-i18n="myKey" i18n-options="{ 'a': 'b' }"></a>
localize("#btn1");

Usage of selector function

translate an element

<a id="btn1" href="#" data-i18n="myKey"></a>
localize("#btn1", options);

myKey: same key as used in i18next (optionally with namespaces) options: same options as supported in i18next.t

translate children of an element

<ul class="nav">
  <li><a href="#" data-i18n="nav.home"></a></li>
  <li><a href="#" data-i18n="nav.page1"></a></li>
  <li><a href="#" data-i18n="nav.page2"></a></li>
</ul>
localize(".nav");

translate some inner element

<div class="outer" data-i18n="ns:key" data-i18n-target=".inner">
  <input class="inner" type="text"></input>
</div>
localize(".outer");

set different attribute

<a id="btn1" href="#" data-i18n="[title]key.for.title"></a>
localize("#btn1");

set multiple attributes

<a id="btn1" href="#" data-i18n="[title]key.for.title;myNamespace:key.for.text"></a>
localize("#btn1");

set innerHtml attributes

<a id="btn1" href="#" data-i18n="[html]key.for.title"></a>
localize("#btn1");

prepend content

<a id="btn1" href="#" data-i18n="[prepend]key.for.title">insert before me, please!</a>
localize("#btn1");

append content

<a id="btn1" href="#" data-i18n="[append]key.for.title">append after me, please!</a>
localize("#btn1");

set as an attribute

<a id="btn1" href="#" data-i18n="[data-someNameAttribute]key.for.content"></a>
localize("#btn1");

Motivation

  • Having an occasion to try some packages like rollup, babel or uglify.
  • Obtaining the same kind of functionnalities than with jquery-i18next in a project not using jquery.

Project actively using loc-i18next

Blog posts about using loc-i18next