Aylong (обсуждение | вклад) Нет описания правки |
Aylong (обсуждение | вклад) Нет описания правки |
||
Строка 1: | Строка 1: | ||
// Ассинхронная загрузка страницы. Убирает всякие мерцания, показывая сразу готовую страницу. Костыль? Да. Работает? Ну вроде Clueless | // Ассинхронная загрузка страницы. Убирает всякие мерцания, показывая сразу готовую страницу. Костыль? Да. Работает? Ну вроде Clueless | ||
function loadPage(url) { | |||
var xhr = new XMLHttpRequest(); | |||
xhr.onreadystatechange = function() { | |||
if (xhr.readyState === XMLHttpRequest.DONE) { | |||
if (xhr.status === 200) { | |||
document.body.innerHTML = xhr.responseText; | |||
window.history.pushState({}, '', url); | |||
createThemeToggleButton(); | |||
} | |||
} | |||
}; | |||
xhr.open('GET', url, true); | |||
xhr.send(); | |||
} | |||
document.addEventListener('click', function(event) { | document.addEventListener('click', function(event) { | ||
var link = event.target.closest('a'); | |||
if (link && link.href && link.href.indexOf(window.location.origin) !== -1) { | |||
event.preventDefault(); | |||
loadPage(link.href); | |||
} | |||
}); | }); | ||
// Заставляем вперёд/назад работать. | // Заставляем вперёд/назад работать. | ||
window.addEventListener('popstate', function(event) { | window.addEventListener('popstate', function(event) { | ||
loadPage(window.location.href); | |||
}); | }); | ||
// Кнопочка для переключения темы на светлую и обратно. | // Кнопочка для переключения темы на светлую и обратно. | ||
function createThemeToggleButton() { | |||
var container = document.getElementById("p-personal"); | |||
if (container) { | |||
var checkbox = document.createElement("input"); | |||
checkbox.type = "checkbox"; | |||
checkbox.id = "theme-toggle"; | |||
var label = document.createElement("label"); | |||
label.htmlFor = "theme-toggle"; | |||
label.id = "theme-button"; | |||
container.parentNode.insertBefore(checkbox, container); | |||
container.parentNode.insertBefore(label, container); | |||
} | |||
var isLightTheme = localStorage.getItem("isLightTheme"); | |||
if (isLightTheme === "true") { | |||
document.documentElement.classList.add('light'); | |||
} else { | |||
document.documentElement.classList.remove('light'); | |||
} | |||
$("#theme-toggle").change(function() { | |||
toggleTheme(); | |||
}); | |||
} | } | ||
function toggleTheme() { | function toggleTheme() { | ||
var isLightTheme = document.documentElement.classList.toggle('light'); | |||
localStorage.setItem("isLightTheme", isLightTheme); | |||
} | } | ||
createThemeToggleButton(); |
Версия от 21:05, 4 мая 2024
// Ассинхронная загрузка страницы. Убирает всякие мерцания, показывая сразу готовую страницу. Костыль? Да. Работает? Ну вроде Clueless function loadPage(url) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { document.body.innerHTML = xhr.responseText; window.history.pushState({}, '', url); createThemeToggleButton(); } } }; xhr.open('GET', url, true); xhr.send(); } document.addEventListener('click', function(event) { var link = event.target.closest('a'); if (link && link.href && link.href.indexOf(window.location.origin) !== -1) { event.preventDefault(); loadPage(link.href); } }); // Заставляем вперёд/назад работать. window.addEventListener('popstate', function(event) { loadPage(window.location.href); }); // Кнопочка для переключения темы на светлую и обратно. function createThemeToggleButton() { var container = document.getElementById("p-personal"); if (container) { var checkbox = document.createElement("input"); checkbox.type = "checkbox"; checkbox.id = "theme-toggle"; var label = document.createElement("label"); label.htmlFor = "theme-toggle"; label.id = "theme-button"; container.parentNode.insertBefore(checkbox, container); container.parentNode.insertBefore(label, container); } var isLightTheme = localStorage.getItem("isLightTheme"); if (isLightTheme === "true") { document.documentElement.classList.add('light'); } else { document.documentElement.classList.remove('light'); } $("#theme-toggle").change(function() { toggleTheme(); }); } function toggleTheme() { var isLightTheme = document.documentElement.classList.toggle('light'); localStorage.setItem("isLightTheme", isLightTheme); } createThemeToggleButton();