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

    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);
    
    // Функція для застосування розміру шрифту з урахуванням режиму доступності
    function applyFontSize() {
        var currentFontSize = fontSize + 'px';
        
        if ($('body').hasClass('accessibility-mode')) {
            // У режимі доступності - збільшуємо базовий розмір
            var increasedSize = (fontSize * 1.2) + 'px'; // +20% до поточного розміру
            $('body').css('font-size', increasedSize);
        } else {
            // Звичайний режим - стандартний розмір
            $('body').css('font-size', currentFontSize);
        }
    }

    // Кнопка доступності - ТЕПЕР З УРАХУВАННЯМ ШРИФТУ
    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');
            }
            // Застосовуємо розмір шрифту після зміни режиму
            applyFontSize();
        },
        'Увімкнути/вимкнути режим доступності'
    );

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

   // ================== КІОСКОВИЙ РЕЖИМ ДЛЯ ЗОБРАЖЕНЬ ==================
$(document).ready(function() {
    // Перевіряємо чи це сторінка з зображенням
    var isImagePage = window.location.pathname.indexOf('/images/') !== -1 && 
                     /\.(png|jpg|jpeg|gif)$/i.test(window.location.pathname);
    
    if (isImagePage) {
        addKioskImageInterface();
    }
});

function addKioskImageInterface() {
    console.log('Додаємо кіосковий інтерфейс для зображення');
    
    // Створюємо контейнер для кнопок
    var interfaceHTML = `
        <div id="kiosk-interface" style="
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10000;
            pointer-events: none;
        ">
            <!-- Кнопка ЗАКРИТИ -->
            <button onclick="window.history.back()" style="
                position: absolute;
                top: 20px;
                right: 20px;
                background: red;
                color: white;
                border: none;
                padding: 25px 30px;
                font-size: 28px;
                border-radius: 15px;
                cursor: pointer;
                pointer-events: auto;
                z-index: 10001;
                box-shadow: 0 4px 10px rgba(0,0,0,0.5);
            ">✕ ЗАКРИТИ</button>
            
            <!-- Кнопка ДОДОМУ -->
            <button onclick="window.location.href='/wiki/'" style="
                position: absolute;
                top: 20px;
                left: 20px;
                background: blue;
                color: white;
                border: none;
                padding: 25px 30px;
                font-size: 28px;
                border-radius: 15px;
                cursor: pointer;
                pointer-events: auto;
                z-index: 10001;
                box-shadow: 0 4px 10px rgba(0,0,0,0.5);
            ">⌂ ДОДОМУ</button>
            
            <!-- Затемнення -->
            <div style="
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.8);
                pointer-events: auto;
            "></div>
        </div>
    `;
    
    // Додаємо в body
    $('body').prepend(interfaceHTML);
    
    // Додаємо стилі для зображення
    $('img').css({
        'position': 'relative',
        'z-index': '10002',
        'max-width': '90%',
        'max-height': '90%',
        'margin': 'auto',
        'display': 'block',
        'margin-top': '100px'
    });
    
    // Додаємо обробку кліку на затемнення
    $('#kiosk-interface > div').click(function() {
        window.history.back();
    });
    
    // Обробка свайпів для тачскрінів
    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) { // Свайп вниз
            window.history.back();
        }
        startY = null;
    });
    
    // Клавіша ESC
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            window.history.back();
        }
    });
    
    console.log('Кіосковий інтерфейс додано');
}