UNPKG

@google-translate-select/vue3

Version:

🚀 The package offer vue3 library for @google-translate-select!

1 lines 18.9 kB
{"version":3,"file":"index5.cjs","sources":["../../src/google-translate-select.vue?vue&type=script&lang.ts"],"sourcesContent":["\nimport {\n computed,\n defineComponent,\n onBeforeUnmount,\n onMounted,\n ref,\n unref,\n} from 'vue'\nimport {\n GoogleTranslateFireEvent,\n createGoogleTranslateJsonpCallback,\n createNamespace,\n createScriptTag,\n createStyleTag,\n getCookie,\n isString,\n removeIcon,\n useMutationObserver,\n} from '@google-translate-select/utils'\nimport {\n GOOGLE_TRANSLATE_COOKIE_NAME,\n GOOGLE_TRANSLATE_JSSDK_URL,\n GOOGLE_TRANSLATE_ORIGINAL_DOM_ID,\n GOOGLE_TRANSLATE_ORIGINAL_SELECT_CLASSNAME,\n GOOGLE_TRANSLATE_STOP_TRANSLATE_CLASSNAME,\n} from '@google-translate-select/constants'\nimport '@google-translate-select/theme-chalk/src/index.scss'\nimport { googleTranslateProps } from './types'\nimport type {\n CreateScriptTagReturn,\n UseMutationObserverReturn,\n} from '@google-translate-select/utils'\n\nconst ns = createNamespace('select')\n\nexport default defineComponent({\n name: ns.n,\n inheritAttrs: false,\n props: googleTranslateProps,\n emits: ['select'],\n setup(props, { emit, attrs }) {\n const googleTranslateSelectEl = ref<HTMLElement | null>(null)\n const visible = ref<boolean>(false)\n const selectedLanguageCode = ref<string>('')\n const hoveredLanguageCode = ref<string>('')\n const setTimeoutId = ref<number>(-1)\n const jsonCallbackFnName = ref<string>('')\n const scriptTag = ref<CreateScriptTagReturn | null>(null)\n const googleTranslateOriginSelectObserve =\n ref<Partial<UseMutationObserverReturn> | null>({})\n const htmlAttrLangObserve = ref<Partial<UseMutationObserverReturn> | null>(\n {}\n )\n\n const getClass = computed(() => {\n return [ns.b(), GOOGLE_TRANSLATE_STOP_TRANSLATE_CLASSNAME, attrs.class]\n })\n\n const hasLanguages = computed(\n () => props.languages && props.languages.length\n )\n\n /** cache current select language */\n const selectedLanguageOption = computed(() => getSelectedLanguageOption())\n\n /**\n * get current select language\n */\n function getSelectedLanguageOption() {\n const selectedLanguageOption = props.languages.find(\n (language) => language.code === unref(selectedLanguageCode)\n )\n if (selectedLanguageOption) {\n return selectedLanguageOption\n } else {\n const defaultSelectedLanguageOption = props.languages.find(\n (language) => language.code === props.defaultLanguageCode\n )\n return defaultSelectedLanguageOption!\n }\n }\n\n /**\n * dynamic insert style for GoogleTranslate\n */\n function createStyle() {\n return createStyleTag(\n `body { top: 0 !important; } .skiptranslate { display: none !important; }`\n )\n }\n\n /**\n * create jsonp callback for GoogleTranslate, when GoogleTranslate loaded callback will be triggered\n */\n function createJsonCallback() {\n const pageLanguage = props.defaultPageLanguageCode\n const { jsonpCallbackName } = createGoogleTranslateJsonpCallback(\n {\n pageLanguage,\n },\n setSelectedLanguageCode\n )\n jsonCallbackFnName.value = jsonpCallbackName\n }\n\n /**\n * pass jsonp callback to GoogleTranslate\n */\n function createScript() {\n return createScriptTag(\n `${GOOGLE_TRANSLATE_JSSDK_URL}?cb=${unref(jsonCallbackFnName)}`\n )\n }\n\n /**\n * GoogleTranslate init\n */\n function createGoogleTranslate() {\n createStyle()\n createJsonCallback()\n scriptTag.value = createScript()\n }\n\n /**\n * Triggers translations by observe changes in the DOM of GoogleTranslate's original select.\n *\n * Because the callback function passed in JSONP can only be called after the GOOGLE_TRANSLATE_JSSDK_URL resource is loaded,\n * and the GOOGLE_TRANSLATE_JSSDK_URL will import the resource that generated the original DOM, observe is used here🤓\n */\n function createGoogleTranslateOriginSelectObserve() {\n googleTranslateOriginSelectObserve.value = useMutationObserver(\n document.querySelector(GOOGLE_TRANSLATE_ORIGINAL_SELECT_CLASSNAME)!,\n (records) => {\n records.forEach((record) => {\n if (\n record.addedNodes[0] &&\n (record.addedNodes[0] as HTMLOptionElement).value\n ) {\n if (\n selectedLanguageCode.value ===\n (record.addedNodes[0] as HTMLOptionElement).value\n ) {\n triggerTranslate(\n (record.addedNodes[0] as HTMLOptionElement).value\n )\n }\n }\n })\n },\n {\n childList: true,\n subtree: true,\n }\n )\n\n unref(googleTranslateOriginSelectObserve)!.start!()\n }\n\n /**\n * When GoogleTranslate's original executes, the attribute 'lang' of HTML will have an auto state,\n * in order to overwrite the auto state, we call the 'handleTranslate' again\n */\n function createHtmlAttrLangObserve() {\n htmlAttrLangObserve.value = useMutationObserver(\n document.querySelector('html')!,\n (records) => {\n records.forEach((record) => {\n if (record.attributeName === 'lang') {\n const currentValue = (record.target as HTMLElement).getAttribute(\n 'lang'\n )\n const oldValue = record.oldValue\n // 修复auto的中间状态,如果页面当中内容较多,gt会有一个翻译的过程,就会抛出lang = auto,此时我们手动再触发一次翻译覆盖掉上次未进行完的翻译操作\n if (\n oldValue !== currentValue &&\n oldValue &&\n oldValue !== 'auto' &&\n currentValue === 'auto'\n ) {\n handleTranslate(unref(selectedLanguageCode))\n }\n }\n })\n removeIcon()\n },\n {\n attributes: true,\n attributeOldValue: true,\n }\n )\n\n unref(htmlAttrLangObserve)!.start!()\n }\n\n /**\n * Simulates the change event of select to manually trigger GoogleTranslate\n *\n * @param select\n */\n function triggerTranslate(select: HTMLSelectElement | string) {\n if (!select) {\n return\n }\n const selectValue = isString(select) ? select : select.value ?? ''\n const googleTranslateOriginalSelectEl = document.querySelector(\n GOOGLE_TRANSLATE_ORIGINAL_SELECT_CLASSNAME\n ) as HTMLSelectElement | null\n const googleTranslateSelectEl = document.querySelector(`.${ns.b()}`)\n\n if (\n !googleTranslateSelectEl ||\n !googleTranslateOriginalSelectEl ||\n googleTranslateSelectEl.innerHTML.length === 0 ||\n googleTranslateOriginalSelectEl.options.length === 0\n ) {\n createGoogleTranslateOriginSelectObserve()\n } else {\n googleTranslateOriginalSelectEl.value = selectValue\n GoogleTranslateFireEvent(googleTranslateOriginalSelectEl, 'change')\n unref(googleTranslateOriginSelectObserve) &&\n unref(googleTranslateOriginSelectObserve)!.stop!()\n }\n }\n\n /**\n * Determines whether the current select language exists in the props.languages\n *\n * @param code\n */\n function isLanguageCodeInLanguages(code: string) {\n // 如果 code 不存在于语言列表中默认使用英语\n const result = props.languages.find((language) => language.code === code)\n return result ? code : 'en'\n }\n\n /**\n * Get browser language\n */\n function getBrowserLanguage() {\n const browserLanguage =\n window.navigator.language || document.documentElement.lang || 'en'\n\n const filterLanguages = ['zh-CN', 'zh-TW']\n if (filterLanguages.every((l) => l !== browserLanguage)) {\n if (browserLanguage.indexOf('-') > -1) {\n return browserLanguage.split('-')[0]\n }\n }\n return browserLanguage\n }\n\n /**\n * After triggering GoogleTranslate Translate, a cookie called 'googtrans' is generated, such as '/en/tr'\n */\n function getGoogleCookieLanguage() {\n const googleTranslateCookie = getCookie(GOOGLE_TRANSLATE_COOKIE_NAME)\n\n if (googleTranslateCookie) {\n const googleTranslateCookieResult = googleTranslateCookie.split('/')\n return googleTranslateCookieResult[2]\n ? googleTranslateCookieResult[2]\n : 'en'\n } else {\n return ''\n }\n }\n\n /**\n * Use browser language、cookie 'googtrans' to get language code\n */\n function setSelectedLanguageCode() {\n const isFetchBrowserLanguageOpen = props.fetchBrowserLanguage\n const browserLanguage = isFetchBrowserLanguageOpen\n ? isLanguageCodeInLanguages(getBrowserLanguage())\n : ''\n const googleCookieLanguage = getGoogleCookieLanguage()\n const isGoogleCookieLanguageExist = !!googleCookieLanguage\n\n const handleDefaultLanguage = () => {\n if (props.defaultLanguageCode) {\n return props.defaultLanguageCode\n } else {\n return 'en'\n }\n }\n\n const handleBrowserLanguageInLanguages = () => {\n const isBrowserLanguageInLanguages = !!props.languages.find(\n (language) => language.code === browserLanguage\n )\n if (isBrowserLanguageInLanguages) {\n return browserLanguage\n } else {\n return handleDefaultLanguage()\n }\n }\n\n const handleGoogleCookieLanguageInLanguages = () => {\n const isGoogleCookieLanguageInLanguages = !!props.languages.find(\n (language) => language.code === googleCookieLanguage\n )\n if (isGoogleCookieLanguageInLanguages) {\n return googleCookieLanguage\n } else {\n return handleDefaultLanguage()\n }\n }\n\n let selectedCode = handleDefaultLanguage()\n if (!isGoogleCookieLanguageExist) {\n // 首次\n if (isFetchBrowserLanguageOpen)\n selectedCode = handleBrowserLanguageInLanguages()\n } else {\n // 非首次\n // 越过浏览器语言判断直接去列表中匹配\n selectedCode = handleGoogleCookieLanguageInLanguages()\n }\n\n handleTranslate(selectedCode)\n }\n\n function handleTranslate(code: string) {\n triggerTranslate(code)\n selectedLanguageCode.value = code\n\n emit('select', getSelectedLanguageOption())\n }\n\n function clearSettimeout() {\n clearTimeout(unref(setTimeoutId))\n setTimeoutId.value = -1\n }\n\n function handleDropdownShowByHover(e: Event) {\n if (props.trigger === 'hover') {\n clearSettimeout()\n setTimeoutId.value = window.setTimeout(() => {\n const target = e.target as HTMLElement\n if (\n unref(googleTranslateSelectEl) &&\n unref(googleTranslateSelectEl)?.contains(target)\n ) {\n visible.value = true\n }\n }, 0)\n }\n }\n\n function handleDropdownHideByHover() {\n if (props.trigger === 'hover') {\n clearSettimeout()\n setTimeoutId.value = window.setTimeout(() => {\n visible.value = false\n }, props.animateTimeout)\n }\n }\n\n function handleDropdownShowOrHideByClick(e: Event) {\n const target = e.target as HTMLElement\n if (\n unref(googleTranslateSelectEl) &&\n unref(googleTranslateSelectEl)?.contains(target)\n ) {\n visible.value = true\n } else {\n visible.value = false\n }\n }\n\n onMounted(() => {\n createGoogleTranslate()\n createHtmlAttrLangObserve()\n\n if (props.trigger === 'click')\n document.addEventListener('click', handleDropdownShowOrHideByClick)\n })\n\n onBeforeUnmount(() => {\n if (unref(googleTranslateOriginSelectObserve)?.stop) {\n unref(googleTranslateOriginSelectObserve)!.stop!()\n }\n\n if (unref(htmlAttrLangObserve)?.stop) {\n unref(htmlAttrLangObserve)!.stop!()\n }\n\n if (unref(scriptTag)?.unload) {\n unref(scriptTag)!.unload!()\n }\n if (props.trigger === 'click')\n document.removeEventListener('click', handleDropdownShowOrHideByClick)\n })\n\n return {\n ns,\n googleTranslateSelectEl,\n visible,\n selectedLanguageCode,\n hoveredLanguageCode,\n getClass,\n hasLanguages,\n selectedLanguageOption,\n handleTranslate,\n handleDropdownShowByHover,\n handleDropdownHideByHover,\n GOOGLE_TRANSLATE_ORIGINAL_DOM_ID,\n }\n },\n})\n"],"names":["ns","createNamespace","_sfc_main","defineComponent","googleTranslateProps","props","emit","attrs","googleTranslateSelectEl","ref","visible","selectedLanguageCode","hoveredLanguageCode","setTimeoutId","jsonCallbackFnName","scriptTag","googleTranslateOriginSelectObserve","htmlAttrLangObserve","getClass","computed","GOOGLE_TRANSLATE_STOP_TRANSLATE_CLASSNAME","hasLanguages","selectedLanguageOption","getSelectedLanguageOption","language","unref","createStyle","createStyleTag","createJsonCallback","pageLanguage","jsonpCallbackName","createGoogleTranslateJsonpCallback","setSelectedLanguageCode","createScript","createScriptTag","GOOGLE_TRANSLATE_JSSDK_URL","createGoogleTranslate","createGoogleTranslateOriginSelectObserve","useMutationObserver","GOOGLE_TRANSLATE_ORIGINAL_SELECT_CLASSNAME","records","record","triggerTranslate","createHtmlAttrLangObserve","currentValue","oldValue","handleTranslate","removeIcon","select","selectValue","isString","googleTranslateOriginalSelectEl","GoogleTranslateFireEvent","isLanguageCodeInLanguages","code","getBrowserLanguage","browserLanguage","l","getGoogleCookieLanguage","googleTranslateCookie","getCookie","GOOGLE_TRANSLATE_COOKIE_NAME","googleTranslateCookieResult","isFetchBrowserLanguageOpen","googleCookieLanguage","isGoogleCookieLanguageExist","handleDefaultLanguage","handleBrowserLanguageInLanguages","handleGoogleCookieLanguageInLanguages","selectedCode","clearSettimeout","handleDropdownShowByHover","target","handleDropdownHideByHover","handleDropdownShowOrHideByClick","onMounted","onBeforeUnmount","GOOGLE_TRANSLATE_ORIGINAL_DOM_ID"],"mappings":"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"}