2

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.
blueFast
  • 41,341
  • 63
  • 198
  • 344

1 Answers1

1

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.

Fenixp
  • 645
  • 5
  • 22
  • Thanks, very interesting. Could you also post the relevant part of your `index.html`? I am not sure how all plays together just by looking at this function. For example: do you load all language files, and then select one, or just the active language is loaded? Do you first load ember, or later? ... – blueFast Aug 19 '13 at 07:35
  • @gonvaled: My solution doesn't actually need any presence in HTML - it's a part of a completely JS-driven project. I also don't use ember.js at all. Basically, all the function does is figure out the localization settings of your browser and then, based on that, it appends appropriate script file to the of your HTML. All the language files need to have the same formatting and variables for this solution to work (well they don't, but you'll end up with a lot of undefined-s). Upside is that, in the end, only one language file will be loaded in the browser. Downside-user can't change lang. – Fenixp Aug 19 '13 at 07:40
  • regarding question 3. I am not sure I can do all that while processing the HEAD and just return the required language, but I will investigate. Thanks. – blueFast Aug 19 '13 at 08:03
  • @gonvaled : Oh and do keep in mind that IE uses a different variable to store the localization settings(IE: window.navigator.userLanguage, rest of the world: window.navigator.language), and to make the matter at least a wee bit worse, at least for the cz localization, IE gives me the value of 'cs-CZ' and FireFox simply 'cs', that's why I have to check for both. – Fenixp Aug 19 '13 at 08:05
  • @gonvaled : Well if there's an issue with the speed of asynchronously gettind the data from your database, you could always load the data based on browser settings, wait for the server to respond, and reload page with the user data included. Or do a 'Getting your data, might take between 3 minutes to 5 days' loading bar :-P – Fenixp Aug 19 '13 at 08:09
  • Yep, I'll check that. In the meantime I have run into a problem with the code you suggested: since we are doing an `appendChild`, that is when the browser actually starts loading the language file. If the file is loaded fast (before the rest of application starts), everything is fine. But if the file is loaded after the ember application starts, the language bits are missing, and it crashes. How can I wait for the language file to load, without completely blocking the loading of the rest of the application? – blueFast Aug 19 '13 at 08:26
  • @gonvaled : the loadLanguage is the only function I ever call outside the [window.onload](http://javascript.about.com/library/blonload.htm) event, so that problem just sort of solves itself for me. It waits until all the script files are loaded, and as I call the languageLoad function globally (before the onload event), I am certain that all the .js files are loaded properly – Fenixp Aug 19 '13 at 08:34