From 11c7355749b6e0180841dd02604a06dd924dd217 Mon Sep 17 00:00:00 2001
From: rinpatch <rinpatch@sdf.org>
Date: Wed, 20 Jan 2021 23:49:34 +0300
Subject: [PATCH] Use native language names in the language picker
This seems more intuitive to me and is what I've seen in most other
language pickers.
---
CHANGELOG.md | 1 +
.../interface_language_switcher.vue | 28 +++++++++----------
src/services/locale/locale.service.js | 12 ++++++++
3 files changed, 26 insertions(+), 15 deletions(-)
create mode 100644 src/services/locale/locale.service.js
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 40c1d982..2d751bf3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
### Changed
- Don't filter own posts when they hit your wordfilter
+- Language picker now uses native language names
## [2.2.2] - 2020-12-22
### Added
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 524ec5e9..dc3bd408 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -12,11 +12,11 @@
v-model="language"
>
<option
- v-for="(langCode, i) in languageCodes"
- :key="langCode"
- :value="langCode"
+ v-for="lang in languages"
+ :key="lang.code"
+ :value="lang.code"
>
- {{ languageNames[i] }}
+ {{ lang.name }}
</option>
</select>
<FAIcon
@@ -29,6 +29,7 @@
<script>
import languagesObject from '../../i18n/messages'
+import localeService from '../../services/locale/locale.service.js'
import ISO6391 from 'iso-639-1'
import _ from 'lodash'
import { library } from '@fortawesome/fontawesome-svg-core'
@@ -42,12 +43,8 @@ library.add(
export default {
computed: {
- languageCodes () {
- return languagesObject.languages
- },
-
- languageNames () {
- return _.map(this.languageCodes, this.getLanguageName)
+ languages () {
+ return _.map(languagesObject.languages, (code) => ({ code: code, name: this.getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))
},
language: {
@@ -61,12 +58,13 @@ export default {
methods: {
getLanguageName (code) {
const specialLanguageNames = {
- 'ja': 'Japanese (日本語)',
- 'ja_easy': 'Japanese (やさしいにほんご)',
- 'zh': 'Simplified Chinese (简体中文)',
- 'zh_Hant': 'Traditional Chinese (繁體中文)'
+ 'ja_easy': 'やさしいにほんご',
+ 'zh': '简体中文',
+ 'zh_Hant': '繁體中文'
}
- return specialLanguageNames[code] || ISO6391.getName(code)
+ const languageName = specialLanguageNames[code] || ISO6391.getNativeName(code)
+ const browserLocale = localeService.internalToBrowserLocale(code)
+ return languageName.charAt(0).toLocaleUpperCase(browserLocale) + languageName.slice(1)
}
}
}
diff --git a/src/services/locale/locale.service.js b/src/services/locale/locale.service.js
new file mode 100644
index 00000000..5be99d81
--- /dev/null
+++ b/src/services/locale/locale.service.js
@@ -0,0 +1,12 @@
+const specialLanguageCodes = {
+ 'ja_easy': 'ja',
+ 'zh_Hant': 'zh-HANT'
+}
+
+const internalToBrowserLocale = code => specialLanguageCodes[code] || code
+
+const localeService = {
+ internalToBrowserLocale
+}
+
+export default localeService