Widget Google Translate - Retour d'appel de traduction complet

Question

Je suis en train d'utiliser le widget de traduction de Google sur l'un de mes sites avec le code fourni par Google suivant :

function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}

</code></pre>

<p>Mon problème : La traduction s'exécute après le chargement de la page, mais j'ai aussi un script qui redimensionne automatiquement mes éléments de navigation principaux en fonction de leur largeur.</p>

<p>Ceci s'exécute avant que la traduction ne soit terminée, donc elle se redimensionne en fonction des libellés anglais non traduits. Une fois que la traduction a modifié les libellés de navigation, les éléments de navigation doivent être redimensionnés pour s'adapter aux mots nouvellement traduits, car ils sont susceptibles d'avoir une taille (largeur) différente de l'anglais.</p>

<p>J'ai essayé d'appeler le code de traduction Google avant d'exécuter le code de redimensionnement de la navigation principale, mais la traduction s'exécute de manière asynchrone, donc mon code s'exécute avant que la traduction ne soit terminée.</p>

<p>Y a-t-il un événement de rappel déclenché lorsque la traduction est terminée (ou un moyen de détecter quand la traduction est terminée), afin que je puisse attendre avant de tenter de redimensionner la navigation ?</p>

<p>De plus, j'ai besoin d'exécuter un script APRÈS que la page ait fini d'être traduite.</p></x-turndown>

Answer 1

Voici la solution que j'ai finalement utilisée:

jQuery(function(){
    firstMenu = $("#nav li:first").text();

    setTimeout(waitNav, 500);
});

function waitNav() {

    if (firstMenu != $('#nav li:first').text()) {

        initNav();
        firstMenu = $('#nav li:first').text();
        setTimeout(waitNav, 500);

    }
    else {
        setTimeout(waitNav, 500);
    }

}

Fondamentalement, continuez à vérifier si un morceau de texte connu a changé (dans ce cas, c'est le premier élément dans le bloc de navigation).

Si cela a changé, cela signifie que le traducteur a été exécuté, exécutez le code que vous devez exécuter après la traduction (initNav() ici).

Je continue à vérifier les changements au cas où l'utilisateur sélectionnerait une autre langue.

Ce n'est pas parfait, mais cela fonctionne pour moi :-)

Answer 2

Vous pouvez détecter les changements de cette manière :

$('#some-translatable-element').bind('DOMSubtreeModified', function() {
  votreCallback();
});

L'inconvénient est que l'événement est déclenché plusieurs fois car Google Translate effectue plusieurs modifications dans le processus.

Une suggestion est de détecter les changements sur le dernier élément de votre page, car alors vous savez que tous les éléments au-dessus sont traduits.

Answer 3

$( document ).ready(function() {
    $('#google_translate_element').bind('DOMSubtreeModified', function() {
        var val = $(this);
        var strlang = "" + val[0].innerText + "";
        console.log(strlang); // afficher la langue sélectionnée dans la console
    });
});