Skip to content

Instantly share code, notes, and snippets.

@nfreear
Created July 20, 2022 08:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nfreear/a019adf151f37668a53b9d720e5f0c9f to your computer and use it in GitHub Desktop.
Save nfreear/a019adf151f37668a53b9d720e5f0c9f to your computer and use it in GitHub Desktop.
G-Translate menu
<!doctype html><html lang="en"> <title> Google Translate </title>
<style>
[id] .goog-te-gadget,
[id] .goog-te-gadget .goog-logo-link {
color: #444;
font-size: .85rem;
}
.goog-te-gadget select.goog-te-combo {
font-size: 1rem;
padding: .2rem .5rem;
}
</style>
<h1> Google Translate </h1>
<p><div id="google_translate_element"></div></p>
<p class="skiptranslate"> Hello! Don't translate me. </p>
<my-lorem-ipsum paras="4"></my-lorem-ipsum>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="module">
// function googleTranslateElementInit() {
window.googleTranslateElementInit = () => {
const EL = new google.translate.TranslateElement(
{
pageLanguage: 'la', // "en",
includedLanguages: 'ar,en,es,fr,ru,zh-CN,zh-TW', // https://en.wikipedia.org/wiki/Official_languages_of_the_United_Nations
layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
autoDisplay: false,
// gaTrack: true,
// gaId: 'UA-XXXXXXXX-X'
},
document.querySelector('#google_translate_element') // "google_translate_element"
);
console.debug('G-Translate:', EL, google);
}
</script>
<my-options template-host="ghp" use="my-lorem-ipsum"></my-options>
<script type="module" src="https://nfreear.github.io/elements/custom.js"></script>
<pre>
NDF, 15-July-2022.
* https://orangeable.com/javascript/google-translate
* https://davidwalsh.name/google-translate-api
* https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes,
* https://cloud.google.com/translate/,
* Latin :- "la".
</pre>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment