[MultiLang] MultiLang.js (ok)

https://github.com/BdR76/MultiLanguage

C:\xampp\htdocs\windows\index.html

<!doctype html>
<html>
<head>
  <title>JavaScript multi-language localisation example</title>
  <link rel="stylesheet" href="style.css" />
</head>
<script type="text/javascript" src="multilang.js"></script>
<script type="text/javascript">
var multilang;
function onLoad() {
  // create object, load JSON file, default to 'nl', and callback to initList when ready loading
  multilang = new MultiLang('languages.json', 'nl', this.initList);
  // alternatively
  //multilang = new MultiLang('languages.json', null, this.initList); // default to browser language
  //multilang = new MultiLang('languages.json'); // only load JSON, no callback
}
function langSelectChange(sel) {
  // switch to selected language code
  multilang.setLanguage(sel.value);
  // refresh labels
  refreshLabels();
}
function initList() {
  // get language list element
  var list = document.getElementsByName("listlanguages")[0];
  // clear all options
  list.options.length = 0;
  // add all available languages
  for (var key in multilang.phrases) {
    // create new language option
    var lang = document.createElement("option");
    lang.value = key;
    lang.innerHTML = multilang.phrases[key]['langdesc'];
    // append to select element
    list.appendChild(lang);
  }
  refreshLabels();
}
function refreshLabels() {
  // Basically do the following for all document elements:
  //document.getElementById("Options").textContent = multilang.get("Options");
  // loop through all document elements
  var allnodes = document.body.getElementsByTagName("*");
  for (var i = 0, max = allnodes.length; i < max; i++) {
    // get id current elements
    var idname = allnodes[i].id;
    // if id exists, set get id current elements
    if (idname != '') {
      allnodes[i].textContent = multilang.get(idname);
    };
  };
}
</script>
<body onload="onLoad()">
  Select language from list to switch between translations:
  <select name="listlanguages" onchange="langSelectChange(this)">
  </select><br />
  <div>
    <div id="Start" class="bl">Start game</div>
    <div id="Sound" class="bl">Sound</div>
    <div id="Editor" class="bl">Editor</div>
    <div id="Music" class="bl">Music</div>
    <div id="Options" class="bl">Options</div>
  </div><br>
  <div>
    <a id="Reset game">Reset game</a><br />
    <div id="No" class="rd">no</div>
    <div id="Yes" class="gr">yes</div>
  </div><br>
  <div>
    <a id="Credits1">Credits1</a>
    Harry<br />
    <a id="Credits2">Credits2</a>
    Dick<br />
    <a id="Credits3">Credits3</a>
    Tom<br />
  </div><br>
  <div id="EndText">End text</div>
</body>
</html>

C:\xampp\htdocs\windows\multilang.js

// MultiLang - BdR 2016
// JavaScript object to handle multilanguage, load phrases from JSON etc.
var MultiLang = function(url, lang, onload) {
  // variables
  this.phrases = {};
  // keep only first two chareacters, for example 'en-US', 'fr', 'nl-NL', 'it', 'zh' etc.
  this.selectedLanguage = (lang || navigator.language || navigator.userLanguage).substring(0, 2);;
  // onLoad callback function, call after loading JSON
  this.onLoad = onload;
  // load json from url
  if (typeof url !== 'undefined') {
    var obj = this;
    var req = new XMLHttpRequest();
    // NOTE: will load asynchronously!
    req.open("GET", url, true);
    //req.setRequestHeader("User-Agent", navigator.userAgent);
    req.onreadystatechange = function(evt) {
      if (evt.target.readyState == 4 && evt.target.status == 200) // status == 200, do not allow "Cross origin requests"
      //if (evt.target.readyState == 4)// TESTING allow "Cross origin requests" to load from local harddisk
      {
        // load translations
        this.phrases = JSON.parse(evt.target.responseText);
        // verify that the currently selected language exists in the translations
        this.setLanguage(this.selectedLanguage);
        // do callback when loading JSON is ready
        if (this.onLoad) {
          this.onLoad();
        }
      };
    }.bind(obj); // NOTE: bind onreadyfunction to MultiLang instead of XMLHttpRequest, so MultiLang.phrases will be set instead of added to XMLHttpRequest
    req.addEventListener("error", function(e) {
      console.log('MultiLang.js: Error reading json file.');
    }, false);
    req.send(null);
  };
  this.setLanguage = function(langcode) {
    // check if language code exists in translations
    if (!this.phrases.hasOwnProperty(langcode)) {
      // if it doesn't exist; default to first language 
      // NOTE: the order of properties in a JSON object are not *guaranteed* to be the same as loading time,
      // however in practice all browsers do return them in order
      for (var key in this.phrases) {
        if (this.phrases.hasOwnProperty(key)) {
          langcode = key;
          break;
        };
      };
    };
    // set as selected language code
    this.selectedLanguage = langcode;
  };
  this.get = function(key) {
    // get key phrase
    var str;
    // check if any languages were loaded
    if (this.phrases[this.selectedLanguage]) str = this.phrases[this.selectedLanguage][key];
    // if key does not exist, return the literal key
    str = (str || key);
    return str;
  };
}

C:\xampp\htdocs\windows\languages.json

{
  "en":
  {
    "langdesc": "English",
    "Start": "Start game",
    "Editor": "Editor",
    "Options": "Options",
    "Sound": "Sound",
    "Music": "Music",
    "Reset game": "This will reset your game progress. Are you sure?",
    "Yes": "Yes",
    "No": "No",
    "Credits1": "Program by",
    "Credits2": "Artwork and graphics by",
    "Credits3": "Special thanks to",
    "EndText": "Congratulations! Thank you for playing!"
  },
  "vi":
  {
    "langdesc": "Vi",
    "Start": "Bắt đầu trò chơi",
    "Editor": "Người chỉnh sửa",
    "Options": "Tùy chọn",
    "Sound": "Âm thanh",
    "Music": "Nhạc",
    "Reset game": "Điều này sẽ đặt lại tiến trình trò chơi của bạn. Bạn có chắc không?",
    "Yes": "Có",
    "No": "Không",
    "Credits1": "Chương trình của",
    "Credits2": "Tác phẩm nghệ thuật và đồ họa của",
    "Credits3": "Trân trọng cảm ơn",
    "EndText": "Xin chúc mừng! Cảm ơn vì đã chơi"
  },
  "de":
  {
    "langdesc": "German",
    "Start": "Spiel starten",
    "Editor": "Editor",
    "Options": "Optionen",
    "Sound": "Geräusche",
    "Music": "Musik",
    "Reset game": "Möchten Sie Ihren Fortschritt wirklich zurücksetzen?",
    "Yes": "Ja",
    "No": "Nein",
    "Credits1": "Programm von",
    "Credits2": "Artwork und Grafiken von",
    "Credits3": "Mit Dank an",
    "EndText": "Gratuliere! Danke für's Spielen!"
  },
  "fr":
  {
    "langdesc": "French",
    "Start": "Jouer",
    "Editor": "Éditer",
    "Options": "Paramètres",
    "Sound": "Sons",
    "Music": "Musique",
    "Reset game": "Voulez-vous vraiment réinitialiser votre progression?",
    "Yes": "Oui",
    "No": "Non",
    "Credits1": "Programme de",
    "Credits2": "Illustrations et graphiques de",
    "Credits3": "Remerciements à",
    "EndText": "Félicitations! Merci d'avoir joué le game!"
  },
  "es":
  {
    "langdesc": "Spanish",
    "Start": "Comenzar",
    "Editor": "Editor",
    "Options": "Opciones",
    "Sound": "Sonido",
    "Music": "Música",
    "Reset game": "Reiniciar todos los puzzles resueltos. ¿Estás seguro?",
    "Yes": "Sí",
    "No": "No",
    "Credits1": "Programa por",
    "Credits2": "Ilustraciones y gráficos por",
    "Credits3": "Con agradecimiento",
    "EndText": "¡Felicidades! ¡Gracias por jugar!"
  },
  "nl":
  {
    "langdesc": "Dutch",
    "Start": "Start spel",
    "Editor": "Bewerken",
    "Options": "Opties",
    "Sound": "Geluid",
    "Music": "Muziek",
    "Reset game": "Hiermee wis je alle spelvoortgang. Weet je het zeker?",
    "Yes": "Ja",
    "No": "Nee",
    "Credits1": "Programma door",
    "Credits2": "Tekeningen en illustraties door",
    "Credits3": "Met dank aan",
    "EndText": "Gefeliciteerd! Bedankt voor het spelen!"
  },
  "ru":
  {
    "langdesc": "Russian",
    "Start": "Начать игру",
    "Editor": "Редактор",
    "Options": "Опции",
    "Sound": "звук",
    "Music": "Музыка",
    "Reset game": "Это приведет к сбросу ваш прогресс. Ты уверен?",
    "Yes": "да",
    "No": "Нет",
    "Credits1": "Запрограммированный",
    "Credits2": "Иллюстрации",
    "Credits3": "Особая благодарность",
    "EndText": "Поздравления! Спасибо за игру!"
  }
}

Previous========== Start [MultiLang] ===========Next[MultiLang] Localizing JavaScript apps with jQuery.i18n (ok) (full)

Last updated 3 years ago

Was this helpful?

<!doctype html> <html> <head> <title>JavaScript multi-language localisation example</title> <link rel="stylesheet" href="style.css" /> </head> <script type="text/javascript" src="multilang.js"></script> <script type="text/javascript"> var multilang; function onLoad() { // create object, load JSON file, default to 'nl', and callback to initList when ready loading multilang = new MultiLang('languages.json', 'nl', this.initList); // alternatively //multilang = new MultiLang('languages.json', null, this.initList); // default to browser language //multilang = new MultiLang('languages.json'); // only load JSON, no callback } function langSelectChange(sel) { // switch to selected language code multilang.setLanguage(sel.value); // refresh labels refreshLabels(); } function initList() { // get language list element var list = document.getElementsByName("listlanguages")[0]; // clear all options list.options.length = 0; // add all available languages for (var key in multilang.phrases) { // create new language option var lang = document.createElement("option"); lang.value = key; lang.innerHTML = multilang.phrases[key]['langdesc']; // append to select element list.appendChild(lang); } refreshLabels(); } function refreshLabels() { // Basically do the following for all document elements: //document.getElementById("Options").textContent = multilang.get("Options"); // loop through all document elements var allnodes = document.body.getElementsByTagName("*"); for (var i = 0, max = allnodes.length; i < max; i++) { // get id current elements var idname = allnodes[i].id; // if id exists, set get id current elements if (idname != '') { allnodes[i].textContent = multilang.get(idname); }; }; } </script> <body onload="onLoad()"> Select language from list to switch between translations: <select name="listlanguages" onchange="langSelectChange(this)"> </select><br /> <div> <div id="Start" class="bl">Start game</div> <div id="Sound" class="bl">Sound</div> <div id="Editor" class="bl">Editor</div> <div id="Music" class="bl">Music</div> <div id="Options" class="bl">Options</div> </div><br> <div> <a id="Reset game">Reset game</a><br /> <div id="No" class="rd">no</div> <div id="Yes" class="gr">yes</div> </div><br> <div> <a id="Credits1">Credits1</a> Harry<br /> <a id="Credits2">Credits2</a> Dick<br /> <a id="Credits3">Credits3</a> Tom<br /> </div><br> <div id="EndText">End text</div> </body> </html>

// MultiLang - BdR 2016 // JavaScript object to handle multilanguage, load phrases from JSON etc. var MultiLang = function(url, lang, onload) { // variables this.phrases = {}; // keep only first two chareacters, for example 'en-US', 'fr', 'nl-NL', 'it', 'zh' etc. this.selectedLanguage = (lang || navigator.language || navigator.userLanguage).substring(0, 2);; // onLoad callback function, call after loading JSON this.onLoad = onload; // load json from url if (typeof url !== 'undefined') { var obj = this; var req = new XMLHttpRequest(); // NOTE: will load asynchronously! req.open("GET", url, true); //req.setRequestHeader("User-Agent", navigator.userAgent); req.onreadystatechange = function(evt) { if (evt.target.readyState == 4 && evt.target.status == 200) // status == 200, do not allow "Cross origin requests" //if (evt.target.readyState == 4)// TESTING allow "Cross origin requests" to load from local harddisk { // load translations this.phrases = JSON.parse(evt.target.responseText); // verify that the currently selected language exists in the translations this.setLanguage(this.selectedLanguage); // do callback when loading JSON is ready if (this.onLoad) { this.onLoad(); } }; }.bind(obj); // NOTE: bind onreadyfunction to MultiLang instead of XMLHttpRequest, so MultiLang.phrases will be set instead of added to XMLHttpRequest req.addEventListener("error", function(e) { console.log('MultiLang.js: Error reading json file.'); }, false); req.send(null); }; this.setLanguage = function(langcode) { // check if language code exists in translations if (!this.phrases.hasOwnProperty(langcode)) { // if it doesn't exist; default to first language // NOTE: the order of properties in a JSON object are not *guaranteed* to be the same as loading time, // however in practice all browsers do return them in order for (var key in this.phrases) { if (this.phrases.hasOwnProperty(key)) { langcode = key; break; }; }; }; // set as selected language code this.selectedLanguage = langcode; }; this.get = function(key) { // get key phrase var str; // check if any languages were loaded if (this.phrases[this.selectedLanguage]) str = this.phrases[this.selectedLanguage][key]; // if key does not exist, return the literal key str = (str || key); return str; }; }

{ "en": { "langdesc": "English", "Start": "Start game", "Editor": "Editor", "Options": "Options", "Sound": "Sound", "Music": "Music", "Reset game": "This will reset your game progress. Are you sure?", "Yes": "Yes", "No": "No", "Credits1": "Program by", "Credits2": "Artwork and graphics by", "Credits3": "Special thanks to", "EndText": "Congratulations! Thank you for playing!" }, "vi": { "langdesc": "Vi", "Start": "Bắt đầu trò chơi", "Editor": "Người chỉnh sửa", "Options": "Tùy chọn", "Sound": "Âm thanh", "Music": "Nhạc", "Reset game": "Điều này sẽ đặt lại tiến trình trò chơi của bạn. Bạn có chắc không?", "Yes": "Có", "No": "Không", "Credits1": "Chương trình của", "Credits2": "Tác phẩm nghệ thuật và đồ họa của", "Credits3": "Trân trọng cảm ơn", "EndText": "Xin chúc mừng! Cảm ơn vì đã chơi" }, "de": { "langdesc": "German", "Start": "Spiel starten", "Editor": "Editor", "Options": "Optionen", "Sound": "Geräusche", "Music": "Musik", "Reset game": "Möchten Sie Ihren Fortschritt wirklich zurücksetzen?", "Yes": "Ja", "No": "Nein", "Credits1": "Programm von", "Credits2": "Artwork und Grafiken von", "Credits3": "Mit Dank an", "EndText": "Gratuliere! Danke für's Spielen!" }, "fr": { "langdesc": "French", "Start": "Jouer", "Editor": "Éditer", "Options": "Paramètres", "Sound": "Sons", "Music": "Musique", "Reset game": "Voulez-vous vraiment réinitialiser votre progression?", "Yes": "Oui", "No": "Non", "Credits1": "Programme de", "Credits2": "Illustrations et graphiques de", "Credits3": "Remerciements à", "EndText": "Félicitations! Merci d'avoir joué le game!" }, "es": { "langdesc": "Spanish", "Start": "Comenzar", "Editor": "Editor", "Options": "Opciones", "Sound": "Sonido", "Music": "Música", "Reset game": "Reiniciar todos los puzzles resueltos. ¿Estás seguro?", "Yes": "Sí", "No": "No", "Credits1": "Programa por", "Credits2": "Ilustraciones y gráficos por", "Credits3": "Con agradecimiento", "EndText": "¡Felicidades! ¡Gracias por jugar!" }, "nl": { "langdesc": "Dutch", "Start": "Start spel", "Editor": "Bewerken", "Options": "Opties", "Sound": "Geluid", "Music": "Muziek", "Reset game": "Hiermee wis je alle spelvoortgang. Weet je het zeker?", "Yes": "Ja", "No": "Nee", "Credits1": "Programma door", "Credits2": "Tekeningen en illustraties door", "Credits3": "Met dank aan", "EndText": "Gefeliciteerd! Bedankt voor het spelen!" }, "ru": { "langdesc": "Russian", "Start": "Начать игру", "Editor": "Редактор", "Options": "Опции", "Sound": "звук", "Music": "Музыка", "Reset game": "Это приведет к сбросу ваш прогресс. Ты уверен?", "Yes": "да", "No": "Нет", "Credits1": "Запрограммированный", "Credits2": "Иллюстрации", "Credits3": "Особая благодарность", "EndText": "Поздравления! Спасибо за игру!" } }