80 lines
3.5 KiB
JavaScript
80 lines
3.5 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
const supportedLanguages = {
|
|
'en': 'English',
|
|
'ru': 'Русский',
|
|
'es': 'Español'
|
|
};
|
|
|
|
const switcherContainer = document.createElement('div');
|
|
switcherContainer.id = 'language-switcher';
|
|
switcherContainer.style.position = 'fixed';
|
|
switcherContainer.style.bottom = '20px';
|
|
switcherContainer.style.right = '20px';
|
|
switcherContainer.style.zIndex = '1000';
|
|
switcherContainer.style.cursor = 'pointer';
|
|
|
|
const currentLang = window.location.pathname.split('/')[1];
|
|
const currentLangDisplay = supportedLanguages[currentLang] || 'Language'; // Fallback if not on a supported lang path
|
|
|
|
switcherContainer.innerHTML = `
|
|
<div id="language-icon" style="width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background-color: #007bff; text-align: center; line-height: 40px; font-weight: bold;">
|
|
<img src="https://flagcdn.com/w40/${currentLang === 'en' ? 'gb' : currentLang}.png" alt="${currentLang.toUpperCase()}" style="width: 100%; height: 100%; object-fit: cover;">
|
|
</div>
|
|
<div id="language-options-container" class="language-options-container" style="position: absolute; bottom: 50px; right: 0;">
|
|
${Object.keys(supportedLanguages).map(lang => `
|
|
<div class="language-option" data-lang="${lang}" style="width: 40px; height: 40px; border-radius: 50%; overflow: hidden; margin-bottom: 10px; cursor: pointer;">
|
|
<img src="https://flagcdn.com/w40/${lang === 'en' ? 'gb' : lang}.png" alt="${supportedLanguages[lang]}" style="width: 100%; height: 100%; object-fit: cover;">
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(switcherContainer);
|
|
|
|
const languageIcon = document.getElementById('language-icon');
|
|
const languageOptionsContainer = document.getElementById('language-options-container');
|
|
|
|
languageIcon.addEventListener('click', function(event) {
|
|
// Close any other open language switchers first
|
|
document.querySelectorAll('.language-options-container.show').forEach(el => {
|
|
if (el !== languageOptionsContainer) {
|
|
el.classList.remove('show');
|
|
}
|
|
});
|
|
|
|
// Toggle current switcher
|
|
languageOptionsContainer.classList.toggle('show');
|
|
|
|
// Prevent event bubbling and default behavior
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
});
|
|
|
|
document.addEventListener('click', function(event) {
|
|
if (!switcherContainer.contains(event.target)) {
|
|
languageOptionsContainer.classList.remove('show');
|
|
}
|
|
});
|
|
|
|
// Close language switcher when other modals open
|
|
document.addEventListener('modalOpened', function() {
|
|
languageOptionsContainer.classList.remove('show');
|
|
});
|
|
|
|
languageOptionsContainer.querySelectorAll('.language-option').forEach(item => {
|
|
item.addEventListener('click', function() {
|
|
const lang = this.getAttribute('data-lang');
|
|
const currentPathname = window.location.pathname;
|
|
const pathParts = currentPathname.split('/').filter(part => part !== '');
|
|
|
|
// Remove existing language prefix if present
|
|
if (supportedLanguages[pathParts[0]]) {
|
|
pathParts.shift();
|
|
}
|
|
|
|
// Construct new path with selected language
|
|
const newPath = '/' + lang + '/' + pathParts.join('/');
|
|
window.location.href = newPath;
|
|
});
|
|
});
|
|
}); |