Add language switch (#556)

* Add language switch * Do not break the app when DisplayNames is not available in the browser
JustArchiNET · Jul 29, 2024 · d4a7450 · d4a7450
1 parent f411f8f
commit d4a7450
Showing 1 changed file with 35 additions and 2 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,11 +1,18 @@
 <template>
     <div id="app">
+        <select class="language-switch" v-model="$i18n.locale">
+            <option v-for="locale in displayLocales" :key="`locale-${locale.value}`" :value="locale.value">
+                {{ locale.name }}
+            </option>
+        </select>
+
         <div class="head">
             <a href="#" class="logo">
                 <img src="./assets/logo.png" alt="asf logo">
             </a>
             <h1 class="text-center" v-html="$t('app.name')"></h1>
         </div>
+
         <div class="menu">
             <ul>
                 <li><router-link :to="{ name: 'home' }" active-class="active" v-html="$t('link.home')" exact></router-link></li>
@@ -21,8 +28,27 @@
 <script>
     export default {
         name: 'app',
-        data() {
-            return {}
+        computed: {
+            availableLocales() {
+                return this.$i18n.availableLocales.map((locale) => {
+                    return {
+                        value: locale,
+                        code: locale === 'strings' ? 'en-US' : locale
+                    }
+                }).sort((lhs, rhs) => {
+                    return lhs.code.localeCompare(rhs.code)
+                })
+            },
+            displayLocales() {
+                return this.availableLocales.map((locale) => {
+                    if ('Intl' in window && 'DisplayNames' in Intl) {
+                        const displayNamesTranslator = new Intl.DisplayNames([locale.code], { type: 'language' });
+                        return { value: locale.value, name: displayNamesTranslator.of(locale.code) }
+                    }
+
+                    return { value: locale.value, name: locale.code }
+                })
+            }
         }
     }
 </script>
@@ -84,4 +110,11 @@
     .logo {
         margin: 0 auto;
     }
+
+    .language-switch {
+        position: absolute;
+        top: 8px;
+        left: 8px;
+        width: 220px;
+    }
 </style>