Merge remote-tracking branch 'origin/develop' into disjointed-popovers

* origin/develop: (25 commits)
  force panel headers to be square on mobile (for now?)
  fix gap between panel heading and timeline menu
  Fix Open Chat button
  fix?
  fix
  Revert "Merge branch 'revert-a88abc7e' into 'develop'"
  Revert "Merge branch 'from/develop/tusooa/lang-opts' into 'develop'"
  Fix registration error
  stick chat scroll to bottom to help with OSK resizing the viewport
  Pass file name of cropped avatar to form data
  Add English translation for filtering end-of-poll notifications
  Add settings for filtering end-of-poll notifications
  Add English translations for poll-end notifications
  Show poll-end notifications
  Fix virtual scrolling when the user has a lot of pinned statuses
  Update dependency @vuelidate/core to v2.0.0-alpha.41
  Make lint happy
  Make lint happy
  Add English translation for language options
  Add email language option to registration form
  ...

1 files changed, 21 insertions, 17 deletions

diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 6d1f83c4..7ad1fe2e 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
     <label for="interface-language-switcher">
-      {{ $t('settings.interfaceLanguage') }}
+      {{ promptText }}
     </label>
     {{ ' ' }}
     <Select
       id="interface-language-switcher"
-      v-model="language"
+      v-model="controlledLanguage"
     >
       <option
         v-for="lang in languages"
@@ -20,39 +20,43 @@
 </template>
 
 <script>
-import languagesObject from '../../i18n/messages'
 import localeService from '../../services/locale/locale.service.js'
-import ISO6391 from 'iso-639-1'
-import _ from 'lodash'
 import Select from '../select/select.vue'
 
 export default {
   components: {
     Select
   },
+  props: {
+    promptText: {
+      type: String,
+      required: true
+    },
+    language: {
+      type: String,
+      required: true
+    },
+    setLanguage: {
+      type: Function,
+      required: true
+    }
+  },
   computed: {
     languages () {
-      return _.map(languagesObject.languages, (code) => ({ code: code, name: this.getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))
+      return localeService.languages
     },
 
-    language: {
-      get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
+    controlledLanguage: {
+      get: function () { return this.language },
       set: function (val) {
-        this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
+        this.setLanguage(val)
       }
     }
   },
 
   methods: {
     getLanguageName (code) {
-      const specialLanguageNames = {
-        'ja_easy': 'やさしいにほんご',
-        'zh': '简体中文',
-        'zh_Hant': '繁體中文'
-      }
-      const languageName = specialLanguageNames[code] || ISO6391.getNativeName(code)
-      const browserLocale = localeService.internalToBrowserLocale(code)
-      return languageName.charAt(0).toLocaleUpperCase(browserLocale) + languageName.slice(1)
+      return localeService.getLanguageName(code)
     }
   }
 }