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:

[sourcecode language=”javascript”]
(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;
})();
[/sourcecode]

Example Markup:

[sourcecode language=”xml”]
<p data-lang="hello">Hello</p>
<p data-lang="good-morning">Good Morning</p>
<p data-lang="good-evening">Good Evening</p>
[/sourcecode]

Usage:

[sourcecode language=”javascript”]
(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"));
 })();
[/sourcecode]

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

Enjoy the weekend!

Related Posts