darnytsa_hero

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

← Попереднє редагуванняНаступне редагування →
Немає опису редагування
Немає опису редагування
Рядок 108: Рядок 108:
     'use strict';
     'use strict';
      
      
     // Конфигурация в стиле MediaViewer
     // Конфигурация
     const config = {
     const config = {
        // Стиль оверлея
         overlayBg: 'rgba(0,0,0,0.85)',
         overlayBg: 'rgba(0,0,0,0.95)',
         imageMaxWidth: '90%',
        animationDuration: '0.3s',
         imageMaxHeight: '90%',
       
         closeBtnText: 'Закрити',
        // Стиль изображения
         closeBtnStyle: {
         imageMaxWidth: '90vw',
             background: '#f44336',
         imageMaxHeight: '90vh',
             color: 'white',
          
             border: 'none',
        // Панель информации (как в MediaViewer)
             borderRadius: '5px',
        infoPanel: {
             padding: '10px 20px',
            background: 'rgba(0,0,0,0.8)',
             fontSize: '18px',
            color: '#fff',
             cursor: 'pointer',
            padding: '20px',
             marginTop: '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;
     // Функция для создания кастомного overlay (улучшенная версия)
    let currentImageIndex = 0;
     function showCustomOverlay(url) {
    let imagesInGallery = [];
 
     // Создание оверлея в стиле MediaViewer
     function createMediaViewerStyleOverlay() {
         const overlay = document.createElement('div');
         const overlay = document.createElement('div');
         overlay.className = 'custom-media-viewer';
         overlay.style.position = 'fixed';
         overlay.style.cssText = `
         overlay.style.top = '0';
            position: fixed;
        overlay.style.left = '0';
            top: 0;
        overlay.style.width = '100%';
            left: 0;
        overlay.style.height = '100%';
            width: 100%;
        overlay.style.background = config.overlayBg;
            height: 100%;
        overlay.style.display = 'flex';
            background: ${config.overlayBg};
        overlay.style.justifyContent = 'center';
            display: none;
        overlay.style.alignItems = 'center';
            justify-content: center;
        overlay.style.flexDirection = 'column';
            align-items: center;
        overlay.style.zIndex = '10000';
            z-index: 10000;
         overlay.style.cursor = 'pointer';
            opacity: 0;
            transition: opacity ${config.animationDuration} ease;
         `;


        // Контейнер для содержимого
         const img = document.createElement('img');
         const contentContainer = document.createElement('div');
         img.src = url;
         contentContainer.style.cssText = `
        img.style.maxWidth = config.imageMaxWidth;
            position: relative;
         img.style.maxHeight = config.imageMaxHeight;
            max-width: 95vw;
         img.style.objectFit = 'contain';
            max-height: 95vh;
         img.style.borderRadius = '8px';
            display: flex;
         overlay.appendChild(img);
            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');
         const closeBtn = document.createElement('button');
         closeBtn.innerHTML = '×';
         closeBtn.innerText = config.closeBtnText;
        closeBtn.title = 'Закрити (Esc)';
         closeBtn.style.marginTop = config.closeBtnStyle.marginTop;
         closeBtn.style.cssText = `
        closeBtn.style.padding = config.closeBtnStyle.padding;
            width: ${config.closeBtn.size};
        closeBtn.style.fontSize = config.closeBtnStyle.fontSize;
            height: ${config.closeBtn.size};
         closeBtn.style.cursor = config.closeBtnStyle.cursor;
            background: ${config.closeBtn.background};
         closeBtn.style.background = config.closeBtnStyle.background;
            color: ${config.closeBtn.color};
         closeBtn.style.color = config.closeBtnStyle.color;
            border: none;
        closeBtn.style.border = config.closeBtnStyle.border;
            border-radius: 50%;
        closeBtn.style.borderRadius = config.closeBtnStyle.borderRadius;
            font-size: ${config.closeBtn.fontSize};
          
            cursor: pointer;
         // Закрытие по клику на оверлей или кнопку
            display: flex;
         const closeOverlay = () => {
            align-items: center;
            document.body.removeChild(overlay);
            justify-content: center;
            document.body.style.overflow = 'auto';
            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);
         overlay.addEventListener('click', (e) => {
        contentContainer.appendChild(imageContainer);
            if (e.target === overlay) closeOverlay();
        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;
         closeBtn.addEventListener('click', closeOverlay);
          
          
         if (currentImageIndex < 0) {
         // Закрытие по ESC
             currentImageIndex = imagesInGallery.length - 1;
        const keyHandler = (e) => {
         } else if (currentImageIndex >= imagesInGallery.length) {
             if (e.key === 'Escape') closeOverlay();
            currentImageIndex = 0;
         };
        }
        document.addEventListener('keydown', keyHandler);
          
          
         showImage(imagesInGallery[currentImageIndex]);
         // Удаляем обработчик после закрытия
    }
        overlay.addEventListener('click', function handler() {
            document.removeEventListener('keydown', keyHandler);
            overlay.removeEventListener('click', handler);
        });


    // Показ информации
         overlay.appendChild(closeBtn);
    function toggleInfoPanel() {
         document.body.appendChild(overlay);
         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);
         document.body.style.overflow = 'hidden';
        return images;
     }
     }


     // Проверка, должна ли картинка открываться в оверлее
     // Перехватываем клики на обычные картинки (без MediaViewer)
     function shouldOpenInOverlay(element) {
     document.body.addEventListener('click', function(e) {
         if (config.excludeSelectors.some(selector =>
         const target = e.target;
            element.matches(selector) || element.closest(selector))) {
            return false;
        }


         if (element.width < 50 || element.height < 50) {
        // Если картинка не часть MediaViewer overlay и нет ссылки на /w/images/
             return false;
         if (target.tagName === 'IMG' && !target.closest('.mediaViewerOverlay')) {
             const parentLink = target.closest('a[href*="/w/images/"]');
            if (!parentLink) {
                e.preventDefault();
                e.stopPropagation();
                showCustomOverlay(target.src);
            }
         }
         }


         // Пропускаем изображения из галерей
         // Ссылки на файлы, где MediaViewer не срабатывает
         if (element.closest('.gallery, .thumb, .mw-gallery')) {
         if (target.tagName === 'A' && target.href && target.href.includes('/w/images/')) {
             return false; // Или можно true, если хотите поддержку галерей
             // проверка: если кликнули на миниатюру с MediaViewer, не блокируем
            if (!target.closest('.thumb')) {
                e.preventDefault();
                e.stopPropagation();
                showCustomOverlay(target.href);
            }
         }
         }
    }, true);


         return true;
    // Функция добавления кнопки "Закрити" к MediaViewer overlay (улучшенная)
    }
    function addCloseButtonToMediaViewer() {
        const overlay = document.querySelector('.mediaViewerOverlay, .mwe-popups');
         if (!overlay || overlay.dataset.closeBtnAdded) return;
        overlay.dataset.closeBtnAdded = true;


    // Показ оверлея
        const closeBtn = document.createElement('button');
    function showMediaViewerOverlay(imageElement) {
        closeBtn.innerText = config.closeBtnText;
         if (!currentOverlay) {
        closeBtn.style.position = 'absolute';
            currentOverlay = createMediaViewerStyleOverlay();
        closeBtn.style.top = '20px';
         }
        closeBtn.style.right = '20px';
 
        closeBtn.style.padding = config.closeBtnStyle.padding;
         // Собираем все изображения для галереи
        closeBtn.style.fontSize = config.closeBtnStyle.fontSize;
         imagesInGallery = collectAllImages(imageElement);
         closeBtn.style.cursor = config.closeBtnStyle.cursor;
        closeBtn.style.background = config.closeBtnStyle.background;
         closeBtn.style.color = config.closeBtnStyle.color;
        closeBtn.style.border = config.closeBtnStyle.border;
         closeBtn.style.borderRadius = config.closeBtnStyle.borderRadius;
         closeBtn.style.zIndex = '10001';
          
          
         if (imagesInGallery.length === 0) return;
         closeBtn.addEventListener('click', () => {
            overlay.style.display = 'none';
        });


         showImage(imagesInGallery[currentImageIndex]);
         overlay.appendChild(closeBtn);
          
          
         // Показываем оверлей с анимацией
         // Также добавляем закрытие по ESC для MediaViewer
         currentOverlay.overlay.style.display = 'flex';
         const keyHandler = (e) => {
        setTimeout(() => {
             if (e.key === 'Escape' && overlay.style.display !== 'none') {
             currentOverlay.overlay.style.opacity = '1';
                overlay.style.display = 'none';
        }, 10);
            }
       
         };
        // Блокируем прокрутку
         document.addEventListener('keydown', keyHandler);
        document.body.style.overflow = 'hidden';
       
         // Показываем/скрываем кнопки навигации
        currentOverlay.prevBtn.style.display = imagesInGallery.length > 1 ? 'flex' : 'none';
         currentOverlay.nextBtn.style.display = imagesInGallery.length > 1 ? 'flex' : 'none';
     }
     }


     // Показ конкретного изображения
     // MutationObserver отслеживает появление overlay MediaViewer
     function showImage(imageData) {
     const observer = new MutationObserver((mutations) => {
         if (!currentOverlay) return;
         for (let mutation of mutations) {
       
            if (mutation.type === 'childList') {
        currentOverlay.img.src = imageData.src;
                for (let node of mutation.addedNodes) {
        currentOverlay.img.alt = imageData.alt;
                    if (node.nodeType === 1) { // Element node
       
                        if (node.classList &&  
        // Обновляем информацию
                            (node.classList.contains('mediaViewerOverlay') ||  
        currentOverlay.infoPanel.innerHTML = `
                            node.classList.contains('mwe-popups'))) {
            <div><strong>${imageData.alt}</strong></div>
                            // Даем время для полной инициализации MediaViewer
            <div>Розмір: ${imageData.width} × ${imageData.height}px</div>
                            setTimeout(addCloseButtonToMediaViewer, 100);
            <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);
             }
             }
         }
         }
     });
     });
   
    observer.observe(document.body, { childList: true, subtree: true });


     // Стили для плавной анимации
     // Добавляем стили для улучшения внешнего вида
     const style = document.createElement('style');
     const style = document.createElement('style');
     style.textContent = `
     style.textContent = `
         .custom-media-viewer * {
         .custom-overlay-img {
             box-sizing: border-box;
             transition: transform 0.2s ease;
         }
         }
          
          
         .custom-media-viewer button:hover {
         .custom-overlay-img:hover {
             transform: scale(1.1) !important;
             transform: scale(1.02);
         }
         }
          
          
         .custom-media-viewer img {
         button:hover {
             transition: transform 0.3s ease !important;
             opacity: 0.9;
        }
            transform: scale(1.05);
       
             transition: all 0.2s ease;
        @media (max-width: 768px) {
             .custom-media-viewer button {
                width: 40px !important;
                height: 40px !important;
                font-size: 18px !important;
            }
         }
         }
     `;
     `;
     document.head.appendChild(style);
     document.head.appendChild(style);
    console.log('Custom MediaViewer loaded successfully');


})();
})();
Отримано з https://darnytsa.hero.kyivcity.gov.ua/w/index.php/MediaWiki:Common.js