An Element-Extension to translate it's content. It is written with Vanilla-JS and HTML5-Standards. It recognizes the language of the browser and searching up your translation-keys in a dictonary. You can provide your JSON-Dictonary on your own.
It's not as complex as other i18n-components, but it is simple and extendable. This project is at an early stage and needs further development.
<p>Firstname: <i18n-translate>person.firstname</i18n-translate></p>
<p>Lastname: <i18n-translate>person.lastname</i18n-translate></p>
<p>Not-Known: <i18n-translate>unkown</i18n-translate></p>First of all make sure you have the Polymer CLI installed. Then run polymer serve to serve your element locally.
You had to include your Language-DB as a JSON-File into the HTML-Document. Make sure you have tagged it with i18n-data. For example your document looks like this:
<head>
<link i18n-data rel="import" href="language.html">
</head>
<i18n-translate>your.key.to.translate</i18n-translate>So your language.html should contain the following:
{
"en": {
"your": {
"key": {
"to": {
"translate
}
}
}
}
}npm i @tomuench/i18n-translate
In the following section it is described how to extend this web-component.
$ polymer serve --open
$ polymer test
- Fork it!
- Create your feature branch: git checkout -b my-new-feature
- Commit your changes: git commit -am 'Add some feature'
- Push to the branch: git push origin my-new-feature
- Submit a pull request :D
This web-component belongs to the EFRE research-project Vet:ProVieh from the University of Applied Science Osnabrück.
Thanks to Adam Bien for his inspriation in the blog-entry http://www.adam-bien.com/roller/abien/entry/simplest_possible_internationalization_with_vanilla.