[google translate element] #google #plugin

google-translate-element.vue

<template>
  <div id="google_translate_element" />
</template>

<script>
import { Policy } from 'cockatiel'
import { includeJsOnce, injectStyles } from '@/utils'

export function initTranslate() {
  includeJsOnce({
    id: 'google-translator',
    src: 'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit',
  })
  injectStyles(`.goog-te-banner-frame.skiptranslate { display:none; }`) // google header 숨김
}
export const resetTranslate = () =>
  // header에 있는 원문보기 기능 대체
  document
    .querySelector('.goog-te-banner-frame.skiptranslate')
    ?.contentWindow.document.querySelector('.goog-close-link')
    ?.click()

const getFirstLanguageSelectItem = () =>
  document
    .querySelector('.goog-te-menu-frame.skiptranslate')
    ?.contentWindow.document.querySelector('table a')
const getLanguageSelectItems = () =>
  document
    .querySelector('.goog-te-menu-frame.skiptranslate')
    ?.contentWindow.document.querySelectorAll('table a')

const resetLanguageSelectItem = () => {
  const item = document.createElement('a')
  item.classList.add('goog-te-menu2-item')
  item.setAttribute('style', 'cursor:pointer')
  item.innerHTML = `<div style="white-space: nowrap;"><span class="indicator">›</span><span class="text">Original language</span></div>`
  item.addEventListener('click', resetTranslate)
  return item
}
const includedLanguages = 'ko,ja,zh-CN,zh-TW,es,id,ar,ms,th,hi'
const insertResetLangSelectorOnce = () => {
  if (getLanguageSelectItems().length > includedLanguages.split(',').length) return
  const firstItem = getFirstLanguageSelectItem()
  const parentDiv = firstItem.parentNode
  parentDiv.insertBefore(resetLanguageSelectItem(), firstItem)
}

const retryPolicy = Policy.handleAll().retry().attempts(10).delay(1000)
const insertSelectorResetLang = () => {
  const elementLangSelector = document.querySelector('.goog-te-gadget-simple')
  if (!elementLangSelector) throw 'Translator is not loaded yet'
  elementLangSelector.addEventListener('click', insertResetLangSelectorOnce)
  return true
}

const newTranslateElement = () =>
  new google.translate.TranslateElement(
    {
      pageLanguage: 'en',
      includedLanguages,
      layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
    },
    'google_translate_element',
  )

export default {
  created() {
    window.googleTranslateElementInit = () => {
      retryPolicy.execute(insertSelectorResetLang)
      return newTranslateElement()
    }
  },
  mounted: initTranslate,
}
</script>

<style lang="scss">
body {
  top: 0px !important; // after loading google translate, the body's top is set to 40px. so reset it.
}
</style>