Помогите как можно реализовать смену языка кнопки в зависимости от языка функции которая задаёт перевод страницы?
Есть код JS который меняет тему страницы и при нажатии название кнопки в зависимости от темы, как ей задать язык перевода через функцию которая её осуществляет?
Кнопка которая осуществляет смену темы на сайте:
$('.theme-toggle').on('click', function () {
document.body.classList.toggle('light-theme');
if($(this).hasClass('light')) {
$(this).toggleClass('light dark').text('Dark theme');
} else if ($(this).hasClass('dark')) {
$(this).toggleClass('dark light').text('Light theme');
}
});
И сама функция перевода языка страницы:
(function($) {
function Translate() {
this.init = function(attribute, lang) {
this.attribute = attribute;
this.lang = lang;
};
this.process = function() {
let _self = this;
let xrhFile = new XMLHttpRequest();
xrhFile.open("GET", "./src/scripts/translations/"+this.lang+".json", true);
xrhFile.onreadystatechange = function () {
if(xrhFile.readyState === 4) {
if(xrhFile.status === 200 || xrhFile.status == 0) {
let LangObject = JSON.parse(xrhFile.responseText);
let allDom = document.getElementsByTagName("*");
for(let i =0; i < allDom.length; i++){
let elemment = allDom[i];
let key = elemment.getAttribute(_self.attribute);
if(key != null) {
elemment.innerHTML = LangObject[key];
}
}
}
}
};
xrhFile.send();
};
}
function loadNewLang(new_lang) {
let translate = new Translate();
let currentLang = new_lang;
let attributeName = 'data-lang';
translate.init(attributeName, currentLang);
translate.process();
}
loadNewLang('en');
$('.language-switcher').on('click', function(button) {
button.preventDefault();
if($(this).hasClass('ru')) {
$(this).toggleClass('ru en').text('English');
loadNewLang('en');
} else if ($(this).hasClass('en')) {
$(this).toggleClass('en ru').text('Русский');
loadNewLang('ru');
}
});
})(jQuery);
