CODEWITHSUNDEEP
javascriptember.jsinternationalization
blueFast
blueFast

Reputation: 44331

Serving a language file depending on language preference settings

In my ember application I am supporting different languages. I am doing it this way:

This is part of the index.html:

<script src="scripts/vendor/ember.js"></script>
<script src="scripts/vendor/ember-i18n.js"></script>
...
<script>window.mynamespace = {};</script>
<script src="scripts/languages/en.js"></script>
<script src="scripts/ember_application.js"></script>

In my languages/es.js I configure a translations object as expected by ember-i18n:

var lang = {
    key1 : 'Translation1',
    ...
};
window.mynamespace.lang = lang;

And now in my Ember application, I can do:

Ember.I18n.translations = window.mynamespace.lang;
var App = Ember.Application.createWithMixins({...});

I have three questions:

  1. Is there another approach for serving multi-lingual pages? Specifically I do not like very much the use of window.mynamespace, but I do not know how to share those settings before creating my ember application.
  2. How can I serve a different language file, for example scripts/languages/es.js, based on the language preference settings in the browser (comming in the HTTP request)?
  3. And this one is more difficult: how could I serve a different language file, depending on a database setting (belonging to the user profile for my application)? This setting would override the *language preference settings` coming in the HTTP request.

Upvotes: 2

Views: 1546

Answers (1)

Fenixp
Fenixp

Reputation: 645

The way I'm doing it is to keep several separate language files, figure out the browser's language setting and then load the appropriate file. Here's the function I'm using (most likely not perfect, but it does what you'd expect):

function loadLanguage() {
    "use strict";
    if (window.navigator.language) {
        LocalLanguage = window.navigator.language;
    } else if (window.navigator.userLanguage) {
        LocalLanguage = window.navigator.userLanguage;
    } else {
        LocalLanguage = "en";
    }

    var fileref = document.createElement('script');
    fileref.setAttribute("type", "text/javascript");

    switch (LocalLanguage) {
    case "cs-CZ":
    case "cs":
        LocalLanguage = "cs";
        fileref.setAttribute("src", "Language/cz-CZ.js");
        document.getElementsByTagName("head")[0].appendChild(fileref);
        break;
    default:
        LocalLanguage = "";
        fileref.setAttribute("src", "Language/en-EN.js");
        document.getElementsByTagName("head")[0].appendChild(fileref);
        break;
    }
}

LocalLanguage is a global variable I use to quickly figure out the language setting regardless of the used browser.

Question no.3: As for serving a different file based on a setting in the database, that sounds fairly simple actually - in your code, there's a point where you have to decide which localization you wish to use. Just check if there's a user-defined localization (store it somewhere, or initially set the language preference to 'none' or something in the database and check if the user have changed that, anything along those lines) and if the user has defined a localization, just skip the entire process of checking browser for language settings and just get the value set in the database.

Upvotes: 1

Related Questions