darnytsa_hero

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

← Попереднє редагуванняНаступне редагування →
Немає опису редагування
Немає опису редагування
Рядок 116: Рядок 116:
         // Стиль зображення
         // Стиль зображення
         imageMaxWidth: '90vw',
         imageMaxWidth: '90vw',
         imageMaxHeight: '80vh', // Зменшимо для місця під кнопки
         imageMaxHeight: '80vh',
          
          
         // Панель інформації
         // Панель інформації
Рядок 137: Рядок 137:
             borderRadius: '5px',
             borderRadius: '5px',
             margin: '5px'
             margin: '5px'
        },
       
        // Кнопка закриття (окремо для ×)
        closeBtn: {
            background: 'rgba(0,0,0,0.7)',
            color: '#fff',
            size: '40px',
            fontSize: '20px',
            top: '20px',
            right: '20px'
         },
         },
          
          
Рядок 189: Рядок 199:
         `;
         `;


         // Верхня панель з кнопкою закриття
         // Верхня панель з кнопкою закриття ×
         const topPanel = document.createElement('div');
         const topPanel = document.createElement('div');
         topPanel.style.cssText = `
         topPanel.style.cssText = `
Рядок 202: Рядок 212:
         closeBtn.title = 'Закрити (Esc)';
         closeBtn.title = 'Закрити (Esc)';
         closeBtn.style.cssText = `
         closeBtn.style.cssText = `
             width: ${config.buttons.size};
             width: ${config.closeBtn.size};
             height: ${config.buttons.size};
             height: ${config.closeBtn.size};
             background: ${config.buttons.background};
             background: ${config.closeBtn.background};
             color: ${config.buttons.color};
             color: ${config.closeBtn.color};
             border: none;
             border: none;
             border-radius: 50%;
             border-radius: 50%;
             font-size: 20px;
             font-size: ${config.closeBtn.fontSize};
             cursor: pointer;
             cursor: pointer;
             display: flex;
             display: flex;
Рядок 214: Рядок 224:
             justify-content: center;
             justify-content: center;
             transition: all 0.2s ease;
             transition: all 0.2s ease;
            position: absolute;
            top: ${config.closeBtn.top};
            right: ${config.closeBtn.right};
            z-index: 10001;
         `;
         `;


Рядок 245: Рядок 259:
         nextBtn.style.right = '15px';
         nextBtn.style.right = '15px';


         // Панель кнопок під зображенням
         // Панель кнопок під зображенням - ТОЛЬКО + - 1:1
         const buttonPanel = document.createElement('div');
         const buttonPanel = document.createElement('div');
         buttonPanel.style.cssText = `
         buttonPanel.style.cssText = `
Рядок 255: Рядок 269:
         `;
         `;


         // Кнопки масштабування
         // Кнопки масштабування - ТОЛЬКО + - 1:1
         const zoomOutBtn = createToolButton('−', 'Зменшити (Ctrl + -)');
         const zoomOutBtn = createToolButton('−', 'Зменшити (Ctrl + -)');
         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)');


         // Панель інформації
         // Панель інформації
Рядок 280: Рядок 291:


         // Збірка інтерфейсу
         // Збірка інтерфейсу
        topPanel.appendChild(closeBtn);
       
         imageContainer.appendChild(img);
         imageContainer.appendChild(img);
         imageContainer.appendChild(prevBtn);
         imageContainer.appendChild(prevBtn);
Рядок 289: Рядок 298:
         buttonPanel.appendChild(resetZoomBtn);
         buttonPanel.appendChild(resetZoomBtn);
         buttonPanel.appendChild(zoomInBtn);
         buttonPanel.appendChild(zoomInBtn);
        buttonPanel.appendChild(infoBtn);
          
          
         contentContainer.appendChild(topPanel);
         contentContainer.appendChild(closeBtn); // × справа сверху
         contentContainer.appendChild(imageContainer);
         contentContainer.appendChild(imageContainer);
         contentContainer.appendChild(buttonPanel);
         contentContainer.appendChild(buttonPanel);
Рядок 298: Рядок 306:
         overlay.appendChild(contentContainer);
         overlay.appendChild(contentContainer);
         document.body.appendChild(overlay);
         document.body.appendChild(overlay);
        // Функції масштабування
        function zoomImage(scale) {
            currentScale = Math.max(minScale, Math.min(maxScale, scale));
            img.style.transform = `scale(${currentScale})`;
            updateZoomButtons();
        }
        function updateZoomButtons() {
            zoomInBtn.disabled = currentScale >= maxScale;
            zoomOutBtn.disabled = currentScale <= minScale;
           
            zoomInBtn.style.opacity = zoomInBtn.disabled ? '0.5' : '1';
            zoomOutBtn.style.opacity = zoomOutBtn.disabled ? '0.5' : '1';
        }


         // Обробники подій
         // Обробники подій
Рядок 345: Рядок 368:
                 img.style.transform = 'scale(1)';
                 img.style.transform = 'scale(1)';
                 updateZoomButtons();
                 updateZoomButtons();
            });
            // Інформація
            infoBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                toggleInfoPanel();
             });
             });


Рядок 397: Рядок 414:


             // Hover ефекти
             // Hover ефекти
             [closeBtn, prevBtn, nextBtn, zoomInBtn, zoomOutBtn, resetZoomBtn, infoBtn].forEach(btn => {
             [closeBtn, prevBtn, nextBtn, zoomInBtn, zoomOutBtn, resetZoomBtn].forEach(btn => {
                 btn.addEventListener('mouseenter', () => {
                 btn.addEventListener('mouseenter', () => {
                     if (!btn.disabled) {
                     if (!btn.disabled) {
Рядок 409: Рядок 426:
                 });
                 });
             });
             });
        }
        // Функції масштабування
        function zoomImage(scale) {
            currentScale = Math.max(minScale, Math.min(maxScale, scale));
            img.style.transform = `scale(${currentScale})`;
            updateZoomButtons();
        }
        function updateZoomButtons() {
            zoomInBtn.disabled = currentScale >= maxScale;
            zoomOutBtn.disabled = currentScale <= minScale;
           
            zoomInBtn.style.opacity = zoomInBtn.disabled ? '0.5' : '1';
            zoomOutBtn.style.opacity = zoomOutBtn.disabled ? '0.5' : '1';
         }
         }


Рядок 437: Рядок 439:
             zoomOutBtn,
             zoomOutBtn,
             resetZoomBtn,
             resetZoomBtn,
             infoBtn
             updateZoomButtons
         };
         };
     }
     }
Рядок 523: Рядок 525:
             }));
             }));
          
          
        // Знаходимо індекс поточного зображення
         currentImageIndex = images.findIndex(img => img.src === clickedImage.src);
         currentImageIndex = images.findIndex(img => img.src === clickedImage.src);
         return images;
         return images;
Рядок 539: Рядок 540:
         }
         }


        // Пропускаємо зображення з галерей
         if (element.closest('.gallery, .thumb, .mw-gallery')) {
         if (element.closest('.gallery, .thumb, .mw-gallery')) {
             return false;
             return false;
Рядок 553: Рядок 553:
         }
         }


        // Збираємо всі зображення для галереї
         imagesInGallery = collectAllImages(imageElement);
         imagesInGallery = collectAllImages(imageElement);
          
          
Рядок 560: Рядок 559:
         showImage(imagesInGallery[currentImageIndex]);
         showImage(imagesInGallery[currentImageIndex]);
          
          
        // Показуємо оверлей з анімацією
         currentOverlay.overlay.style.display = 'flex';
         currentOverlay.overlay.style.display = 'flex';
         setTimeout(() => {
         setTimeout(() => {
Рядок 566: Рядок 564:
         }, 10);
         }, 10);
          
          
        // Блокуємо прокрутку
         document.body.style.overflow = 'hidden';
         document.body.style.overflow = 'hidden';
          
          
        // Показуємо/ховаємо кнопки навігації
         currentOverlay.prevBtn.style.display = imagesInGallery.length > 1 ? 'flex' : 'none';
         currentOverlay.prevBtn.style.display = imagesInGallery.length > 1 ? 'flex' : 'none';
         currentOverlay.nextBtn.style.display = imagesInGallery.length > 1 ? 'flex' : 'none';
         currentOverlay.nextBtn.style.display = imagesInGallery.length > 1 ? 'flex' : 'none';
          
          
        // Оновлюємо кнопки масштабування
         currentScale = 1;
         currentScale = 1;
         currentOverlay.img.style.transform = 'scale(1)';
         currentOverlay.img.style.transform = 'scale(1)';
Рядок 588: Рядок 583:
         currentOverlay.img.alt = imageData.alt;
         currentOverlay.img.alt = imageData.alt;
          
          
        // Оновлюємо інформацію
         currentOverlay.infoPanel.innerHTML = `
         currentOverlay.infoPanel.innerHTML = `
             <div><strong>${imageData.alt}</strong></div>
             <div><strong>${imageData.alt}</strong></div>
Рядок 597: Рядок 591:
         `;
         `;
          
          
        // Скидаємо масштаб для нового зображення
         currentScale = 1;
         currentScale = 1;
         currentOverlay.img.style.transform = 'scale(1)';
         currentOverlay.img.style.transform = 'scale(1)';
Рядок 609: Рядок 602:
         const target = e.target;
         const target = e.target;


        // Пропускаємо кліки всередині оверлею
         if (target.closest('.custom-media-viewer')) {
         if (target.closest('.custom-media-viewer')) {
             return;
             return;
         }
         }


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


        // Клік на посилання з зображенням
         if (target.tagName === 'A' && target.href && target.href.match(/\.(jpg|jpeg|png|gif|webp)(\?|$)/i)) {
         if (target.tagName === 'A' && target.href && target.href.match(/\.(jpg|jpeg|png|gif|webp)(\?|$)/i)) {
             const img = target.querySelector('img');
             const img = target.querySelector('img');
Рядок 659: Рядок 649:
     }
     }


     // MutationObserver відстежує появу overlay MediaViewer
     // MutationObserver для MediaViewer
     const observer = new MutationObserver(() => addCloseButtonToMediaViewer());
     const observer = new MutationObserver(() => addCloseButtonToMediaViewer());
     observer.observe(document.body, { childList: true, subtree: true });
     observer.observe(document.body, { childList: true, subtree: true });


     // Стилі для поліпшення зовнішнього вигляду
     // Стилі
     const style = document.createElement('style');
     const style = document.createElement('style');
     style.textContent = `
     style.textContent = `
Рядок 698: Рядок 688:
     `;
     `;
     document.head.appendChild(style);
     document.head.appendChild(style);
    console.log('Custom MediaViewer loaded successfully');


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