MediaWiki:Vector.js: различия между версиями
Aylong (обсуждение | вклад) Нет описания правки Метка: отменено |
Aylong (обсуждение | вклад) Нет описания правки Метка: ручная отмена |
||
| Строка 1: | Строка 1: | ||
// Ассинхронная загрузка страницы. Убирает всякие мерцания, показывая сразу готовую страницу. Костыль? Да. Работает? Ну вроде Clueless | |||
function loadPage(url) { | function loadPage(url) { | ||
var xhr = new XMLHttpRequest(); | var xhr = new XMLHttpRequest(); | ||
| Строка 4: | Строка 5: | ||
if (xhr.readyState === XMLHttpRequest.DONE) { | if (xhr.readyState === XMLHttpRequest.DONE) { | ||
if (xhr.status === 200) { | if (xhr.status === 200) { | ||
document. | document.body.innerHTML = xhr.responseText; | ||
window.history.pushState({}, '', url); | window.history.pushState({}, '', url); | ||
updatePageTitle(); | |||
createThemeToggleButton(); | |||
} | } | ||
} | } | ||
| Строка 21: | Строка 25: | ||
}); | }); | ||
// Заставляем вперёд/назад работать. | |||
window.addEventListener('popstate', function(event) { | window.addEventListener('popstate', function(event) { | ||
loadPage(window.location.href); | loadPage(window.location.href); | ||
}); | }); | ||
function | // Обновление названия вкладки | ||
function updatePageTitle() { | |||
var title = document.querySelector('h1').innerText; | |||
document.title = title; | |||
} | } | ||
// Кнопочка для переключения темы на светлую и обратно. | |||
function createThemeToggleButton() { | |||
var container = document.getElementById("p-personal"); | var container = document.getElementById("p-personal"); | ||
if (container) { | if (container) { | ||
| Строка 36: | Строка 43: | ||
checkbox.type = "checkbox"; | checkbox.type = "checkbox"; | ||
checkbox.id = "theme-toggle"; | checkbox.id = "theme-toggle"; | ||
var label = document.createElement("label"); | var label = document.createElement("label"); | ||
label.htmlFor = "theme-toggle"; | label.htmlFor = "theme-toggle"; | ||
label.id = "theme-button"; | label.id = "theme-button"; | ||
container.parentNode.insertBefore(checkbox, container); | container.parentNode.insertBefore(checkbox, container); | ||
container.parentNode.insertBefore(label, container); | container.parentNode.insertBefore(label, container); | ||
| Строка 55: | Строка 62: | ||
toggleTheme(); | toggleTheme(); | ||
}); | }); | ||
}); | } | ||
function toggleTheme() { | |||
var isLightTheme = document.documentElement.classList.toggle('light'); | |||
localStorage.setItem("isLightTheme", isLightTheme); | |||
} | |||
createThemeToggleButton(); | |||
Версия от 21:28, 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);
updatePageTitle();
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 updatePageTitle() {
var title = document.querySelector('h1').innerText;
document.title = title;
}
// Кнопочка для переключения темы на светлую и обратно.
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();