web-dev-qa-db-fra.com

Utiliser Javascript pour changer la langue du site

Je travaille sur un site Web graphique qui peut utiliser plusieurs langues. Les fichiers HTML originaux avec lesquels j'ai travaillé étaient totalement statiques. Donc, si une traduction était nécessaire, je devais analyser tous les fichiers, noter où se trouvaient certains mots ou termes, les rassembler, les remettre tous au service de traduction et entrer ces traductions dans les nouveaux fichiers de langue. 

Étant donné que ces fichiers étaient totalement statiques, cela impliquait de traduire plusieurs fois des sections entières. Pas très efficace.

Alors maintenant, je travaille sur une sorte de dictionnaire en Javascript, juste pour échanger les termes de ces sites. Cela fonctionne principalement de cette façon:

var dicEnglish = {
term 1: "This is the English text"
Ref: "Another English text"
}
var dicFrench = {
term 1: "This is the French text"
Ref: "Another French text"   
}

Qui contient tout le contenu possible qui doit être changé. Chaque candidat du code HTML reçoit un identifiant class="dicRef" id="l_dicTag_#"as, que je découpe en tranches dans la balise du dictionnaire et que j'échange avec le code suivant:

var imgSrc = "en";
var ActiveDic;
var langSel;
if(window.name){
    langSel=window.name;
    }
else{langSel="English";
}

function LangChange(){
langClass = document.getElementsByClassName("dicRef");
var i = langClass.length;
var Start, Stop, idSrc, idDic;
var navText;

switch(langSel){
    case "French":
        langSel="French";
        imgSrc = "en";
        navText="Anglais";
        break;
    case "English":
    case "Anglais":
    default:
        langSel="English";
        imgSrc = "fr";
        navText="French";
        break;
    }
ActiveDic="dic"+langSel;
window.name=langSel;

while(i--){
    idSrc = langClass[i].id;
    Start=idSrc.indexOf("_")+1;
    Stop=idSrc.lastIndexOf("_");
    idDic=idSrc.slice(Start,Stop);
    if(window[ActiveDic][idDic]){
        document.getElementById(idSrc).innerHTML=window[ActiveDic][idDic];}
    else{
        document.getElementById(idSrc).innerHTML="N/A";
    }
}
if(document.getElementById("imgSel")){
    document.getElementById("imgSel").src="../../img/"+imgSrc+".gif";
}
if (document.getElementById("l_SelLang1_1")){
    document.getElementById("l_SelLang1_1").innerHTML=navText;
}
}

Le problème réside dans l'unicité de l'id-tag. Certains termes pouvant apparaître plusieurs fois et certains étant générés, le compteur est nécessaire. Je préférerais omettre le compteur, mais je ne peux trouver aucun autre identifiant pour trier tous les termes cibles et modifier leur contenu.

Puisque je veux être en sécurité pour l'avenir, je préférerais une solution permettant de gérer une éventuelle troisième langue. Travailler avec le HTML interne aurait besoin de baliser le même terme plusieurs fois, une fois pour chaque langue.

Alors, y a-t-il un moyen de cibler tous les termes à échanger plus efficacement et plus facilement, ou un meilleur moyen de le faire? Je ne peux travailler qu'avec des solutions côté client, donc pas de PHP et ainsi de suite.

Merci d'avance et j'espère que cela n'a pas été long à lire.

javascripthtmltranslation
10
Blind Seer

Vous pouvez utiliser des attributs de données: le fait que "les attributs HTML5 ne soient pas pris en charge dans IE6 et IE7" signifie que vous n'obtenez pas la méthode getAttribute() ni la propriété dataset pour les récupérer/y accéder. Mais vous pouvez toujours les récupérer comme expliqué dans cet article .

<div id="geoff" data-geoff="geoff">

var geoff = document.getElementById("geoff");
alert(geoff.getAttribute("data-geoff"));

Mieux encore, vous pouvez utiliser jQuery .data () pour prendre en charge les versions précédentes d’IE.

Quelque chose dans ce sens devrait marcher:

<div data-translate="translation_key"></div>

$("[data-translate]").each(function(){
    var key = $(this).data('translate');
    $(this).html(dictionary[key][current_lang] || "N/A");
});

Exemple de travail: https://jsfiddle.net/x93oLad8/4/

6
Andrea Casaccia

N'offensez pas les autres intervenants, mais stocker le texte dans JavaScript ou dans des attributs de données n'est pas bon pour les moteurs de recherche ni pour les visiteurs de sites handicapés et n'offre aucun avantage en ajoutant du code inutilement compliqué. La meilleure solution, à mon avis, consiste à utiliser l'attribut HTML lang et à utiliser JavaScript pour afficher et masquer la langue souhaitée. Cette solution se dégrade également de manière élégante. Par conséquent, si le JavaScript du visiteur d'un site est désactivé, le contenu reste affiché. Voici ma solution:

HTML

<button id="switch-lang">Switch Language</button>

<h1><span lang="en">Hello</span> <span lang="es">Hola</span></h1>

<p lang="en">I really enjoy coding.</p>

<p lang="es">Me gusta mucho la codificación.</p>

jQuery

$('[lang="es"]').hide();

$('#switch-lang').click(function() {
  $('[lang="es"]').toggle();
  $('[lang="en"]').toggle();
});

Ensuite, je recommanderais d'ajouter HTML5 Géolocalisation pour déterminer la langue à afficher en fonction de l'emplacement des utilisateurs dans le monde. J'utiliserais également l'icône de langage Fontawesome pour montrer aux utilisateurs qu'ils peuvent changer de langue de manière compréhensible pour quiconque: http://fontawesome.io/icon/language/

Voici l'exemple de code de travail sur CodePen: https://codepen.io/codepajamas/pen/ZejaQz?editors=1010

Voici un exemple supplémentaire sur le stylo code utilisant un menu de sélection pour passer de 3 (ou plusieurs) langues: https://codepen.io/codepajamas/pen/NjGOMV

Exemple complet mis à jour avec géolocalisation et cookies

J'ai continué à travailler sur ce sujet et créé un exemple actualisé de basculement entre deux langues, le chinois et l'anglais (si vous avez besoin de plus de deux langues, vous devez masquer toutes les langues et afficher uniquement celle sélectionnée au lieu d'utiliser la fonction que je suis). Ce code détecte également si un cookie existant est déjà défini pour la langue à l'aide de jQuery Cookie. Il vérifie également leur géolocalisation si leur navigateur le prend en charge en définissant automatiquement la langue en chinois s'ils se trouvent soit à Taiwan, soit en Chine, et par défaut en anglais dans tous les autres pays. Le code ci-dessous est commenté afin que vous puissiez voir ce que chaque étape fait et si tout va bien pouvoir le modifier pour répondre à vos besoins. C'est ici:

HTML

<button id="switch-lang">Switch Language Icon Here</button>

<h1><span lang="en">Hello</span> <span lang="zh">你好</span></h1>

<p lang="en">I really enjoy coding.</p>

<p lang="zh">我真的很喜歡編碼。</p>

jQuery Remarque: cela nécessite un lien vers non seulement jQuery mais aussi jQuery Cookie

$(function () {
  ///// Language Switching (2 languages: English and Chinese). /////

  // Initially disable language switching button.
  $('#switch-lang').css({'pointer-events':'none',
   'cursor':'default'}).attr('disabled','disabled');

  function langButtonListen() {
    $('#switch-lang').click(function (event) {
      event.preventDefault();
      $('[lang="zh"]').toggle();
      $('[lang="en"]').toggle();
      // Switch cookie stored language.
      if ($.cookie('lang') === 'en') {
        $.cookie('lang', 'zh', { expires: 7 });
      } else {
        $.cookie('lang', 'en', { expires: 7 });
      }
    });
    // Enable lang switching button.
    $('#switch-lang').css({'pointer-events':'auto',
     'cursor':'pointer'}).removeAttr('disabled');
  }

  // Check if language cookie already exists.
  if ($.cookie('lang')) {
    var lang = $.cookie('lang');
    if (lang === 'en') {
      $('[lang="zh"]').hide();
      langButtonListen();
    } else {
      $('[lang="en"]').hide();
      langButtonListen();
    }
  } else {
    // no cookie set, so detect language based on location.
    if ("geolocation" in navigator) {
      // geolocation is available
      navigator.geolocation.getCurrentPosition(function (position) {
        // accepted geolocation so figure out which country
        var lat = position.coords.latitude,
            lng = position.coords.longitude;
        $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+lng+'&sensor=true', null, function (response) {
          var country = response.results[response.results.length-1].formatted_address;
          if (country ===  'Taiwan' || country === 'China') {
            $('[lang="en"]').hide();
            $.cookie('lang', 'zh', { expires: 7 });
            langButtonListen();
          } else {
            $('[lang="zh"]').hide();
            $.cookie('lang', 'en', { expires: 7 });
            langButtonListen();
          }
        }).fail(function (err) {
          console.log('error: '+err);
          $('[lang="zh"]').hide();
          $.cookie('lang', 'en', { expires: 7 });
          langButtonListen();
        });
      },
      function (error) {
        if (error.code == error.PERMISSION_DENIED) {
          // denied geolocation
          $('[lang="zh"]').hide();
          $.cookie('lang', 'en', { expires: 7 });
          langButtonListen();
        } else {
          console.log('Unknown error. Defaulting to English!');
          $('[lang="zh"]').hide();
          $.cookie('lang', 'en', { expires: 7 });
          langButtonListen();
        }
      });
    } else {
      // geolocation IS NOT available
      $('[lang="zh"]').hide();
      $.cookie('lang', 'en', { expires: 7 });
      langButtonListen());
    }
  }
});
19
J Grover
 <script type="text/javascript">

// Chargement de l'API Google Transliteration google.load ("éléments", "1", { packages: "translittération" });

  var transliterationControl;
  function onLoad() {
    var options = {
        sourceLanguage: 'en',
        destinationLanguage: ['hi','or','bn','ta','te'],
        transliterationEnabled: true,
        shortcutKey: 'ctrl+g'
    };
    // Create an instance on TransliterationControl with the required
    // options.
    transliterationControl =
      new google.elements.transliteration.TransliterationControl(options);

    // Enable transliteration in the textfields with the given ids.
    var ids = [ "transl1", "transl2" ];
    transliterationControl.makeTransliteratable(ids);

    // Add the STATE_CHANGED event handler to correcly maintain the state
    // of the checkbox.
    transliterationControl.addEventListener(
        google.elements.transliteration.TransliterationControl.EventType.STATE_CHANGED,
        transliterateStateChangeHandler);

    // Add the SERVER_UNREACHABLE event handler to display an error message
    // if unable to reach the server.
    transliterationControl.addEventListener(
        google.elements.transliteration.TransliterationControl.EventType.SERVER_UNREACHABLE,
        serverUnreachableHandler);

    // Add the SERVER_REACHABLE event handler to remove the error message
    // once the server becomes reachable.
    transliterationControl.addEventListener(
        google.elements.transliteration.TransliterationControl.EventType.SERVER_REACHABLE,
        serverReachableHandler);

    // Set the checkbox to the correct state.
    document.getElementById('checkboxId').checked =
      transliterationControl.isTransliterationEnabled();

    // Populate the language dropdown
    var destinationLanguage =
      transliterationControl.getLanguagePair().destinationLanguage;
    var languageSelect = document.getElementById('languageDropDown');
    var supportedDestinationLanguages =
      google.elements.transliteration.getDestinationLanguages(
        google.elements.transliteration.LanguageCode.ENGLISH);
    for (var lang in supportedDestinationLanguages) {
      var opt = document.createElement('option');
      opt.text = lang;
if (lang=="TAMIL" || lang=="TELUGU" || lang=="HINDI" || lang=="ORIYA" || lang=="BENGALI"){
      opt.value = supportedDestinationLanguages[lang];
      if (destinationLanguage == opt.value) {
        opt.selected = true;
      }
      try {
        languageSelect.add(opt, null);
      } catch (ex) {
        languageSelect.add(opt);
      }
}//End of if
    }
  }

  // Handler for STATE_CHANGED event which makes sure checkbox status
  // reflects the transliteration enabled or disabled status.
  function transliterateStateChangeHandler(e) {
    document.getElementById('checkboxId').checked = e.transliterationEnabled;
  }

  // Handler for checkbox's click event.  Calls toggleTransliteration to toggle
  // the transliteration state.
  function checkboxClickHandler() {
    transliterationControl.toggleTransliteration();
  }

  // Handler for dropdown option change event.  Calls setLanguagePair to
  // set the new language.
  function languageChangeHandler() {
    var dropdown = document.getElementById('languageDropDown');
    transliterationControl.setLanguagePair(
        google.elements.transliteration.LanguageCode.ENGLISH,
        dropdown.options[dropdown.selectedIndex].value);
  }

  // SERVER_UNREACHABLE event handler which displays the error message.
  function serverUnreachableHandler(e) {
    document.getElementById("errorDiv").innerHTML =
        "Transliteration Server unreachable";
  }

  // SERVER_UNREACHABLE event handler which clears the error message.
  function serverReachableHandler(e) {
    document.getElementById("errorDiv").innerHTML = "";
  }
  google.setOnLoadCallback(onLoad);

0
Priyabrat Rath