Translation for browser, 642B minified+gzipped
First, load the script:
<script type="text/javascript" src="path/to/t10.js"></script>
Second, set the translation resource:
t10.setResource({
id_foo: 'Translated foo!',
id_bar: 'Translated bar!',
id_baz: 'Translated baz!'
});
Finally, perform the translation:
t10.scan();
That's it. This performs the translation on the entire page synchronously.
With the above call the following html:
<p>
<t>id_foo</t>
<span class="t-text-done">id_bar</span>
<input class="t-attr-done" placeholder="t:id_baz" />
</p>
Changes in to:
<p>
Translated foo!
<span class="t-text">Translated bar!</span>
<input class="t-attr" placeholder="Translated baz!" />
</p>
Alternatively you can use via npm.
First install t10 locally:
npm i t10
Then require / import it and use it:
const t10 = require('t10');
or:
import * as t10 from require('t10');
The rest is the same.
...<t>str_id</t>...
translated into:
...translated str_id...
<span class="t-text">str_id</span>
translated into:
<span class="t-text-done">translated str_id</span>
<input type="text" class="t-attr" placeholder="t:str_id" />
translated into:
<input type="text" class="t-attr-done" placeholder="translated str_id" />
You can hide untranslated elements by the following style:
t, .t-text, .t-attr {
visibility: hidden;
}
Note: t
tag and .t-text
, .t-attr
classes are going to be removed after the translation.
t10.setAvailables(['en', 'fr', 'ja']).getBestLanguage('ja'); // => 'ja'
t10.setAvailables(['en', 'fr', 'ja']).getBestLanuuage('de'); // => 'en' # the first available is the default
t10.setAvailables(['en', 'fr', 'ja']).getBestLanguage('en.US'); // => 'en'
t10.setAvailables(['en', 'fr', 'ja']).getBestLanguage('ja.JP'); // => 'ja'
var language = t10.setAvailables(['en', 'fr', 'ja']).getBestLanguage(getFromSystem());
$.getScript('path/to/resource/' + language + '.js').then(function () {
t10.scan();
});
t
function translates a single key.
t10.setResource({pen: 'ペン'});
t10.t('pen'); // => ペン
- None
MIT License (Yoshiya Hinosawa)