Block google translate width flags

[Danieleeffe1]

Hello to all

as i have always said i am not a developer, my knowledge on javascript and php code are practically nil, but i am stubborn and fortunately sometimes i find pieces of solutions that somehow i manage to paste and make to work.

A few years ago I modified with a lot of research and a lot of effort an automatic translation module of the contents of the site developed in magento which I then transformed into a block to simplify any changes

The original google translation module provides a drop-down menu with the choice of available languages, I am interested in having the flags of the languages ​​preset on the screen and translating into the chosen language.

the module (or block) always worked fine until about a week ago, now it doesn't work anymore.

I guess it depends on google but I can't find any documentation about it.

If anyone is interested in solving the problem and sharing the solution they would appreciate it.

under the code I used:

<div class="livetranslate">
<div class="flags">
<a class="lang-es lang-select" href="#googtrans(it|de)" data-lang="de"><img alt="DE" src="{{config path="web/secure/base_url"}}/skin/flags/de.svg" /></a>
<a class="lang-es lang-select" href="#googtrans(it|en)" data-lang="en"><img alt="USA" src="{{config path="web/secure/base_url"}}/skin/flags/gb.svg" /></a>
<a class="lang-es lang-select" href="#googtrans(it|es)" data-lang="es"><img alt="MEXICO" src="{{config path="web/secure/base_url"}}/skin/flags/es.svg" /></a> <a class="lang-es lang-select" href="#googtrans(it|fr)" data-lang="fr"><img alt="FRANCE" src="{{config path="web/secure/base_url"}}/skin/flags/fr.svg" /></a>
<a class="lang-es lang-select" href="#googtrans(it|zh-CN)" data-lang="zh-CN"><img alt="CHINA" src="{{config path="web/secure/base_url"}}/skin/flags/cn.svg" /></a>
<a class="lang-es lang-select" href="#googtrans(it|ja)" data-lang="ja"><img alt="JAPAN" src="{{config path="web/secure/base_url"}}/skin/flags/jp.svg" /></a> <a class="lang-es lang-select" href="#googtrans(it|ru)" data-lang="ru"><img alt="RU" src="{{config path="web/secure/base_url"}}/skin/flags/ru.svg" /></a>
<a class="lang-es lang-select" href="#googtrans(it)" data-lang="it"><img alt="ITA" src="{{config path="web/secure/base_url"}}/skin/flags/it.svg" /></a></div>
<div style="text-align: center;"><span style="font-size: xx-small;"> <a href="https://translate.google.com/">Power By <img alt="" src="{{media url="wysiwyg/Google.png"}}" style="display: inline; width: 50px !important; height: auto;" /> Translate</a> </span></div>
</div>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>

<script>
function googleTranslateElementInit() {
      new google.translate.TranslateElement({defaultLanguage: 'it', pageLanguage: '', layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element');
    }

	function triggerHtmlEvent(element, eventName) {
	  var event;
	  if (document.createEvent) {
		event = document.createEvent('HTMLEvents');
		event.initEvent(eventName, true, true);
		element.dispatchEvent(event);
	  } else {
		event = document.createEventObject();
		event.eventType = eventName;
		element.fireEvent('on' + event.eventType, event);
	  }
        
	}
      
	jQuery('.lang-select').click(function() {
	  var theLang = jQuery(this).attr('data-lang');
	  jQuery('.goog-te-combo').val(theLang);

	  //alert(jQuery(this).attr('href'));
	  window.location = jQuery(this).attr('href');
	  location.reload();

	});
</script>
<style>
body {top:0px!important;}
.skiptranslate {display:none;}
.flags {display:flex;}
.livetranslate {background: #564545;}
#goog-gt-tt, .goog-tooltip {display:none!important;}
@media print {.livetranslate{display:none;}}
@media only screen and (min-width: 771px) {
a.lang-es.lang-select img {
   width:30% !important;
}
}
a.lang-es.lang-select img {
  width:50%;
   height:auto;
   margin:10px auto 10px auto;
   display:block;
}
a.lang-es.lang-select {
line-height: 0;
}
</style>

[Danieleeffe1]

insert the repport from source console chrome developer

(function(){/*

Copyright The Closure Library Authors.
SPDX-License-Identifier: Apache-2.0
/
var d="function"==typeof Object.create?Object.create:function(a){var c=function(){};c.prototype=a;return new c},e;if("function"==typeof Object.setPrototypeOf)e=Object.setPrototypeOf;else{var f;a:{var g={a:!0},l={};try{l.proto=g;f=l.a;break a}catch(a){}f=!1}e=f?function(a,c){a.proto=c;if(a.proto!==c)throw new TypeError(a+" is not extensible");return a}:null}var m=e;/

SPDX-License-Identifier: Apache-2.0
*/
var n={};function p(){var a="undefined"!==typeof window?window.trustedTypes:void 0;return null!==a&&void 0!==a?a:null}var q;function r(){var a,c;if(void 0===q)try{q=null!==(c=null===(a=p())||void 0===a?void 0:a.createPolicy("google#safe",{createHTML:function(b){return b},createScript:function(b){return b},createScriptURL:function(b){return b}}))&&void 0!==c?c:null}catch(b){q=null}return q};var t=function(a,c){if(c!==n)throw Error("Bad secret");this.g=a},u=function(){};t.prototype=d(u.prototype);t.prototype.constructor=t;if(m)m(t,u);else for(var v in u)if("prototype"!=v)if(Object.defineProperties){var w=Object.getOwnPropertyDescriptor(u,v);w&&Object.defineProperty(t,v,w)}else t[v]=u[v];t.prototype.toString=function(){return this.g.toString()};function x(a){var c,b=null===(c=r())||void 0===c?void 0:c.createScriptURL(a);return new t(null!==b&&void 0!==b?b:a,n)};if(!function(){if(self.origin)return"null"===self.origin;if(""!==location.host)return!1;try{return window.parent.escape(""),!1}catch(a){return!0}}())throw Error("sandboxing error");

---this row have the error---
window.addEventListener("message",function(a){var c=a.ports[0];a=a.data;var b=a.callbackName.split("."),h=window;"window"===b[0]&&b.unshift();for(var k=0;k<b.length-1;k++)h[b[k]]={},h=h[b[k]];h[b[b.length-1]]=function(y){c.postMessage(JSON.stringify(y))};b=document.createElement("script");a=x(a.url);if(a instanceof t)a=a.g;else throw Error("Unexpected type when unwrapping TrustedResourceUrl");b.src=a;document.body.appendChild(b)},!0);}).call(this);