MediaWiki:Common.js
Увага: Після публікування слід очистити кеш браузера, щоб побачити зміни.
- Firefox / Safari: тримайте Shift, коли натискаєте Оновити, або натисніть Ctrl-F5 чи Ctrl-Shift-R (⌘-R на Apple Mac)
- Google Chrome: натисніть Ctrl-Shift-R (⌘-Shift-R на Apple Mac)
- Edge: тримайте Ctrl, коли натискаєте Оновити, або натисніть Ctrl-F5.
// =========================
// ОСНОВНІ КНОПКИ ПРАВОРУЧ
// =========================
$(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');
}
// Розмір шрифту
var fontSize = parseInt(localStorage.getItem('fontSize')) || parseInt($('body').css('font-size')) || 16;
function applyFontSize() {
var content = document.querySelector('.mw-parser-output');
if (content) {
content.style.fontSize = fontSize + 'px';
}
}
// Функція створення кнопки праворуч
function createButtonRight(text, onClick, title) {
var btn = document.createElement('button');
btn.innerText = text;
btn.title = title;
btn.style.position = 'fixed';
btn.style.right = '10px';
btn.style.bottom = (10 + document.querySelectorAll('.right-button').length * 60) + 'px';
btn.style.padding = '10px 16px';
btn.style.border = 'none';
btn.style.borderRadius = '25px';
btn.style.background = '#1a73e8';
btn.style.color = '#fff';
btn.style.fontWeight = 'bold';
btn.style.fontSize = '14px';
btn.style.cursor = 'pointer';
btn.style.zIndex = 9999;
btn.style.textAlign = 'center';
btn.style.boxShadow = '0 2px 6px rgba(0,0,0,0.3)';
btn.style.whiteSpace = 'nowrap';
btn.className = 'right-button';
btn.onclick = onClick;
document.body.appendChild(btn);
return btn;
}
// Кнопка Темна/Світла тема
createButtonRight(
theme === 'dark' ? 'Світла тема ☀️' : 'Темна тема 🌙',
function () {
var newTheme = theme === 'dark' ? 'light' : 'dark';
localStorage.setItem('selectedTheme', newTheme);
location.reload();
},
'Змінити тему'
);
// Кнопка доступності
createButtonRight(
'Доступність',
function () {
if (!$('body').hasClass('accessibility-mode')) {
$('body').addClass('accessibility-mode');
localStorage.setItem('accessibilityMode', 'on');
} else {
$('body').removeClass('accessibility-mode');
localStorage.setItem('accessibilityMode', 'off');
}
},
'Увімкнути/вимкнути режим доступності'
);
// Кнопки лупи
createButtonRight('🔍 +', function () {
fontSize += 2;
if (fontSize > 30) fontSize = 30;
localStorage.setItem('fontSize', fontSize);
applyFontSize();
}, 'Збільшити шрифт');
createButtonRight('🔍 -', function () {
fontSize -= 2;
if (fontSize < 12) fontSize = 12;
localStorage.setItem('fontSize', fontSize);
applyFontSize();
}, 'Зменшити шрифт');
applyFontSize();
if (localStorage.getItem('accessibilityMode') === 'on') {
$('body').addClass('accessibility-mode');
}
});
// =========================
// КНОПКИ ЗЛІВА: ВИПАДКОВА СТОРІНКА ТА ЯК ЦЕ ПРАЦЮЄ
// =========================
function createLeftButtons() {
// Перевіряємо чи це Minerva тема
if (!document.body.classList.contains('skin-minerva')) {
return;
}
// Перевіряємо чи кнопки вже існують
if (document.getElementById('left-random-btn') || document.getElementById('left-how-btn')) {
return;
}
console.log('Створюємо ліві кнопки для Minerva');
// Визначаємо відступ для клавіатури
const keyboardHeight = 100;
// 1. Кнопка "Як це працює?" (кругла, зелена)
const howBtn = document.createElement('button');
howBtn.id = 'left-how-btn';
howBtn.innerHTML = '?';
howBtn.title = 'Як це працює?';
howBtn.style.cssText = `
position: fixed;
bottom: ${120 + keyboardHeight}px;
left: 15px;
z-index: 9998;
background: #4CAF50;
color: white;
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 20px;
font-weight: bold;
cursor: pointer;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
`;
// 2. Кнопка "Випадкова сторінка" (червона)
const randomBtn = document.createElement('button');
randomBtn.id = 'left-random-btn';
randomBtn.innerHTML = '🎲 Випадкова';
randomBtn.title = 'Випадкова сторінка';
randomBtn.style.cssText = `
position: fixed;
bottom: ${60 + keyboardHeight}px;
left: 15px;
z-index: 9998;
background: #ff4444;
color: white;
border: none;
padding: 10px 15px;
border-radius: 20px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
display: flex;
align-items: center;
gap: 5px;
transition: all 0.2s ease;
white-space: nowrap;
`;
// Обробники кліків
howBtn.addEventListener('click', function() {
console.log('Клік на "Як це працює?"');
// Змініть посилання на потрібне
window.location.href = '/wiki/Довідка:Як_це_працює';
});
randomBtn.addEventListener('click', function() {
console.log('Клік на "Випадкова сторінка"');
this.innerHTML = '⏳...';
this.disabled = true;
setTimeout(() => {
window.location.href = '/wiki/Special:Random';
}, 100);
});
// Hover ефекти
[howBtn, randomBtn].forEach(btn => {
btn.addEventListener('mouseenter', function() {
this.style.transform = 'scale(1.05)';
this.style.boxShadow = '0 4px 15px rgba(0,0,0,0.4)';
});
btn.addEventListener('mouseleave', function() {
this.style.transform = 'scale(1)';
this.style.boxShadow = '0 2px 10px rgba(0,0,0,0.3)';
});
});
// Додаємо кнопки на сторінку
document.body.appendChild(howBtn);
document.body.appendChild(randomBtn);
console.log('Ліві кнопки успішно створені');
}
// =========================
// ПРОСТЕ ПРИХОВАННЯ ЕЛЕМЕНТІВ
// =========================
function hideElements() {
if (!document.body.classList.contains('skin-minerva')) return;
setTimeout(() => {
// Приховуємо елементи з текстом "Відмова"
document.querySelectorAll('*').forEach(el => {
if (el.textContent && el.textContent.includes('Відмова')) {
el.style.display = 'none';
}
});
}, 500);
}
// =========================
// ІНІЦІАЛІЗАЦІЯ
// =========================
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM завантажено, перевіряємо тему...');
if (document.body.classList.contains('skin-minerva')) {
console.log('Це Minerva тема, ініціалізуємо кнопки...');
createLeftButtons();
hideElements();
}
});
// Дублюємо ініціалізацію на випадок динамічного завантаження
window.addEventListener('load', function() {
console.log('Вікно завантажено, перевіряємо тему...');
if (document.body.classList.contains('skin-minerva')) {
console.log('Це Minerva тема, ініціалізуємо кнопки...');
setTimeout(createLeftButtons, 1000);
}
});
// Резервна ініціалізація
setTimeout(function() {
if (document.body.classList.contains('skin-minerva') &&
!document.getElementById('left-random-btn')) {
console.log('Резервна ініціалізація кнопок...');
createLeftButtons();
}
}, 3000);
// Відновлюємо кнопки після переходу
window.addEventListener('pageshow', function() {
if (document.body.classList.contains('skin-minerva') &&
!document.getElementById('left-random-btn')) {
console.log('Відновлюємо кнопки після переходу...');
setTimeout(createLeftButtons, 500);
}
});