darnytsa_hero

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

← Попереднє редагування
Немає опису редагування
мНемає опису редагування
 
(Не показані 34 проміжні версії цього користувача)
Рядок 1: Рядок 1:
// =========================
// ОСНОВНИЙ КОД ДЛЯ ТЕМ, ДОСТУПНОСТІ ТА ЛУПИ
// =========================
$(function () {
$(function () {
     // Теми
     // Теми
Рядок 10: Рядок 13:
         theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
         theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
     }
     }
     if (themes[theme]) mw.loader.load(themes[theme], 'text/css');
   
    // Завантажуємо тему
     if (themes[theme]) {
        mw.loader.load(themes[theme], 'text/css');
    }
 
    // Розмір шрифту
    var fontSize = parseInt(localStorage.getItem('fontSize')) || parseInt($('body').css('font-size')) || 16;
 
    function applyFontSize() {
        var content = document.querySelector('.mw-parser-output');
        if (content) {
            content.style.fontSize = fontSize + 'px';
        }
    }
 
    // Масив для збереження позицій кнопок
    var buttonCount = 0;
 
    // Функція створення кнопки праворуч з автоматичним вертикальним розташуванням
    function createButtonRight(text, onClick, title) {
        var btn = document.createElement('button');
        btn.innerText = text;
        btn.title = title;
        btn.style.position = 'fixed';
        btn.style.right = '10px';
        btn.style.bottom = (10 + buttonCount * 60) + 'px'; // вертикальний відступ між кнопками
        btn.style.padding = '10px 16px';
        btn.style.border = 'none';
        btn.style.borderRadius = '25px';
        btn.style.background = '#1a73e8';
        btn.style.color = '#fff';
        btn.style.fontWeight = 'bold';
        btn.style.fontSize = '14px';
        btn.style.cursor = 'pointer';
        btn.style.zIndex = 9999;
        btn.style.textAlign = 'center';
        btn.style.boxShadow = '0 2px 6px rgba(0,0,0,0.3)';
        btn.style.whiteSpace = 'nowrap';


    function createButton(text, bottom, onClick, title) {
         btn.onclick = onClick;
         var $btn = $('<button>').text(text).attr('title', title).css({
         document.body.appendChild(btn);
            position: 'fixed',
 
            bottom: bottom + 'px',
        buttonCount++; // збільшуємо лічильник кнопок для наступного bottom
            right: '10px',
         return btn;
            padding: '10px 16px',
            border: 'none',
            borderRadius: '25px',
            background: '#1a73e8',
            color: '#ffffff',
            fontWeight: 'bold',
            fontSize: '14px',
            cursor: 'pointer',
            zIndex: 9999,
            textAlign: 'center',
            boxShadow: '0 2px 6px rgba(0,0,0,0.3)',
            whiteSpace: 'nowrap'
        }).click(onClick);
         $('body').append($btn);
         return $btn;
     }
     }


     // Кнопка Темна/Світла тема
     // Кнопка Темна/Світла тема
     var $themeBtn = createButton(
     createButtonRight(
         theme === 'dark' ? 'Світла тема ☀️' : 'Темна тема 🌙',
         theme === 'dark' ? 'Світла тема ☀️' : 'Темна тема 🌙',
        10,
         function () {
         function () {
             var newTheme = theme === 'dark' ? 'light' : 'dark';
             var newTheme = theme === 'dark' ? 'light' : 'dark';
Рядок 45: Рядок 70:
         'Змінити тему'
         'Змінити тему'
     );
     );
    // Змінна для зберігання розміру шрифту
    var fontSize = parseInt($('body').css('font-size'), 10) || 16;
   
    // Функція для застосування розміру шрифту
    function applyFontSize() {
        $('body').css('font-size', fontSize + 'px');
    }


     // Кнопка доступності
     // Кнопка доступності
     var $accessBtn = createButton(
     createButtonRight(
         'Доступність',
         localStorage.getItem('accessibilityMode') === 'on' ? 'Доступність' : 'Доступність',
        70,
         function () {
         function () {
             if (!$('body').hasClass('accessibility-mode')) {
             if (!$('body').hasClass('accessibility-mode')) {
                 $('body').addClass('accessibility-mode');
                 $('body').addClass('accessibility-mode');
                 localStorage.setItem('accessibilityMode', 'on');
                 localStorage.setItem('accessibilityMode', 'on');
                $accessBtn.css('background', '#ff6600');
                $accessBtn.text('Доступність ON');
             } else {
             } else {
                 $('body').removeClass('accessibility-mode');
                 $('body').removeClass('accessibility-mode');
                 localStorage.setItem('accessibilityMode', 'off');
                 localStorage.setItem('accessibilityMode', 'off');
                $accessBtn.css('background', '#1a73e8');
                $accessBtn.text('Доступність OFF');
             }
             }
         },
         },
Рядок 74: Рядок 86:
     );
     );


     // Відновлення стану доступності
     // Кнопки лупи
     if (localStorage.getItem('accessibilityMode') === 'on') {
     createButtonRight('🔍 +', function () {
        $('body').addClass('accessibility-mode');
        $accessBtn.css('background', '#ff6600');
        $accessBtn.text('Доступність ON');
    }
 
    // Лупа
    createButton('🔍 +', 130, function () {
         fontSize += 2;
         fontSize += 2;
         if (fontSize > 30) fontSize = 30;
         if (fontSize > 30) fontSize = 30;
Рядок 89: Рядок 94:
     }, 'Збільшити шрифт');
     }, 'Збільшити шрифт');


     createButton('🔍 -', 170, function () {
     createButtonRight('🔍 -', function () {
         fontSize -= 2;
         fontSize -= 2;
         if (fontSize < 12) fontSize = 12;
         if (fontSize < 12) fontSize = 12;
Рядок 96: Рядок 101:
     }, 'Зменшити шрифт');
     }, 'Зменшити шрифт');


     // Відновлення розміру шрифту
    // Застосовуємо шрифт при завантаженні
     if (localStorage.getItem('fontSize')) {
    applyFontSize();
         fontSize = parseInt(localStorage.getItem('fontSize'), 10);
 
     // Відновлення стану доступності при завантаженні
     if (localStorage.getItem('accessibilityMode') === 'on') {
         $('body').addClass('accessibility-mode');
     }
     }
    applyFontSize();
});
});




//OVERLAY  
// =========================
// ВАШ СТАРИЙ OVERLAY КОД (без змін)
// =========================
(function() {
(function() {
     'use strict';
     'use strict';
Рядок 171: Рядок 180:
     // Повністю відключаємо стандартний 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: Рядок 186:
             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: Рядок 196:
             }, 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: Рядок 218:
         `;
         `;


         // Контейнер для всього вмісту
         // Головний контейнер
         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;
            max-width: 95vw;
            max-height: 95vh;
         `;
         `;


Рядок 256: Рядок 250:
             right: ${config.closeBtn.right};
             right: ${config.closeBtn.right};
             z-index: 10001;
             z-index: 10001;
        `;
        // Основний контейнер для зображення та кнопок
        const imageAndControlsContainer = document.createElement('div');
        imageAndControlsContainer.style.cssText = `
            position: relative;
            display: inline-block;
            max-width: ${config.imageMaxWidth};
            max-height: ${config.imageMaxHeight};
            margin-bottom: 10px;
         `;
         `;


Рядок 262: Рядок 266:
         imageContainer.style.cssText = `
         imageContainer.style.cssText = `
             position: relative;
             position: relative;
             display: flex;
             display: block;
            justify-content: center;
             max-width: 100%;
            align-items: center;
             max-height: 100%;
             max-width: ${config.imageMaxWidth};
             max-height: ${config.imageMaxHeight};
            margin-bottom: 15px;
         `;
         `;


Рядок 279: Рядок 280:
             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: 10px;';
         nextBtn.style.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;
            bottom: 10px;
            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.8);
             background: rgba(0,0,0,0.5);
             padding: 8px 12px;
             padding: 10px;
             border-radius: 8px;
             border-radius: 8px;
            z-index: 10001;
            min-width: 200px;
            backdrop-filter: blur(5px);
         `;
         `;


Рядок 319: Рядок 323:
             padding: ${config.infoPanel.padding};
             padding: ${config.infoPanel.padding};
             border-radius: ${config.infoPanel.borderRadius};
             border-radius: ${config.infoPanel.borderRadius};
             margin-top: 15px;
             margin-top: 10px;
             max-width: ${config.infoPanel.maxWidth};
             max-width: ${config.infoPanel.maxWidth};
             width: 100%;
             width: 100%;
Рядок 326: Рядок 330:
             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();
        });


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


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


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


Рядок 452: Рядок 483:
                             img.style.transform = 'scale(1)';
                             img.style.transform = 'scale(1)';
                             updateZoomButtons();
                             updateZoomButtons();
                            setTimeout(updateButtonPanelPosition, 50);
                         }
                         }
                         break;
                         break;
Рядок 479: Рядок 511:
                     btn.style.transform = 'scale(1)';
                     btn.style.transform = 'scale(1)';
                 });
                 });
            });
            // Оновлюємо позицію при завантаженні зображення
            img.addEventListener('load', () => {
                setTimeout(updateButtonPanelPosition, 100);
             });
             });
         }
         }
Рядок 495: Рядок 532:
             resetZoomBtn,
             resetZoomBtn,
             infoBtn,
             infoBtn,
             updateZoomButtons
            buttonPanel,
             updateZoomButtons,
            updateButtonPanelPosition
         };
         };
     }
     }
Рядок 606: Рядок 645:
     // Показ оверлею
     // Показ оверлею
     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();
Рядок 643: Рядок 680:
             currentOverlay.updateZoomButtons();
             currentOverlay.updateZoomButtons();
         }
         }
       
        // Оновлюємо позицію кнопок після показу
        setTimeout(() => {
            if (currentOverlay && currentOverlay.updateButtonPanelPosition) {
                currentOverlay.updateButtonPanelPosition();
            }
        }, 200);
     }
     }


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


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


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


        // Клік на посилання з зображенням
         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: Рядок 745:
             }
             }
         }
         }
     }, true); // Використовуємо capture phase для пріоритету
     }, true);


     // Повністю відключаємо MediaViewer при завантаженні
     // Повністю відключаємо MediaViewer при завантаженні
Рядок 720: Рядок 771:
             transition: transform 0.3s ease !important;
             transition: transform 0.3s ease !important;
             cursor: default !important;
             cursor: default !important;
        }
       
        /* Панель кнопок масштабування - завжди внизу зображення */
        .zoom-controls-panel {
            position: absolute !important;
            bottom: 10px !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            background: rgba(0,0,0,0.8) !important;
            padding: 8px 12px !important;
            border-radius: 8px !important;
            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;
         }
         }
          
          
Рядок 739: Рядок 810:
                 font-size: 12px !important;
                 font-size: 12px !important;
                 padding: 10px !important;
                 padding: 10px !important;
                margin-top: 10px !important;
            }
           
            .zoom-controls-panel {
                min-width: 180px !important;
                padding: 6px 10px !important;
                bottom: 8px !important;
            }
        }
       
        @media (max-width: 480px) {
            .custom-media-viewer button {
                min-width: 30px !important;
                height: 30px !important;
                font-size: 14px !important;
                padding: 0 6px !important;
            }
           
            .zoom-controls-panel {
                min-width: 160px !important;
                padding: 5px 8px !important;
                bottom: 5px !important;
                gap: 5px !important;
             }
             }
         }
         }
Рядок 745: Рядок 839:


})();
})();
// =========================
// КНОПКА ВИПАДКОВА СТОРІНКА (вище)
// =========================
function createRandomButton() {
    if (document.getElementById('float-random-btn')) return;
    if (!document.body.classList.contains('skin-minerva')) return;
   
    const btn = document.createElement('button');
    btn.id = 'float-random-btn';
    btn.innerHTML = '🎲 Випадкова cторінка';
    btn.title = 'Випадкова сторінка';
    btn.style.cssText = `
        position: fixed;
        bottom: 240px; 
        left: 15px;
        z-index: 9998;
        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
        color: white;
        border: none;
        padding: 12px 18px;
        border-radius: 25px;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
        white-space: nowrap;
    `;
   
    btn.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        btn.innerHTML = '⏳ Завантаження...';
        btn.style.opacity = '0.7';
        btn.disabled = true;
        setTimeout(() => {
            window.location.href = '/w/index.php/Спеціальна:Випадкова_сторінка';
        }, 100);
    });
   
    btn.addEventListener('mouseenter', function() {
        if (!this.disabled) {
            this.style.transform = 'scale(1.05)';
            this.style.boxShadow = '0 6px 20px rgba(0,0,0,0.4)';
        }
    });
   
    btn.addEventListener('mouseleave', function() {
        this.style.transform = 'scale(1)';
        this.style.boxShadow = '0 4px 15px rgba(0,0,0,0.3)';
    });
   
    document.body.appendChild(btn);
}
// =========================
// КНОПКА "ЯК ЦЕ ПРАЦЮЄ?" (виправлена версія)
// =========================
function createHowItWorksButton() {
    if (document.getElementById('how-it-works-btn')) return;
   
    const btn = document.createElement('button');
    btn.id = 'how-it-works-btn';
    btn.innerHTML = '?';
    btn.title = 'Як це працює?';
    btn.style.cssText = `
        position: fixed;
        bottom: 140px;
        left: 15px;
        z-index: 9998;
        background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
        color: white;
        border: none;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        font-size: 24px;
        font-weight: bold;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        line-height: 1;
    `;
   
    btn.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        window.location.href = '/w/index.php/FAQ';
    });
   
    btn.addEventListener('mouseenter', function() {
        this.style.transform = 'scale(1.05)';
        this.style.boxShadow = '0 6px 20px rgba(0,0,0,0.4)';
    });
   
    btn.addEventListener('mouseleave', function() {
        this.style.transform = 'scale(1)';
        this.style.boxShadow = '0 4px 15px rgba(0,0,0,0.3)';
    });
   
    document.body.appendChild(btn);
}
// =========================
// ВИПРАВЛЕНА ІНІЦІАЛІЗАЦІЯ (замінити тільки цю частину)
// =========================
// Видаляємо всі старі ініціалізатори і замінюємо на цей простий код:
let buttonsInitialized = false;
function initializeLeftButtons() {
    if (buttonsInitialized) return;
    buttonsInitialized = true;
   
    // Кнопка "Як це працює?" для всіх тем
    createHowItWorksButton();
   
    // Кнопка "Випадкова сторінка" тільки для Minerva
    if (document.body.classList.contains('skin-minerva')) {
        createRandomButton();
    }
}
// Тільки один спосіб ініціалізації
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initializeLeftButtons);
} else {
    setTimeout(initializeLeftButtons, 100);
}
// Тільки один резервний таймер
setTimeout(initializeLeftButtons, 1000);
Отримано з https://darnytsa.hero.kyivcity.gov.ua/w/index.php/MediaWiki:Common.js