From 2c845e74c77f43a2863c6fd1e141d160795c3b85 Mon Sep 17 00:00:00 2001
From: NhanPT <github@help14.com>
Date: Sun, 20 Nov 2022 14:41:46 +0700
Subject: [PATCH] add language selector

---
 assets/css/theme.css           |  5 +++++
 assets/js/mountain.js          | 14 +++++++++-----
 assets/languages/en.json       |  8 ++++++++
 assets/languages/vi.json       |  4 ++++
 templates/modals/all.html      |  1 +
 templates/modals/language.html | 20 ++++++++++++++++++++
 templates/modals/premium.html  |  2 +-
 templates/pages/index.html     |  6 ++++--
 templates/parts/footer.html    |  1 +
 templates/parts/header.html    | 29 +++++++++++++++++++++++++++++
 10 files changed, 82 insertions(+), 8 deletions(-)
 create mode 100644 templates/modals/language.html

diff --git a/assets/css/theme.css b/assets/css/theme.css
index 0f9f7af..7ccd59b 100644
--- 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;
 }
\ No newline at end of file
diff --git a/assets/js/mountain.js b/assets/js/mountain.js
index bb7962c..d7c8fff 100644
--- 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';
+    }
 });
\ No newline at end of file
diff --git a/assets/languages/en.json b/assets/languages/en.json
index aa194ac..809910e 100644
--- 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
index 2a5b328..d23cc0b 100644
--- 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
index d5d859e..3d9445f 100644
--- 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
new file mode 100644
index 0000000..e1dd117
--- /dev/null
+++ 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}}
\ No newline at end of file
diff --git a/templates/modals/premium.html b/templates/modals/premium.html
index 1fd5a80..d4817ec 100644
--- 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
index 47ef5b3..06dd510 100644
--- 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
index 9c846ba..e99fe21 100644
--- 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}}
\ No newline at end of file
diff --git a/templates/parts/header.html b/templates/parts/header.html
index 102338e..8a86729 100644
--- 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"