MediaWiki:Common.js: відмінності між версіями
Перейти до навігації
Перейти до пошуку
Wiki (обговорення | внесок) Немає опису редагування |
Wiki (обговорення | внесок) Немає опису редагування |
||
| Рядок 1: | Рядок 1: | ||
$(function () { | $(function () { | ||
// ======================= | |||
// Теми | // Теми | ||
// ======================= | |||
var themes = { | var themes = { | ||
light: '/w/index.php?title=MediaWiki:Light.css&action=raw&ctype=text/css', | light: '/w/index.php?title=MediaWiki:Light.css&action=raw&ctype=text/css', | ||
| Рядок 6: | Рядок 8: | ||
}; | }; | ||
var theme = localStorage.getItem('selectedTheme'); | var theme = localStorage.getItem('selectedTheme'); | ||
if (!theme) { | if (!theme) { | ||
| Рядок 17: | Рядок 16: | ||
} | } | ||
var $ | // ======================= | ||
// Функція створення кнопки | |||
// ======================= | |||
function createButton(text, bottom, onClick, title) { | |||
var $btn = $('<button>').text(text).attr('title', title).css({ | |||
position: 'fixed', | position: 'fixed', | ||
bottom: ' | bottom: bottom + 'px', | ||
right: '10px', | right: '10px', | ||
padding: '10px 16px', | padding: '10px 16px', | ||
| Рядок 36: | Рядок 36: | ||
boxShadow: '0 2px 6px rgba(0,0,0,0.3)', | boxShadow: '0 2px 6px rgba(0,0,0,0.3)', | ||
whiteSpace: 'nowrap' | whiteSpace: 'nowrap' | ||
}) | }).click(onClick); | ||
. | $('body').append($btn); | ||
return $btn; | |||
} | |||
// ======================= | |||
// Кнопка Темна/Світла тема | |||
// ======================= | |||
var $themeBtn = createButton( | |||
theme === 'dark' ? 'Світла тема ☀️' : 'Темна тема 🌙', | |||
10, | |||
function () { | |||
var newTheme = theme === 'dark' ? 'light' : 'dark'; | var newTheme = theme === 'dark' ? 'light' : 'dark'; | ||
localStorage.setItem('selectedTheme', newTheme); | localStorage.setItem('selectedTheme', newTheme); | ||
location.reload(); | location.reload(); | ||
} | }, | ||
'Змінити тему' | |||
); | |||
// ======================= | // ======================= | ||
// Кнопка Доступність | // Кнопка Доступність | ||
// ======================= | // ======================= | ||
var $accessBtn = | var $accessBtn = createButton( | ||
'Доступність ♿', | |||
70, | |||
function () { | |||
if (!$('body').hasClass('accessibility-mode')) { | if (!$('body').hasClass('accessibility-mode')) { | ||
$('body').addClass('accessibility-mode'); | $('body').addClass('accessibility-mode'); | ||
| Рядок 76: | Рядок 69: | ||
localStorage.setItem('accessibilityMode', 'off'); | localStorage.setItem('accessibilityMode', 'off'); | ||
} | } | ||
}); | }, | ||
'Увімкнути режим доступності' | |||
); | |||
if (localStorage.getItem('accessibilityMode') === 'on') { | if (localStorage.getItem('accessibilityMode') === 'on') { | ||
$('body').addClass('accessibility-mode'); | $('body').addClass('accessibility-mode'); | ||
} | |||
// ======================= | |||
// Лупа + / - | |||
// ======================= | |||
var fontSize = parseInt($('body').css('font-size'), 10); | |||
createButton('🔍 +', 130, function () { | |||
fontSize += 2; | |||
$('body').css('font-size', fontSize + 'px'); | |||
localStorage.setItem('fontSize', fontSize); | |||
}, 'Збільшити шрифт'); | |||
createButton('🔍 -', 170, function () { | |||
fontSize -= 2; | |||
if (fontSize < 12) fontSize = 12; | |||
$('body').css('font-size', fontSize + 'px'); | |||
localStorage.setItem('fontSize', fontSize); | |||
}, 'Зменшити шрифт'); | |||
// Встановлюємо збережений розмір шрифту | |||
if (localStorage.getItem('fontSize')) { | |||
fontSize = parseInt(localStorage.getItem('fontSize'), 10); | |||
$('body').css('font-size', fontSize + 'px'); | |||
} | } | ||
}); | }); | ||
Версія за 15:48, 23 вересня 2025
$(function () {
// =======================
// Теми
// =======================
var themes = {
light: '/w/index.php?title=MediaWiki:Light.css&action=raw&ctype=text/css',
dark: '/w/index.php?title=MediaWiki:Dark.css&action=raw&ctype=text/css'
};
var theme = localStorage.getItem('selectedTheme');
if (!theme) {
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
if (themes[theme]) {
mw.loader.load(themes[theme], 'text/css');
}
// =======================
// Функція створення кнопки
// =======================
function createButton(text, bottom, onClick, title) {
var $btn = $('<button>').text(text).attr('title', title).css({
position: 'fixed',
bottom: bottom + 'px',
right: '10px',
padding: '10px 16px',
border: 'none',
borderRadius: '25px',
background: '#1a73e8',
color: '#ffffff',
fontWeight: 'bold',
fontSize: '14px',
cursor: 'pointer',
zIndex: 9999,
textAlign: 'center',
boxShadow: '0 2px 6px rgba(0,0,0,0.3)',
whiteSpace: 'nowrap'
}).click(onClick);
$('body').append($btn);
return $btn;
}
// =======================
// Кнопка Темна/Світла тема
// =======================
var $themeBtn = createButton(
theme === 'dark' ? 'Світла тема ☀️' : 'Темна тема 🌙',
10,
function () {
var newTheme = theme === 'dark' ? 'light' : 'dark';
localStorage.setItem('selectedTheme', newTheme);
location.reload();
},
'Змінити тему'
);
// =======================
// Кнопка Доступність
// =======================
var $accessBtn = createButton(
'Доступність ♿',
70,
function () {
if (!$('body').hasClass('accessibility-mode')) {
$('body').addClass('accessibility-mode');
localStorage.setItem('accessibilityMode', 'on');
} else {
$('body').removeClass('accessibility-mode');
localStorage.setItem('accessibilityMode', 'off');
}
},
'Увімкнути режим доступності'
);
if (localStorage.getItem('accessibilityMode') === 'on') {
$('body').addClass('accessibility-mode');
}
// =======================
// Лупа + / -
// =======================
var fontSize = parseInt($('body').css('font-size'), 10);
createButton('🔍 +', 130, function () {
fontSize += 2;
$('body').css('font-size', fontSize + 'px');
localStorage.setItem('fontSize', fontSize);
}, 'Збільшити шрифт');
createButton('🔍 -', 170, function () {
fontSize -= 2;
if (fontSize < 12) fontSize = 12;
$('body').css('font-size', fontSize + 'px');
localStorage.setItem('fontSize', fontSize);
}, 'Зменшити шрифт');
// Встановлюємо збережений розмір шрифту
if (localStorage.getItem('fontSize')) {
fontSize = parseInt(localStorage.getItem('fontSize'), 10);
$('body').css('font-size', fontSize + 'px');
}
});