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);
    $("#labelAttachment").html(s.PJ_Ajouter);
    console.log(s);
    $("#attachmentPlaneLabel").attr("data-after", s.PJ_Parcourir);
    $("#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");
});