MediaWiki:Common.js: відмінності між версіями
Wiki (обговорення | внесок) Немає опису редагування Мітка: Ручний відкіт |
Wiki (обговорення | внесок) мНемає опису редагування |
||
| (Не показано 18 проміжних версій цього користувача) | |||
| Рядок 19: | Рядок 19: | ||
} | } | ||
function | // Розмір шрифту | ||
var | 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'; | |||
} | |||
} | |||
// Масив для збереження позицій кнопок | |||
var buttonCount = 0; | |||
// Функція створення кнопки праворуч з автоматичним вертикальним розташуванням | |||
function createButtonRight(text, onClick, title) { | |||
var btn = document.createElement('button'); | |||
btn.innerText = text; | |||
btn.title = title; | |||
btn.style.position = 'fixed'; | |||
return | btn.style.right = '10px'; | ||
btn.style.bottom = (10 + buttonCount * 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.onclick = onClick; | |||
document.body.appendChild(btn); | |||
buttonCount++; // збільшуємо лічильник кнопок для наступного bottom | |||
return btn; | |||
} | } | ||
// Кнопка Темна/Світла тема | // Кнопка Темна/Світла тема | ||
createButtonRight( | |||
theme === 'dark' ? 'Світла тема ☀️' : 'Темна тема 🌙', | theme === 'dark' ? 'Світла тема ☀️' : 'Темна тема 🌙', | ||
function () { | function () { | ||
var newTheme = theme === 'dark' ? 'light' : 'dark'; | var newTheme = theme === 'dark' ? 'light' : 'dark'; | ||
| Рядок 52: | Рядок 70: | ||
'Змінити тему' | 'Змінити тему' | ||
); | ); | ||
// Кнопка доступності | // Кнопка доступності | ||
createButtonRight( | |||
localStorage.getItem('accessibilityMode') === 'on' ? 'Доступність | localStorage.getItem('accessibilityMode') === 'on' ? 'Доступність' : 'Доступність', | ||
function () { | function () { | ||
if (!$('body').hasClass('accessibility-mode')) { | if (!$('body').hasClass('accessibility-mode')) { | ||
$('body').addClass('accessibility-mode'); | $('body').addClass('accessibility-mode'); | ||
localStorage.setItem('accessibilityMode', 'on'); | localStorage.setItem('accessibilityMode', 'on'); | ||
} else { | } else { | ||
$('body').removeClass('accessibility-mode'); | $('body').removeClass('accessibility-mode'); | ||
localStorage.setItem('accessibilityMode', 'off'); | localStorage.setItem('accessibilityMode', 'off'); | ||
} | } | ||
}, | }, | ||
| Рядок 81: | Рядок 86: | ||
); | ); | ||
// | // Кнопки лупи | ||
createButtonRight('🔍 +', function () { | |||
fontSize += 2; | fontSize += 2; | ||
if (fontSize > 30) fontSize = 30; | if (fontSize > 30) fontSize = 30; | ||
| Рядок 96: | Рядок 94: | ||
}, 'Збільшити шрифт'); | }, 'Збільшити шрифт'); | ||
createButtonRight('🔍 -', function () { | |||
fontSize -= 2; | fontSize -= 2; | ||
if (fontSize < 12) fontSize = 12; | if (fontSize < 12) fontSize = 12; | ||
| Рядок 103: | Рядок 101: | ||
}, 'Зменшити шрифт'); | }, 'Зменшити шрифт'); | ||
// Застосовуємо | // Застосовуємо шрифт при завантаженні | ||
applyFontSize(); | applyFontSize(); | ||
// Відновлення стану доступності при завантаженні | |||
if (localStorage.getItem('accessibilityMode') === 'on') { | |||
$('body').addClass('accessibility-mode'); | |||
} | |||
}); | }); | ||
// ========================= | // ========================= | ||
| Рядок 837: | Рядок 841: | ||
// ========================= | // ========================= | ||
// КНОПКА ВИПАДКОВА СТОРІНКА ( | // КНОПКА ВИПАДКОВА СТОРІНКА (вище) | ||
// ========================= | // ========================= | ||
function createRandomButton() { | function createRandomButton() { | ||
if (document.getElementById('float-random-btn') | if (document.getElementById('float-random-btn')) return; | ||
if (!document.body.classList.contains('skin-minerva')) return; | |||
const btn = document.createElement('button'); | const btn = document.createElement('button'); | ||
btn.id = 'float-random-btn'; | btn.id = 'float-random-btn'; | ||
btn.innerHTML = '🎲 Випадкова'; | btn.innerHTML = '🎲 Випадкова cторінка'; | ||
btn.title = 'Випадкова сторінка'; | btn.title = 'Випадкова сторінка'; | ||
btn.style.cssText = ` | btn.style.cssText = ` | ||
position: fixed; | position: fixed; | ||
bottom: | bottom: 240px; | ||
left: 15px; | |||
z-index: 9998; | z-index: 9998; | ||
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%); | background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%); | ||
| Рядок 866: | Рядок 869: | ||
gap: 8px; | gap: 8px; | ||
transition: all 0.3s ease; | transition: all 0.3s ease; | ||
white-space: nowrap; | |||
`; | `; | ||
btn.addEventListener('click', function() { | btn.addEventListener('click', function(e) { | ||
window.location.href = '/w/index.php/Спеціальна:Випадкова_сторінка'; | e.preventDefault(); | ||
e.stopPropagation(); | |||
btn.innerHTML = '⏳ Завантаження...'; | |||
btn.style.opacity = '0.7'; | |||
btn.disabled = true; | |||
setTimeout(() => { | |||
window.location.href = '/w/index.php/Спеціальна:Випадкова_сторінка'; | |||
}, 100); | |||
}); | }); | ||
btn.addEventListener('mouseenter', function() { | btn.addEventListener('mouseenter', function() { | ||
this.style.transform = 'scale(1.05)'; | if (!this.disabled) { | ||
this.style.transform = 'scale(1.05)'; | |||
this.style.boxShadow = '0 6px 20px rgba(0,0,0,0.4)'; | |||
} | |||
}); | }); | ||
| Рядок 886: | Рядок 899: | ||
// ========================= | // ========================= | ||
// | // КНОПКА "ЯК ЦЕ ПРАЦЮЄ?" (виправлена версія) | ||
// ========================= | // ========================= | ||
function | function createHowItWorksButton() { | ||
if ( | if (document.getElementById('how-it-works-btn')) return; | ||
const btn = document.createElement('button'); | |||
btn.id = 'how-it-works-btn'; | |||
btn.innerHTML = '?'; | |||
btn.title = 'Як це працює?'; | |||
btn.style.cssText = ` | |||
position: fixed; | |||
bottom: 140px; | |||
left: 15px; | |||
z-index: 9998; | |||
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%); | |||
color: white; | |||
border: none; | |||
width: 60px; | |||
height: 60px; | |||
border-radius: 50%; | |||
font-size: 24px; | |||
font-weight: bold; | |||
cursor: pointer; | |||
box-shadow: 0 4px 15px rgba(0,0,0,0.3); | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
transition: all 0.3s ease; | |||
line-height: 1; | |||
`; | |||
btn.addEventListener('click', function(e) { | |||
e.preventDefault(); | |||
e.stopPropagation(); | |||
window.location.href = '/w/index.php/FAQ'; | |||
}); | |||
btn.addEventListener('mouseenter', function() { | |||
this.style.transform = 'scale(1.05)'; | |||
this.style.boxShadow = '0 6px 20px rgba(0,0,0,0.4)'; | |||
}); | |||
btn.addEventListener('mouseleave', function() { | |||
this.style.transform = 'scale(1)'; | |||
this.style.boxShadow = '0 4px 15px rgba(0,0,0,0.3)'; | |||
}); | |||
document.body.appendChild(btn); | |||
} | } | ||
// ========================= | // ========================= | ||
// | // ВИПРАВЛЕНА ІНІЦІАЛІЗАЦІЯ (замінити тільки цю частину) | ||
// ========================= | // ========================= | ||
// | // Видаляємо всі старі ініціалізатори і замінюємо на цей простий код: | ||
let buttonsInitialized = false; | |||
function initializeLeftButtons() { | |||
if (buttonsInitialized) return; | |||
buttonsInitialized = true; | |||
// Кнопка "Як це працює?" для всіх тем | |||
createHowItWorksButton(); | |||
// Кнопка "Випадкова сторінка" тільки для Minerva | |||
if (document.body.classList.contains('skin-minerva')) { | if (document.body.classList.contains('skin-minerva')) { | ||
createRandomButton(); | createRandomButton(); | ||
} | } | ||
} | } | ||
// Тільки один спосіб ініціалізації | |||
if (document.readyState === 'loading') { | |||
document.addEventListener('DOMContentLoaded', initializeLeftButtons); | |||
} else { | |||
} | setTimeout(initializeLeftButtons, 100); | ||
} | |||
setTimeout( | // Тільки один резервний таймер | ||
setTimeout(initializeLeftButtons, 1000); | |||