MediaWiki:Common.js: различия между версиями
попытка #2 Метка: отменено |
Попытка #3 Метка: отменено |
||
| Строка 121: | Строка 121: | ||
/* Раскрытие картинок во всплывающем окне по клику на них (для удобства назову — FancyBoxAlternative) | /* Раскрытие картинок во всплывающем окне по клику на них (для удобства назову — FancyBoxAlternative) */ | ||
/* Увеличение изображений по клику */ | /* Увеличение изображений по клику (совместимость с TimedMediaHandler) */ | ||
(function() { | (function() { | ||
'use strict'; | |||
/* Создаем модальное окно, если нет */ | |||
if (!document.getElementById('imageModal')) { | if (!document.getElementById('imageModal')) { | ||
var modalHTML = '<div id="imageModal" class="image-modal">' | var modalHTML = [ | ||
'<span class="modal-close">×</span>' | '<div id="imageModal" class="image-modal">', | ||
'<img class="modal-content" id="modalImage">' | ' <span class="modal-close">×</span>', | ||
'<div class="modal-caption" id="modalCaption"></div>' | ' <img class="modal-content" id="modalImage">', | ||
' <div class="modal-caption" id="modalCaption"></div>', | |||
'</div>' | |||
].join(''); | |||
document.body.insertAdjacentHTML('beforeend', modalHTML); | document.body.insertAdjacentHTML('beforeend', modalHTML); | ||
} | } | ||
/* Инициализация после загрузки DOM */ | |||
document.addEventListener('DOMContentLoaded', function() { | document.addEventListener('DOMContentLoaded', function() { | ||
var modal = document.getElementById('imageModal'); | var modal = document.getElementById('imageModal'); | ||
| Строка 142: | Строка 146: | ||
var closeBtn = document.querySelector('.modal-close'); | var closeBtn = document.querySelector('.modal-close'); | ||
/* Функция открытия модального окна */ | |||
function openModal(imgElement) { | function openModal(imgElement) { | ||
/* Проверяем, не является ли пикча видео-плейсхолдером TimedMediaHandler */ | |||
if ( | if (isTimedMediaHandlerElement(imgElement)) { | ||
return; /* Прерываем выполнение для видео */ | return; /* Прерываем выполнение для видео */ | ||
} | } | ||
| Строка 166: | Строка 170: | ||
} | } | ||
/* Проверка элементов TimedMediaHandler */ | |||
function isTimedMediaHandlerElement(element) { | |||
return element.closest('.video-js') || | |||
element.closest('.mw-tmh-player') || | |||
element.classList.contains('mw-tmh-thumbnail') || | |||
element.parentNode.classList.contains('mw-tmh-player'); | |||
} | |||
/* Обработчики закрытия | |||
closeBtn.onclick = closeModal; | closeBtn.onclick = closeModal; | ||
modal.onclick = function(event) { | modal.onclick = function(event) { | ||
| Строка 175: | Строка 187: | ||
}); | }); | ||
/* Добавляем обработчики ко всем изображениям, кроме служебных */ | |||
function addClickHandlers() { | function addClickHandlers() { | ||
var images = document.querySelectorAll(` | var images = document.querySelectorAll(` | ||
| Строка 186: | Строка 198: | ||
images.forEach(function(img) { | images.forEach(function(img) { | ||
/* Пропускаем специзображения */ | |||
if (img.classList.contains('modal-content') || | if (img.classList.contains('modal-content') || | ||
img.classList.contains('no-zoom') || | img.classList.contains('no-zoom') || | ||
isTimedMediaHandlerElement(img)) { | |||
return; | return; | ||
} | } | ||
| Строка 203: | Строка 213: | ||
} | } | ||
/* Инициализация */ | |||
addClickHandlers(); | addClickHandlers(); | ||
/* Обработка динамически загружаемого контента */ | |||
var observer = new MutationObserver(function(mutations) { | var observer = new MutationObserver(function(mutations) { | ||
mutations.forEach(function(mutation) { | mutations.forEach(function(mutation) { | ||