darnytsa_hero

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

← Попереднє редагуванняНаступне редагування →
Немає опису редагування
Мітка: Ручний відкіт
Немає опису редагування
Мітка: Скасовано
Рядок 105: Рядок 105:


//OVERLAY  
//OVERLAY  
(function() {
(function() {
     // Функция для создания кастомного overlay (только для обычных картинок без MediaViewer)
     // ====== CSS для overlay ======
     function showCustomOverlay(url) {
     const style = document.createElement('style');
        const overlay = document.createElement('div');
    style.innerHTML = `
        overlay.style.position = 'fixed';
    .custom-overlay {
         overlay.style.top = 0;
        position: fixed;
        overlay.style.left = 0;
         top:0; left:0;
         overlay.style.width = '100%';
         width:100%; height:100%;
        overlay.style.height = '100%';
         background: rgba(0,0,0,0.85);
         overlay.style.background = 'rgba(0,0,0,0.85)';
         display: flex;
         overlay.style.display = 'flex';
        justify-content: center;
         overlay.style.justifyContent = 'center';
        align-items: center;
         overlay.style.alignItems = 'center';
        flex-direction: column;
         overlay.style.flexDirection = 'column';
        z-index: 9999;
         overlay.style.zIndex = 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 currentIndex = 0;
    let overlay, imgElement;
 
    // ====== Функция показа overlay ======
    function showOverlay(index) {
         currentIndex = index;
         const url = images[currentIndex].src;


         const img = document.createElement('img');
         // Если overlay уже существует — просто меняем изображение
        img.src = url;
        if (!overlay) {
        img.style.maxWidth = '90%';
            overlay = document.createElement('div');
        img.style.maxHeight = '90%';
            overlay.className = 'custom-overlay';
        overlay.appendChild(img);


        const closeBtn = document.createElement('button');
            imgElement = document.createElement('img');
        closeBtn.innerText = 'Закрити';
            overlay.appendChild(imgElement);
        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());
        overlay.appendChild(closeBtn);


        document.body.appendChild(overlay);
            // Кнопка Закрити
    }
            const closeBtn = document.createElement('button');
            closeBtn.innerText = '✕ Закрити';
            closeBtn.addEventListener('click', () => overlay.remove());
            overlay.appendChild(closeBtn);


    // Перехватываем клики на обычные картинки (без MediaViewer)
            // Кнопки навигации
    document.body.addEventListener('click', function(e) {
            const navDiv = document.createElement('div');
        const target = e.target;
            navDiv.className = 'nav-buttons';


        // Если картинка не часть MediaViewer overlay и нет ссылки на /w/images/
            const prevBtn = document.createElement('button');
        if (target.tagName === 'IMG' && !target.closest('.mediaViewerOverlay')) {
             prevBtn.innerText = '← Назад';
             const parentLink = target.closest('a[href*="/w/images/"]');
             prevBtn.addEventListener('click', (e) => {
             if (!parentLink) {
                e.preventDefault();
                 e.stopPropagation();
                 e.stopPropagation();
                 showCustomOverlay(target.src);
                 currentIndex = (currentIndex - 1 + images.length) % images.length;
             }
                imgElement.src = images[currentIndex].src;
        }
             });


        // Ссылки на файлы, где MediaViewer не срабатывает
            const nextBtn = document.createElement('button');
        if (target.tagName === 'A' && target.href && target.href.includes('/w/images/')) {
             nextBtn.innerText = 'Вперед →';
             // проверка: если кликнули на миниатюру с MediaViewer, не блокируем
             nextBtn.addEventListener('click', (e) => {
             if (!target.closest('.thumb')) {
                e.preventDefault();
                 e.stopPropagation();
                 e.stopPropagation();
                 showCustomOverlay(target.href);
                 currentIndex = (currentIndex + 1) % images.length;
             }
                imgElement.src = images[currentIndex].src;
        }
            });
    }, true);
 
             navDiv.appendChild(prevBtn);
            navDiv.appendChild(nextBtn);
            overlay.appendChild(navDiv);


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


        const closeBtn = document.createElement('button');
            document.body.appendChild(overlay);
        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);
        imgElement.src = url;
         overlay.classList.add('show');
     }
     }


     // MutationObserver отслеживает появление overlay MediaViewer
     // ====== Перехват кликов на изображения ======
     const observer = new MutationObserver(() => addCloseButtonToMediaViewer());
     document.body.addEventListener('click', e => {
    observer.observe(document.body, { childList: true, subtree: true });
        const target = e.target;
        if (target.tagName === 'IMG') {
            const parentLink = target.closest('a[href*="/w/images/"]');
            if (!parentLink) {
                e.preventDefault();
                showOverlay(images.indexOf(target));
            }
        }
    });


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