[[en]]This is English
[[de]]Das ist Deutsch
[[de]]Das ist Deutsch
Implementation:
<script>
var DEAFULT_LANG = "en";
var LANG_REG_EXP = /\[\[([a-z]{2})\]\]([^\[]+)/g;
var isStorageEnabled = ! (typeof localStorage == 'undefined');
var user_lang = (navigator.userLanguage||navigator.browserLanguage||navigator.language||DEAFULT_LANG).substr(0,2);var getLangParam = function(){
var arr = /lang=([a-z]{2})/g.exec(location.search);
return arr ? arr[1] : null;
}var getLangFromStorage = function(){
return isStorageEnabled ? localStorage.getItem('lang') : undefined;
}var setLang = function(lang){
user_lang = lang;
if(isStorageEnabled){
localStorage.setItem('lang', user_lang);
}
applyLang();
}var applyLang = function(){
globalDict.forEach(function(v){
$(v.elm).html(v.dict[user_lang]);
});
}function textNodesUnder(el){
var n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_ALL,null,false);
while(n=walk.nextNode()){
a.push(n);
}
return a;
}var globalDict = [];$(function(){
user_lang = getLangParam() || getLangFromStorage() || user_lang; if(isStorageEnabled){
localStorage.setItem('lang', user_lang);
} // bugfix for IE11
// if multilingual sentence is divided into sevaral text node, restore original text node
$("*").each(function(i,v){
if(LANG_REG_EXP.test($(this).text().replace(/\n/g,"")) && $(this).html().indexOf("<") == -1){
$(this).text($(this).text().replace(/\n/g,""));
}
var $v = $("#" + $(this).attr("id"));
if($v.length > 0 && LANG_REG_EXP.test($v.text().replace(/\n/g,"")) && $v.html().indexOf("<") == -1){
$v.text($v.text().replace(/\n/g,""));
}
})
textNodesUnder(document).filter(function(v){
return LANG_REG_EXP.test(v.nodeValue);
}).forEach(function(v,i){
var dict = {};
var arr;
while((arr = LANG_REG_EXP.exec(v.nodeValue)) != null){
dict[arr[1]] = arr[2];
}
globalDict.push({elm:$(v).parent()[0], dict:dict});
});
applyLang();
});
</script>
var DEAFULT_LANG = "en";
var LANG_REG_EXP = /\[\[([a-z]{2})\]\]([^\[]+)/g;
var isStorageEnabled = ! (typeof localStorage == 'undefined');
var user_lang = (navigator.userLanguage||navigator.browserLanguage||navigator.language||DEAFULT_LANG).substr(0,2);var getLangParam = function(){
var arr = /lang=([a-z]{2})/g.exec(location.search);
return arr ? arr[1] : null;
}var getLangFromStorage = function(){
return isStorageEnabled ? localStorage.getItem('lang') : undefined;
}var setLang = function(lang){
user_lang = lang;
if(isStorageEnabled){
localStorage.setItem('lang', user_lang);
}
applyLang();
}var applyLang = function(){
globalDict.forEach(function(v){
$(v.elm).html(v.dict[user_lang]);
});
}function textNodesUnder(el){
var n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_ALL,null,false);
while(n=walk.nextNode()){
a.push(n);
}
return a;
}var globalDict = [];$(function(){
user_lang = getLangParam() || getLangFromStorage() || user_lang; if(isStorageEnabled){
localStorage.setItem('lang', user_lang);
} // bugfix for IE11
// if multilingual sentence is divided into sevaral text node, restore original text node
$("*").each(function(i,v){
if(LANG_REG_EXP.test($(this).text().replace(/\n/g,"")) && $(this).html().indexOf("<") == -1){
$(this).text($(this).text().replace(/\n/g,""));
}
var $v = $("#" + $(this).attr("id"));
if($v.length > 0 && LANG_REG_EXP.test($v.text().replace(/\n/g,"")) && $v.html().indexOf("<") == -1){
$v.text($v.text().replace(/\n/g,""));
}
})
textNodesUnder(document).filter(function(v){
return LANG_REG_EXP.test(v.nodeValue);
}).forEach(function(v,i){
var dict = {};
var arr;
while((arr = LANG_REG_EXP.exec(v.nodeValue)) != null){
dict[arr[1]] = arr[2];
}
globalDict.push({elm:$(v).parent()[0], dict:dict});
});
applyLang();
});
</script>
copy and paste this snippet before the </body> tag. That's it!
Usage:
You can add as many Language as you need like this. Specify the Language in ISO 6391 Format.
Selecting:
The Link Way
Type at the End of your URL ?lang=en - You see now only the right language.
The Button Way
To change the Language like above, add this script inside the <head> tag:
<script>
window.onload = function() {
var anchors = document.getElementsByTagName('*');
for(var i = 0; i < anchors.length; i++) {
var anchor = anchors[i];
anchor.onclick = function() {
code = this.getAttribute('whenClick');
eval(code);
}
}
}
</script>
window.onload = function() {
var anchors = document.getElementsByTagName('*');
for(var i = 0; i < anchors.length; i++) {
var anchor = anchors[i];
anchor.onclick = function() {
code = this.getAttribute('whenClick');
eval(code);
}
}
}
</script>
Now you can add a Button on your site and set a custom attribute under the Element Settings
Name: whenClick
Value: setLang('en')
Usage for CMS:
You can add a Rich Text or Plain Text for every Language to your Collection.
For Plain Text
Put this after your existing Script in the Before </body> tag
<!-- Language: Englisch -->
<script>
$(".english").html(function(i,v) {
return "[[en]]" + v + "[[de]] <b></b>";});
</script>
<script>
$(".english").html(function(i,v) {
return "[[en]]" + v + "[[de]] <b></b>";});
</script>
Place this for every language you have and change the [[en]] and the .english to your language.
Then the second [[de]] to the language they should don’t show up.
If you now add texts to your Page, add the class of your language .english for example.
Include both Texts on your Page - The Script will only show the right one.
For Rich Text
Put this after your existing Script in the Before </body> tag
<!-- Language: English -->
<script>
$(".english-rich-text *:not(ul)").html(function(i,v) {
return "[[en]]" + v + "[[fr]] <b></b>";});
</script>
<script>
$(".english-rich-text *:not(ul)").html(function(i,v) {
return "[[en]]" + v + "[[fr]] <b></b>";});
</script>
Place this for every language you have and change the [[en]] and the .english-rich-text to your language.
Then the second [[de]] to the language they should don’t show up.
If you now add Rich Text to your Page, add the class of your language .english-rich-text for example.
Include both Texts on your Page - The Script will only show the right one.