website/i18n.js at master · ImEX21/website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
(function () {
  "use strict";

  window.MojoI18N = window.MojoI18N || {};
  var translations = window.MojoI18N;

  var STORAGE_KEY = "mojolauncher.lang";
  var selects = document.querySelectorAll(".lang__select");

  var supported = [];
  if (selects.length) {
    var options = selects[0].options;
    for (var i = 0; i < options.length; i++) supported.push(options[i].value);
  }
  if (!supported.length) supported = ["en"];

  var defaults = {};
  document.querySelectorAll("[data-i18n]").forEach(function (el) {
    defaults[el.getAttribute("data-i18n")] = el.textContent;
  });

  var srcDefaults = {};
  document.querySelectorAll("[data-i18n-src]").forEach(function (el) {
    srcDefaults[el.getAttribute("data-i18n-src")] = el.getAttribute("src");
  });

  var altDefaults = {};
  document.querySelectorAll("[data-i18n-alt]").forEach(function (el) {
    altDefaults[el.getAttribute("data-i18n-alt")] = el.getAttribute("alt");
  });

  var loading = {};
  var currentLang = supported[0];

  function t(key, fallback) {
    var dict = translations[currentLang] || {};
    if (dict[key] != null) return dict[key];
    if (defaults[key] != null) return defaults[key];
    return fallback != null ? fallback : key;
  }

  function loadLocale(lang) {
    if (translations[lang]) return Promise.resolve(translations[lang]);
    if (loading[lang]) return loading[lang];
    loading[lang] = new Promise(function (resolve, reject) {
      var script = document.createElement("script");
      script.src = "assets/locales/" + lang + ".js";
      script.onload = function () { resolve(translations[lang]); };
      script.onerror = function () {
        delete loading[lang];
        reject(new Error("Failed to load locale: " + lang));
      };
      document.head.appendChild(script);
    });
    return loading[lang];
  }

  function detectLang() {
    try {
      var saved = localStorage.getItem(STORAGE_KEY);
      if (saved && supported.indexOf(saved) !== -1) return saved;
    } catch (e) {}
    var nav = (navigator.language || "en").toLowerCase();
    for (var i = 0; i < supported.length; i++) {
      if (nav === supported[i] || nav.indexOf(supported[i] + "-") === 0) return supported[i];
    }
    return supported[0];
  }

  function apply(lang) {
    var dict = translations[lang] || {};
    currentLang = lang;
    document.documentElement.lang = lang;
    document.querySelectorAll("[data-i18n]").forEach(function (el) {
      var key = el.getAttribute("data-i18n");
      var value = dict[key] != null ? dict[key] : defaults[key];
      if (value != null) el.textContent = value;
    });
    document.querySelectorAll("[data-i18n-src]").forEach(function (el) {
      var key = el.getAttribute("data-i18n-src");
      var value = dict[key] != null ? dict[key] : srcDefaults[key];
      if (value != null) el.setAttribute("src", value);
    });
    document.querySelectorAll("[data-i18n-alt]").forEach(function (el) {
      var key = el.getAttribute("data-i18n-alt");
      var value = dict[key] != null ? dict[key] : altDefaults[key];
      if (value != null) el.setAttribute("alt", value);
    });
    selects.forEach(function (sel) { sel.value = lang; });
    document.dispatchEvent(new CustomEvent("mojo:langchange", { detail: { lang: lang } }));
  }

  function setLang(lang) {
    if (supported.indexOf(lang) === -1) return;
    try { localStorage.setItem(STORAGE_KEY, lang); } catch (e) {}
    loadLocale(lang).then(function () { apply(lang); });
  }

  translations.t = t;
  translations.getLang = function () { return currentLang; };

  selects.forEach(function (sel) {
    sel.addEventListener("change", function () { setLang(sel.value); });
  });

  var initial = detectLang();
  selects.forEach(function (sel) { sel.value = initial; });
  loadLocale(initial).then(function () { apply(initial); });
})();