Can switch languahge

CodiumTeam · Nov 28, 2024 · 96a4731 · 96a4731
1 parent a693d74
commit 96a4731
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 21 deletions.
diff --git a/src/js/404.js b/src/js/404.js
@@ -1,8 +1,9 @@
-import { listenDropdown } from './common/dropdown';
+import { langsSwitcher, listenDropdown } from './common/dropdown';
 
 import '../sass/404.scss';
 
 listenDropdown();
+langsSwitcher();
 
 document.querySelectorAll('.icon-test').forEach((item) => {
   const timeInMS = Math.floor(Math.random() * 6);

diff --git a/src/js/bootcamp.js b/src/js/bootcamp.js
@@ -1,6 +1,7 @@
 import './common/contact-form-with-message';
-import { listenDropdown } from './common/dropdown';
+import { langsSwitcher, listenDropdown } from './common/dropdown';
 
 import '../sass/bootcamp.scss';
 
 listenDropdown();
+langsSwitcher();
diff --git a/src/js/common/dropdown.js b/src/js/common/dropdown.js
@@ -50,3 +50,27 @@ export function listenDropdown() {
     return window.screen.availWidth < MIN_SIZE_TO_SHOW_MOBILE_MENU_ICON;
   }
 }
+
+export function langsSwitcher() {
+  const langOptions = document.querySelectorAll('.lang-option');
+  const availableLanguages = [];
+  Array.from(langOptions).forEach((lang) => {
+    const locale = lang.getAttribute('data-locale');
+    availableLanguages.push(locale);
+    lang.addEventListener('click', (e) => {
+      e.preventDefault();
+      if (locale) {
+        const currentUrl = new URL(window.location.href);
+        if (!currentUrl.pathname.includes(`/${locale}/`)) {
+          const urls = currentUrl.pathname
+            .split('/')
+            .filter(Boolean)
+            .filter((x) => !availableLanguages.includes(x));
+          const url = urls[0] || '';
+          currentUrl.pathname = `/${locale}/${url}`.replace('/es/', '');
+        }
+        window.location.href = currentUrl.href;
+      }
+    });
+  });
+}
diff --git a/src/js/course.js b/src/js/course.js
@@ -5,7 +5,7 @@ import Glide, {
 import { isInView } from 'isinview';
 import * as events from './common/trackEvents';
 import * as formValidation from './common/fromValidation';
-import { listenDropdown } from './common/dropdown';
+import { langsSwitcher, listenDropdown } from './common/dropdown';
 import '@glidejs/glide/dist/css/glide.core.min.css';
 import '@glidejs/glide/dist/css/glide.theme.min.css';
 import { scrollToElement } from './common/scrollToElement';
@@ -14,6 +14,7 @@ import { sendEmail } from './email-sender';
 import { configureFormWithRecaptcha } from './common/recaptcha-loader';
 
 listenDropdown();
+langsSwitcher();
 events.initTrackEvents();
 mountOpinionCarousel();
 mountClientsCarousel();

diff --git a/src/js/development.js b/src/js/development.js
@@ -3,13 +3,14 @@ import Glide, {
   Breakpoints,
 } from '@glidejs/glide/dist/glide.modular.esm';
 import './common/contact-form-with-message';
-import { listenDropdown } from './common/dropdown';
+import { langsSwitcher, listenDropdown } from './common/dropdown';
 
 import '@glidejs/glide/dist/css/glide.core.min.css';
 import '@glidejs/glide/dist/css/glide.theme.min.css';
 import '../sass/development.scss';
 
 listenDropdown();
+langsSwitcher();
 mountClientsCarousel();
 
 function mountClientsCarousel() {

diff --git a/src/js/resources.js b/src/js/resources.js
@@ -1,5 +1,6 @@
-import { listenDropdown } from './common/dropdown';
+import { langsSwitcher, listenDropdown } from './common/dropdown';
 
 import '../sass/resources.scss';
 
 listenDropdown();
+langsSwitcher();
diff --git a/src/js/site.js b/src/js/site.js
@@ -1,12 +1,13 @@
 import * as events from './common/trackEvents';
-import { listenDropdown } from './common/dropdown';
+import { langsSwitcher, listenDropdown } from './common/dropdown';
 import './common/contact-form-with-message';
 
 import '../sass/site.scss';
 import { scrollToElement } from './common/scrollToElement';
 import { isInView } from 'isinview';
 
 listenDropdown();
+langsSwitcher();
 events.initTrackEvents();
 
 document

diff --git a/src/js/style-guide.js b/src/js/style-guide.js
@@ -1,4 +1,4 @@
-import { listenDropdown } from './common/dropdown';
+import { langsSwitcher, listenDropdown } from './common/dropdown';
 import Glide, {
   Controls,
   Breakpoints,
@@ -9,6 +9,7 @@ import '@glidejs/glide/dist/css/glide.theme.min.css';
 import '../sass/style-guide.scss';
 
 listenDropdown();
+langsSwitcher();
 mountOpinionCarousel();
 mountClientsCarousel();
 

diff --git a/src/partials/header/navbar.ejs b/src/partials/header/navbar.ejs
@@ -24,9 +24,10 @@
 
         <li class="navbar__item dropdown lang-switcher">
             <span class="lang-option">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                     stroke="currentColor" class="size-6">
                     <path stroke-linecap="round" stroke-linejoin="round"
-                         d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802"/>
+                          d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802"/>
                 </svg>
                 <% if (locale === 'es') { %>
                     <span>Español</span>
@@ -36,33 +37,25 @@
             </span>
             <ul class="options">
                 <li>
-                    <a class="lang-option">
+                    <a class="lang-option" data-locale="en">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                              width="10"
                              stroke="currentColor" class="size-6">
                             <path stroke-linecap="round" stroke-linejoin="round"
                                   d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802"/>
                         </svg>
-                         <% if (locale === 'es') { %>
-                            <span>English</span>
-                        <% } else if (locale === 'en') { %>
-                            <span>Español</span>
-                        <% } %>
+                        <span>English</span>
                     </a>
                 </li>
                 <li>
-                    <a class="lang-option">
+                    <a class="lang-option" data-locale="es">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                              width="10"
                              stroke="currentColor" class="size-6">
                             <path stroke-linecap="round" stroke-linejoin="round"
                                   d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802"/>
                         </svg>
-                         <% if (locale === 'es') { %>
-                            <span>Español</span>
-                        <% } else if (locale === 'en') { %>
-                            <span>English</span>
-                        <% } %>
+                        <span>Español</span>
                     </a>
                 </li>
             </ul>