Restructured locale.js to be included into the editor's js bundle

Until now client-side translations were only possible in the context of the intro/history page, because the locale-detection logic relied on the language selector as a source of available languages. The editor of course has no such selector. With this commit, I copied the list of available languages from the i18n-initialization (server-side) to support language detection in the editor too.

Signed-off-by: Erik Michelson <github@erik.michelson.eu>
This commit is contained in:
Erik Michelson 2020-08-13 23:41:44 +02:00
parent ce469b1e2d
commit da35e73346
No known key found for this signature in database
GPG key ID: DB99ADDDC5C0AF82
2 changed files with 34 additions and 31 deletions

View file

@ -1,6 +1,6 @@
/* eslint-env browser, jquery */ /* eslint-env browser, jquery */
/* eslint no-console: ["error", { allow: ["warn", "error"] }] */ /* eslint no-console: ["error", { allow: ["warn", "error"] }] */
/* global moment, serverurl, Cookies */ /* global moment, serverurl */
import Prism from 'prismjs' import Prism from 'prismjs'
import hljs from 'highlight.js' import hljs from 'highlight.js'
@ -27,15 +27,11 @@ require('prismjs/components/prism-makefile')
require('prismjs/components/prism-gherkin') require('prismjs/components/prism-gherkin')
require('./lib/common/login') require('./lib/common/login')
require('./locale')
require('../vendor/md-toc') require('../vendor/md-toc')
var Viz = require('viz.js') var Viz = require('viz.js')
const ui = getUIElements() const ui = getUIElements()
if (Cookies.get('locale')) {
const lang = Cookies.get('locale')
moment.locale(lang)
}
// auto update last change // auto update last change
window.createtime = null window.createtime = null
window.lastchangetime = null window.lastchangetime = null

View file

@ -1,33 +1,40 @@
/* eslint-env browser, jquery */ /* eslint-env browser, jquery */
/* global Cookies */ /* global Cookies */
var lang = 'en' const supported = ['en', 'zh-CN', 'zh-TW', 'fr', 'de', 'ja', 'es', 'ca', 'el', 'pt', 'it', 'tr', 'ru', 'nl', 'hr', 'pl', 'uk', 'hi', 'sv', 'eo', 'da', 'ko', 'id', 'sr', 'vi', 'ar', 'cs', 'sk']
var userLang = navigator.language || navigator.userLanguage
var userLangCode = userLang.split('-')[0] function detectLang () {
var locale = $('.ui-locale') if (Cookies.get('locale')) {
var supportLangs = [] let lang = Cookies.get('locale')
$('.ui-locale option').each(function () { if (lang === 'zh') {
supportLangs.push($(this).val()) lang = 'zh-TW'
}) }
if (Cookies.get('locale')) { return lang
lang = Cookies.get('locale')
if (lang === 'zh') {
lang = 'zh-TW'
} }
} else if (supportLangs.indexOf(userLang) !== -1) { const userLang = navigator.language || navigator.userLanguage
lang = supportLangs[supportLangs.indexOf(userLang)] const userLangCode = userLang.split('-')[0]
} else if (supportLangs.indexOf(userLangCode) !== -1) { if (supported.includes(userLangCode)) {
lang = supportLangs[supportLangs.indexOf(userLangCode)] return userLangCode
} else if (supported.includes(userLang)) {
return userLang
}
return 'en'
} }
locale.val(lang) const lang = detectLang()
window.moment.locale(lang) const localeSelector = $('.ui-locale')
$('select.ui-locale option[value="' + lang + '"]').attr('selected', 'selected')
locale.change(function () { // the following condition is needed as the selector is only available in the intro/history page
Cookies.set('locale', $(this).val(), { if (localeSelector.length > 0) {
expires: 365, localeSelector.val(lang)
sameSite: 'strict' $('select.ui-locale option[value="' + lang + '"]').attr('selected', 'selected')
localeSelector.change(function () {
Cookies.set('locale', $(this).val(), {
expires: 365,
sameSite: 'strict'
})
window.location.reload()
}) })
window.location.reload() }
})
window.moment.locale(lang)