darnytsa_hero

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

← Попереднє редагуванняНаступне редагування →
Немає опису редагування
Немає опису редагування
Рядок 171: Рядок 171:
     // Повністю відключаємо стандартний MediaViewer
     // Повністю відключаємо стандартний MediaViewer
     function disableMediaViewerCompletely() {
     function disableMediaViewerCompletely() {
        // Видаляємо обробники кліків MediaViewer
         const mediaViewerLinks = document.querySelectorAll('a[href*="/wiki/File:"], a[href*="/w/images/"]');
         const mediaViewerLinks = document.querySelectorAll('a[href*="/wiki/File:"], a[href*="/w/images/"]');
         mediaViewerLinks.forEach(link => {
         mediaViewerLinks.forEach(link => {
Рядок 178: Рядок 177:
             link.removeAttribute('data-file');
             link.removeAttribute('data-file');
              
              
            // Забороняємо MediaViewer обробляти кліки
             link.addEventListener('click', function(e) {
             link.addEventListener('click', function(e) {
                 const img = this.querySelector('img');
                 const img = this.querySelector('img');
Рядок 189: Рядок 187:
             }, true);
             }, true);
         });
         });
       
        // Забороняємо MediaViewer для всіх посилань на зображення
        document.addEventListener('click', function(e) {
            const target = e.target.closest('a');
            if (target && target.href && target.href.match(/\/wiki\/File:|\.(jpg|jpeg|png|gif|webp)(\?|$)/i)) {
                const img = target.querySelector('img');
                if (img && shouldOpenInOverlay(img)) {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    showMediaViewerOverlay(img);
                }
            }
        }, true);
     }
     }


Рядок 224: Рядок 209:
         `;
         `;


         // Контейнер для всього вмісту
         // Основний контейнер, який центрує все
         const contentContainer = document.createElement('div');
         const mainContainer = document.createElement('div');
         contentContainer.style.cssText = `
         mainContainer.style.cssText = `
             position: relative;
             position: relative;
            max-width: 95vw;
            max-height: 95vh;
             display: flex;
             display: flex;
             flex-direction: column;
             flex-direction: column;
             align-items: center;
             align-items: center;
            justify-content: center;
            max-width: 95vw;
            max-height: 95vh;
         `;
         `;


Рядок 258: Рядок 244:
         `;
         `;


         // Контейнер для зображення
         // Контейнер для зображення та кнопок навігації
         const imageContainer = document.createElement('div');
         const imageContainer = document.createElement('div');
         imageContainer.style.cssText = `
         imageContainer.style.cssText = `
             position: relative;
             position: relative;
             display: flex;
             display: inline-block;
            justify-content: center;
            align-items: center;
             max-width: ${config.imageMaxWidth};
             max-width: ${config.imageMaxWidth};
             max-height: ${config.imageMaxHeight};
             max-height: ${config.imageMaxHeight};
            margin-bottom: 15px;
         `;
         `;


Рядок 279: Рядок 262:
             cursor: default !important;
             cursor: default !important;
             transition: transform 0.3s ease;
             transition: transform 0.3s ease;
            display: block;
         `;
         `;


         // Забороняємо кліки на зображення
         // Кнопки навігації (зліва/справа від зображення)
        img.addEventListener('click', (e) => {
            e.stopPropagation();
        });
 
        // Кнопки навігації
         const prevBtn = createNavButton('‹', 'Попереднє зображення (←)');
         const prevBtn = createNavButton('‹', 'Попереднє зображення (←)');
         const nextBtn = createNavButton('›', 'Наступне зображення (→)');
         const nextBtn = createNavButton('›', 'Наступне зображення (→)');
         prevBtn.style.left = '15px';
         prevBtn.style.cssText += 'left: 15px;';
         nextBtn.style.right = '15px';
         nextBtn.style.cssText += 'right: 15px;';


         // Панель кнопок під зображенням
         // Контейнер для кнопок масштабування - ФІКСОВАНИЙ під зображенням
         const buttonPanel = document.createElement('div');
         const buttonPanel = document.createElement('div');
         buttonPanel.style.cssText = `
         buttonPanel.style.cssText = `
            position: absolute;
            bottom: -60px;
            left: 50%;
            transform: translateX(-50%);
             display: flex;
             display: flex;
             justify-content: center;
             justify-content: center;
             align-items: center;
             align-items: center;
             gap: 10px;
             gap: 8px;
            margin-top: 10px;
             background: rgba(0,0,0,0.7);
             background: rgba(0,0,0,0.5);
             padding: 8px 12px;
             padding: 10px;
             border-radius: 8px;
             border-radius: 8px;
            z-index: 10001;
            min-width: 200px;
         `;
         `;


Рядок 319: Рядок 303:
             padding: ${config.infoPanel.padding};
             padding: ${config.infoPanel.padding};
             border-radius: ${config.infoPanel.borderRadius};
             border-radius: ${config.infoPanel.borderRadius};
             margin-top: 15px;
             margin-top: 80px;
             max-width: ${config.infoPanel.maxWidth};
             max-width: ${config.infoPanel.maxWidth};
             width: 100%;
             width: 100%;
Рядок 331: Рядок 315:
         imageContainer.appendChild(prevBtn);
         imageContainer.appendChild(prevBtn);
         imageContainer.appendChild(nextBtn);
         imageContainer.appendChild(nextBtn);
        imageContainer.appendChild(buttonPanel);
          
          
         buttonPanel.appendChild(zoomOutBtn);
         buttonPanel.appendChild(zoomOutBtn);
Рядок 337: Рядок 322:
         buttonPanel.appendChild(infoBtn);
         buttonPanel.appendChild(infoBtn);
          
          
         contentContainer.appendChild(closeBtn);
         mainContainer.appendChild(closeBtn);
         contentContainer.appendChild(imageContainer);
         mainContainer.appendChild(imageContainer);
         contentContainer.appendChild(buttonPanel);
         mainContainer.appendChild(infoPanel);
        contentContainer.appendChild(infoPanel);
          
          
         overlay.appendChild(contentContainer);
         overlay.appendChild(mainContainer);
         document.body.appendChild(overlay);
         document.body.appendChild(overlay);


Рядок 495: Рядок 479:
             resetZoomBtn,
             resetZoomBtn,
             infoBtn,
             infoBtn,
            buttonPanel,
             updateZoomButtons
             updateZoomButtons
         };
         };
Рядок 606: Рядок 591:
     // Показ оверлею
     // Показ оверлею
     function showMediaViewerOverlay(imageElement) {
     function showMediaViewerOverlay(imageElement) {
        // Запобігаємо відкриттю стандартного MediaViewer
         if (imageElement.closest('a')) {
         if (imageElement.closest('a')) {
             const link = imageElement.closest('a');
             const link = imageElement.closest('a');
             if (link.href && link.href.includes('/wiki/File:')) {
             if (link.href && link.href.includes('/wiki/File:')) {
                // Блокуємо стандартний MediaViewer
                 link.addEventListener('click', function(e) {
                 link.addEventListener('click', function(e) {
                     e.preventDefault();
                     e.preventDefault();
Рядок 667: Рядок 650:
     }
     }


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


        // Клік на картинку
         if (target.tagName === 'IMG' && shouldOpenInOverlay(target)) {
         if (target.tagName === 'IMG' && shouldOpenInOverlay(target)) {
             e.preventDefault();
             e.preventDefault();
Рядок 683: Рядок 665:
         }
         }


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


     // Повністю відключаємо MediaViewer при завантаженні
     // Повністю відключаємо MediaViewer при завантаженні
Рядок 720: Рядок 701:
             transition: transform 0.3s ease !important;
             transition: transform 0.3s ease !important;
             cursor: default !important;
             cursor: default !important;
        }
       
        /* Панель кнопок масштабування */
        .custom-media-viewer .zoom-controls {
            position: absolute;
            bottom: -60px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0,0,0,0.8);
            padding: 10px;
            border-radius: 8px;
            z-index: 10001;
         }
         }
          
          
Рядок 739: Рядок 732:
                 font-size: 12px !important;
                 font-size: 12px !important;
                 padding: 10px !important;
                 padding: 10px !important;
                margin-top: 60px !important;
            }
           
            .custom-media-viewer .zoom-controls {
                bottom: -50px !important;
                padding: 6px !important;
            }
        }
       
        @media (max-width: 480px) {
            .custom-media-viewer button {
                min-width: 30px !important;
                height: 30px !important;
                font-size: 14px !important;
                padding: 0 6px !important;
             }
             }
         }
         }
Отримано з https://darnytsa.hero.kyivcity.gov.ua/w/index.php/MediaWiki:Common.js