add language selector

help-14 · Nov 20, 2022 · 2c845e7 · 2c845e7
1 parent a4999fb
commit 2c845e7
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 8 deletions.
diff --git a/assets/css/theme.css b/assets/css/theme.css
@@ -68,4 +68,9 @@
 
 .dropdown-item.active {
     background-color: var(--bs-indigo);
+}
+
+body {
+    opacity: 0;
+    transition: opacity 0.2s;
 }
diff --git a/assets/js/mountain.js b/assets/js/mountain.js
@@ -182,7 +182,7 @@ function goto(path) {
                 })
             }
             if (breadcrumbs.length > 0)
-                breadcrumbs[0].name = `${$t('files.icons.home')} ${breadcrumbs[0].name}`
+                breadcrumbs[0].name = "<i class='fa fa-solid fa-home'></i>"
             this.breadcrumbs = breadcrumbs
         })
         .finally(() => {
@@ -449,8 +449,12 @@ window.onhashchange = () => {
 // AlpineJS i18n
 document.addEventListener('alpine-i18n:ready', async function () {
     const en = await get('/assets/languages/en.json')
-    const choosen = await get('/assets/languages/vi.json')
-
-    window.AlpineI18n.create('en', { ...en, ...choosen });
-    window.AlpineI18n.fallbackLocale = 'en';
+    let selected = document.querySelector('#language')?.value
+    if (!selected || selected.length !== 2) {
+        window.AlpineI18n.create('en', en);
+    } else {
+        const choosen = await get(`/assets/languages/${selected}.json`)
+        window.AlpineI18n.create(selected, { ...en, ...choosen });
+        window.AlpineI18n.fallbackLocale = 'en';
+    }
 });
diff --git a/assets/languages/en.json b/assets/languages/en.json
@@ -1,6 +1,14 @@
 {
     "en": {
+        "language": {
+            "en": "English",
+            "vi": "Tiếng Việt"
+        },
         "header": {
+            "setting": {
+                "title": "Setting",
+                "language": "Language"
+            },
             "sort": {
                 "title": "Sort",
                 "name": "Name",

diff --git a/assets/languages/vi.json b/assets/languages/vi.json
@@ -1,6 +1,10 @@
 {
     "vi": {
         "header": {
+            "setting": {
+                "title": "Cài đặt",
+                "language": "Ngôn ngữ"
+            },
             "sort": {
                 "title": "Sắp xếp",
                 "name": "Tên",

diff --git a/templates/modals/all.html b/templates/modals/all.html
@@ -1,4 +1,5 @@
 {{define "modals"}}
+{{template "languageModal" .}}
 {{template "renameModal" .}}
 {{template "deleteModal" .}}
 {{template "destinationModal" .}}

diff --git a/templates/modals/language.html b/templates/modals/language.html
@@ -0,0 +1,20 @@
+{{define "languageModal"}}
+<div class="modal de" id="languageModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" x-text="$t('header.setting.language')"></h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div class="container">
+                    <button @click="config.language='en';window.location.reload();" x-text="`🇬🇧 ${$t('language.en')}`"
+                        class="btn btn-light"></button>
+                    <button @click="config.language='vi';window.location.reload();" x-text="`🇻🇳 ${$t('language.vi')}`"
+                        class="btn btn-light"></button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{{end}}
diff --git a/templates/modals/premium.html b/templates/modals/premium.html
@@ -1,5 +1,5 @@
 {{define "premiumModal"}}
-<div class="modal de" id="newFolderModal" tabindex="-1">
+<div class="modal de" id="premiumModal" tabindex="-1">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">

diff --git a/templates/pages/index.html b/templates/pages/index.html
@@ -42,8 +42,10 @@
         navigation: $persist(true),
         preview: $persist(false),
         ext: $persist(true)
-    }
-}, ...startInstance()}" x-init="goto(getStartUrl())" {{template "kbshortcut" .}}>
+    }, 
+    language: $persist('language')
+}, ...startInstance()}" x-init="goto(getStartUrl())" {{template "kbshortcut" .}}
+    onload="document.body.style.opacity='1'">
     <div class="container-fluid ps-0 pe-0">
         {{template "header" .}}
 

diff --git a/templates/parts/footer.html b/templates/parts/footer.html
@@ -1,5 +1,6 @@
 {{define "footer"}}
 <footer class="footer fixed-bottom bg-light">
     <input id="defaultPath" type="text" value="{{ .defaultPath }}" x-show="false">
+    <input id="language" type="text" x-bind:value="config.language" x-show="false">
 </footer>
 {{end}}
diff --git a/templates/parts/header.html b/templates/parts/header.html
@@ -9,6 +9,26 @@
             </div>
             <div class="col">
                 <div class="d-flex align-items-center">
+
+                    <!-- Setting -->
+
+                    <div class="dropdown ms-2 me-2">
+                        <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown"
+                            aria-expanded="false"
+                            x-html='`<i class="fa fa-solid fa-gear ms-1 me-1"></i> ${$t("header.setting.title")}`'>
+                        </button>
+                        <ul class="dropdown-menu">
+                            <li>
+                                <button class="dropdown-item" type="button" data-bs-toggle="modal"
+                                    data-bs-target="#languageModal"
+                                    x-html='`<i class="fa fa-solid fa-language ms-1 me-1"></i> ${$t("header.setting.language")}`'>
+                                </button>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <!-- Sort  -->
+
                     <div class="dropdown ms-2 me-2">
                         <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown"
                             aria-expanded="false"
@@ -57,6 +77,9 @@
                             </li>
                         </ul>
                     </div>
+
+                    <!-- View -->
+
                     <div class="dropdown ms-2 me-2">
                         <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown"
                             aria-expanded="false"
@@ -101,6 +124,9 @@
                             </li>
                         </ul>
                     </div>
+
+                    <!-- Select -->
+
                     <div class="dropdown ms-2 me-2">
                         <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown"
                             aria-expanded="false"
@@ -124,6 +150,9 @@
                             </li>
                         </ul>
                     </div>
+
+                    <!-- About -->
+
                     <div class="dropdown ms-2 me-2">
                         <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown"
                             aria-expanded="false"