Merge pull request #168 from DevSplash/master

Add a simple language selector.

css/styles.css

@@ -65,6 +65,36 @@ h2 {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);
 }
 
+.dialog-box-lng {
+  text-align: center;
+}
+
+.dialog-box-lng p,
+.dialog-box-lng select {
+  display: inline;
+}
+
+.dialog-box-lng select {
+  font-size: 1rem;
+  padding: 4px;
+  font-weight: bold;
+  border-radius: 4px;
+  border-color: #DEF2D9;
+  color: #837865;
+  cursor: pointer;
+  transition: 0.2s all;
+}
+
+.dialog-box-lng select:hover {
+  background-color: #EBFEFD;
+  border-color: #5ECEDB;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
+}
+
+.dialog-box-lng select:focus {
+  outline: none;
+}
+
 .dialog-box p {
   font-family: 'Raleway', sans-serif;
   font-weight: 800;

index.html

@@ -297,6 +297,9 @@
     <p data-i18n="[html]textbox.support"></p>
     <p data-i18n="textbox.contributors-text"></p>
     <p id="contributors"><span data-i18n="textbox.contributors"></span>: </p>
+    <div class="dialog-box-lng">
+      <p data-i18n="textbox.language"></p>: <select id="language"></select>
+    </div>
   </div>
 
   <div id="snackbar">Some text some message...</div>

js/translations.js

@@ -1,25 +1,48 @@
 function updateContent() {
   update();
-  $("body").localize();
+  $('body').localize();
 }
-
+const defaultLanguage = 'en';
 i18next
-  .use(i18nextXHRBackend)
+.use(i18nextXHRBackend)
-  .use(i18nextBrowserLanguageDetector)
+.use(i18nextBrowserLanguageDetector)
-  .init({
+.init({
-    fallbackLng: 'en',
+  fallbackLng: defaultLanguage,
-    debug: true,
+  debug: true,
-    backend: {
+  backend: {
-      loadPath: 'locales/{{lng}}.json',
+    loadPath: 'locales/{{lng}}.json',
-    },
+  },
-  }, function(err, t) {
+}, (err, t) => {
-    jqueryI18next.init(i18next, $);
+  const languages = [
-    i18next.on('languageChanged', () => {
+    ['de', 'Deutsch'],
-      updateContent();
+    ['en', 'English'],
-    });
+    ['it', 'Italiano'],
-
+    ['ja', '日本語'],
-    // init set content
+    ['zh-CN', '简体中文'],
-    $(document).ready(initialize);
+    ['zh-TW', '繁體中文']
-    $(document).on("input", updateContent);
+  ],
-    $('input[type = radio]').on("change", updateContent);
+  languageSelector = $('#language');
+  languages.map(([code, name]) => {
+    languageSelector.append(`<option value="${code}"${code == i18next.language ? ' selected' : ''}>${name}</option>`);
   });
+  if (!languageSelector.find('[selected]').length)
+    languageSelector.val(defaultLanguage);
+  languageSelector.on('change', function () {
+    if (this.value == i18next.language)
+      return;
+    i18next.changeLanguage(this.value);
+  });
+  jqueryI18next.init(i18next, $);
+  i18next.on('languageChanged', lng => {
+    if (!languageSelector.find(`[value=${lng}]`).length) {
+      i18next.changeLanguage(defaultLanguage);
+      return;
+    }
+    languageSelector.val(lng);
+    updateContent();
+  });
+  // init set content
+  $(document).ready(initialize);
+  $(document).on('input', updateContent);
+  $('input[type = radio]').on('change', updateContent);
+});

locales/en.json

@@ -74,6 +74,7 @@
     "thanks": "None of this would have been possible without <a href=\"https://twitter.com/_Ninji/status/1244818665851289602?s=20\">Ninji's work</a> figuring out just how Timmy and Tommy value their turnips.",
     "support": "Support, comments and contributions are available through <a href=\"https://github.com/mikebryant/ac-nh-turnip-prices/issues\">Github</a>",
     "contributors-text": "Oh! And let's not forget to thank those who have contributed so far!",
-    "contributors": "Contributors"
+    "contributors": "Contributors",
+    "language": "Language"
   }
 }

locales/zh-CN.json

@@ -74,6 +74,7 @@
     "thanks": "如果不是<a href=\"https://twitter.com/_Ninji/status/1244818665851289602?s=20\">Ninji</a>发现豆狸和粒狸如何给大头菜定价的，这一切将不可能实现。",
     "support": "可以在<a href=\"https://github.com/mikebryant/ac-nh-turnip-prices/issues\">Github</a>获得支持，或讨论和贡献",
     "contributors-text": "哦！别忘记感谢那些至今为止做出过贡献的人。",
-    "contributors": "贡献者"
+    "contributors": "贡献者",
+    "language": "语言"
   }
 }

locales/zh-TW.json

@@ -74,6 +74,7 @@
     "thanks": "如果沒有<a href=\"https://twitter.com/_Ninji/status/1244818665851289602?s=20\">Ninji 的幫忙</a>來弄清楚豆狸和粒狸如何對他們的大頭菜的估價，這一切都是不可能實現的。",
     "support": "可透過 <a href=\"https://github.com/mikebryant/ac-nh-turnip-prices/issues\">Github</a>獲得支援、討論及貢獻",
     "contributors-text": "哦！讓我們不要忘記感謝那些迄今為止作出貢獻的人！",
-    "contributors": "貢獻者"
+    "contributors": "貢獻者",
+    "language": "語言"
   }
 }