Last active
September 27, 2023 08:33
-
-
Save LawyerKyrie/d0d139fefd7388fa85fb6ccbcf27ef86 to your computer and use it in GitHub Desktop.
"Google Translate"-component for vue3/nuxt3 (with typescript-support)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <!-- | |
| Instructions: | |
| Save GoogleTranslate.vue in your compoent-directory! | |
| Remember to put the type-declaration-below (in this Gist-repo) in types/index.d.ts | |
| Call the compoent from your templates/html with: | |
| <GoogleTranslate /> | |
| --> | |
| <div id="google_translate_element" @click="startMutationObserving" /> | |
| </template> | |
| <script setup lang='ts'> | |
| /* types/index.d.ts (in this Gist-repo) holds the type declarations for this file. */ | |
| useHead({ | |
| script: [ | |
| { src: 'http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit', async: true, defer: true } | |
| ] | |
| }) | |
| function googleTranslateElementInit () { | |
| // eslint-disable-next-line no-new | |
| new window.google.translate.TranslateElement({ | |
| pageLanguage: 'en', | |
| autoDisplay: 'true', | |
| includedLanguages: 'da,no,sv,fi,en,nl,hi,es,ar,fr,bn,ru,pt,sw,id,ur,ja,de,tr,tl', | |
| layout: window.google.translate.TranslateElement.InlineLayout.HORIZONTAL | |
| }, 'google_translate_element') | |
| } | |
| // google is declared in types/index.d.ts as "window.google" as "any" to get rid of the error-msg on typecheck. | |
| onMounted(() => { | |
| if (document) { | |
| googleTranslateElementInit() | |
| } | |
| }) | |
| function startMutationObserving () { | |
| const targetNode = document.querySelectorAll<HTMLElement>('body')[0] | |
| const config = { attributes: true, attributeFilter: ['style'] | |
| // The observer-callback | |
| const callback: MutationCallback = (mutationList) => { | |
| for (const mutation of mutationList) { | |
| console.log('Obs ... Style was changing ... Do something?') | |
| if (mutation.target.style.top === '40px') { | |
| mutation.target.style.top = '0px' | |
| document.getElementById(':1.container').style.display = 'none' // hide iframe | |
| console.log('Okay, Google-style is fixed:)') | |
| } | |
| } | |
| } | |
| const observer = new MutationObserver(callback) | |
| observer.observe(targetNode, config) | |
| } | |
| </script> | |
| <style> | |
| /*hide google translate link | logo | banner-frame */ | |
| .goog-logo-link,.gskiptranslate,.goog-te-gadget span,.goog-te-banner-frame,#goog-gt-tt, .goog-te-balloon-frame,div#goog-gt-{ | |
| display: none!important; | |
| } | |
| .goog-te-gadget { | |
| color: transparent!important; | |
| font-size:0px; | |
| } | |
| .goog-text-highlight { | |
| background: none !important; | |
| box-shadow: none !important; | |
| } | |
| /*google translate Dropdown */ | |
| #google_translate_element select{ | |
| background:#f6edfd; | |
| color:#383ffa; | |
| border: none; | |
| border-radius:3px; | |
| padding:6px 8px | |
| } | |
| </style> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Create a types-folder in the root and put this file there (if your are using nuxt3). | |
| declare global { | |
| interface Window { | |
| google: any // turns off the typecheck | |
| } | |
| interface MutationCallback { | |
| (mutations: MutationRecord[], observer: MutationObserver): void; | |
| } | |
| } | |
| /* | |
| Sources: | |
| https://www.3schools.in/2021/02/how-to-customize-google-translate.html | |
| https://www.w3schools.com/howto/howto_google_translate.asp | |
| https://www.w3schools.com/howto/tryit.asp?filename=tryhow_google_translate_vertically | |
| https://search.3schools.in/2022/03/how-to-customize-google-translate-button.html | |
| https://codepen.io/dayvidwhy/pen/egdZyY | |
| https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/MutationObserver | |
| https://vueuse.org/core/useMutationObserver/#usemutationobserver | |
| https://github.com/vueuse/vueuse/blob/main/packages/core/useMutationObserver/demo.vue | |
| https://stackoverflow.com/questions/2157963/is-it-possible-to-listen-to-a-style-change-event | |
| https://stackoverflow.com/questions/75965295/what-is-the-typescript-type-of-mutation-list-in-callback-function-of-mutation-ob | |
| https://stackoverflow.com/questions/58773652/ts2339-property-style-does-not-exist-on-type-element | |
| https://isotropic.co/how-to-fix-the-property-value-does-not-exist-on-type-htmlelement-error/ | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment