#153 - Instant Multilingual Site with Google Translate v0.1

<!-- 💙 MEMBERSCRIPT #153 v1.0 💙 - FREE MULTILINGUAL SITE WITH GOOGLE TRANSLATE -->
<script>
  // 1. Inject Google Translate script dynamically
  const gtScript = document.createElement('script');
  gtScript.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
  document.head.appendChild(gtScript);

  // 2. Inject CSS to hide Google Translate UI
  const style = document.createElement('style');
  style.innerHTML = `
    body { top: 0px !important; position: static !important; }
    .goog-te-banner-frame, .skiptranslate,
    #goog-gt-tt, .goog-te-balloon-frame,
    .goog-text-highlight {
      display: none !important;
      background: none !important;
      box-shadow: none !important;
    }
  `;
  document.head.appendChild(style);

  // 3. Google Translate init
  window.googleTranslateElementInit = function () {
    new google.translate.TranslateElement({
      pageLanguage: 'en',
      layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT
    }, 'google_translate_element');
  };

  // 4. Helper to get cookies
  function getCookie(name) {
    const cookies = document.cookie.split(';');
    for (let cookie of cookies) {
      const [key, value] = cookie.trim().split('=');
      if (key === name) return decodeURIComponent(value);
    }
    return null;
  }

  // 5. Language map
  const languageMap = new Map([
    ["af","Afrikaans"], ["sq","Albanian"], ["ar","Arabic"], ["hy","Armenian"],
    ["az","Azerbaijani"], ["eu","Basque"], ["be","Belarusian"], ["bg","Bulgarian"],
    ["ca","Catalan"], ["zh-CN","ChineseSimplified"], ["zh-TW","ChineseTraditional"], 
    ["hr","Croatian"], ["cs","Czech"], ["da","Danish"], ["nl","Dutch"], ["de","German"],
    ["en","English"], ["et","Estonian"], ["tl","Filipino"], ["fi","Finnish"], 
    ["fr","French"], ["gl","Galician"], ["ka","Georgian"], ["el","Greek"], 
    ["ht","Haitian"], ["iw","Hebrew"], ["hi","Hindi"], ["hu","Hungarian"], 
    ["is","Icelandic"], ["id","Indonesian"], ["ga","Irish"], ["it","Italian"], 
    ["ja","Japanese"], ["ko","Korean"], ["lv","Latvian"], ["lt","Lithuanian"], 
    ["mk","Macedonian"], ["ms","Malay"], ["mt","Maltese"], ["no","Norwegian"], 
    ["fa","Persian"], ["pl","Polish"], ["pt","Portuguese"], ["ro","Romanian"], 
    ["ru","Russian"], ["sr","Serbian"], ["sk","Slovak"], ["sl","Slovenian"], 
    ["es","Spanish"], ["sw","Swahili"], ["sv","Swedish"], ["th","Thai"], 
    ["tr","Turkish"], ["uk","Ukrainian"], ["ur","Urdu"], ["vi","Vietnamese"], 
    ["cy","Welsh"], ["yi","Yiddish"]
  ]);

  // 6. Detect current language
  let currentLang = getCookie("googtrans")?.split("/").pop() || "en";

  // 7. Show language-specific content & set up language switch
  document.addEventListener("DOMContentLoaded", function () {
    const readableLang = languageMap.get(currentLang);
    const langClass = `.languagespecific.${readableLang?.toLowerCase()}specific`;
    const fallbackClass = `.languagespecific.englishspecific`;

    if (document.querySelector(langClass)) {
      document.querySelectorAll(langClass).forEach(el => el.style.display = 'block');
    } else {
      document.querySelectorAll(fallbackClass).forEach(el => el.style.display = 'block');
    }

    document.querySelectorAll('[data-ms-code-lang-select]').forEach(el => {
      el.addEventListener('click', function (e) {
        e.preventDefault();
        const selectedLang = this.getAttribute('data-ms-code-lang');

        if (selectedLang === 'en') {
          document.cookie = "googtrans=;path=/;expires=Thu, 01 Jan 1970 00:00:01 GMT;";
          document.cookie = "googtrans=;domain=.webflow.io;path=/;expires=Thu, 01 Jan 1970 00:00:01 GMT;";
          window.location.hash = "";
          setTimeout(() => location.reload(true), 100);
        } else {
          const combo = document.querySelector('.goog-te-combo');
          if (combo) combo.value = selectedLang;
          window.location.hash = "#googtrans(en|" + selectedLang + ")";
          location.reload();
        }
      });
    });
  });
</script>