webflow-multilingual.mjs

(function(l, i, v, e) {
  v = l.createElement(i);
  v.async = 1;
  v.src =
    "//" +
    (location.host || "localhost").split(":")[0] +
    ":35729/livereload.js?snipver=1";
  e = l.getElementsByTagName(i)[0];
  e.parentNode.insertBefore(v, e);
})(document, "script");
const LANGUAGES_LIST = {
  aa: {
    name: "Afar",
    nativeName: "Afaraf"
  },
  ab: {
    name: "Abkhaz",
    nativeName: "аҧсуа бызшәа"
  },
  ae: {
    name: "Avestan",
    nativeName: "avesta"
  },
  af: {
    name: "Afrikaans",
    nativeName: "Afrikaans"
  },
  ak: {
    name: "Akan",
    nativeName: "Akan"
  },
  am: {
    name: "Amharic",
    nativeName: "አማርኛ"
  },
  an: {
    name: "Aragonese",
    nativeName: "aragonés"
  },
  ar: {
    name: "Arabic",
    nativeName: "اللغة العربية"
  },
  as: {
    name: "Assamese",
    nativeName: "অসমীয়া"
  },
  av: {
    name: "Avaric",
    nativeName: "авар мацӀ"
  },
  ay: {
    name: "Aymara",
    nativeName: "aymar aru"
  },
  az: {
    name: "Azerbaijani",
    nativeName: "azərbaycan dili"
  },
  ba: {
    name: "Bashkir",
    nativeName: "башҡорт теле"
  },
  be: {
    name: "Belarusian",
    nativeName: "беларуская мова"
  },
  bg: {
    name: "Bulgarian",
    nativeName: "български език"
  },
  bh: {
    name: "Bihari",
    nativeName: "भोजपुरी"
  },
  bi: {
    name: "Bislama",
    nativeName: "Bislama"
  },
  bm: {
    name: "Bambara",
    nativeName: "bamanankan"
  },
  bn: {
    name: "Bengali",
    nativeName: "বাংলা"
  },
  bo: {
    name: "Tibetan Standard",
    nativeName: "བོད་ཡིག"
  },
  br: {
    name: "Breton",
    nativeName: "brezhoneg"
  },
  bs: {
    name: "Bosnian",
    nativeName: "bosanski jezik"
  },
  ca: {
    name: "Catalan",
    nativeName: "català"
  },
  ce: {
    name: "Chechen",
    nativeName: "нохчийн мотт"
  },
  ch: {
    name: "Chamorro",
    nativeName: "Chamoru"
  },
  co: {
    name: "Corsican",
    nativeName: "corsu"
  },
  cr: {
    name: "Cree",
    nativeName: "ᓀᐦᐃᔭᐍᐏᐣ"
  },
  cs: {
    name: "Czech",
    nativeName: "čeština"
  },
  cu: {
    name: "Old Church Slavonic",
    nativeName: "ѩзыкъ словѣньскъ"
  },
  cv: {
    name: "Chuvash",
    nativeName: "чӑваш чӗлхи"
  },
  cy: {
    name: "Welsh",
    nativeName: "Cymraeg"
  },
  da: {
    name: "Danish",
    nativeName: "dansk"
  },
  de: {
    name: "German",
    nativeName: "Deutsch"
  },
  dv: {
    name: "Divehi",
    nativeName: "Dhivehi"
  },
  dz: {
    name: "Dzongkha",
    nativeName: "རྫོང་ཁ"
  },
  ee: {
    name: "Ewe",
    nativeName: "Eʋegbe"
  },
  el: {
    name: "Greek",
    nativeName: "ελληνικά"
  },
  en: {
    name: "English",
    nativeName: "English"
  },
  eo: {
    name: "Esperanto",
    nativeName: "Esperanto"
  },
  es: {
    name: "Spanish",
    nativeName: "Español"
  },
  et: {
    name: "Estonian",
    nativeName: "eesti"
  },
  eu: {
    name: "Basque",
    nativeName: "euskara"
  },
  fa: {
    name: "Persian",
    nativeName: "فارسی"
  },
  ff: {
    name: "Fula",
    nativeName: "Fulfulde"
  },
  fi: {
    name: "Finnish",
    nativeName: "suomi"
  },
  fj: {
    name: "Fijian",
    nativeName: "Vakaviti"
  },
  fo: {
    name: "Faroese",
    nativeName: "føroyskt"
  },
  fr: {
    name: "French",
    nativeName: "Français"
  },
  fy: {
    name: "Western Frisian",
    nativeName: "Frysk"
  },
  ga: {
    name: "Irish",
    nativeName: "Gaeilge"
  },
  gd: {
    name: "Scottish Gaelic",
    nativeName: "Gàidhlig"
  },
  gl: {
    name: "Galician",
    nativeName: "galego"
  },
  gn: {
    name: "Guaraní",
    nativeName: "Avañe'ẽ"
  },
  gu: {
    name: "Gujarati",
    nativeName: "ગુજરાતી"
  },
  gv: {
    name: "Manx",
    nativeName: "Gaelg"
  },
  ha: {
    name: "Hausa",
    nativeName: "هَوُسَ"
  },
  he: {
    name: "Hebrew",
    nativeName: "עברית"
  },
  hi: {
    name: "Hindi",
    nativeName: "हिन्दी"
  },
  ho: {
    name: "Hiri Motu",
    nativeName: "Hiri Motu"
  },
  hr: {
    name: "Croatian",
    nativeName: "hrvatski jezik"
  },
  ht: {
    name: "Haitian",
    nativeName: "Kreyòl ayisyen"
  },
  hu: {
    name: "Hungarian",
    nativeName: "magyar"
  },
  hy: {
    name: "Armenian",
    nativeName: "Հայերեն"
  },
  hz: {
    name: "Herero",
    nativeName: "Otjiherero"
  },
  ia: {
    name: "Interlingua",
    nativeName: "Interlingua"
  },
  id: {
    name: "Indonesian",
    nativeName: "Indonesian"
  },
  ie: {
    name: "Interlingue",
    nativeName: "Interlingue"
  },
  ig: {
    name: "Igbo",
    nativeName: "Asụsụ Igbo"
  },
  ii: {
    name: "Nuosu",
    nativeName: "ꆈꌠ꒿ Nuosuhxop"
  },
  ik: {
    name: "Inupiaq",
    nativeName: "Iñupiaq"
  },
  io: {
    name: "Ido",
    nativeName: "Ido"
  },
  is: {
    name: "Icelandic",
    nativeName: "Íslenska"
  },
  it: {
    name: "Italian",
    nativeName: "Italiano"
  },
  iu: {
    name: "Inuktitut",
    nativeName: "ᐃᓄᒃᑎᑐᑦ"
  },
  ja: {
    name: "Japanese",
    nativeName: "日本語"
  },
  jv: {
    name: "Javanese",
    nativeName: "basa Jawa"
  },
  ka: {
    name: "Georgian",
    nativeName: "ქართული"
  },
  kg: {
    name: "Kongo",
    nativeName: "Kikongo"
  },
  ki: {
    name: "Kikuyu",
    nativeName: "Gĩkũyũ"
  },
  kj: {
    name: "Kwanyama",
    nativeName: "Kuanyama"
  },
  kk: {
    name: "Kazakh",
    nativeName: "қазақ тілі"
  },
  kl: {
    name: "Kalaallisut",
    nativeName: "kalaallisut"
  },
  km: {
    name: "Khmer",
    nativeName: "ខេមរភាសា"
  },
  kn: {
    name: "Kannada",
    nativeName: "ಕನ್ನಡ"
  },
  ko: {
    name: "Korean",
    nativeName: "한국어"
  },
  kr: {
    name: "Kanuri",
    nativeName: "Kanuri"
  },
  ks: {
    name: "Kashmiri",
    nativeName: "कश्मीरी"
  },
  ku: {
    name: "Kurdish",
    nativeName: "Kurdî"
  },
  kv: {
    name: "Komi",
    nativeName: "коми кыв"
  },
  kw: {
    name: "Cornish",
    nativeName: "Kernewek"
  },
  ky: {
    name: "Kyrgyz",
    nativeName: "Кыргызча"
  },
  la: {
    name: "Latin",
    nativeName: "latine"
  },
  lb: {
    name: "Luxembourgish",
    nativeName: "Lëtzebuergesch"
  },
  lg: {
    name: "Ganda",
    nativeName: "Luganda"
  },
  li: {
    name: "Limburgish",
    nativeName: "Limburgs"
  },
  ln: {
    name: "Lingala",
    nativeName: "Lingála"
  },
  lo: {
    name: "Lao",
    nativeName: "ພາສາ"
  },
  lt: {
    name: "Lithuanian",
    nativeName: "lietuvių kalba"
  },
  lu: {
    name: "Luba-Katanga",
    nativeName: "Tshiluba"
  },
  lv: {
    name: "Latvian",
    nativeName: "latviešu valoda"
  },
  mg: {
    name: "Malagasy",
    nativeName: "fiteny malagasy"
  },
  mh: {
    name: "Marshallese",
    nativeName: "Kajin M̧ajeļ"
  },
  mi: {
    name: "Māori",
    nativeName: "te reo Māori"
  },
  mk: {
    name: "Macedonian",
    nativeName: "македонски јазик"
  },
  ml: {
    name: "Malayalam",
    nativeName: "മലയാളം"
  },
  mn: {
    name: "Mongolian",
    nativeName: "Монгол хэл"
  },
  mr: {
    name: "Marathi",
    nativeName: "मराठी"
  },
  ms: {
    name: "Malay",
    nativeName: "هاس ملايو‎"
  },
  mt: {
    name: "Maltese",
    nativeName: "Malti"
  },
  my: {
    name: "Burmese",
    nativeName: "ဗမာစာ"
  },
  na: {
    name: "Nauru",
    nativeName: "Ekakairũ Naoero"
  },
  nb: {
    name: "Norwegian Bokmål",
    nativeName: "Norsk bokmål"
  },
  nd: {
    name: "Northern Ndebele",
    nativeName: "isiNdebele"
  },
  ne: {
    name: "Nepali",
    nativeName: "नेपाली"
  },
  ng: {
    name: "Ndonga",
    nativeName: "Owambo"
  },
  nl: {
    name: "Dutch",
    nativeName: "Nederlands"
  },
  nn: {
    name: "Norwegian Nynorsk",
    nativeName: "Norsk nynorsk"
  },
  no: {
    name: "Norwegian",
    nativeName: "Norsk"
  },
  nr: {
    name: "Southern Ndebele",
    nativeName: "isiNdebele"
  },
  nv: {
    name: "Navajo",
    nativeName: "Diné bizaad"
  },
  ny: {
    name: "Chichewa",
    nativeName: "chiCheŵa"
  },
  oc: {
    name: "Occitan",
    nativeName: "occitan"
  },
  oj: {
    name: "Ojibwe",
    nativeName: "ᐊᓂᔑᓈᐯᒧᐎᓐ"
  },
  om: {
    name: "Oromo",
    nativeName: "Afaan Oromoo"
  },
  or: {
    name: "Oriya",
    nativeName: "ଓଡ଼ିଆ"
  },
  os: {
    name: "Ossetian",
    nativeName: "ирон æвзаг"
  },
  pa: {
    name: "Panjabi",
    nativeName: "ਪੰਜਾਬੀ"
  },
  pi: {
    name: "Pāli",
    nativeName: "पाऴि"
  },
  pl: {
    name: "Polish",
    nativeName: "język polski"
  },
  ps: {
    name: "Pashto",
    nativeName: "پښتو"
  },
  pt: {
    name: "Portuguese",
    nativeName: "Português"
  },
  qu: {
    name: "Quechua",
    nativeName: "Runa Simi"
  },
  rm: {
    name: "Romansh",
    nativeName: "rumantsch grischun"
  },
  rn: {
    name: "Kirundi",
    nativeName: "Ikirundi"
  },
  ro: {
    name: "Romanian",
    nativeName: "limba română"
  },
  ru: {
    name: "Russian",
    nativeName: "Русский"
  },
  rw: {
    name: "Kinyarwanda",
    nativeName: "Ikinyarwanda"
  },
  sa: {
    name: "Sanskrit",
    nativeName: "संस्कृतम्"
  },
  sc: {
    name: "Sardinian",
    nativeName: "sardu"
  },
  sd: {
    name: "Sindhi",
    nativeName: "सिन्धी"
  },
  se: {
    name: "Northern Sami",
    nativeName: "Davvisámegiella"
  },
  sg: {
    name: "Sango",
    nativeName: "yângâ tî sängö"
  },
  si: {
    name: "Sinhala",
    nativeName: "සිංහල"
  },
  sk: {
    name: "Slovak",
    nativeName: "slovenčina"
  },
  sl: {
    name: "Slovene",
    nativeName: "slovenski jezik"
  },
  sm: {
    name: "Samoan",
    nativeName: "gagana fa'a Samoa"
  },
  sn: {
    name: "Shona",
    nativeName: "chiShona"
  },
  so: {
    name: "Somali",
    nativeName: "Soomaaliga"
  },
  sq: {
    name: "Albanian",
    nativeName: "Shqip"
  },
  sr: {
    name: "Serbian",
    nativeName: "српски језик"
  },
  ss: {
    name: "Swati",
    nativeName: "SiSwati"
  },
  st: {
    name: "Southern Sotho",
    nativeName: "Sesotho"
  },
  su: {
    name: "Sundanese",
    nativeName: "Basa Sunda"
  },
  sv: {
    name: "Swedish",
    nativeName: "svenska"
  },
  sw: {
    name: "Swahili",
    nativeName: "Kiswahili"
  },
  ta: {
    name: "Tamil",
    nativeName: "தமிழ்"
  },
  te: {
    name: "Telugu",
    nativeName: "తెలుగు"
  },
  tg: {
    name: "Tajik",
    nativeName: "тоҷикӣ"
  },
  th: {
    name: "Thai",
    nativeName: "ไทย"
  },
  ti: {
    name: "Tigrinya",
    nativeName: "ትግርኛ"
  },
  tk: {
    name: "Turkmen",
    nativeName: "Türkmen"
  },
  tl: {
    name: "Tagalog",
    nativeName: "Wikang Tagalog"
  },
  tn: {
    name: "Tswana",
    nativeName: "Setswana"
  },
  to: {
    name: "Tonga",
    nativeName: "faka Tonga"
  },
  tr: {
    name: "Turkish",
    nativeName: "Türkçe"
  },
  ts: {
    name: "Tsonga",
    nativeName: "Xitsonga"
  },
  tt: {
    name: "Tatar",
    nativeName: "татар теле"
  },
  tw: {
    name: "Twi",
    nativeName: "Twi"
  },
  ty: {
    name: "Tahitian",
    nativeName: "Reo Tahiti"
  },
  ug: {
    name: "Uyghur",
    nativeName: "ئۇيغۇرچە‎"
  },
  uk: {
    name: "Ukrainian",
    nativeName: "Українська"
  },
  ur: {
    name: "Urdu",
    nativeName: "اردو"
  },
  uz: {
    name: "Uzbek",
    nativeName: "Ўзбек"
  },
  ve: {
    name: "Venda",
    nativeName: "Tshivenḓa"
  },
  vi: {
    name: "Vietnamese",
    nativeName: "Tiếng Việt"
  },
  vo: {
    name: "Volapük",
    nativeName: "Volapük"
  },
  wa: {
    name: "Walloon",
    nativeName: "walon"
  },
  wo: {
    name: "Wolof",
    nativeName: "Wollof"
  },
  xh: {
    name: "Xhosa",
    nativeName: "isiXhosa"
  },
  yi: {
    name: "Yiddish",
    nativeName: "ייִדיש"
  },
  yo: {
    name: "Yoruba",
    nativeName: "Yorùbá"
  },
  za: {
    name: "Zhuang",
    nativeName: "Saɯ cueŋƅ"
  },
  zh: {
    name: "Chinese",
    nativeName: "中文"
  },
  zu: {
    name: "Zulu",
    nativeName: "isiZulu"
  }
};

class ISO6391 {
  static getLanguages(codes = []) {
    return codes.map(code => ({
      code,
      name: ISO6391.getName(code),
      nativeName: ISO6391.getNativeName(code)
    }));
  }

  static getName(code) {
    return ISO6391.validate(code) ? LANGUAGES_LIST[code].name : "";
  }

  static getAllNames() {
    return Object.values(LANGUAGES_LIST).map(l => l.name);
  }

  static getNativeName(code) {
    return ISO6391.validate(code) ? LANGUAGES_LIST[code].nativeName : "";
  }

  static getAllNativeNames() {
    return Object.values(LANGUAGES_LIST).map(l => l.nativeName);
  }

  static getCode(name) {
    const code = Object.keys(LANGUAGES_LIST).find(code => {
      const language = LANGUAGES_LIST[code];

      return (
        language.name.toLowerCase() === name.toLowerCase() ||
        language.nativeName.toLowerCase() === name.toLowerCase()
      );
    });
    return code || "";
  }

  static getAllCodes() {
    return Object.keys(LANGUAGES_LIST);
  }

  static validate(code) {
    return LANGUAGES_LIST[code] !== undefined;
  }
}

// http://multilinguale.webflow.io

const defaultLang = "en";
const langRegExp = /\[\[([a-z]{2})\]\]([^\[]+)/g;
const isStorageEnabled = !(typeof localStorage == "undefined");
const textDict = [];
let userLang = (
  navigator.userLanguage ||
  navigator.browserLanguage ||
  navigator.language ||
  defaultLang
).substr(0, 2);
let documentLang;

function getLangParam() {
  const arr = /lang=([a-z]{2})/g.exec(location.search);
  return arr ? arr[1] : null;
}

function getLangFromStorage() {
  return isStorageEnabled ? localStorage.getItem("lang") : undefined;
}

function setLang(lang) {
  userLang = lang;
  if (isStorageEnabled) {
    localStorage.setItem("lang", userLang);
  }
  console.log("[wm] setLang:", lang, userLang);
  applyLang();
}

function applyLang() {
  textDict.forEach(o => {
    o.el.textContent = o.dict[userLang];
  });

  ISO6391.getAllCodes().forEach(lang => {
    lang === userLang
      ? document
          .querySelectorAll(`.wm-${lang}`)
          .forEach(el => (el.style.display = el.dataset.wmDisplay))
      : document
          .querySelectorAll(`.wm-${lang}`)
          .forEach(el => (el.style.display = "none"));
  });
}

function textNodesUnder(el) {
  let node;
  const nodes = [];
  const walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);

  while ((node = walk.nextNode())) {
    nodes.push(node);
  }
  return nodes;
}

// https://medium.com/@roxeteer/javascript-one-liner-to-get-elements-text-content-without-its-child-nodes-8e59269d1e71
function parentElTextOnly(el) {
  return Array.from(el.childNodes).reduce((acc, node) => {
    return acc + (node.nodeType === 3 ? node.textContent : "");
  }, "");
}

window.addEventListener("DOMContentLoaded", () => {
  let langs = new Set();
  userLang = getLangParam() || getLangFromStorage() || userLang;
  if (isStorageEnabled) {
    localStorage.setItem("lang", userLang);
  }

  ISO6391.getAllCodes().forEach(lang => {
    document
      .querySelectorAll(`.wm-${lang}`)
      .forEach(el => (el.dataset.wmDisplay = el.style.display));
  });

  textNodesUnder(document)
    .filter(node => {
      return langRegExp.test(parentElTextOnly(node.parentElement));
    })
    .forEach((node, i) => {
      const dict = {};
      let arr;
      while (
        (arr = langRegExp.exec(parentElTextOnly(node.parentElement))) != null
      ) {
        dict[arr[1]] = arr[2];
        langs.add(arr[1]);
      }
      textDict.push({
        el: node.parentElement,
        dict
      });
    });
  console.log("[wm] documentLang:", documentLang);
  documentLang = DocumentLang(langs, userLang);
  applyLang();
});

/////////////////////////

window.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll("[data-wm-sel]").forEach(el => {
    el.addEventListener("click", evt => {
      evt.stopPropagation();
      evt.preventDefault();
      console.log("[wm] click:", el.dataset.wmSel);
      setLang(el.dataset.wmSel);
    });
  });
});

///////////////////////////

function DocumentLang(langsSet, userLang) {
  const langs = Array.from(langsSet);
  let cur = langs.indexOf(userLang);
  const next = () => {
    if (cur < langs.length) {
      return langs[cur++];
    } else {
      cur = 0;
      return langs[0];
    }
  };
  const nextVal = () => {
    if (cur + 1 < langs.length) {
      return langs[cur + 1];
    } else {
      return langs[0];
    }
  };
  const curVal = () => langs[cur];

  return {
    next,
    nextVal,
    curVal
  };
}

window.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll("[data-wm-switch]").forEach(el => {
    if (documentLang.curVal() === userLang) {
      el.textContent = ISO6391.getName(documentLang.nextVal());
    } else {
      el.textContent = ISO6391.getName(documentLang.curVal());
    }

    el.addEventListener("click", evt => {
      evt.stopPropagation();
      evt.preventDefault();
      let nextLang = documentLang.next();
      if (nextLang === userLang) {
        nextLang = documentLang.next();
      }
      setLang(nextLang);
      el.textContent = ISO6391.getName(documentLang.nextVal());
      console.log("[wm] switch:", nextLang);
    });
  });
});
//# sourceMappingURL=webflow-multilingual.mjs.map