jokesterfr/i18n_messageformat_handlebars

## i18n_messageformat_handlebars
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <!--
    title: Demo using both handlebars and messageformat
    date: 2014-08-12
    -->
    <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
    <script src="https://raw.githubusercontent.com/SlexAxton/messageformat.js/master/messageformat.js"></script>
    <script src="https://raw.githubusercontent.com/SlexAxton/messageformat.js/master/locale/en.js"></script>
    <script src="https://raw.githubusercontent.com/SlexAxton/messageformat.js/master/locale/fr.js"></script>

    <script type="text/javascript">
      document.addEventListener('DOMContentLoaded', main);
      function main () {
        // Set our default language
        var currentLanguage = 'en-EN';

        // Our i18n dictionnary using messageformat syntax
        var i18n = {
          'en-EN': {
            title: 'This is a demo',
            toggleLanguage: 'Print this page in french',
            genderExample: '{GENDER, select, male{He} female{She} other{They}} liked this.',
            pluralExample: 'I like {NB, plural, one{this unique result} other{these # items}}.'
          },
          'fr-FR': {
            title: 'Ceci est une démo',
            toggleLanguage: 'Afficher cette page en anglais',
            genderExample: '{GENDER, select, male{Il} female{Elle} other{They}} a aimé ça.',
            pluralExample: 'J\'aime {NB, plural, one{cet unique item} other{tous les # items}}.'
          }
        };

        // Compile the dictionnary
        for (var lang in i18n) {

          // Known messageformat issue
          // @see https://github.com/SlexAxton/messageformat.js/issues/27
          var countryCode = lang.split('-')[0];

          var mf = new MessageFormat(countryCode);
          for (var label in i18n[lang]) {
            i18n[lang][label] = mf.compile(i18n[lang][label]);
          }
        }

        // Declaring our i18n helper to handlebars
        Handlebars.registerHelper('i18n', function(text, options) {
          text = text || 'undefined';
          options = options || {};
          var translate = i18n[currentLanguage][text];
          return new Handlebars.SafeString(translate(options.hash));
        });

        // Our data view (ie dynamic vars, u can play with them)
        var view = {
          nbitems: 1, // or 5
          mygender: 'male' // or female
        };

        function renderTemplate() {
          var source = document.getElementById('button-template').innerHTML;
          var template = Handlebars.compile(source);
          var dest = document.getElementById('dest');
          dest.innerHTML = template(view);
        }
        renderTemplate();

        window.toggleLanguage = function () {
          if (currentLanguage === 'fr-FR') {
            currentLanguage = 'en-EN';
          } else {
            currentLanguage = 'fr-FR';
          }
          renderTemplate();
        }
      }

    </script>

    <!-- Our handlebar simple template using i18n helper -->
    <script id="button-template" type="text/x-handlebars-template">
      <h2>{{i18n "title"}}</h2>
      <div>{{i18n "pluralExample" NB=nbitems}}</div>
      <div>{{i18n "genderExample" GENDER=mygender}}</div>
      <button onclick="toggleLanguage()">{{i18n "toggleLanguage"}}</button>
    </script>

    <!-- To receive dom content when tpl is compiled -->
    <div id="dest"></div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">

	<!--
	title: Demo using both handlebars and messageformat
	date: 2014-08-12
	-->
	<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
	<script src="https://raw.githubusercontent.com/SlexAxton/messageformat.js/master/messageformat.js"></script>
	<script src="https://raw.githubusercontent.com/SlexAxton/messageformat.js/master/locale/en.js"></script>
	<script src="https://raw.githubusercontent.com/SlexAxton/messageformat.js/master/locale/fr.js"></script>

	<script type="text/javascript">
	document.addEventListener('DOMContentLoaded', main);
	function main () {
	// Set our default language
	var currentLanguage = 'en-EN';

	// Our i18n dictionnary using messageformat syntax
	var i18n = {
	'en-EN': {
	title: 'This is a demo',
	toggleLanguage: 'Print this page in french',
	genderExample: '{GENDER, select, male{He} female{She} other{They}} liked this.',
	pluralExample: 'I like {NB, plural, one{this unique result} other{these # items}}.'
	},
	'fr-FR': {
	title: 'Ceci est une démo',
	toggleLanguage: 'Afficher cette page en anglais',
	genderExample: '{GENDER, select, male{Il} female{Elle} other{They}} a aimé ça.',
	pluralExample: 'J\'aime {NB, plural, one{cet unique item} other{tous les # items}}.'
	}
	};

	// Compile the dictionnary
	for (var lang in i18n) {

	// Known messageformat issue
	// @see https://github.com/SlexAxton/messageformat.js/issues/27
	var countryCode = lang.split('-')[0];

	var mf = new MessageFormat(countryCode);
	for (var label in i18n[lang]) {
	i18n[lang][label] = mf.compile(i18n[lang][label]);
	}
	}

	// Declaring our i18n helper to handlebars
	Handlebars.registerHelper('i18n', function(text, options) {
	text = text \|\| 'undefined';
	options = options \|\| {};
	var translate = i18n[currentLanguage][text];
	return new Handlebars.SafeString(translate(options.hash));
	});

	// Our data view (ie dynamic vars, u can play with them)
	var view = {
	nbitems: 1, // or 5
	mygender: 'male' // or female
	};

	function renderTemplate() {
	var source = document.getElementById('button-template').innerHTML;
	var template = Handlebars.compile(source);
	var dest = document.getElementById('dest');
	dest.innerHTML = template(view);
	}
	renderTemplate();

	window.toggleLanguage = function () {
	if (currentLanguage === 'fr-FR') {
	currentLanguage = 'en-EN';
	} else {
	currentLanguage = 'fr-FR';
	}
	renderTemplate();
	}
	}

	</script>

	<!-- Our handlebar simple template using i18n helper -->
	<script id="button-template" type="text/x-handlebars-template">
	<h2>{{i18n "title"}}</h2>
	<div>{{i18n "pluralExample" NB=nbitems}}</div>
	<div>{{i18n "genderExample" GENDER=mygender}}</div>
	<button onclick="toggleLanguage()">{{i18n "toggleLanguage"}}</button>
	</script>

	<!-- To receive dom content when tpl is compiled -->
	<div id="dest"></div>
	</body>
	</html>