darnytsa_hero

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

← Попереднє редагуванняНаступне редагування →
Немає опису редагування
Мітка: Скасовано
Немає опису редагування
Мітка: Ручний відкіт
Рядок 106: Рядок 106:
//OVERLAY  
//OVERLAY  
(function() {
(function() {
     // ===== Отключаем MediaViewer =====
     // Функция для создания кастомного overlay (только для обычных картинок без MediaViewer)
    if (window.mw && mw.config) mw.config.set('wgUseMediaViewer', false);
    function showCustomOverlay(url) {
        const overlay = document.createElement('div');
        overlay.style.position = 'fixed';
        overlay.style.top = 0;
        overlay.style.left = 0;
        overlay.style.width = '100%';
        overlay.style.height = '100%';
        overlay.style.background = 'rgba(0,0,0,0.85)';
        overlay.style.display = 'flex';
        overlay.style.justifyContent = 'center';
        overlay.style.alignItems = 'center';
        overlay.style.flexDirection = 'column';
        overlay.style.zIndex = 9999;


    // ===== CSS для overlay =====
        const img = document.createElement('img');
    const style = document.createElement('style');
        img.src = url;
    style.innerHTML = `
         img.style.maxWidth = '90%';
    .custom-overlay {
         img.style.maxHeight = '90%';
        position: fixed;
         overlay.appendChild(img);
        top:0; left:0;
        width:100%; height:100%;
        background: rgba(0,0,0,0.85);
        display: flex;
         justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 9999;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .custom-overlay.show { opacity: 1; }
    .custom-overlay img {
        max-width: 90%;
        max-height: 90%;
        border-radius: 5px;
        box-shadow: 0 0 20px rgba(0,0,0,0.5);
    }
    .custom-overlay button {
        margin: 10px;
        padding: 8px 15px;
        font-size: 16px;
        cursor: pointer;
        background: #f44336;
        color: white;
        border: none;
        border-radius: 4px;
    }
    .nav-buttons { display: flex; justify-content: center; }
    `;
    document.head.appendChild(style);
 
    // ===== Переменные галереи =====
    let images = Array.from(document.querySelectorAll('img'));
    let overlay, imgElement, currentIndex = 0;
 
    // ===== Функция показа overlay =====
    function showOverlay(index) {
         currentIndex = index;
        const url = images[currentIndex].src;
 
        // Удаляем старый overlay
        if (overlay) { overlay.remove(); overlay = null; imgElement = null; }
 
        overlay = document.createElement('div');
         overlay.className = 'custom-overlay';
 
        imgElement = document.createElement('img');
        imgElement.src = url;
        overlay.appendChild(imgElement);


        // Кнопка Закрити
         const closeBtn = document.createElement('button');
         const closeBtn = document.createElement('button');
         closeBtn.innerText = '✕ Закрити';
         closeBtn.innerText = 'Закрити';
        closeBtn.style.marginTop = '20px';
        closeBtn.style.padding = '10px 20px';
        closeBtn.style.fontSize = '18px';
        closeBtn.style.cursor = 'pointer';
        closeBtn.style.background = '#f44336';
        closeBtn.style.color = 'white';
        closeBtn.style.border = 'none';
        closeBtn.style.borderRadius = '5px';
         closeBtn.addEventListener('click', () => overlay.remove());
         closeBtn.addEventListener('click', () => overlay.remove());
         overlay.appendChild(closeBtn);
         overlay.appendChild(closeBtn);
        // Кнопки навигации
        const navDiv = document.createElement('div');
        navDiv.className = 'nav-buttons';
        const prevBtn = document.createElement('button');
        prevBtn.innerText = '← Назад';
        prevBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            currentIndex = (currentIndex - 1 + images.length) % images.length;
            imgElement.src = images[currentIndex].src;
        });
        const nextBtn = document.createElement('button');
        nextBtn.innerText = 'Вперед →';
        nextBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            currentIndex = (currentIndex + 1) % images.length;
            imgElement.src = images[currentIndex].src;
        });
        navDiv.appendChild(prevBtn);
        navDiv.appendChild(nextBtn);
        overlay.appendChild(navDiv);
        // Закрытие кликом по фону
        overlay.addEventListener('click', e => {
            if (e.target === overlay) overlay.remove();
        });


         document.body.appendChild(overlay);
         document.body.appendChild(overlay);
        setTimeout(() => overlay.classList.add('show'), 10);
     }
     }


     // ===== Функция для открытия overlay по ссылке на страницу файла =====
     // Перехватываем клики на обычные картинки (без MediaViewer)
    async function showFilePageOverlay(url) {
     document.body.addEventListener('click', function(e) {
        try {
            const res = await fetch(url);
            const html = await res.text();
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');
 
            const img = doc.querySelector('.fullMedia img');
            if (img && img.src) {
                // Добавляем изображение во временный массив для листания
                const tempIndex = images.length;
                images.push({src: img.src});
                showOverlay(tempIndex);
            } else {
                console.warn('Не удалось найти изображение на странице файла:', url);
            }
        } catch(err) {
            console.error('Ошибка при получении файла:', err);
        }
    }
 
    // ===== Перехват кликов =====
     document.body.addEventListener('click', e => {
         const target = e.target;
         const target = e.target;


         // Прямое изображение
         // Если картинка не часть MediaViewer overlay и нет ссылки на /w/images/
         if (target.tagName === 'IMG') {
         if (target.tagName === 'IMG' && !target.closest('.mediaViewerOverlay')) {
             const parentLink = target.closest('a[href*="/w/images/"]');
             const parentLink = target.closest('a[href*="/w/images/"]');
             if (!parentLink) {
             if (!parentLink) {
                 e.preventDefault();
                 e.preventDefault();
                 showOverlay(images.indexOf(target));
                 e.stopPropagation();
                showCustomOverlay(target.src);
             }
             }
         }
         }


         // Ссылка на страницу файла
         // Ссылки на файлы, где MediaViewer не срабатывает
         if (target.tagName === 'A' && target.href.includes('/w/index.php/File:')) {
         if (target.tagName === 'A' && target.href && target.href.includes('/w/images/')) {
            e.preventDefault();
            // проверка: если кликнули на миниатюру с MediaViewer, не блокируем
            showFilePageOverlay(target.href);
            if (!target.closest('.thumb')) {
                e.preventDefault();
                e.stopPropagation();
                showCustomOverlay(target.href);
            }
         }
         }
     });
     }, 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');
        closeBtn.innerText = 'Закрити';
        closeBtn.style.position = 'absolute';
        closeBtn.style.top = '20px';
        closeBtn.style.right = '20px';
        closeBtn.style.padding = '10px 20px';
        closeBtn.style.fontSize = '18px';
        closeBtn.style.cursor = 'pointer';
        closeBtn.style.background = '#f44336';
        closeBtn.style.color = 'white';
        closeBtn.style.border = 'none';
        closeBtn.style.borderRadius = '5px';
        closeBtn.addEventListener('click', () => {
            overlay.style.display = 'none';
        });
 
        overlay.appendChild(closeBtn);
    }
 
    // MutationObserver отслеживает появление overlay MediaViewer
    const observer = new MutationObserver(() => addCloseButtonToMediaViewer());
    observer.observe(document.body, { childList: true, subtree: true });


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