Skip to content

Commit 447c2a6

Browse files
committed
Documentation updated, resolves #10
1 parent b44410d commit 447c2a6

File tree

1 file changed

+103
-0
lines changed

1 file changed

+103
-0
lines changed

README.md

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,109 @@ translator.translate("home");
120120
translator.translate("home", { lang: "en" });
121121
```
122122

123+
Translating an invalid key outputs the input key, unless a fallback value has been specified.
124+
125+
```js
126+
// Creating a dictionary object
127+
var dict = {
128+
en: { home: "Home" },
129+
fr: { home: "Maison" }
130+
};
131+
132+
// Creating a translator object
133+
var translator = new EOTranslator(dict, "en");
134+
135+
// Returns `not-home` as no matching key in the dictionary was found
136+
translator.translate("not-home");
137+
138+
// Returns `Fallback value`
139+
translator.translate("not-home", { fallback: "Fallback value" });
140+
```
141+
142+
Nested keys are a big part of what makes EO TranslatorJS fun to use without sacrificing its simple usability.
143+
144+
```js
145+
// Creating a dictionary object
146+
var dict = {
147+
en: {
148+
home: "Home",
149+
a: {
150+
b: {
151+
c: {
152+
d: "Nested value 1",
153+
e: "Nested value 2",
154+
f: {
155+
g: "Nested value 3"
156+
}
157+
}
158+
}
159+
}
160+
}
161+
};
162+
163+
// Creating a translator object
164+
var translator = new EOTranslator(dict);
165+
166+
// Returns `Nested value 1`
167+
translator.translate("a.b.c.d");
168+
169+
// Returns `Nested value 3`
170+
translator.translate("a.b.c.f.g");
171+
172+
// Returns `a.b.c.f.g.h` as ho matching key(s) was found
173+
translator.translate("a.b.c.f.g.h");
174+
```
175+
176+
Another powerful feature that comes with EO TranslatorJS is embedding parameters.
177+
178+
```js
179+
// Creating a dictionary object
180+
var dict = {
181+
en: { greeting: "Hello, {name}!" }
182+
};
183+
184+
// Creating a translator object
185+
var translator = new EOTranslator(dict);
186+
187+
// Returns `Hello, Jeff!`
188+
translator.translate("greeting", { params: { name: "Jeff" } });
189+
```
190+
191+
Using EO TranslatorJS on a DOM element is just as simple. Mark the target element or elements that you want to translate the contents of, and then leave the rest for EO TranslatorJS.
192+
193+
```html
194+
<!-- The eo-translator attribute is the marker that tells EO TranslatorJS to translate the element, the value that's passed to it is the translation key -->
195+
196+
<!-- eo-translator-params holds the parameters. It must be valid JSON object. -->
197+
<span
198+
id="target"
199+
eo-translator="greeting"
200+
eo-translator-params='{ "name": "Luffy" }'
201+
></span>
202+
203+
<script>
204+
// Creating a dictionary object
205+
var dict = {
206+
en: { greeting: "Hello, {name}!" }
207+
};
208+
209+
// Creating a translator object
210+
var translator = new EOTranslator(dict);
211+
212+
// Getting the HTML element
213+
var target = document.getElementById("target");
214+
215+
// Translating the element
216+
translator.translateElement(target);
217+
</script>
218+
```
219+
220+
Or you can simply translate the entire document;
221+
222+
```js
223+
translator.translateDOM();
224+
```
225+
123226
## Credits
124227

125228
Icon made by [Freepik](https://www.freepik.com/) from [Flaticon](https://www.flaticon.com/) and is licensed by [Creative Commons BY 3.0](http://creativecommons.org/licenses/by/3.0/).

0 commit comments

Comments
 (0)