This is a very simple custom element that allows alternate content to be displayed based on a language parameter.
Install the component using Bower:
$ bower install eel-translate --save
Or download as ZIP.
-
Import polyfill:
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
-
Import custom element:
<link rel="import" href="bower_components/eel-translate/eel-translate.html">
-
Start using it!
Change language: <a onclick="changeLanguage('en')" href="#">english</a> <a onclick="changeLanguage('fr')" href="#">french</a> <a onclick="changeLanguage('zh')" href="#">mandarin</a> <eel-translate current="en"> <span lang="en" default="true">Hello!</span> <span lang="fr">Bonjour!</span> <span lang="zh">你好!</span> </eel-translate> <script> function changeLanguage(newLang) { var elements = document.querySelectorAll("eel-translate"); for (var i = 0; i < elements.length; ++i) { var element = elements[i]; element.setAttribute("current", newLang); } } </script>
It will display the value in the span with the
lang
attribute that matches the value in thecurrent
attribute.Determining the language key to use is outside the scope of this element.
Attribute | Options | Default | Description |
---|---|---|---|
current |
string | en |
The current language to use in the element. |
In order to run it locally you'll need to fetch some dependencies and a basic server setup.
-
$ npm install -g bower polyserve
-
Install local dependencies:
$ bower install
-
Start development server and open
http://localhost:8080/components/eel-translate/
.$ polyserve
-
Testing
Open browser and open
http://localhost:8080/components/eel-translate/test/
or
Install Web Component Tester
npm install -g web-component-tester
then run
wct
For detailed changelog, check Releases.