diff --git a/web-app/django/VIM/apps/instruments/views/instrument_list.py b/web-app/django/VIM/apps/instruments/views/instrument_list.py index b3012a90..5be06879 100644 --- a/web-app/django/VIM/apps/instruments/views/instrument_list.py +++ b/web-app/django/VIM/apps/instruments/views/instrument_list.py @@ -105,10 +105,21 @@ def get_active_language_en_label(self) -> str: Returns: str: The English label of the active language """ - language_en = self.request.GET.get("language") - if language_en: - return language_en - return self.request.session.get("active_language_en", settings.DEFAULT_LANGUAGE) + language_param = self.request.GET.get("language") or self.request.session.get( + "active_language_en" + ) + + if language_param: + # Check if the language is an English label + try: + lang_obj = Language.objects.get(en_label__iexact=language_param) + return lang_obj.en_label + + except Language.DoesNotExist: + pass + + # Return the defult if nothing matches + return settings.DEFAULT_LANGUAGE def get_active_language(self) -> Language: """ diff --git a/web-app/django/VIM/templates/main/index.html b/web-app/django/VIM/templates/main/index.html index 7299dea0..a67f4a17 100644 --- a/web-app/django/VIM/templates/main/index.html +++ b/web-app/django/VIM/templates/main/index.html @@ -50,7 +50,8 @@

- + @@ -80,7 +81,8 @@


Explore, share, connect musical instruments in every language.

-
+ diff --git a/web-app/frontend/src/GoogleTranslate.ts b/web-app/frontend/src/GoogleTranslate.ts index a9de2bfe..d8c84b4a 100644 --- a/web-app/frontend/src/GoogleTranslate.ts +++ b/web-app/frontend/src/GoogleTranslate.ts @@ -58,6 +58,7 @@ function googleTranslateElementInit() { 'google_translate_element', ); customizeGoogleTranslate(); + attachGTLanguageListener(); } catch (error) { console.error('Google Translate initialization failed:', error); setTimeout(googleTranslateElementInit, 200); @@ -94,6 +95,29 @@ function customizeGoogleTranslate() { watchGTDefaultText(googleSelect); } +function attachGTLanguageListener() { + const googleSelect = + document.querySelector('.goog-te-combo'); + + if (!googleSelect) { + setTimeout(attachGTLanguageListener, 100); + return; + } + + // Wait to GT set its current value (from another tab) + setTimeout(() => { + if (googleSelect.value) { + updateLanguageButtons(googleSelect.value); + } + }, 500); + + // Update when user changes language + googleSelect.addEventListener('change', () => { + if (!googleSelect.value) return; + updateLanguageButtons(googleSelect.value); + }); +} + // Watch for the default text of the Google Translate widget to be "Select Language" // and set it to "English" function watchGTDefaultText(googleSelect: HTMLSelectElement) { @@ -148,6 +172,42 @@ function getGTLanguage(googleSelect: HTMLSelectElement) { return readCookie('googtrans'); } +function updateLanguageButtons(langCode: string) { + // Skip French languages + if (langCode.toLowerCase().includes('fr')) return; + + let displayName = langCode; + + // Convert code → English display name + if (typeof Intl?.DisplayNames === 'function') { + const dn = new Intl.DisplayNames(['en'], { type: 'language' }); + displayName = dn.of(langCode) ?? langCode; + } + + document + .querySelectorAll('a.dynamic-language-link') + .forEach((link) => { + try { + const url = new URL(link.href, window.location.origin); + // Put DISPLAY NAME in URL + url.searchParams.set('language', displayName); + link.href = url.pathname + url.search + url.hash; + } catch {} + + let btn = link.querySelector('.en-site-btn'); + + if (btn) { + // Remove cookie Listeners + const newBtn = btn.cloneNode(true) as HTMLButtonElement; + btn.replaceWith(newBtn); + btn = newBtn; + } + if (!btn) return; + + btn.textContent = `Visit ${displayName} Site`; + }); +} + // Export the initialization function so it's globally accessible for backwards compatibility window.googleTranslateElementInit = googleTranslateElementInit;