Абсурдопедия

MediaWiki:Common.js: различия между версиями

← Предыдущая правкаСледующая правка →
Нет описания правки
Метка: отменено
Самый упрощённый вариант
Метка: отменено
Строка 121: Строка 121:




/* Раскрытие картинок во всплывающем окне по клику на них (для удобства назову — FancyBoxAlternative) */
/* Простое раскрытие картинок во всплывающем окне по клику на них (для удобства назову — FancyBoxAlternative) */


/* Увеличение изображений по клику (совместимость с TimedMediaHandler) */
(function() {
(function() {
     'use strict';
     'use strict';


  /* Создаем модальное окно, если нет */
     if (document.getElementById('wikiImageModal')) {
     if (!document.getElementById('imageModal')) {
         return;
         var modalHTML = [
            '<div id="imageModal" class="image-modal">',
            '  <span class="modal-close">&times;</span>',
            '  <img class="modal-content" id="modalImage">',
            '  <div class="modal-caption" id="modalCaption"></div>',
            '</div>'
        ].join('');
        document.body.insertAdjacentHTML('beforeend', modalHTML);
     }
     }


  /* Инициализация после загрузки DOM */
    var modalHTML = [
    document.addEventListener('DOMContentLoaded', function() {
        '<div id="wikiImageModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); z-index: 10000; cursor: zoom-out;">',
         var modal = document.getElementById('imageModal');
         '  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 90vw; max-height: 90vh;">',
         var modalImg = document.getElementById('modalImage');
         '    <img id="wikiModalImage" style="max-width: 100%; max-height: 100%; display: block; margin: 0 auto;" src="" alt="">',
         var captionText = document.getElementById('modalCaption');
        '   <div id="wikiModalCaption" style="color: white; text-align: center; padding: 10px; font-size: 16px;"></div>',
         var closeBtn = document.querySelector('.modal-close');
         ' </div>',
        '  <button id="wikiModalClose" style="position: absolute; top: 20px; right: 30px; background: none; border: none; color: white; font-size: 40px; cursor: pointer; z-index: 10001;">&times;</button>',
         '</div>'
    ].join('');


  /* Функция открытия модального окна */
    document.body.insertAdjacentHTML('beforeend', modalHTML);
        function openModal(imgElement) {
 
    /* Проверяем, не является ли пикча видео-плейсхолдером TimedMediaHandler */
    var modal = document.getElementById('wikiImageModal');
            if (isTimedMediaHandlerElement(imgElement)) {
    var modalImg = document.getElementById('wikiModalImage');
                return; /* Прерываем выполнение для видео */
    var modalCaption = document.getElementById('wikiModalCaption');
            }
    var closeBtn = document.getElementById('wikiModalClose');
           
 
            modal.style.display = 'block';
    function openModal(img) {
            modalImg.src = imgElement.src;
        // Check if this is a video element handled by TimedMediaHandler
           
        if (isVideoElement(img)) {
            /* Получаем описание */
             return;
            var caption = imgElement.alt || imgElement.title || 'Изображение';
            captionText.innerHTML = caption;
           
            /* Блокируем прокрутку body */
             document.body.style.overflow = 'hidden';
         }
         }
       
        modalImg.src = img.src;
        modalCaption.textContent = img.alt || img.title || 'Изображение';
        modal.style.display = 'block';
        document.body.style.overflow = 'hidden';
    }


    /* Функция закрытия модального окна */
    function closeModal() {
        function closeModal() {
        modal.style.display = 'none';
            modal.style.display = 'none';
        document.body.style.overflow = 'auto';
            document.body.style.overflow = 'auto';
    }
        }


/* Проверка элементов TimedMediaHandler */
    function isVideoElement(element) {
        function isTimedMediaHandlerElement(element) {
        if (element.closest('.video-js') ||  
            return element.closest('.video-js') ||  
            element.closest('.mw-tmh-player') ||
                  element.closest('.mw-tmh-player') ||
            element.closest('.mw-tmh-thumbnail') ||
                  element.classList.contains('mw-tmh-thumbnail') ||
            element.parentNode.classList.contains('mw-tmh-player') ||
                  element.parentNode.classList.contains('mw-tmh-player');
            element.src && (element.src.includes('.ogv') || element.src.includes('.webm') || element.src.includes('.oga'))) {
            return true;
         }
         }
        return false;
    }


      /* Обработчики закрытия */
    function addImageHandlers() {
         closeBtn.onclick = closeModal;
         var images = document.querySelectorAll('img');
         modal.onclick = function(event) {
          
             if (event.target === modal) closeModal();
        images.forEach(function(img) {
        };
            // Skip if already has handler or is modal image
        document.addEventListener('keydown', function(event) {
             if (img.hasAttribute('data-zoom-handler') ||
             if (event.key === 'Escape') closeModal();
                img === modalImg ||
                img.classList.contains('no-zoom')) {
                return;
            }
           
            // Skip video-related images
            if (isVideoElement(img)) {
                return;
            }
           
            // Add visual feedback
            img.style.cursor = 'zoom-in';
            img.style.transition = 'opacity 0.2s';
           
            img.addEventListener('mouseenter', function() {
                this.style.opacity = '0.9';
            });
           
             img.addEventListener('mouseleave', function() {
                this.style.opacity = '1';
            });
           
            // Add click handler
            img.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                openModal(this);
            });
           
            // Mark as processed
            img.setAttribute('data-zoom-handler', 'true');
         });
         });
    }


      /* Добавляем обработчики ко всем изображениям, кроме служебных */
    closeBtn.addEventListener('click', closeModal);
        function addClickHandlers() {
    modal.addEventListener('click', closeModal);
            var images = document.querySelectorAll(`
   
                #content img,
    // Prevent modal content from closing modal when clicked
                .mw-body-content img,
    modalImg.addEventListener('click', function(e) {
                .thumb img,
        e.stopPropagation();
                .image img,
    });
                .gallery img
   
            `);
    // Close modal with Escape key
 
    document.addEventListener('keydown', function(e) {
            images.forEach(function(img) {
        if (e.key === 'Escape' && modal.style.display === 'block') {
      /* Пропускаем специзображения */
             closeModal();
                if (img.classList.contains('modal-content') ||
                    img.classList.contains('no-zoom') ||
                    isTimedMediaHandlerElement(img)) {
                    return;
                }
 
      /* Добавляем курсор и обработчик */
                img.style.cursor = 'pointer';
                img.addEventListener('click', function() {
                    openModal(this);
                });
             });
         }
         }
    });


      /* Инициализация */
    // Initialize when DOM is ready
         addClickHandlers();
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', addImageHandlers);
    } else {
         addImageHandlers();
    }


      /* Обработка динамически загружаемого контента */
    var observer = new MutationObserver(function(mutations) {
        var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            mutations.forEach(function(mutation) {
            if (mutation.addedNodes.length) {
                if (mutation.addedNodes.length) addClickHandlers();
                setTimeout(addImageHandlers, 100);
             });
             }
         });
         });
        observer.observe(document.body, { childList: true, subtree: true });
     });
     });
   
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();
})();
Источник — https://absurdopedia.wiki/MediaWiki:Common.js