✨ Closed #148, add multiple lananguages support.

assets/css/_common/outline/footer/index.scss

@@ -29,7 +29,143 @@
     font-size: $font-size-smallest;
   }
 
-  .google-translate {
+  .i18n-translate {
+    display: flex;
+    justify-content: center;
+
+    .fa {      
+      font-size: $font-size-largest;
+      margin: auto 0;
+      line-height: normal;
+    }
+
+    .lang-select, .lang-options {
+
+      .flag-icon {          
+        background-size: cover;
+        width: 30px;
+        height: 20px;   
+        display: none;     
+      }
+
+      .flag-icon-zh-cn  {
+        background-image: url("/imgs/flags/zh-CN.png");
+      }
+  
+      .flag-icon-en-us {
+        background-image: url("/imgs/flags/en-US.png");
+      }
+  
+      .flag-icon-fr-fr {
+        background-image: url("/imgs/flags/fr-FR.png");
+      }
+    }
+
+    .lang-select {
+
+      .flag-icon {      
+        display: block;     
+      }
+    }
+
+    .lang-select {
+      margin-left: 16px;
+      position: relative;
+      display: inline-block;
+      line-height: 1.25;
+
+      .fa {
+        font-size: $font-size-large;
+      }
+
+      .selected-option {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        padding: 5px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        justify-content: center;
+        width: 140px;
+
+        /* &:hover {
+          + .lang-options {
+            display: block;
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }   */
+        
+        .selected-language {
+          margin: 0 10px;
+        }
+      }
+
+      .lang-options {
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        border: 1px solid var(--border-color);
+        border-top: none;
+        border-radius: 0 0 4px 4px;
+        background-color: #ffffff;
+        opacity: 0;
+        transform: translateY(-10px);
+        transition: opacity 0.3s ease, transform 0.3s ease;
+        z-index: 1;
+
+        &:hover {
+          display: block;
+          opacity: 1;
+          transform: translateY(0);
+        }
+
+        .lang-option {
+          padding: 5px;
+          cursor: pointer;
+          display: flex;
+          justify-content: left;
+          padding-left: 14px;
+          
+          &:hover {
+            background-color: var(--selection-bg);
+          }
+
+          .lang-name {
+            margin: 0 16px 0 8px;
+          }
+        }
+      }
+    }
+  }
+
+   /*  select {
+      margin-left: 10px;
+
+      option {
+        font-size: $font-size-small;
+        background-repeat: no-repeat;
+        background-position: right center;
+        padding-right: 30px; 
+        background-size: cover;
+      }
+    }
+
+    .flag-icon-zh-cn  {
+      background-image: url("../imgs/flags/zh-CN.png");
+    }
+
+    .flag-icon-en-us {
+      background-image: url("../imgs/flags/en-US.png");
+    }
+
+    .flag-icon-fr-fr {
+      background-image: url("../imgs/flags/fr-FR.png");
+    }
+  } */
+  /* .google-translate {
     display: flex;
     justify-content: center;
     .fa {
@@ -37,7 +173,7 @@
       margin: auto 0;
       line-height: normal;
     }
-  }
+  } */
 
   @if $footer_vendors_enable {
     .vendors-list {

assets/js/next-boot.js

@@ -60,6 +60,7 @@ NexT.boot.registerEvents = function() {
 NexT.boot.refresh = function() {
 
   NexT.utils.fmtSiteInfo();
+  NexT.utils.registerLangSelect();
 
   if (!NexT.CONFIG.page.isPage) return;
  

assets/js/utils.js

@@ -499,22 +499,59 @@ NexT.utils = {
       const isSubPath = !NexT.CONFIG.root.startsWith(target.pathname) && location.pathname.startsWith(target.pathname);
       target.classList.toggle('menu-item-active', target.hostname === location.hostname && (isSamePath || isSubPath));
     });
-  },
+  },*/
 	
   registerLangSelect: function() {
-    const selects = document.querySelectorAll('.lang-select');
-    selects.forEach(sel => {
-      sel.value = NexT.CONFIG.page.lang;
-      sel.addEventListener('change', () => {
-        const target = sel.options[sel.selectedIndex];
-        document.querySelectorAll('.lang-select-label span').forEach(span => {
-          span.innerText = target.text;
-        });
-        // Disable Pjax to force refresh translation of menu item
-        window.location.href = target.dataset.href;
+    let selects = document.getElementById('lang-select');
+    if (!selects) return;
+
+    let selected = selects.querySelector('#lang-selected');
+    let selectedVal = selected.querySelectorAll('span');
+    let flagIcon = selectedVal[0];
+    let langName = selectedVal[1];
+    let selectIcon = selected.querySelector('i');
+   
+
+    let options = selects.querySelectorAll('#lang-options>div');
+    let optionsDom = options[0].parentNode;
+    options.forEach(option => {
+      option.addEventListener('click', () => {
+        let langCode = option.getAttribute('lang-code');
+        flagIcon.className = 'flag-icon flag-icon-'+langCode;
+        langName.innerHTML = option.getAttribute('lang-name');
+        selectIcon.className = 'fa fa-chevron-down';
+        optionsDom.style.opacity = '0';
+        optionsDom.style.transform = 'translateY(-10px)';
+
+        const currentUrl = window.location.href;
+        const newUrl = currentUrl.replace(/(\/[^\/]+)?(\/[^\/]+)?$/, `/${langCode}$1$2`);
+
+        setTimeout(() => {
+          optionsDom.style.display = 'none';
+          window.location.href = newUrl;
+        }, 300);
       });
+    }); 
+
+    selected.addEventListener('mouseenter', function() {
+      selectIcon.className = 'fa fa-chevron-up';
+      optionsDom.style.display = 'block';
+      optionsDom.style.opacity = '1';
+      optionsDom.style.transform = 'translateY(0)';
+      
     });
-  },*/
+
+    optionsDom.addEventListener('mouseleave', function() {
+      selectIcon.className = 'fa fa-chevron-down';
+      optionsDom.style.opacity = '0';
+      optionsDom.style.transform = 'translateY(-10px)';
+      
+      setTimeout(() => {
+        optionsDom.style.display = 'none';
+      }, 300);
+    });
+    
+  },
 
   registerSidebarTOC: function () {
     const toc = document.getElementById('TableOfContents');

layouts/partials/footer.html

@@ -1,10 +1,23 @@
 {{ $ft := .Site.Params.footer }}
-{{ if $ft.translate }}
-<div id="gtranslate" class="google-translate">
+<div class="i18n-translate">
   <i class="fa fa-language"></i>
-  <div id="google_translate_element"></div>
+  <div id="lang-select" class="lang-select">
+    <div id="lang-selected" class="selected-option">
+      <span class="flag-icon flag-icon-{{$.Site.Language.Lang}}"></span>
+      <span class="selected-language">{{ .Site.Language.LanguageName }}</span>
+      <i class="fa fa-chevron-down"></i>
+    </div>
+    <div id="lang-options" class="lang-options">
+      {{ range .Site.Languages }}
+        <div class="lang-option" lang-code="{{ .Lang }}" lang-name="{{ .LanguageName }}">
+          <span class="flag-icon flag-icon-{{ .Lang }}"></span>
+          <span class="lang-name">{{ .LanguageName }}</span>
+        </div>
+      {{ end }}
+    </div>
+  </div>
+
 </div>
-{{ end }}
 <div class="copyright">
   &copy;
   <span itemprop="copyrightYear">

layouts/partials/head/script/global.html

@@ -105,11 +105,6 @@
     {{ $nextjs = $nextjs | append $lawt }}
   {{ end }}
 {{ end }}
-{{ if .Site.Params.footer.translate }}
-{{ $translate := resources.Get "js/3rd/others/translate.js" }}
-{{ $nextjs = $nextjs | append $translate }}
-{{ end }}
-
 
 {{ $nextjs = $nextjs | resources.Concat "js/main.js"}}
 {{ if hugo.IsProduction }}

layouts/partials/init.html

@@ -49,6 +49,7 @@
   "lazyload"    .Site.Params.lazyload
   "motion"      .Site.Params.motion
   "i18n"        (dict 
+    "enable"      .Site.Params.footer.translate
     "placeholder" (T "Search.placeholder")
     "empty"       (T "Search.empty")
     "hits_time"   (T "Search.time")

layouts/partials/widgets.html

@@ -4,11 +4,9 @@
     <i class="fas fa-comments"></i>
   </div>
   {{ end }}  
-  {{ if .Site.Params.footer.translate }}
   <div id="goto-gtranslate" class="button"  title="{{ T "ToolBtns.lang" }}">
     <i class="fas fa-globe"></i>
   </div> 
-  {{ end }}
   <div id="toggle-theme" class="button" title="{{ T "ToolBtns.theme" }}">
     <i class="fas fa-adjust"></i>
   </div>