Localizer.js

Native JavaScript plugin for multilingual Web applications and websites.

Installation

Step 1. Download and extract the Localizer.js package. Just call it like any other JS file (as it's a native JS plugin you don't need to call it after jQuery or any other library):

<script src="dist/Localizer.js"></script>

Step 2. Create a dictionary file using the following format (we prefer to save it in another file, like dictionary.js or something):

var localizerDictionary = {
	"en-us": {
		"phrase": "This phrase is in English."
	},
	"id-id": {
		"phrase": "Frasa ini dalam bahasa Indonesia."
	}
}

Step 3. In your HTML content, use the Localizer.js custom hash instead of the regular content:

<p class="content">${phrase}</p>

Step 4. In just three short lines of JavaScript you're ready to go! Right before </body>, in the bottom of your code, add the following lines:

<script>
	var Localizer = new LocalizerJS();  // Instance of Localizer.js class
	Localizer.setLanguage('id-id');  // Define Indonesian as the main language
	Localizer.setFallback('en-us');  // Define English as the fallback language

	Localizer.run();  // Go!
</script>

Step 5. Load your website and your HTML must now be:

<p class="content">Frasa ini dalam bahasa Indonesia.</p>

Using the above example, if the hash ${phrase} doesn't exist in the Indonesian dictionary, then the phrase will be written in English, as the English is defined as fallback language. If your key is missing both in Indonesian and English, the hash will be written as is.

Documentation (a.k.a. "I need more than just 5 steps")

The complete documentation of Localizer.js can be read here. By the way, Localizer.js is developed using TypeScript, so if you want to contribute with our project you need the TypeScript compiler or a software like CodeKit (please, don't send PRs modifying the compiled JS file in /dist).