darnytsa_hero

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

← Попереднє редагуванняНаступне редагування →
Немає опису редагування
Немає опису редагування
Рядок 209: Рядок 209:
         `;
         `;


         // Основний контейнер, який центрує все
         // Головний контейнер
         const mainContainer = document.createElement('div');
         const mainContainer = document.createElement('div');
         mainContainer.style.cssText = `
         mainContainer.style.cssText = `
Рядок 216: Рядок 216:
             flex-direction: column;
             flex-direction: column;
             align-items: center;
             align-items: center;
            justify-content: center;
             max-width: 95vw;
             max-width: 95vw;
             max-height: 95vh;
             max-height: 95vh;
Рядок 244: Рядок 243:
         `;
         `;


         // Контейнер для зображення та кнопок навігації
         // Основний контейнер для зображення та кнопок
         const imageContainer = document.createElement('div');
         const imageAndControlsContainer = document.createElement('div');
         imageContainer.style.cssText = `
         imageAndControlsContainer.style.cssText = `
             position: relative;
             position: relative;
             display: inline-block;
             display: inline-block;
             max-width: ${config.imageMaxWidth};
             max-width: ${config.imageMaxWidth};
             max-height: ${config.imageMaxHeight};
             max-height: ${config.imageMaxHeight};
            margin-bottom: 10px;
        `;
        // Контейнер для зображення
        const imageContainer = document.createElement('div');
        imageContainer.style.cssText = `
            position: relative;
            display: block;
            max-width: 100%;
            max-height: 100%;
         `;
         `;


Рядок 268: Рядок 277:
         const prevBtn = createNavButton('‹', 'Попереднє зображення (←)');
         const prevBtn = createNavButton('‹', 'Попереднє зображення (←)');
         const nextBtn = createNavButton('›', 'Наступне зображення (→)');
         const nextBtn = createNavButton('›', 'Наступне зображення (→)');
         prevBtn.style.cssText += 'left: 15px;';
         prevBtn.style.cssText += 'left: 10px;';
         nextBtn.style.cssText += 'right: 15px;';
         nextBtn.style.cssText += 'right: 10px;';


         // Контейнер для кнопок масштабування - ФІКСОВАНИЙ під зображенням
         // Контейнер для кнопок масштабування - ПРИКРІПЛЕНИЙ ДО НИЗУ ЗОБРАЖЕННЯ
         const buttonPanel = document.createElement('div');
         const buttonPanel = document.createElement('div');
        buttonPanel.className = 'zoom-controls-panel';
         buttonPanel.style.cssText = `
         buttonPanel.style.cssText = `
             position: absolute;
             position: absolute;
             bottom: -60px;
             bottom: 10px;
             left: 50%;
             left: 50%;
             transform: translateX(-50%);
             transform: translateX(-50%);
Рядок 282: Рядок 292:
             align-items: center;
             align-items: center;
             gap: 8px;
             gap: 8px;
             background: rgba(0,0,0,0.7);
             background: rgba(0,0,0,0.8);
             padding: 8px 12px;
             padding: 8px 12px;
             border-radius: 8px;
             border-radius: 8px;
             z-index: 10001;
             z-index: 10001;
             min-width: 200px;
             min-width: 200px;
            backdrop-filter: blur(5px);
         `;
         `;


Рядок 303: Рядок 314:
             padding: ${config.infoPanel.padding};
             padding: ${config.infoPanel.padding};
             border-radius: ${config.infoPanel.borderRadius};
             border-radius: ${config.infoPanel.borderRadius};
             margin-top: 80px;
             margin-top: 10px;
             max-width: ${config.infoPanel.maxWidth};
             max-width: ${config.infoPanel.maxWidth};
             width: 100%;
             width: 100%;
Рядок 310: Рядок 321:
             display: none;
             display: none;
         `;
         `;
        // Функція для оновлення позиції кнопок при зміні розміру зображення
        function updateButtonPanelPosition() {
            if (!img.parentElement) return;
           
            const imgRect = img.getBoundingClientRect();
            const containerRect = imageAndControlsContainer.getBoundingClientRect();
           
            // Позиціонуємо кнопки відносно видимого зображення
            if (imgRect.height > 0) {
                buttonPanel.style.bottom = '10px';
            }
        }
        // Спостерігач за змінами розміру зображення
        const resizeObserver = new ResizeObserver(() => {
            updateButtonPanelPosition();
        });


         // Збірка інтерфейсу
         // Збірка інтерфейсу
Рядок 316: Рядок 345:
         imageContainer.appendChild(nextBtn);
         imageContainer.appendChild(nextBtn);
         imageContainer.appendChild(buttonPanel);
         imageContainer.appendChild(buttonPanel);
       
        imageAndControlsContainer.appendChild(imageContainer);
          
          
         buttonPanel.appendChild(zoomOutBtn);
         buttonPanel.appendChild(zoomOutBtn);
Рядок 323: Рядок 354:
          
          
         mainContainer.appendChild(closeBtn);
         mainContainer.appendChild(closeBtn);
         mainContainer.appendChild(imageContainer);
         mainContainer.appendChild(imageAndControlsContainer);
         mainContainer.appendChild(infoPanel);
         mainContainer.appendChild(infoPanel);
          
          
         overlay.appendChild(mainContainer);
         overlay.appendChild(mainContainer);
         document.body.appendChild(overlay);
         document.body.appendChild(overlay);
        // Спостерігаємо за змінами розміру зображення
        resizeObserver.observe(img);


         // Функції масштабування
         // Функції масштабування
Рядок 334: Рядок 368:
             img.style.transform = `scale(${currentScale})`;
             img.style.transform = `scale(${currentScale})`;
             updateZoomButtons();
             updateZoomButtons();
            // Оновлюємо позицію кнопок після масштабування
            setTimeout(updateButtonPanelPosition, 50);
         }
         }


Рядок 348: Рядок 384:
             // Закриття
             // Закриття
             const closeOverlay = () => {
             const closeOverlay = () => {
                resizeObserver.disconnect();
                 overlay.style.opacity = '0';
                 overlay.style.opacity = '0';
                 setTimeout(() => {
                 setTimeout(() => {
Рядок 390: Рядок 427:
                 img.style.transform = 'scale(1)';
                 img.style.transform = 'scale(1)';
                 updateZoomButtons();
                 updateZoomButtons();
                setTimeout(updateButtonPanelPosition, 50);
             });
             });


Рядок 436: Рядок 474:
                             img.style.transform = 'scale(1)';
                             img.style.transform = 'scale(1)';
                             updateZoomButtons();
                             updateZoomButtons();
                            setTimeout(updateButtonPanelPosition, 50);
                         }
                         }
                         break;
                         break;
Рядок 463: Рядок 502:
                     btn.style.transform = 'scale(1)';
                     btn.style.transform = 'scale(1)';
                 });
                 });
            });
            // Оновлюємо позицію при завантаженні зображення
            img.addEventListener('load', () => {
                setTimeout(updateButtonPanelPosition, 100);
             });
             });
         }
         }
Рядок 480: Рядок 524:
             infoBtn,
             infoBtn,
             buttonPanel,
             buttonPanel,
             updateZoomButtons
             updateZoomButtons,
            updateButtonPanelPosition
         };
         };
     }
     }
Рядок 626: Рядок 671:
             currentOverlay.updateZoomButtons();
             currentOverlay.updateZoomButtons();
         }
         }
       
        // Оновлюємо позицію кнопок після показу
        setTimeout(() => {
            if (currentOverlay && currentOverlay.updateButtonPanelPosition) {
                currentOverlay.updateButtonPanelPosition();
            }
        }, 200);
     }
     }


Рядок 648: Рядок 700:
             currentOverlay.updateZoomButtons();
             currentOverlay.updateZoomButtons();
         }
         }
       
        // Оновлюємо позицію кнопок після завантаження нового зображення
        currentOverlay.img.onload = () => {
            setTimeout(() => {
                if (currentOverlay && currentOverlay.updateButtonPanelPosition) {
                    currentOverlay.updateButtonPanelPosition();
                }
            }, 100);
        };
     }
     }


Рядок 703: Рядок 764:
         }
         }
          
          
         /* Панель кнопок масштабування */
         /* Панель кнопок масштабування - завжди внизу зображення */
         .custom-media-viewer .zoom-controls {
         .zoom-controls-panel {
             position: absolute;
             position: absolute !important;
             bottom: -60px;
             bottom: 10px !important;
             left: 50%;
             left: 50% !important;
             transform: translateX(-50%);
             transform: translateX(-50%) !important;
             background: rgba(0,0,0,0.8);
             background: rgba(0,0,0,0.8) !important;
             padding: 10px;
             padding: 8px 12px !important;
             border-radius: 8px;
             border-radius: 8px !important;
             z-index: 10001;
             z-index: 10001 !important;
            min-width: 200px !important;
            backdrop-filter: blur(5px) !important;
        }
       
        /* Контейнер зображення */
        .custom-media-viewer .image-container {
            position: relative !important;
            display: inline-block !important;
         }
         }
          
          
Рядок 732: Рядок 801:
                 font-size: 12px !important;
                 font-size: 12px !important;
                 padding: 10px !important;
                 padding: 10px !important;
                 margin-top: 60px !important;
                 margin-top: 10px !important;
             }
             }
              
              
             .custom-media-viewer .zoom-controls {
             .zoom-controls-panel {
                 bottom: -50px !important;
                 min-width: 180px !important;
                 padding: 6px !important;
                 padding: 6px 10px !important;
                bottom: 8px !important;
             }
             }
         }
         }
Рядок 747: Рядок 817:
                 font-size: 14px !important;
                 font-size: 14px !important;
                 padding: 0 6px !important;
                 padding: 0 6px !important;
            }
           
            .zoom-controls-panel {
                min-width: 160px !important;
                padding: 5px 8px !important;
                bottom: 5px !important;
                gap: 5px !important;
             }
             }
         }
         }
Отримано з https://darnytsa.hero.kyivcity.gov.ua/w/index.php/MediaWiki:Common.js