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

← Попереднє редагування Наступне редагування →

@@ Рядок 106: / Рядок 106: @@
 //OVERLAY
 (function() {
-     function addCloseButton() {
+    // Функция для создания кастомного overlay (только для обычных картинок без MediaViewer)
+     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;
+        const img = document.createElement('img');
+        img.src = url;
+        img.style.maxWidth = '90%';
+        img.style.maxHeight = '90%';
+        overlay.appendChild(img);
+        const closeBtn = document.createElement('button');
+        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());
+        overlay.appendChild(closeBtn);
+        document.body.appendChild(overlay);
+    }
+    // Перехватываем клики на обычные картинки (без MediaViewer)
+    document.body.addEventListener('click', function(e) {
+        const target = e.target;
+        // Если картинка не часть MediaViewer overlay и нет ссылки на /w/images/
+        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 (target.tagName === 'A' && target.href && target.href.includes('/w/images/')) {
+            // проверка: если кликнули на миниатюру с MediaViewer, не блокируем
+            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) return;
+         if (!overlay || overlay.dataset.closeBtnAdded) return;
+        overlay.dataset.closeBtnAdded = true;
-         // Проверяем, есть ли уже наша кнопка
+         const closeBtn = document.createElement('button');
-        if (!overlay.querySelector('.custom-close-btn')) {
+        closeBtn.innerText = 'Закрити';
-            const closeBtn = document.createElement('button');
+        closeBtn.style.position = 'absolute';
-            closeBtn.className = 'custom-close-btn';
+        closeBtn.style.top = '20px';
-            closeBtn.innerText = 'Закрити';
+        closeBtn.style.right = '20px';
-            closeBtn.style.position = 'absolute';
+        closeBtn.style.padding = '10px 20px';
-            closeBtn.style.top = '20px';
+        closeBtn.style.fontSize = '18px';
-            closeBtn.style.right = '20px';
+        closeBtn.style.cursor = 'pointer';
-            closeBtn.style.padding = '10px 20px';
+        closeBtn.style.background = '#f44336';
-            closeBtn.style.fontSize = '18px';
+        closeBtn.style.color = 'white';
-            closeBtn.style.cursor = 'pointer';
+        closeBtn.style.border = 'none';
-            closeBtn.style.background = '#f44336';
+        closeBtn.style.borderRadius = '5px';
-            closeBtn.style.color = 'white';
+        closeBtn.addEventListener('click', () => {
-            closeBtn.style.border = 'none';
+            overlay.style.display = 'none';
-            closeBtn.style.borderRadius = '5px';
+        });
-            closeBtn.addEventListener('click', () => {
-                overlay.style.display = 'none';
-            });
-            overlay.appendChild(closeBtn);
+        overlay.appendChild(closeBtn);
-        }
      }
-     // Проверяем каждые 100ms, если overlay появился и кнопки ещё нет
+     // MutationObserver отслеживает появление overlay MediaViewer
-     setInterval(addCloseButton, 100);
+    const observer = new MutationObserver(() => addCloseButtonToMediaViewer());
+     observer.observe(document.body, { childList: true, subtree: true });
 })();