diff --git a/css/styles.css b/css/styles.css index 2946cae..f856df9 100644 --- a/css/styles.css +++ b/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; diff --git a/index.html b/index.html index ac1931a..c64963f 100644 --- a/index.html +++ b/index.html @@ -297,6 +297,9 @@

:

+
+

: +
Some text some message...
diff --git a/js/translations.js b/js/translations.js index 66479bd..c8c4b49 100644 --- a/js/translations.js +++ b/js/translations.js @@ -1,25 +1,48 @@ function updateContent() { update(); - $("body").localize(); + $('body').localize(); } - +const defaultLanguage = 'en'; i18next - .use(i18nextXHRBackend) - .use(i18nextBrowserLanguageDetector) - .init({ - fallbackLng: 'en', - debug: true, - backend: { - loadPath: 'locales/{{lng}}.json', - }, - }, function(err, t) { - jqueryI18next.init(i18next, $); - i18next.on('languageChanged', () => { - updateContent(); - }); - - // init set content - $(document).ready(initialize); - $(document).on("input", updateContent); - $('input[type = radio]').on("change", updateContent); +.use(i18nextXHRBackend) +.use(i18nextBrowserLanguageDetector) +.init({ + fallbackLng: defaultLanguage, + debug: true, + backend: { + loadPath: 'locales/{{lng}}.json', + }, +}, (err, t) => { + const languages = [ + ['de', 'Deutsch'], + ['en', 'English'], + ['it', 'Italiano'], + ['ja', '日本語'], + ['zh-CN', '简体中文'], + ['zh-TW', '繁體中文'] + ], + languageSelector = $('#language'); + languages.map(([code, name]) => { + languageSelector.append(``); }); + 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); +}); diff --git a/locales/en.json b/locales/en.json index 17eaccc..7be8c55 100644 --- a/locales/en.json +++ b/locales/en.json @@ -74,6 +74,7 @@ "thanks": "None of this would have been possible without Ninji's work figuring out just how Timmy and Tommy value their turnips.", "support": "Support, comments and contributions are available through Github", "contributors-text": "Oh! And let's not forget to thank those who have contributed so far!", - "contributors": "Contributors" + "contributors": "Contributors", + "language": "Language" } } diff --git a/locales/zh-CN.json b/locales/zh-CN.json index b2c8e31..35a5a19 100644 --- a/locales/zh-CN.json +++ b/locales/zh-CN.json @@ -74,6 +74,7 @@ "thanks": "如果不是Ninji发现豆狸和粒狸如何给大头菜定价的,这一切将不可能实现。", "support": "可以在Github获得支持,或讨论和贡献", "contributors-text": "哦!别忘记感谢那些至今为止做出过贡献的人。", - "contributors": "贡献者" + "contributors": "贡献者", + "language": "语言" } } diff --git a/locales/zh-TW.json b/locales/zh-TW.json index 4f8f49e..ad274e5 100644 --- a/locales/zh-TW.json +++ b/locales/zh-TW.json @@ -74,6 +74,7 @@ "thanks": "如果沒有Ninji 的幫忙來弄清楚豆狸和粒狸如何對他們的大頭菜的估價,這一切都是不可能實現的。", "support": "可透過 Github獲得支援、討論及貢獻", "contributors-text": "哦!讓我們不要忘記感謝那些迄今為止作出貢獻的人!", - "contributors": "貢獻者" + "contributors": "貢獻者", + "language": "語言" } }