Quick and Dirty Localization With JavaScript

Here’s a quick and dirty JavaScript localization routine that provides basic localization (no support for plurals, etc) , operates on the DOM of the page and uses data-lang attribute for language keys storage. Lokalizr works with all major browsers, beginning with IE8. If you do not want to read the code below, you can just download and test the class from this link.

The Lokalizr JavaScript Class:

(function() {
    "use strict";

    /*
     * @class Lokalizr
     * @constructor Lokalizr
     * @param languages {Object} [required]
     * @param defaultLanguage {String} [optional]
     **/
    function Lokalizr(languages, defaultLanguage) {

        this.languages = languages || {};

        if(defaultLanguage) {
            this.localize(defaultLanguage);
        }
    }

    Lokalizr.prototype = {

    /*
     * @map ATTR
     * @public
     **/
    ATTRS: {
        lang: "data-lang"
    },

    /*
     * @map MESSAGES
     * @public
     **/

    MESSAGES: {
        invalid: "Invalid language code."
    },

    /*
     * @method localize
     * @public
     * @param langCode {String} [required]
     **/
    localize: function(langCode) {
        if(false === "querySelectorAll" in document) {
            return;
        }

        var
            lang = this.languages[langCode],
            attr = this.ATTRS.lang,
            elements = document.querySelectorAll("[" + attr + "]");

        if(!lang) {
            this.error(this.MESSAGES.invalid);
            return;
        }

        for(var i = 0, len = elements.length; i < len; i++) {
            var
                element = elements[i],
                key = element.getAttribute(attr);

            element.innerHTML = lang[key];
        }
    },

    /*
     * @method getLangString
     * @public
     * @param langCode {String} [required]
     * @param langString {String} [required]
     * @return {String}
     **/
    getLangString: function(langCode, langString) {
        if(langCode && langString) {
            return this.languages[langCode][langString];
        }
    },

    /*
     * @method error
     * @public
     * @param message {String} [required]
     **/
    error: function(message) {
        window.alert(message);
    }
};

    window.Lokalizr = Lokalizr;
})();

Example Markup:

<p data-lang="hello">Hello</p>
<p data-lang="good-morning">Good Morning</p>
<p data-lang="good-evening">Good Evening</p>

Usage:

(function() {
    // instantiate Lokalizr and localize automatically
    window.lang = new window.Lokalizr({
        "en-US": {
            "hello": "Hi",
            "good-morning": "Good morning",
            "good-evening": "Good evening"
        },
        "de-DE": {
            "hello": "Hallo",
            "good-morning": "guten Morgen",
            "good-evening": "guten Abend"
        }
     } , "de-DE");

     // localize on demand
     window.lang.localize("en-US");

     // get specific language keys
     window.console.log("language string",
         window.lang.getLangString("de-DE", "hello"));
     window.console.log("language string",
         window.lang.getLangString("de-DE", "good-morning"));
     window.console.log("language string",
         window.lang.getLangString("de-DE", "good-evening"));
 })();

That’s it! Did you check the demo?.

Enjoy the weekend!

Related Posts

Advertisements

16 comments

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s