ebidel / i18n-msg

Polymer element for i18n string replacement

i18n-msg web component

Custom element to do localization (i18n) message string replacement.

See the component page for more information.

i18n-msg's Issues

My try to extend the concept

Update
As mentioned further down the thread, I created a new project called i18-n because I work with it in a quite big project and changes are also quite massive.

Just updating this first message to redirect you right away so you don't accidentally waste time on old stuff (aka the branch in my i18n-msg fork).

Cheers

---

Maybe you're interested in giving this a look and providing some feedback.
Kinda forward of me, sooo... sorry.

I have a new branch in my fork of your project called i18n-msg-domain

I tried to expand the hole i18n-msg stuff and created an additional i18n-msg-domain component.
It make it possible to declaratively define the location of the locale files, what language to use and additionally the ability to define language domains. The part of loading the locale files is moved over to the new component.

So now we can throw multiple i18n-msg-domain elements on the page, for different languages and even to target different sets of i18n-msg elements (by using the language domain).
i18n-msg was also modified big time by me to make it work together with the new i18n-msg-domain.

I also added HTML sanitizing (I created an element/behavior called dom-purify for this).

A demo is in the component page under the demo area so you can try it out quickly.

So if you have to time to look into this, I would be more than thankfull.

i18n-msg doesn't work in FF and Edge.

I've tested this component in FireFox (41.0.2) and Edge (20.10240) and noticed that language doesn't switch. Also when i've put it into another component it wasn't displayed.

console error if I18nMsg.url changed (still goes to default locales url?)

Just checking, shouldn't this NOT be happening? I mean the following error:

since I'm setting the I18nMsg.url to a custom one (just outside "../locales") and this new url is working because it's translating everything (meaning, it's correctly finding the locales folder etc.)

And still getting that error (I guess because it's trying to find the locales from the default location even though a new url was used?)

Bind to attributes

Is there ability to bind an i18n-msg to attribute? For instance:

<paper-dropdown-menu label="{{change-lang | i18n-msg}}" relative layout inline horizontal center tabindex="0">

Where change-lang is msgid id.

Use element content as msgid

What are your thoughts on this? Wouldn't it be more convenient to use the inner content of the element and get rid of the msgid attribute / make the msgid optional.

Add event to know when xhr is done

Some users may want to modify the DOM after the fact.

Make messagesDir settable on global I18nMsg object

You have to set this on all instances and currently doesn't work very well.

'Object.observe' is deprecated

'Object.observe' is deprecated and will be removed in M50, around April 2016. See https://www.chromestatus.com/features/6147094632988672 for more details.

About attributes

Hello ebidel,

Thx for this component.

We use it in our components but we have a problem with the attributes. For example, how to translate the label of the paper-input ?

I try two solutions.

• The first one is without change anything in i18n-msg :

<paper-input label="[[computeI18n('msgId', i18n)]]" value="[[value1]]"></paper-input>

this.computeI18n = (msgid, i18n) => i18n.getMsg(msgid);

This solution is ok but I have to pass the i18n element to the compute ! So I have to create the statement of i18n :

 attached() {
    /** Append at least one i18n-msg. */
    let i18nLocal = document.querySelector('i18n-msg');
    if (i18nLocal === null) {
      i18nLocal = document.createElement('i18n-msg');
      Polymer.dom(this.root).appendChild(i18nLocal);
    }
    i18nLocal.addEventListener('i18n-language-ready', () => {
      this.i18n = i18nLocal;
      this.currentLanguage = this.i18n.language;
    });
    let userLang = navigator.language || navigator.userLanguage;
    if (I18nMsg.lang !== userLang) {
      I18nMsg.lang = userLang;
      I18nMsg.url = 'locales';
    }
  },

• My second solution is very simple :

<i18n-msg msgid="notices.name.capitalize" last-msg="{{lastMsg}}"></i18n-msg>
<paper-input readonly label="[[lastMsg]]" value="[[authorityIdentity.name]]"></paper-input>

I add lastMsg in your component like this:

lastMsg: {
  type: String,
  value: null,
  notify: true
}
...
instance.lastMsg = msg.message;

Have you a more usable solution for this case ?

Julien

'messages-url' not overriding default value

Without setting I18nMsg.url,

<i18n-msg messages-url="translations">fallback text</i18n-msg>

doesn't seem to override the default locales path.

is this the l10n/i18n solution from polymer roadmap?

Is this element the "Ship a l10n/i18n solution" referenced here:
https://blog.polymer-project.org/announcements/2016/02/16/2016-roadmap/

Or is there another element planned?

Is it currently possible to translate input placeholders?

for example in i18next it is:
data-i18n="[placeholder]placeTransl"

Is it possible with i18n-msg?

I can't change language back

I can't change the language back even on demo page

Add support for placeholders

I need translated strings with placeholders, so I looked at the i18n chrome spec(https://developer.chrome.com/extensions/i18n-messages) and created this based on it:
#25

I'm trying to follow the spec without implementing all of it so it can probably be extended in the future.

Currently there are two ways we can use placeholders:

Placeholders in the json file

{
  "bye": {
    "message": "Come back to $our_site$ soon!",
    "placeholders": {
      "our_site": {
        "content": "Example.com",
      }
    }
  }
}

These work pretty much as documented by chrome. We have a placeholders attribute that contains the placeholders. In this case there is one called our_site with a content of Example.com. When we find this placeholder we can do a simple string replacement. Replace $our_site$ with with the content of the our_site placeholder.

Placeholders in a component attribute

{
  "bye": {
    "message": "Come back to $our_site$ soon!",
    "placeholders": {
      "our_site": {
        "content": "$1",
      }
    }
  }
}

In this case the content of the placeholder is $1. In this case I am currently just checking that the first character is a $. If it is then I assume you are looking for an attribute. In this example, since it is $1 it will look for the first placeholder passed to the component($2 is the second, and so on). The placeholders are passed as an array in an attribute called placeholders:

<i18n-msg msgid="seconds" placeholders='["Example.com"]'>PLACEHOLDER_STRING</i18n-msg>

The result in both cases is: Come back to Example.com soon!

not loading translation when using in dom-repeat (giving msgid value by data-binding)

When using i18n-msg in a dom-repeat (giving msgid value by data-binding), it seems that the i18n-msg can't load the translations.

Maybe this could be happening because i18n-msg doesn't find the i18n-elements which are created in the dom-repeat.

thanks

i18n-language-ready never fires under polyfill

Hi,
'i18n-language-ready' fires under chrome 44 and chrome on android 43 but not under Firefox or Android stock browser.
But I might miss something ?
CR