dtux__avion-poeme/src/translation.js

// Default lang
var lang = 'en'

// Lang by session
var langSession = sessionStorage.getItem('lang');
// Lang by navigator config
var userLang = navigator.userLanguage || navigator.language;

if (langSession) {
	lang = langSession.substring(0,2)
} else if (userLang) {
	lang = userLang.substring(0,2)
}

//loading the lang.json file
$(document).ready(function(){
	    translateUI(lang)
	 	$.getJSON("lang/lang.json", function(data){
		//creating dropdown list of languages in navbar
		for (var key in data){
			$("#langChoices").append( '<a class="dropdown-item langSelect" value="'+key+'" href="#">'+data[key]+'</a>' )
			$("#selectDestLang").append( '<option value="'+key+'" href="#">'+data[key]+'</option>' )
		}
		//setting the user lang
		if(data[lang]){
			//$("#navbarDropdownLang").html(data[lang])
			translateUI(lang)
		}
		//or english if not in list
		else{
			//$("#navbarDropdownLang").html("English")
			translateUI('en')
		}
        $(".langSelect").on('click',function(e){
			lang = e.currentTarget.attributes[1].value
			sessionStorage.setItem('lang', lang);
			translateUI(lang)
			//$("#navbarDropdownLang").html($(this).html())
		})
	}).fail(function(error){
		console.log(error);
	});
});

var dictionnary = []

function translateUI(l){
	$.getJSON("lang/"+l+"", function(s){
		dictionnary = s
		//if arabic : display left to right (ltr) + troubleshooting a lot of individual elements
		if (lang == "ar"){
			//navbar
			$("nav").css('direction','rtl')
			$(".nav-menus").removeClass('mr-auto')
			$(".nav-button").addClass('mr-auto')
			//form
			// $(".ql-container").css('direction','rtl')
			// $(".ql-container").css('float','right')
			// $(".ql-editor").css('float','right')
			// $(".ql-editor p").css('float','right')
			$(".modal-content").css('direction','rtl')
			$(".bold").css('float','right')
			$("#public").css('margin-left','5px')
			$("#prive").css('margin-left','5px')
			$("#newPlaneModalAnonyme").css('margin-right','25px')
			$("#newPlaneModalCancel").css('margin-left','8px')	
			$("#closeModal").css('margin-left','0px')	
			$("#closeModal").css('padding-left','0px')	
			//anthology
			$("#anthology").css('direction','rtl')
			$("#anthologyDisclaimer").css('float','right')
			
		}  
		else{
			//navbar
			$("nav").css('direction','ltr')
			$(".nav-menus").addClass('mr-auto')
			$(".nav-button").removeClass('mr-auto')
			//form
			// $(".ql-container").css('direction','ltr')
			// $(".ql-container").css('float','left')
			// $(".ql-editor").css('float','left')
			// $(".ql-editor p").css('float','none')
			$(".modal-content").css('direction','ltr')
			$(".bold").css('float','left')
			$("#public").css('margin-left','0px')
			$("#prive").css('margin-left','0px')
			$("#newPlaneModalAnonyme").css('margin-right','0px')
			$("#newPlaneModalCancel").css('margin-left','0px')
			//anthology
			$("#anthology").css('direction','ltr')
			$("#anthologyDisclaimer").css('float','left')
		}
		
	//changing all strings
		//main page
			$('head title', window.parent.document).text(s.avionpoeme);
			$("#navTitle").html(s.avionpoeme)
			$("#buttonAnthology").html(s.anthologie)
			$("#buttonAbout").html(s.apropos)
			if (typeof nbPlane !== 'undefined') {
				$("#buttonNewPlane").val(s.lancer_avion+" "+nbPlane+"/100")
			} else {
				$("#buttonNewPlane").on('click', () => {
					window.location.replace("/");
				})
			}
		//new plane form
			$("#newPlaneModalTitle").html(s.lancer_avion)
			$("#newPlaneModalMessage").html(s.message)
			$("#newPlaneModalPrive").html(s.prive)
			$("#newPlaneModalPublic").html(s.public)
			$("#flightTime").html(s.temps_de_vol)
			$("#newPlaneModalRandom").html(s.aléatoire)
			$("#newPlaneModal3j").html(s.trois_jours)
			$("#newPlaneModal7j").html(s.sept_jours)
			$("#newPlaneModal30j").html(s.trente_jours)
			$("#newPlaneModal365j").html(s.unan_jours)
			$("#newPlaneModalExpediteur").html(s.expediteur)
			$("#newPlaneModalDestinataire").html(s.destinataire)
			$("#newPlaneModalAnonyme").html(s.anonyme)
			$("#newPlaneModalCancel").html(s.annuler)
			$("#sendNewPlane").html(s.lancer)
			$("#destLang").html(s.langue_destinataire)
			$("#expeMail").attr("placeholder", s.expeMail_placeholder)
			$("#expeGeocoderPhoton").attr("placeholder", s.expeLoc_placeholder)
			$("#destMail").attr("placeholder", s.destMail_placeholder)
			$("#destGeocoderPhoton").attr("placeholder", s.destLoc_placeholder)
			$('#anonymeTooltip').attr("title", s.anonyme_tooltip).tooltip("_fixTitle");
			$('#publicTooltip').attr("title", s.public_tooltip).tooltip("_fixTitle");
			
			$('#selectDestLang option[value="'+lang+'"]').prop('selected', true); //selecting by default recipient language same as interface
		//Anthology
			displayAnthology()
			$("#anthologyTitle").html(s.anthologie)
			$("#anthologyDisclaimer").html(s.suppr_message_public)
			$("#closeAnthologyAbout").html(s.retour_carte)
			
		//About
		    $("#aboutTitle").html(s.apropos)
			$("#librairies").html(s.librairies)
			$("#mapSources").html(s.source_carte)
			$("#mapBackground").html(s.map_background)
			$("#clouds").html(s.clouds)
			$.getJSON("lang/about.json", function(e){
				if(lang !== 'en' && lang !== 'fr' && lang !== 'de'){
					$("#aboutText").html(e[0].en)
				}
				else{
					$("#aboutText").html(e[0][lang])
				}
				$("#donationText").html(s.AvionPoeme_free_independent)
				$("#donationButtonText").html(s.Soutenez_avionpoeme)
				$("#donationButtonText").addClass(lang)
			})
			
		//plane limit tooltip
		if (typeof nbPlane !== 'undefined') {
			if (nbPlane > 99){
				$("#planeLimitTooltip").attr("title", s.AvionPoeme_epuise).tooltip("_fixTitle");
			}
			else{
				var remainingPlanes = 100 - nbPlane;
				s.NB_AvionPoeme_restant = s.NB_AvionPoeme_restant.replace('$NB_avion_poeme',remainingPlanes)
				$("#planeLimitTooltip").attr("title", s.NB_AvionPoeme_restant).tooltip("_fixTitle");
			}		
		}
		
	})
	 .always(function(callback) {
		//console.log( callback );
	 });
}

//hovering lang icon
$( "#navbarDropdownLang" ).mouseenter(function() {
  $("#langIcon").attr("src","src/img/lang-hover.png");
});
$( "#navbarDropdownLang" ).mouseleave(function() {
  $("#langIcon").attr("src","src/img/lang.png");
});