Quick and Dirty Localization With JavaScript

Link from: http://experiments.wemakesites.net/quick-and-dirty-localization-with-javascript.html

You can read the original blogpost on this link, or you can download the example.

Demo

Hallo

Guten Morgen

Guten Abend

Register the Class

?

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

The AcidJs.Lokalizr.js Class

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97

( 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; })();

Using the Class

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

( 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" )); })();