@google-translate-select/vue2/dist/es/index4.mjs

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

import d from "vue";
import { createNamespace as L, createStyleTag as T, createGoogleTranslateJsonpCallback as O, createScriptTag as S, useMutationObserver as g, isString as m, GoogleTranslateFireEvent as f, getCookie as p, removeIcon as b } from "./index8.mjs";
import { GOOGLE_TRANSLATE_ORIGINAL_DOM_ID as C, GOOGLE_TRANSLATE_STOP_TRANSLATE_CLASSNAME as v, GOOGLE_TRANSLATE_JSSDK_URL as E, GOOGLE_TRANSLATE_ORIGINAL_SELECT_CLASSNAME as l, GOOGLE_TRANSLATE_COOKIE_NAME as A } from "./index7.mjs";
import "./index9.mjs";
import { googleTranslateProps as _ } from "./index3.mjs";
const n = L("select"), y = d.extend({
  name: n.n,
  inheritAttrs: !1,
  props: _,
  data() {
    return {
      googleTranslateSelectEl: null,
      visible: !1,
      selectedLanguageCode: "",
      hoveredLanguageCode: "",
      setTimeoutId: -1,
      jsonCallbackFnName: "",
      scriptTag: null,
      googleTranslateOriginSelectObserve: {},
      htmlAttrLangObserve: {},
      ns: n,
      GOOGLE_TRANSLATE_ORIGINAL_DOM_ID: C
    };
  },
  computed: {
    getClass() {
      return [
        n.b(),
        v,
        this.$attrs.class
      ];
    },
    hasLanguages() {
      return this.languages && this.languages.length;
    },
    selectedLanguageOption() {
      return this.getSelectedLanguageOption();
    }
  },
  mounted() {
    this.googleTranslateSelectEl = this.$refs.googleTranslateSelectEl, this.createGoogleTranslate(), this.createHtmlAttrLangObserve();
    const e = this;
    this.trigger === "click" && document.addEventListener("click", e.handleDropdownShowOrHideByClick);
  },
  // @ts-ignore
  beforeUnmount() {
    var t, a, s;
    (t = this.googleTranslateOriginSelectObserve) != null && t.stop && this.googleTranslateOriginSelectObserve.stop(), (a = this.htmlAttrLangObserve) != null && a.stop && this.htmlAttrLangObserve.stop(), (s = this.scriptTag) != null && s.unload && this.scriptTag.unload();
    const e = this;
    this.trigger === "click" && document.removeEventListener(
      "click",
      e.handleDropdownShowOrHideByClick
    );
  },
  methods: {
    /**
     * get current select language
     */
    getSelectedLanguageOption() {
      const e = this.languages.find(
        (t) => t.code === this.selectedLanguageCode
      );
      return e || this.languages.find(
        (a) => a.code === this.defaultLanguageCode
      );
    },
    /**
     * dynamic insert style for GoogleTranslate
     */
    createStyle() {
      return T(
        "body { top: 0 !important; } .skiptranslate { display: none !important; }"
      );
    },
    /**
     * create jsonp callback for GoogleTranslate, when GoogleTranslate loaded callback will be triggered
     */
    createJsonCallback() {
      const e = this, t = this.defaultPageLanguageCode, { jsonpCallbackName: a } = O(
        {
          pageLanguage: t
        },
        e.setSelectedLanguageCode
      );
      e.jsonCallbackFnName = a;
    },
    /**
     * pass jsonp callback to GoogleTranslate
     */
    createScript() {
      return S(
        `${E}?cb=${this.jsonCallbackFnName}`
      );
    },
    /**
     * GoogleTranslate init
     */
    createGoogleTranslate() {
      this.createStyle(), this.createJsonCallback(), this.scriptTag = this.createScript();
    },
    /**
     * Triggers translations by observe changes in the DOM of GoogleTranslate's original select.
     *
     * Because the callback function passed in JSONP can only be called after the GOOGLE_TRANSLATE_JSSDK_URL resource is loaded,
     * and the GOOGLE_TRANSLATE_JSSDK_URL will import the resource that generated the original DOM, observe is used here🤓
     */
    createGoogleTranslateOriginSelectObserve() {
      this.googleTranslateOriginSelectObserve = g(
        document.querySelector(l),
        (e) => {
          e.forEach((t) => {
            t.addedNodes[0] && t.addedNodes[0].value && this.selectedLanguageCode === t.addedNodes[0].value && this.triggerTranslate(
              t.addedNodes[0].value
            );
          }), b();
        },
        {
          childList: !0,
          subtree: !0
        }
      ), this.googleTranslateOriginSelectObserve.start();
    },
    /**
     * When GoogleTranslate's original executes, the attribute 'lang' of HTML will have an auto state,
     * in order to overwrite the auto state, we call the 'handleTranslate' again
     */
    createHtmlAttrLangObserve() {
      this.htmlAttrLangObserve = g(
        document.querySelector("html"),
        (e) => {
          e.forEach((t) => {
            if (t.attributeName === "lang") {
              const a = t.target.getAttribute(
                "lang"
              ), s = t.oldValue;
              s !== a && s && s !== "auto" && a === "auto" && this.handleTranslate(this.selectedLanguageCode);
            }
          });
        },
        {
          attributes: !0,
          attributeOldValue: !0
        }
      ), this.htmlAttrLangObserve.start();
    },
    /**
     * Simulates the change event of select to manually trigger GoogleTranslate
     *
     * @param select
     */
    triggerTranslate(e) {
      if (!e)
        return;
      const t = m(e) ? e : e.value ?? "", a = document.querySelector(
        l
      ), s = document.querySelector(`.${n.b()}`);
      !s || !a || s.innerHTML.length === 0 || a.options.length === 0 ? this.createGoogleTranslateOriginSelectObserve() : (a.value = t, f(a, "change"), this.googleTranslateOriginSelectObserve && this.googleTranslateOriginSelectObserve.stop());
    },
    /**
     * Determines whether the current select language exists in the props.languages
     *
     * @param code
     */
    isLanguageCodeInLanguages(e) {
      return this.languages.find(
        (a) => a.code === e
      ) ? e : "en";
    },
    /**
     * Get browser language
     */
    getBrowserLanguage() {
      const e = window.navigator.language || document.documentElement.lang || "en";
      return ["zh-CN", "zh-TW"].every((a) => a !== e) && e.indexOf("-") > -1 ? e.split("-")[0] : e;
    },
    /**
     * After triggering GoogleTranslate Translate, a cookie called 'googtrans' is generated, such as '/en/tr'
     */
    getGoogleCookieLanguage() {
      const e = p(A);
      if (e) {
        const t = e.split("/");
        return t[2] ? t[2] : "en";
      } else
        return "";
    },
    /**
     * Use browser language、cookie 'googtrans' to get language code
     */
    setSelectedLanguageCode() {
      const e = this.fetchBrowserLanguage, t = e ? this.isLanguageCodeInLanguages(this.getBrowserLanguage()) : "", a = this.getGoogleCookieLanguage(), s = !!a, o = () => this.defaultLanguageCode ? this.defaultLanguageCode : "en", u = () => this.languages.find(
        (r) => r.code === t
      ) ? t : o(), c = () => this.languages.find(
        (r) => r.code === a
      ) ? a : o();
      let i = o();
      s ? i = c() : e && (i = u()), this.handleTranslate(i);
    },
    handleTranslate(e) {
      this.triggerTranslate(e), this.selectedLanguageCode = e, this.$emit("select", this.getSelectedLanguageOption());
    },
    clearSettimeout() {
      const e = this;
      window.clearTimeout(e.setTimeoutId), this.setTimeoutId = -1;
    },
    handleDropdownShowByHover(e) {
      this.trigger === "hover" && (this.clearSettimeout(), this.setTimeoutId = window.setTimeout(() => {
        const t = e.target;
        this.googleTranslateSelectEl && this.googleTranslateSelectEl.contains(t) && (this.visible = !0);
      }, 0));
    },
    handleDropdownHideByHover() {
      this.trigger === "hover" && (this.clearSettimeout(), this.setTimeoutId = window.setTimeout(() => {
        this.visible = !1;
      }, this.animateTimeout));
    },
    handleDropdownShowOrHideByClick(e) {
      const t = e.target;
      this.googleTranslateSelectEl && this.googleTranslateSelectEl.contains(t) ? this.visible = !0 : this.visible = !1;
    }
  }
});
export {
  y as default
};
//# sourceMappingURL=index4.mjs.map