Reapplying CSS changes to the Google Translate widget after closing the translate bar

Question

I'm modifying the text and CSS of the Google Translate widget and have an error when using addEventListener and querySelector to reapply CSS and text changes after the Google Translate bar is closed and when the page is returned to the original language.

I'm suddenly getting an error Uncaught TypeError: x.X is undefined pointing to the line

x.X.querySelector('select').addEventListener('change', (event) => {

This new error is probably due to a jQuery main library update.

How do I define x.X?

Thanks to caramba for the answer to my earlier question Modifying output of google.translate.TranslateElement.InlineLayout.VERTICAL and for his followup in the Fiddle linked below.

Fiddle: https://jsfiddle.net/8m2xkez4/

Javascript:

var observer = new MutationObserver(function (event) {
  if(false === document.documentElement.classList.contains('translated-ltr')) {
      renameGoogleSelectDropdown();
  }
});

var renameGoogleSelectDropdown = function(){
    function cleartimer() {     
      setTimeout(function(){ 
          window.clearInterval(myVar); 
      }, 500);             
  }
  function myTimer() {
      if ($('.goog-te-combo option:first').length) {
          $('.goog-te-combo option:first').html('Translate');
          cleartimer();
      }
  }
  var myVar = setInterval(function(){ myTimer() }, 0); 
};


function googleTranslateElementInit() {
  var x = new google.translate.TranslateElement({
  pageLanguage: 'en', includedLanguages: 'af,ach,ak,am,ar,az,be,bem,bg,bh,bn,br,bs,ca,chr,ckb,co,crs,cs,cy,da,de,ee,el,en,eo,es,es-419,et,eu,fa,fi, fo,fr,fy,ga,gaa,gd,gl,gn,gu,ha,haw,hi,hr,ht,hu,hy,ia, id,ig,is,it,iw,ja,jw,ka,kg,kk,km,kn,ko,kri,ku,ky,la, lg,ln,lo,loz,lt,lua,lv,mfe,mg,mi,mk,ml,mn,mo,mr,ms,mt, ne,nl,nn,no,nso,ny,nyn,oc,om,or,pa,pcm,pl,ps,pt-BR, pt-PT,qu,rm,rn,ro,ru,rw,sd,sh,si,sk,sl,sn,so,sq,sr, sr-ME,st,su,sv,sw,ta,te,tg,th,ti,tk,tl,tn,to,tr,tt, tum,tw,ug,uk,ur,uz,vi,wo,xh,yi,yo,zh-CN,zh-TW,zu',
  layout: google.translate.TranslateElement.InlineLayout.VERTICAL
  }, 'google_translate_element');
  

  x.X.querySelector('select').addEventListener('change', (event) => {
    observer.observe(event.target.closest('html'), {
      attributes: true, 
      attributeFilter: ['class'],
      childList: false, 
      characterData: false
    })
    });
}


$(window).on('load', function() {
  $('.goog-te-gadget').html($('.goog-te-gadget').children());
  $("#google-translate").fadeIn('1000');
    renameGoogleSelectDropdown();
});

HTML:

<div id="google-translate">
  <div id="google_translate_element"></div>
</div>

CSS:

#google-translate {
  display: none;
}

Edit 8/5/21

This has broken again :( And when I use console.log(x), I get ReferenceError: x is not defined.

How can I find the new classname in the Google widget Javascript? It's here: pastebin.com/xWVES3r1

score 1 · Accepted Answer · answered Mar 24 '21 at 20:23

1

Here logging x you will find querySelector under an object V. x.V.querySelector('select').addEventListener('change', (event) => {

Fixed this issue on jsfiddle.
But this seems as generated classname so its susceptible to changes. document.querySelector('select').addEventListener('change', (event) => {

works fine incase you are not using select anywhere else.

answered Mar 24 '21 at 20:23

Jerin

3,657
3
20
45

That's interesting, thanks. So the class name is generated by the Google widget function, which we of course have no control over? And by select, you mean https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select ? – BlueDogRanch Mar 25 '21 at 20:17
Yes since you are dependent on google widget and with each release they can change their classes. – Jerin Mar 28 '21 at 10:30
Jerin, Thanks for your help last spring; it appears this has broken again :( And when I use console.log(x), I get `ReferenceError: x is not defined`. How can I find the new classname in the Google widget Javascript? it's here: https://pastebin.com/xWVES3r1 – BlueDogRanch Aug 05 '21 at 21:06
In your `https://jsfiddle.net/8m2xkez4/` I replaced with `x.U.querySelector('select')`. Since it's auto-generated would opt for some lopping of `x.CAPITAL_CHAR.querySelector` isn't undefined and the querySelector function exists. – Jerin Aug 07 '21 at 21:58
Thanks, `U` works. But I'm not clear on why `U` works and how you decided it would work. Did Google change the variable in their widget? – BlueDogRanch Aug 08 '21 at 19:43
Previously I did say how google might be obfuscating the code. So whenever they release a new version the `classnames` might change. Hence you could try instead using `document.querySelector('select').addEventListener('change'` – Jerin Aug 10 '21 at 03:27

Reapplying CSS changes to the Google Translate widget after closing the translate bar

1 Answers1