HTML5, CSS3 & JS Experiments

By Martin Ivanov

Quick and Dirty Localization

Demo

Hello

Good Morning

Good Evening

Register the Class

<script src="AcidJs.Lokalizr.js"></script>

Usage and Code Insight

(function() {
    window.lang = new window.AcidJs.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");
    //window.lang.localize("en-US");
    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"));
})();
(function() {
    "use strict";
    
    /*
     * @namespace AcidJs
     **/
    if(undefined === window.AcidJs) {
        window.AcidJs = {};
    }
    
    /*
     * @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.AcidJs.Lokalizr = Lokalizr;
})();