Namespace: i18n

Format the date according to the regional settings

Calculate the difference of specified date from now.

The object returned looks like that:

 {
     past: true,     // True if the date is past, false for future
     years: 1,       // Number of years between now and the date
     months: 0,      // Number of months between now and the date
     days: 2,        // Number of days between now and the date
     hours: 3,       // Number of hours between now and the date
     minutes: 5,     // Number of minutes between now and the date
     seconds: 6      // Number of seconds between now and the date
 }

Get a prettify string that reprensent the relative date from now.

This method can produce the following type of results (past and future):

 "A year ago" 
 "In one year"

 "2 years ago"
 "In 2 years"

 "A month ago"
 "In one month"

 "3 months ago"
 "In 3 months"

 "Yesterday at 14:25:36"
 "Tomorrow at 14:25:36"

 "2 days ago"
 "In 2 days"

 "An hour ago"
 "In one hour"

 "2 hours ago"
 "In 2 hours"

 "A minute ago"
 "In one minute"

 "2 minutes ago"
 "In 2 minutes"

 "Moments ago"
 "In 2 seconds"

Executes AJAX query to ontain translation data and put it in cache.

Translate the user interface using the data-t HTML attributes.

Consider the following HTML code:

 <div id="myFragment">
     <p data-t="my.paragraph"></p>
     <label data-t="my.label" for="myInput"></label>
     <input data-t="my.input" id="myInput" type="text" />
 </div>

And the following translation file:

 {
     "my.paragraph": "I'm the text of the paragrah.",
     "my.label.text": "I'm the text of the label.",
     "my.label.title": "I'm the title of the label.",
     "my.input.placeholder": "I'm the placeholder of the input."
 }

You can either call the portal.i18n.reloadUi(); if you want entirely translate the current HTML document, or you can call the portal.i18n.reloadUi(myFragment); if you want to translate children of the myFragment elements

This will produce the following DOM:

 <div id="myFragment">
     <p data-t="my.paragraph">I'm the text of the paragraph.</p>
     <label data-t="my.label" for="myInput" title="I'm the title of the label">I'm the text of the label.</label>
     <input data-t="my.input" id="myInput" type="text" placeholder="I'm the placeholder of the input." />
 </div>

Because the data-t HTML attribute are not removed, you can re-translate the entire page at any time, when the user change his preferred language, without to refresh the entire window.

The translated text is inject in different location according to the suffix of the translation key. Let's consider an element with the following data-t attribute: my.translation.key:

• my.translation.key Add the translation as a text of the HTML element (element.innerText = value)
• my.translation.key.text Same as above. Add the translation as a text of the HTML element (element.innerText = value;)
• my.translation.key.title Add the translation as a title of the HTML element (element.setAttribute("title", value);)
• my.translation.key.placeholder Add the translation as a placeholder of the HTML element (element.setAttribute("placeholder", value);)
• my.translation.key.value Add the translation as a value of the HTML element (element.value = value);)

In addition of the data-t this method also deals with the data-to in order to interpolate the translation. The data-to may contains a valid JSON array. The data-to could contains string, number, boolean or object with all the following optional properties:

• relativeDate: When this property is present it will use the relative date.
• toLowerCase: Transform the string to lower case when auto-generated (like for relativeDate)

The following code:

 <p data-t="greeting" data-to="["John",5,{"relativeDate":"2018-02-01 11:53:48","toLowerCase":true}]"></p>

With the translation file:

 {
     "greeting": "Hello {0}, you have visited this page {1} times, the last time was {2}."
 }

Will produce:

 <p data-t="greeting" data-to="["John",5,{"relativeDate":"2018-02-01 11:53:48","toLowerCase":true}]">Hello John, you have visited this page 5 times, the last time was a moment ago.</p>

Set the configuration of the i18n

     portal.i18n.setConfig({
         languageKey: 'fr-FR',
         localeUrlFormat: '/locale/myApp.json',
         relativeUrlToPortal: '../../'
     });

(Please note that the i18n will automatically replace myApp.json to myApp-en-GB.json or myApp-fr-FR.json according to the current user language key).

Give the translation of the specified key.

 portal.i18n.translate("one");
 // => "One" (for "en-GB")
 // => "Un" (for "fr-FR")


 portal.i18n.translate("you.are", "John", 5, "developer");
 // => "You are John, 5 years old developer" (for "en-GB")
 // => "Vous êtes John, un developer avec 5 ans d'experience" (for "fr-FR")

 // In the latest example, the "en-GN" version of the JSON translation file looks like this:
 // {
 //      "your.are": "You are {0}, {1} years old {2}"
 // }