Internationalization of sub components

[benj13260]

Description

The documentation is explaining the following:
The main application is usually responsible for loading the localized messages and setting the current language.
Each element that needs to localize messages should also add the Polymer.AppLocalizationBehavior and use the localize method to translate strings, as shown above.

Expected outcome

Sub-components should have language inherited and the load of locales shouldn't be needed.

Actual outcome

This is not working as you can see in my test: https://github.com/benj13260/localize

The "language" property need to be passed to every sub-components
and
the instruction to load the locales file must be specified in each components (even if it doesn't actually load it, this command is required or the localize is not working).

[rbjarnason]

👍 I agree, I do have a common app behavior that holds the selected language but I need to load translation in each components and include an iron-signals based solution to manage the language changes - it was easier than passing language as a property all over.

I'm not really sure what is best but maybe some solution based on a singleton could work - similar to i18next, which I use in another Polymer project.

[benj13260]

Hi,
Thanks for your comment!

The app-localize-behavior should already be managed as a singleton according to the documentation and this code shouldn't be needed... But as this is not the case I have applied your idea of a behavior combined with iron-signal compo.

Until someone can help me to work with this library as a singleton here is the solution I propose:

app-localize-behavior (Polymer component):

• Full library, including language prop declaration

main-app:

• Import library & declare behavior
• Attached function: Load JSON resource file and fire event to set the language across all components

myapp-localize-behavior (extend app-localize-behavior):

• Attached function: Load JSON resource file
• Function langUpd: Catch language change and update prop

myapp-page:

• Import library and declare extended behavior
• Import iron-signal and add html tag

---

main-app:

<link rel="import" href="../bower_components/app-localize-behavior/app-localize-behavior.html">
..
          <paper-button on-tap="langUpd" data-args="fr">Fr</paper-button>
           <paper-button on-tap="langUpd" data-args="en">En</paper-button>
..
          // load localized messages and send info across app
        attached() {
            this.loadResources(this.resolveUrl("./json/locales.json"));
            this.langUpd({detail: 'en'});
        },

        langUpd(e){
           if (e.target === undefined){
            this.fire('iron-signal', {name: 'language', data: e.detail});
           }else {
             this.fire('iron-signal', {name: 'language', data: e.target.dataset.args});
           }        
        },

---

myapp-localize-behavior:

<link rel="import" href="../../bower_components/app-localize-behavior/app-localize-behavior.html">

<script>
    Polymer.MyappLangBehaviorImpl = {

        // load localized messages
        attached() {
            this.loadResources(this.resolveUrl("../json/locales.json"));
        },

        langUpd(e, detail, sender){
            this.language = detail;
        },

    };
    Polymer.MyappLangBehavior = [ Polymer.AppLocalizeBehavior, Polymer.MyappLangBehaviorImpl ]

</script>

---

myapp-page:

<link rel="import" href="../common/myapp-lang-behavior.html">
<link rel="import" href="../../bower_components/iron-signals/iron-signals.html">
..
<iron-signals on-iron-signal-language="langUpd"></iron-signals>
..
behaviors: [
     Polymer.MyappLangBehavior,
],

[cadwmaster]

I had a similar solution but have some problems when the signal is been triggered before all the components are ready

[hyyan]

@notwaldorf is there a better way ?

[Mika83AC]

Hm.. why has this issue been closed although there is no real solution for using app-localize-behavior in a multiple component app? The current implementation is not usable for large projects.

[zlamma]

Re: @benj13260 . '...Sub-components should have language inherited'

We've created a way to inherit the language based on the HTML standard lang= attribute, which I think has a lot of advantages (in true web-components spirit, it's even Polymer agnostic on the outside, so can be used to create web elements reusable with minimal requirements).

The solution is based on our general purpose PropertiesFromAncestorBehavior. At the moment there's a rudimentary explanation how to achieve the inheritance here, but let me know if it's not clear and I might find time to cook up a demo.

A Polymer 2.0 version is on its way too.