MediaWiki:Common.js: відмінності між версіями

// =========================
// ОСНОВНІ КНОПКИ ПРАВОРУЧ
// =========================
$(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);
    }
});