darnytsa_hero

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

← Попереднє редагуванняНаступне редагування →
Немає опису редагування
Немає опису редагування
Рядок 139: Рядок 139:
         },
         },
          
          
         // Кнопка закриття (окремо для ×)
         // Кнопка закриття
         closeBtn: {
         closeBtn: {
             background: 'rgba(0,0,0,0.7)',
             background: 'rgba(0,0,0,0.7)',
Рядок 169: Рядок 169:
     const scaleStep = 0.25;
     const scaleStep = 0.25;


     // Заборонити лупу в MediaViewer
     // Повністю відключаємо стандартний MediaViewer
     function disableMediaViewerZoom() {
     function disableMediaViewerCompletely() {
         // Для стандартного MediaViewer
         // Видаляємо обробники кліків MediaViewer
         const mediaViewerImages = document.querySelectorAll('.mw-mmv-image img, .mediaViewerOverlay img');
         const mediaViewerLinks = document.querySelectorAll('a[href*="/wiki/File:"], a[href*="/w/images/"]');
         mediaViewerImages.forEach(img => {
         mediaViewerLinks.forEach(link => {
             img.style.cursor = 'default';
             link.removeAttribute('data-mw');
             img.style.transform = 'none';
            link.removeAttribute('data-mediatype');
             img.addEventListener('click', (e) => {
             link.removeAttribute('data-file');
                e.stopPropagation();
              
             });
            // Забороняємо MediaViewer обробляти кліки
            link.addEventListener('click', function(e) {
                const img = this.querySelector('img');
                if (img && shouldOpenInOverlay(img)) {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    showMediaViewerOverlay(img);
                    return false;
                }
             }, true);
         });
         });
          
          
         // Заборонити zoom по кліку в MediaViewer
         // Забороняємо MediaViewer для всіх посилань на зображення
         const mediaViewerOverlays = document.querySelectorAll('.mw-mmv-overlay, .mediaViewerOverlay');
         document.addEventListener('click', function(e) {
        mediaViewerOverlays.forEach(overlay => {
            const target = e.target.closest('a');
            overlay.addEventListener('click', (e) => {
            if (target && target.href && target.href.match(/\/wiki\/File:|\.(jpg|jpeg|png|gif|webp)(\?|$)/i)) {
                 if (e.target.tagName === 'IMG') {
                const img = target.querySelector('img');
                     e.stopPropagation();
                 if (img && shouldOpenInOverlay(img)) {
                    e.preventDefault();
                     e.stopImmediatePropagation();
                    showMediaViewerOverlay(img);
                 }
                 }
             });
             }
         });
         }, true);
     }
     }


Рядок 209: Рядок 221:
             opacity: 0;
             opacity: 0;
             transition: opacity ${config.animationDuration} ease;
             transition: opacity ${config.animationDuration} ease;
            cursor: default;
         `;
         `;


Рядок 264: Рядок 277:
             border-radius: 8px;
             border-radius: 8px;
             box-shadow: 0 10px 30px rgba(0,0,0,0.5);
             box-shadow: 0 10px 30px rgba(0,0,0,0.5);
             cursor: default !important; // Заборона лупи
             cursor: default !important;
             transition: transform 0.3s ease;
             transition: transform 0.3s ease;
         `;
         `;


         // Заборонити zoom по кліку на зображення
         // Забороняємо кліки на зображення
         img.addEventListener('click', (e) => {
         img.addEventListener('click', (e) => {
             e.stopPropagation();
             e.stopPropagation();
Рядок 287: Рядок 300:
             gap: 10px;
             gap: 10px;
             margin-top: 10px;
             margin-top: 10px;
            background: rgba(0,0,0,0.5);
            padding: 10px;
            border-radius: 8px;
         `;
         `;


Рядок 293: Рядок 309:
         const resetZoomBtn = createToolButton('1:1', 'Скинути масштаб (Ctrl + 0)');
         const resetZoomBtn = createToolButton('1:1', 'Скинути масштаб (Ctrl + 0)');
         const zoomInBtn = createToolButton('+', 'Збільшити (Ctrl + +)');
         const zoomInBtn = createToolButton('+', 'Збільшити (Ctrl + +)');
        const infoBtn = createToolButton('i', 'Інформація (I)');


         // Панель інформації
         // Панель інформації
Рядок 318: Рядок 335:
         buttonPanel.appendChild(resetZoomBtn);
         buttonPanel.appendChild(resetZoomBtn);
         buttonPanel.appendChild(zoomInBtn);
         buttonPanel.appendChild(zoomInBtn);
        buttonPanel.appendChild(infoBtn);
          
          
         contentContainer.appendChild(closeBtn);
         contentContainer.appendChild(closeBtn);
Рядок 388: Рядок 406:
                 img.style.transform = 'scale(1)';
                 img.style.transform = 'scale(1)';
                 updateZoomButtons();
                 updateZoomButtons();
            });
            // Інформація
            infoBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                toggleInfoPanel();
             });
             });


             // Клавіатура
             // Клавіатура
             document.addEventListener('keydown', function keyHandler(e) {
             const keyHandler = (e) => {
                 if (!currentOverlay) return;
                 if (!currentOverlay) return;
                  
                  
Рядок 430: Рядок 454:
                         }
                         }
                         break;
                         break;
                }
            };
            document.addEventListener('keydown', keyHandler);
            // Видаляємо обробник при закритті
            overlay.addEventListener('click', function handler() {
                if (overlay.style.display === 'none') {
                    document.removeEventListener('keydown', keyHandler);
                    overlay.removeEventListener('click', handler);
                 }
                 }
             });
             });


             // Hover ефекти
             // Hover ефекти
             [closeBtn, prevBtn, nextBtn, zoomInBtn, zoomOutBtn, resetZoomBtn].forEach(btn => {
             [closeBtn, prevBtn, nextBtn, zoomInBtn, zoomOutBtn, resetZoomBtn, infoBtn].forEach(btn => {
                 btn.addEventListener('mouseenter', () => {
                 btn.addEventListener('mouseenter', () => {
                     if (!btn.disabled) {
                     if (!btn.disabled) {
Рядок 449: Рядок 483:


         setupEventListeners();
         setupEventListeners();
        updateZoomButtons();


         return {  
         return {  
Рядок 459: Рядок 494:
             zoomOutBtn,
             zoomOutBtn,
             resetZoomBtn,
             resetZoomBtn,
            infoBtn,
             updateZoomButtons
             updateZoomButtons
         };
         };
Рядок 495: Рядок 531:
         btn.title = title;
         btn.title = title;
         btn.style.cssText = `
         btn.style.cssText = `
             width: ${config.buttons.size};
             min-width: ${config.buttons.size};
             height: ${config.buttons.size};
             height: ${config.buttons.size};
             background: ${config.buttons.background};
             background: ${config.buttons.background};
Рядок 507: Рядок 543:
             justify-content: center;
             justify-content: center;
             transition: all 0.2s ease;
             transition: all 0.2s ease;
            padding: 0 10px;
         `;
         `;
         return btn;
         return btn;
Рядок 569: Рядок 606:
     // Показ оверлею
     // Показ оверлею
     function showMediaViewerOverlay(imageElement) {
     function showMediaViewerOverlay(imageElement) {
        // Запобігаємо відкриттю стандартного MediaViewer
        if (imageElement.closest('a')) {
            const link = imageElement.closest('a');
            if (link.href && link.href.includes('/wiki/File:')) {
                // Блокуємо стандартний MediaViewer
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                }, true);
            }
        }
         if (!currentOverlay) {
         if (!currentOverlay) {
             currentOverlay = createMediaViewerStyleOverlay();
             currentOverlay = createMediaViewerStyleOverlay();
Рядок 618: Рядок 667:
     }
     }


     // Обробник кліків
     // Обробник кліків - ПОВНІСТЮ заміняємо MediaViewer
     document.addEventListener('click', function(e) {
     document.addEventListener('click', function(e) {
         const target = e.target;
         const target = e.target;
Рядок 626: Рядок 675:
         }
         }


        // Клік на картинку
         if (target.tagName === 'IMG' && shouldOpenInOverlay(target)) {
         if (target.tagName === 'IMG' && shouldOpenInOverlay(target)) {
             e.preventDefault();
             e.preventDefault();
             e.stopPropagation();
             e.stopImmediatePropagation();
             showMediaViewerOverlay(target);
             showMediaViewerOverlay(target);
            return false;
         }
         }


         if (target.tagName === 'A' && target.href && target.href.match(/\.(jpg|jpeg|png|gif|webp)(\?|$)/i)) {
        // Клік на посилання з зображенням
         if (target.tagName === 'A' && target.href &&  
            (target.href.match(/\/wiki\/File:|\.(jpg|jpeg|png|gif|webp)(\?|$)/i))) {
             const img = target.querySelector('img');
             const img = target.querySelector('img');
             if (img && shouldOpenInOverlay(img)) {
             if (img && shouldOpenInOverlay(img)) {
                 e.preventDefault();
                 e.preventDefault();
                 e.stopPropagation();
                 e.stopImmediatePropagation();
                 showMediaViewerOverlay(img);
                 showMediaViewerOverlay(img);
                return false;
             }
             }
         }
         }
     });
     }, true); // Використовуємо capture phase для пріоритету


     // Функція додавання кнопки "Закрити" до MediaViewer overlay
     // Повністю відключаємо MediaViewer при завантаженні
     function addCloseButtonToMediaViewer() {
     document.addEventListener('DOMContentLoaded', disableMediaViewerCompletely);
        const overlay = document.querySelector('.mediaViewerOverlay, .mwe-popups');
    setTimeout(disableMediaViewerCompletely, 100);
        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 = '16px';
        closeBtn.style.cursor = 'pointer';
        closeBtn.style.background = '#f44336';
        closeBtn.style.color = 'white';
        closeBtn.style.border = 'none';
        closeBtn.style.borderRadius = '5px';
        closeBtn.style.zIndex = '10001';
       
        closeBtn.addEventListener('click', () => {
            overlay.style.display = 'none';
        });
 
        overlay.appendChild(closeBtn);
       
        // Заборонити лупу в MediaViewer
        disableMediaViewerZoom();
    }
 
    // MutationObserver для MediaViewer
    const observer = new MutationObserver((mutations) => {
        for (let mutation of mutations) {
            if (mutation.type === 'childList') {
                for (let node of mutation.addedNodes) {
                    if (node.nodeType === 1) {
                        if (node.classList &&
                            (node.classList.contains('mediaViewerOverlay') ||
                            node.classList.contains('mwe-popups') ||
                            node.classList.contains('mw-mmv-overlay'))) {
                            setTimeout(() => {
                                addCloseButtonToMediaViewer();
                                disableMediaViewerZoom();
                            }, 100);
                        }
                    }
                }
            }
        }
    });
   
    observer.observe(document.body, { childList: true, subtree: true });
 
    // Також заборонити лупу при завантаженні сторінки
    document.addEventListener('DOMContentLoaded', disableMediaViewerZoom);
    setTimeout(disableMediaViewerZoom, 1000);
 
     // Стилі з забороною лупи
     const style = document.createElement('style');
     const style = document.createElement('style');
     style.textContent = `
     style.textContent = `
Рядок 721: Рядок 722:
         }
         }
          
          
         /* Заборонити лупу в MediaViewer */
         /* Повністю ховаємо стандартний MediaViewer */
        .mw-mmv-image img,
         .mw-mmv-overlay,
        .mediaViewerOverlay img,
         .mediaViewerOverlay {
         .mw-mmv-overlay img {
             display: none !important;
            cursor: default !important;
        }
       
        .mw-mmv-image:hover img,
         .mediaViewerOverlay:hover img {
             cursor: default !important;
            transform: none !important;
         }
         }
          
          
         @media (max-width: 768px) {
         @media (max-width: 768px) {
             .custom-media-viewer button {
             .custom-media-viewer button {
                 width: 35px !important;
                 min-width: 35px !important;
                 height: 35px !important;
                 height: 35px !important;
                 font-size: 16px !important;
                 font-size: 16px !important;
                padding: 0 8px !important;
             }
             }
              
              
Отримано з https://darnytsa.hero.kyivcity.gov.ua/w/index.php/MediaWiki:Common.js