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');

    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 fontSize = parseInt($('body').css('font-size'), 10) || 16;
    
    // Функція для застосування розміру шрифту
    function applyFontSize() {
        $('body').css('font-size', fontSize + 'px');
    }

    // Кнопка доступності
    var $accessBtn = createButton(
        'Доступність',
        70,
        function () {
            if (!$('body').hasClass('accessibility-mode')) {
                $('body').addClass('accessibility-mode');
                localStorage.setItem('accessibilityMode', 'on');
                $accessBtn.css('background', '#ff6600');
                $accessBtn.text('Доступність ON');
            } else {
                $('body').removeClass('accessibility-mode');
                localStorage.setItem('accessibilityMode', 'off');
                $accessBtn.css('background', '#1a73e8');
                $accessBtn.text('Доступність OFF');
            }
        },
        'Увімкнути/вимкнути режим доступності'
    );

    // Відновлення стану доступності
    if (localStorage.getItem('accessibilityMode') === 'on') {
        $('body').addClass('accessibility-mode');
        $accessBtn.css('background', '#ff6600');
        $accessBtn.text('Доступність ON');
    }

    // Лупа
    createButton('🔍 +', 130, function () {
        fontSize += 2;
        if (fontSize > 30) fontSize = 30;
        localStorage.setItem('fontSize', fontSize);
        applyFontSize();
    }, 'Збільшити шрифт');

    createButton('🔍 -', 170, function () {
        fontSize -= 2;
        if (fontSize < 12) fontSize = 12;
        localStorage.setItem('fontSize', fontSize);
        applyFontSize();
    }, 'Зменшити шрифт');

    // Відновлення розміру шрифту
    if (localStorage.getItem('fontSize')) {
        fontSize = parseInt(localStorage.getItem('fontSize'), 10);
    }
    applyFontSize();
});

// ================== КІОСКОВИЙ РЕЖИМ ДЛЯ ЗОБРАЖЕНЬ ==================
// Додайте в MediaWiki:Common.js

$(document).ready(function() {
    // Перевіряємо чи це кіосковий режим
    var isKiosk = document.cookie.includes('kiosk_mode=1') || 
                  window.location.href.includes('kiosk=1') ||
                  /mobile|android|iphone|ipad|touch|tablet/i.test(navigator.userAgent);
    
    // Якщо це пряме зображення і кіосковий режим
    if (isKiosk && isImagePage()) {
        addKioskInterfaceToImage();
    }
    
    // Додаємо перемикач режиму
    addModeSwitcher();
});

// Перевірка чи це сторінка з зображенням
function isImagePage() {
    return window.location.pathname.includes('/images/') && 
           /\.(png|jpg|jpeg|gif)$/i.test(window.location.pathname);
}

// Додаємо інтерфейс для зображень
function addKioskInterfaceToImage() {
    console.log('Додаємо кіосковий інтерфейс до зображення');
    
    // Робимо фон чорним
    document.body.style.background = 'black';
    document.body.style.margin = '0';
    document.body.style.padding = '0';
    document.body.style.height = '100vh';
    document.body.style.overflow = 'hidden';
    
    // Центруємо зображення
    var images = document.getElementsByTagName('img');
    if (images.length > 0) {
        var img = images[0];
        img.style.display = 'block';
        img.style.margin = 'auto';
        img.style.maxWidth = '95%';
        img.style.maxHeight = '95%';
        img.style.position = 'absolute';
        img.style.top = '0';
        img.style.bottom = '0';
        img.style.left = '0';
        img.style.right = '0';
    }
    
    // Додаємо кнопки
    addKioskButtons();
    
    // Додаємо обробку жествів
    addTouchGestures();
}

// Додаємо кнопки управління
function addKioskButtons() {
    var buttonHTML = `
        <div id="kiosk-buttons" style="
            position: fixed;
            top: 20px;
            left: 20px;
            right: 20px;
            z-index: 10000;
            display: flex;
            justify-content: space-between;
        ">
            <button onclick="goHome()" style="
                background: #0066cc;
                color: white;
                border: none;
                padding: 20px 25px;
                font-size: 24px;
                border-radius: 10px;
                cursor: pointer;
            ">⌂ ДОДОМУ</button>
            
            <button onclick="closeImage()" style="
                background: #cc0000;
                color: white;
                border: none;
                padding: 20px 25px;
                font-size: 24px;
                border-radius: 10px;
                cursor: pointer;
            ">✕ ЗАКРИТИ</button>
        </div>
    `;
    
    document.body.insertAdjacentHTML('afterbegin', buttonHTML);
}

// Додаємо жести для тачскрінів
function addTouchGestures() {
    var startY;
    
    document.addEventListener('touchstart', function(e) {
        startY = e.touches[0].clientY;
    });
    
    document.addEventListener('touchend', function(e) {
        if (!startY) return;
        
        var endY = e.changedTouches[0].clientY;
        if (endY - startY > 100) { // Свайп вниз
            closeImage();
        }
        startY = null;
    });
}

// Функції управління
function closeImage() {
    if (window.history.length > 1) {
        window.history.back();
    } else {
        window.location.href = '/wiki/';
    }
}

function goHome() {
    window.location.href = '/wiki/';
}

// Додаємо перемикач режиму на всі сторінки
function addModeSwitcher() {
    var isKiosk = document.cookie.includes('kiosk_mode=1') || 
                  window.location.href.includes('kiosk=1');
    
    var switcherHTML = `
        <div style="
            position: fixed;
            bottom: 10px;
            right: 10px;
            background: #333;
            color: white;
            padding: 10px;
            border-radius: 5px;
            z-index: 9999;
            font-size: 14px;
        ">
            ${isKiosk ? '📱 Кіосковий режим' : '💻 Звичайний режим'} 
            | <a href="${isKiosk ? '?kiosk=0' : '?kiosk=1'}" 
                 style="color: white; text-decoration: underline;">
                 ${isKiosk ? 'Перейти в звичайний' : 'Перейти в кіосковий'}
              </a>
        </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', switcherHTML);
}

// Обробка клавіші ESC
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && isImagePage()) {
        closeImage();
    }
});