sherby-localize
Mixin to localize Polymer components
Sherby.LocalizeMixin
If you want to translate, to localize your application or simply only
regroup all static texts, the Sherby.LocalizeMixin
can help you.
The mixin internally use a fork of AppLocalizeBehavior to wraps the
Format.js library with Chrome.i18n translation files. The
Chrome.i18n format allow to add an optional description
associated with
the translation (message
), to give an additional context to translators.
By exemple, a locales/en-CA.json file:
{
"meat-toppings": {
"description": "A pizza is nothing without meat.",
"message": "Meat Toppings",
}
}
If you want to have nested localization files, as below, you simply need
to provide all keys of the nested object, separate by . (delimiter by
default). By exemple, the key meat-toppings.bacon-pieces
will provide the
correct translation (Bacon Pieces) for the following json file:
{
"meat-toppings": {
"bacon-pieces": {
"description": "Bacon is life!",
"message": "Bacon Pieces"
}
}
}
Also, as this mixin use the UdeS.LanguageMixin, the localized file associated with the current language is dynamically loaded and the localised texts are automatically translated when the current language change.
Usage
Add the
@sherby/sherby-localize
dependency to your projet:npm install @sherby/sherby-localize
Create the locales directory near the component you want localized and add the localize files:
locales/en-CA.json
{ "bacon-pieces": { "description": "Bacon is life!", "message": "Bacon Pieces" } }
locales/fr.json
{ "bacon-pieces": { "description": "Bacon is life!", "message": "Morceaux de bacon" } }
Use it
// Import the `SherbyLocalizeMixin` inside the component you want localized import { SherbyLocalizeMixin } from '@sherby/sherby-localize/sherby-localize-mixin.js'; import { html, PolymerElement } from '@polymer/polymer/polymer-element.js'; /* eslint-disable no-unused-vars */ // Apply the mixin to your element class /** * @customElement * @polymer * @extends {PolymerElement} * @appliesMixin SherbyLocalizeMixin */ class MyElement extends SherbyLocalizeMixin(PolymerElement) { static get template() { // Use the `localize` function to translate all texts return html` <h2>[[localize('meat-toppings')]]</h2> `; } /** * Get the localized bacon pieces string. * @param {Function} localize Localize function. * @return {String} Localized bacon pieces. */ getLocalizedBaconPieces(localize) { return localize('meat-toppings.bacon-pieces') || ''; } }
Demo
<sherby-localize-demo></sherby-localize-demo>
Language aware with UdeS.LanguageMixin
If you want your component to be aware of the current language only,
you should take a look on UdeSLanguageMixin, a mixin used by
SherbyLocalizeMixin
.
Thanks
Special thanks to the Collaborne team for his app-localize-chrome-i18n-mixin mixin that inspired me for this mixin.
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- @polymer/app-localize-behavior#^3.0.0-pre.1
- @polymer/polymer#^3.0.0-pre.1
- @sherby/sherby-nested-property#^2.0.0-rc.1
- @udeselements/udes-language-mixin#^3.0.0-rc.1
- Released
- 2018-05-20
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Polymer 3.0+
- Browser
- Browser Independent
sherby-localize - Vaadin Add-on Directory
Mixin to localize Polymer components[[localize('meat-toppings')]]
`; } /** * Get the localized bacon pieces string. * @param {Function} localize Localize function. * @return {String} Localized bacon pieces. */ getLocalizedBaconPieces(localize) { return localize('meat-toppings.bacon-pieces') || ''; } } ``` ## Demo ```htmlView on GitHub
sherby-localize version 2.0.0-rc.1
### Dependencies
* @polymer/app-localize-behavior#^3.0.0-pre.1
* @polymer/polymer#^3.0.0-pre.1
* @sherby/sherby-nested-property#^2.0.0-rc.1
* @udeselements/udes-language-mixin#^3.0.0-rc.1