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) || 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();
});


//OVERLAY 
(function() {
    'use strict';
    
    // Конфигурация в стиле MediaViewer
    const config = {
        // Стиль оверлея
        overlayBg: 'rgba(0,0,0,0.95)',
        animationDuration: '0.3s',
        
        // Стиль изображения
        imageMaxWidth: '90vw',
        imageMaxHeight: '90vh',
        
        // Панель информации (как в MediaViewer)
        infoPanel: {
            background: 'rgba(0,0,0,0.8)',
            color: '#fff',
            padding: '20px',
            borderRadius: '8px',
            marginTop: '20px',
            maxWidth: '600px',
            fontSize: '14px'
        },
        
        // Кнопки навигации
        navButtons: {
            background: 'rgba(0,0,0,0.7)',
            color: '#fff',
            size: '50px',
            fontSize: '24px',
            borderRadius: '50%'
        },
        
        // Кнопка закрытия
        closeBtn: {
            background: 'rgba(0,0,0,0.7)',
            color: '#fff',
            size: '40px',
            fontSize: '20px',
            top: '20px',
            right: '20px'
        },
        
        // Исключения
        excludeSelectors: [
            '.no-overlay',
            '[data-no-overlay]',
            '.mw-editsection img',
            '.sprite',
            '.icon',
            '.logo',
            '.nav-icon'
        ]
    };

    let currentOverlay = null;
    let currentImageIndex = 0;
    let imagesInGallery = [];

    // Создание оверлея в стиле MediaViewer
    function createMediaViewerStyleOverlay() {
        const overlay = document.createElement('div');
        overlay.className = 'custom-media-viewer';
        overlay.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: ${config.overlayBg};
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            opacity: 0;
            transition: opacity ${config.animationDuration} ease;
        `;

        // Контейнер для содержимого
        const contentContainer = document.createElement('div');
        contentContainer.style.cssText = `
            position: relative;
            max-width: 95vw;
            max-height: 95vh;
            display: flex;
            flex-direction: column;
            align-items: center;
        `;

        // Верхняя панель с кнопкой закрытия
        const topPanel = document.createElement('div');
        topPanel.style.cssText = `
            width: 100%;
            display: flex;
            justify-content: flex-end;
            margin-bottom: 20px;
        `;

        const closeBtn = document.createElement('button');
        closeBtn.innerHTML = '×';
        closeBtn.title = 'Закрити (Esc)';
        closeBtn.style.cssText = `
            width: ${config.closeBtn.size};
            height: ${config.closeBtn.size};
            background: ${config.closeBtn.background};
            color: ${config.closeBtn.color};
            border: none;
            border-radius: 50%;
            font-size: ${config.closeBtn.fontSize};
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        `;

        // Контейнер для изображения
        const imageContainer = document.createElement('div');
        imageContainer.style.cssText = `
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            max-width: ${config.imageMaxWidth};
            max-height: ${config.imageMaxHeight};
        `;

        const img = document.createElement('img');
        img.style.cssText = `
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            cursor: pointer;
            transition: transform 0.2s ease;
        `;

        // Кнопки навигации
        const prevBtn = createNavButton('‹', 'Попереднє зображення (←)');
        const nextBtn = createNavButton('›', 'Наступне зображення (→)');

        prevBtn.style.left = '20px';
        nextBtn.style.right = '20px';

        // Панель информации
        const infoPanel = document.createElement('div');
        infoPanel.className = 'image-info-panel';
        infoPanel.style.cssText = `
            background: ${config.infoPanel.background};
            color: ${config.infoPanel.color};
            padding: ${config.infoPanel.padding};
            border-radius: ${config.infoPanel.borderRadius};
            margin-top: 20px;
            max-width: ${config.infoPanel.maxWidth};
            width: 100%;
            text-align: center;
            font-size: ${config.infoPanel.fontSize};
            display: none;
        `;

        // Сборка интерфейса
        topPanel.appendChild(closeBtn);
        imageContainer.appendChild(img);
        imageContainer.appendChild(prevBtn);
        imageContainer.appendChild(nextBtn);
        
        contentContainer.appendChild(topPanel);
        contentContainer.appendChild(imageContainer);
        contentContainer.appendChild(infoPanel);
        overlay.appendChild(contentContainer);

        document.body.appendChild(overlay);

        // Обработчики событий
        function setupEventListeners() {
            // Закрытие
            const closeOverlay = () => {
                overlay.style.opacity = '0';
                setTimeout(() => {
                    overlay.style.display = 'none';
                    document.body.style.overflow = 'auto';
                    currentOverlay = null;
                    imagesInGallery = [];
                }, 300);
            };

            closeBtn.addEventListener('click', closeOverlay);
            overlay.addEventListener('click', (e) => {
                if (e.target === overlay) closeOverlay();
            });

            // Навигация
            prevBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                navigateImages(-1);
            });

            nextBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                navigateImages(1);
            });

            // Клавиатура
            document.addEventListener('keydown', function keyHandler(e) {
                if (!currentOverlay) return;
                
                switch(e.key) {
                    case 'Escape':
                        closeOverlay();
                        break;
                    case 'ArrowLeft':
                        navigateImages(-1);
                        break;
                    case 'ArrowRight':
                        navigateImages(1);
                        break;
                    case 'i':
                        e.preventDefault();
                        toggleInfoPanel();
                        break;
                }
            });

            // Zoom по клику на изображение
            img.addEventListener('click', (e) => {
                e.stopPropagation();
                if (img.style.transform === 'scale(1.5)') {
                    img.style.transform = 'scale(1)';
                } else {
                    img.style.transform = 'scale(1.5)';
                }
            });

            // Hover эффекты
            [closeBtn, prevBtn, nextBtn].forEach(btn => {
                btn.addEventListener('mouseenter', () => {
                    btn.style.background = 'rgba(0,0,0,0.9)';
                    btn.style.transform = 'scale(1.1)';
                });
                btn.addEventListener('mouseleave', () => {
                    btn.style.background = config.navButtons.background;
                    btn.style.transform = 'scale(1)';
                });
            });
        }

        setupEventListeners();

        return { overlay, img, infoPanel, prevBtn, nextBtn };
    }

    // Создание кнопки навигации
    function createNavButton(text, title) {
        const btn = document.createElement('button');
        btn.innerHTML = text;
        btn.title = title;
        btn.style.cssText = `
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: ${config.navButtons.size};
            height: ${config.navButtons.size};
            background: ${config.navButtons.background};
            color: ${config.navButtons.color};
            border: none;
            border-radius: 50%;
            font-size: ${config.navButtons.fontSize};
            cursor: pointer;
            display: none;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            z-index: 10001;
        `;
        return btn;
    }

    // Навигация по изображениям
    function navigateImages(direction) {
        if (imagesInGallery.length <= 1) return;
        
        currentImageIndex += direction;
        
        if (currentImageIndex < 0) {
            currentImageIndex = imagesInGallery.length - 1;
        } else if (currentImageIndex >= imagesInGallery.length) {
            currentImageIndex = 0;
        }
        
        showImage(imagesInGallery[currentImageIndex]);
    }

    // Показ информации
    function toggleInfoPanel() {
        if (!currentOverlay) return;
        const infoPanel = currentOverlay.infoPanel;
        infoPanel.style.display = infoPanel.style.display === 'none' ? 'block' : 'none';
    }

    // Сбор всех изображений на странице для галереи
    function collectAllImages(clickedImage) {
        const images = Array.from(document.querySelectorAll('img'))
            .filter(img => shouldOpenInOverlay(img) && !img.closest('.custom-media-viewer'))
            .map(img => ({
                src: img.src,
                alt: img.alt || 'Зображення',
                title: img.title || '',
                width: img.naturalWidth,
                height: img.naturalHeight
            }));
        
        // Находим индекс текущего изображения
        currentImageIndex = images.findIndex(img => img.src === clickedImage.src);
        return images;
    }

    // Проверка, должна ли картинка открываться в оверлее
    function shouldOpenInOverlay(element) {
        if (config.excludeSelectors.some(selector => 
            element.matches(selector) || element.closest(selector))) {
            return false;
        }

        if (element.width < 50 || element.height < 50) {
            return false;
        }

        // Пропускаем изображения из галерей
        if (element.closest('.gallery, .thumb, .mw-gallery')) {
            return false; // Или можно true, если хотите поддержку галерей
        }

        return true;
    }

    // Показ оверлея
    function showMediaViewerOverlay(imageElement) {
        if (!currentOverlay) {
            currentOverlay = createMediaViewerStyleOverlay();
        }

        // Собираем все изображения для галереи
        imagesInGallery = collectAllImages(imageElement);
        
        if (imagesInGallery.length === 0) return;

        showImage(imagesInGallery[currentImageIndex]);
        
        // Показываем оверлей с анимацией
        currentOverlay.overlay.style.display = 'flex';
        setTimeout(() => {
            currentOverlay.overlay.style.opacity = '1';
        }, 10);
        
        // Блокируем прокрутку
        document.body.style.overflow = 'hidden';
        
        // Показываем/скрываем кнопки навигации
        currentOverlay.prevBtn.style.display = imagesInGallery.length > 1 ? 'flex' : 'none';
        currentOverlay.nextBtn.style.display = imagesInGallery.length > 1 ? 'flex' : 'none';
    }

    // Показ конкретного изображения
    function showImage(imageData) {
        if (!currentOverlay) return;
        
        currentOverlay.img.src = imageData.src;
        currentOverlay.img.alt = imageData.alt;
        
        // Обновляем информацию
        currentOverlay.infoPanel.innerHTML = `
            <div><strong>${imageData.alt}</strong></div>
            <div>Розмір: ${imageData.width} × ${imageData.height}px</div>
            <div style="margin-top: 10px; opacity: 0.7;">
                ← → для навігації • I для інформації • Esc для закриття
            </div>
        `;
    }

    // Обработчик кликов
    document.addEventListener('click', function(e) {
        const target = e.target;

        // Пропускаем клики внутри оверлея
        if (target.closest('.custom-media-viewer')) {
            return;
        }

        // Клик на картинку
        if (target.tagName === 'IMG' && shouldOpenInOverlay(target)) {
            e.preventDefault();
            e.stopPropagation();
            showMediaViewerOverlay(target);
        }

        // Клик на ссылку с изображением
        if (target.tagName === 'A' && target.href && target.href.match(/\.(jpg|jpeg|png|gif|webp)(\?|$)/i)) {
            const img = target.querySelector('img');
            if (img && shouldOpenInOverlay(img)) {
                e.preventDefault();
                e.stopPropagation();
                showMediaViewerOverlay(img);
            }
        }
    });

    // Стили для плавной анимации
    const style = document.createElement('style');
    style.textContent = `
        .custom-media-viewer * {
            box-sizing: border-box;
        }
        
        .custom-media-viewer button:hover {
            transform: scale(1.1) !important;
        }
        
        .custom-media-viewer img {
            transition: transform 0.3s ease !important;
        }
        
        @media (max-width: 768px) {
            .custom-media-viewer button {
                width: 40px !important;
                height: 40px !important;
                font-size: 18px !important;
            }
        }
    `;
    document.head.appendChild(style);

    console.log('Custom MediaViewer loaded successfully');

})();