Немає опису редагування
Немає опису редагування
Рядок 103: Рядок 103:
});
});


// Для всех полноразмерных изображений


//OVERLAY
(function() {
(function() {
     // Функция для создания overlay с кнопкой закрыть
     // =========================
     function showOverlay(url) {
    // 1. Функция для создания overlay с кнопкой Закрити
        // Создаём overlay
    // =========================
     function showCustomOverlay(url) {
         const overlay = document.createElement('div');
         const overlay = document.createElement('div');
         overlay.style.position = 'fixed';
         overlay.style.position = 'fixed';
Рядок 122: Рядок 123:
         overlay.style.zIndex = 9999;
         overlay.style.zIndex = 9999;


        // Картинка
         const img = document.createElement('img');
         const img = document.createElement('img');
         img.src = url;
         img.src = url;
Рядок 129: Рядок 129:
         overlay.appendChild(img);
         overlay.appendChild(img);


        // Кнопка закрыть
         const closeBtn = document.createElement('button');
         const closeBtn = document.createElement('button');
         closeBtn.innerText = 'Закрыть';
         closeBtn.innerText = 'Закрити';
         closeBtn.style.marginTop = '20px';
         closeBtn.style.marginTop = '20px';
         closeBtn.style.padding = '10px 20px';
         closeBtn.style.padding = '10px 20px';
Рядок 146: Рядок 145:
     }
     }


     // Перехватываем клики на все <img>
     // =========================
    // 2. Перехват кликов на обычные <img> и ссылки на файлы
    // =========================
     document.body.addEventListener('click', function(e) {
     document.body.addEventListener('click', function(e) {
         const target = e.target;
         const target = e.target;
         if (target.tagName === 'IMG') {
 
        // Обычные картинки
         if (target.tagName === 'IMG' && !target.closest('.mediaViewerOverlay')) {
             e.preventDefault();
             e.preventDefault();
             e.stopPropagation();
             e.stopPropagation();
             showOverlay(target.src);
             showCustomOverlay(target.src);
         }
         }


         // Перехватываем клики на ссылки к файлам MediaWiki
         // Ссылки на файлы MediaWiki
         if (target.tagName === 'A' && target.href && target.href.includes('/w/images/')) {
         if (target.tagName === 'A' && target.href && target.href.includes('/w/images/')) {
             e.preventDefault();
             e.preventDefault();
             e.stopPropagation();
             e.stopPropagation();
             showOverlay(target.href);
             showCustomOverlay(target.href);
         }
         }
     }, true); // Используем capture, чтобы ловить раньше стандартного обработчика
     }, true);
 
    // =========================
    // 3. Добавление кнопки Закрити к overlay MediaViewer
    // =========================
    function addCloseButtonToMediaViewer() {
        // Находим overlay MediaViewer
        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);
    }
 
    // =========================
    // 4. MutationObserver для MediaViewer overlay
    // =========================
    const observer = new MutationObserver(() => addCloseButtonToMediaViewer());
    observer.observe(document.body, { childList: true, subtree: true });
 
})();
})();