|
|
| Рядок 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]) { |
| | // Видаляємо попередні теми, щоб уникнути конфліктів |
| | $('link[title="light"], link[title="dark"]').remove(); |
| | mw.loader.load(themes[theme], 'text/css'); |
| | } |
|
| |
|
| function createButton(text, bottom, onClick, title) { | | function createButton(text, bottom, onClick, title) { |
| | // Перевіряємо чи кнопка вже існує |
| | var existingBtn = $('button').filter(function() { |
| | return $(this).text() === text; |
| | }); |
| | if (existingBtn.length > 0) return existingBtn; |
| | |
| var $btn = $('<button>').text(text).attr('title', title).css({ | | var $btn = $('<button>').text(text).attr('title', title).css({ |
| position: 'fixed', | | position: 'fixed', |
| Рядок 47: |
Рядок 62: |
|
| |
|
| // Змінна для зберігання розміру шрифту | | // Змінна для зберігання розміру шрифту |
| var fontSize = parseInt($('body').css('font-size'), 10) || 16; | | var fontSize = parseInt(localStorage.getItem('fontSize')) || parseInt($('body').css('font-size')) || 16; |
| | | |
| // Функція для застосування розміру шрифту | | // Функція для застосування розміру шрифту |
| function applyFontSize() { | | function applyFontSize() { |
| $('body').css('font-size', fontSize + 'px'); | | $('body').css('font-size', fontSize + 'px'); |
| | // Застосовуємо також до конкретних елементів |
| | $('.mw-body, .mw-body-content, p, li, span, a').css('font-size', fontSize + 'px'); |
| } | | } |
|
| |
|
| // Кнопка доступності | | // Кнопка доступності |
| var $accessBtn = createButton( | | var $accessBtn = createButton( |
| 'Доступність', | | localStorage.getItem('accessibilityMode') === 'on' ? 'Доступність ON' : 'Доступність OFF', |
| 70, | | 70, |
| function () { | | function () { |
| Рядок 96: |
Рядок 113: |
| }, 'Зменшити шрифт'); | | }, 'Зменшити шрифт'); |
|
| |
|
| // Відновлення розміру шрифту | | // Застосовуємо розмір шрифту |
| if (localStorage.getItem('fontSize')) {
| |
| fontSize = parseInt(localStorage.getItem('fontSize'), 10);
| |
| }
| |
| applyFontSize(); | | applyFontSize(); |
| }); | | }); |
|
| |
|
| | | // ========================= |
| //OVERLAY
| | // КНОПКА ВИПАДКОВА СТОРІНКА (спрощена версія) |
| (function() {
| | // ========================= |
| 'use strict';
| | function createRandomButton() { |
|
| | if (document.getElementById('float-random-btn') || !document.body.classList.contains('skin-minerva')) { |
| // Конфигурація в стилі MediaViewer
| |
| const config = {
| |
| // Стиль оверлею
| |
| overlayBg: 'rgba(0,0,0,0.95)',
| |
| animationDuration: '0.3s',
| |
|
| |
| // Стиль зображення
| |
| imageMaxWidth: '90vw',
| |
| imageMaxHeight: '80vh',
| |
|
| |
| // Панель інформації
| |
| infoPanel: {
| |
| background: 'rgba(0,0,0,0.8)',
| |
| color: '#fff',
| |
| padding: '15px',
| |
| borderRadius: '8px',
| |
| marginTop: '15px',
| |
| maxWidth: '600px',
| |
| fontSize: '14px'
| |
| },
| |
|
| |
| // Кнопки
| |
| buttons: {
| |
| background: 'rgba(0,0,0,0.7)',
| |
| color: '#fff',
| |
| size: '40px',
| |
| fontSize: '18px',
| |
| borderRadius: '5px',
| |
| margin: '5px'
| |
| },
| |
|
| |
| // Кнопка закриття
| |
| closeBtn: {
| |
| background: 'rgba(0,0,0,0.7)',
| |
| color: '#fff',
| |
| size: '40px',
| |
| fontSize: '20px',
| |
| top: '20px',
| |
| right: '20px'
| |
| },
| |
|
| |
| // Винятки
| |
| excludeSelectors: [
| |
| '.no-overlay',
| |
| '[data-no-overlay]',
| |
| '.mw-editsection img',
| |
| '.sprite',
| |
| '.icon',
| |
| '.logo',
| |
| '.nav-icon'
| |
| ]
| |
| };
| |
| | |
| let currentOverlay = null;
| |
| let currentImageIndex = 0;
| |
| let imagesInGallery = [];
| |
| let currentScale = 1;
| |
| const minScale = 0.5;
| |
| const maxScale = 3;
| |
| const scaleStep = 0.25;
| |
| | |
| // Повністю відключаємо стандартний MediaViewer
| |
| function disableMediaViewerCompletely() {
| |
| const mediaViewerLinks = document.querySelectorAll('a[href*="/wiki/File:"], a[href*="/w/images/"]');
| |
| mediaViewerLinks.forEach(link => {
| |
| link.removeAttribute('data-mw');
| |
| link.removeAttribute('data-mediatype');
| |
| link.removeAttribute('data-file');
| |
|
| |
| link.addEventListener('click', function(e) {
| |
| const img = this.querySelector('img');
| |
| if (img && shouldOpenInOverlay(img)) {
| |
| e.preventDefault();
| |
| e.stopImmediatePropagation();
| |
| showMediaViewerOverlay(img);
| |
| return false;
| |
| }
| |
| }, true);
| |
| });
| |
| }
| |
| | |
| // Створення оверлею в стилі MediaViewer
| |
| function createMediaViewerStyleOverlay() {
| |
| const overlay = document.createElement('div');
| |
| overlay.className = 'custom-media-viewer';
| |
| overlay.style.cssText = `
| |
| position: fixed;
| |
| top: 0;
| |
| left: 0;
| |
| width: 100%;
| |
| height: 100%;
| |
| background: ${config.overlayBg};
| |
| display: none;
| |
| justify-content: center;
| |
| align-items: center;
| |
| z-index: 10000;
| |
| opacity: 0;
| |
| transition: opacity ${config.animationDuration} ease;
| |
| cursor: default;
| |
| `;
| |
| | |
| // Головний контейнер
| |
| const mainContainer = document.createElement('div');
| |
| mainContainer.style.cssText = `
| |
| position: relative;
| |
| display: flex;
| |
| flex-direction: column;
| |
| align-items: center;
| |
| max-width: 95vw;
| |
| max-height: 95vh;
| |
| `;
| |
| | |
| // Кнопка закриття ×
| |
| const closeBtn = document.createElement('button');
| |
| closeBtn.innerHTML = '×';
| |
| closeBtn.title = 'Закрити (Esc)';
| |
| closeBtn.style.cssText = `
| |
| width: ${config.closeBtn.size};
| |
| height: ${config.closeBtn.size};
| |
| background: ${config.closeBtn.background};
| |
| color: ${config.closeBtn.color};
| |
| border: none;
| |
| border-radius: 50%;
| |
| font-size: ${config.closeBtn.fontSize};
| |
| cursor: pointer;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| transition: all 0.2s ease;
| |
| position: absolute;
| |
| top: ${config.closeBtn.top};
| |
| right: ${config.closeBtn.right};
| |
| 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;
| |
| `;
| |
| | |
| // Контейнер для зображення
| |
| const imageContainer = document.createElement('div');
| |
| imageContainer.style.cssText = `
| |
| position: relative;
| |
| display: block;
| |
| max-width: 100%;
| |
| max-height: 100%;
| |
| `;
| |
| | |
| const img = document.createElement('img');
| |
| img.style.cssText = `
| |
| max-width: 100%;
| |
| max-height: 100%;
| |
| object-fit: contain;
| |
| border-radius: 8px;
| |
| box-shadow: 0 10px 30px rgba(0,0,0,0.5);
| |
| cursor: default !important;
| |
| transition: transform 0.3s ease;
| |
| display: block;
| |
| `;
| |
| | |
| // Кнопки навігації (зліва/справа від зображення)
| |
| const prevBtn = createNavButton('‹', 'Попереднє зображення (←)');
| |
| const nextBtn = createNavButton('›', 'Наступне зображення (→)');
| |
| prevBtn.style.cssText += 'left: 10px;';
| |
| nextBtn.style.cssText += 'right: 10px;';
| |
| | |
| // Контейнер для кнопок масштабування - ПРИКРІПЛЕНИЙ ДО НИЗУ ЗОБРАЖЕННЯ
| |
| const buttonPanel = document.createElement('div');
| |
| buttonPanel.className = 'zoom-controls-panel';
| |
| buttonPanel.style.cssText = `
| |
| position: absolute;
| |
| bottom: 10px;
| |
| left: 50%;
| |
| transform: translateX(-50%);
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| gap: 8px;
| |
| background: rgba(0,0,0,0.8);
| |
| padding: 8px 12px;
| |
| border-radius: 8px;
| |
| z-index: 10001;
| |
| min-width: 200px;
| |
| backdrop-filter: blur(5px);
| |
| `;
| |
| | |
| // Кнопки масштабування
| |
| const zoomOutBtn = createToolButton('−', 'Зменшити (Ctrl + -)');
| |
| const resetZoomBtn = createToolButton('1:1', 'Скинути масштаб (Ctrl + 0)');
| |
| const zoomInBtn = createToolButton('+', 'Збільшити (Ctrl + +)');
| |
| const infoBtn = createToolButton('i', 'Інформація (I)');
| |
| | |
| // Панель інформації
| |
| const infoPanel = document.createElement('div');
| |
| infoPanel.className = 'image-info-panel';
| |
| infoPanel.style.cssText = `
| |
| background: ${config.infoPanel.background};
| |
| color: ${config.infoPanel.color};
| |
| padding: ${config.infoPanel.padding};
| |
| border-radius: ${config.infoPanel.borderRadius};
| |
| margin-top: 10px;
| |
| max-width: ${config.infoPanel.maxWidth};
| |
| width: 100%;
| |
| text-align: center;
| |
| font-size: ${config.infoPanel.fontSize};
| |
| 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();
| |
| });
| |
| | |
| // Збірка інтерфейсу
| |
| imageContainer.appendChild(img);
| |
| imageContainer.appendChild(prevBtn);
| |
| imageContainer.appendChild(nextBtn);
| |
| imageContainer.appendChild(buttonPanel);
| |
|
| |
| imageAndControlsContainer.appendChild(imageContainer);
| |
|
| |
| buttonPanel.appendChild(zoomOutBtn);
| |
| buttonPanel.appendChild(resetZoomBtn);
| |
| buttonPanel.appendChild(zoomInBtn);
| |
| buttonPanel.appendChild(infoBtn);
| |
|
| |
| mainContainer.appendChild(closeBtn);
| |
| mainContainer.appendChild(imageAndControlsContainer);
| |
| mainContainer.appendChild(infoPanel);
| |
|
| |
| overlay.appendChild(mainContainer);
| |
| document.body.appendChild(overlay);
| |
| | |
| // Спостерігаємо за змінами розміру зображення
| |
| resizeObserver.observe(img);
| |
| | |
| // Функції масштабування
| |
| function zoomImage(scale) {
| |
| currentScale = Math.max(minScale, Math.min(maxScale, scale));
| |
| img.style.transform = `scale(${currentScale})`;
| |
| updateZoomButtons();
| |
| // Оновлюємо позицію кнопок після масштабування
| |
| setTimeout(updateButtonPanelPosition, 50);
| |
| }
| |
| | |
| 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';
| |
| }
| |
| | |
| // Обробники подій
| |
| function setupEventListeners() {
| |
| // Закриття
| |
| const closeOverlay = () => {
| |
| resizeObserver.disconnect();
| |
| overlay.style.opacity = '0';
| |
| setTimeout(() => {
| |
| overlay.style.display = 'none';
| |
| document.body.style.overflow = 'auto';
| |
| currentOverlay = null;
| |
| imagesInGallery = [];
| |
| currentScale = 1;
| |
| }, 300);
| |
| };
| |
| | |
| closeBtn.addEventListener('click', closeOverlay);
| |
| overlay.addEventListener('click', (e) => {
| |
| if (e.target === overlay) closeOverlay();
| |
| });
| |
| | |
| // Навігація
| |
| prevBtn.addEventListener('click', (e) => {
| |
| e.stopPropagation();
| |
| navigateImages(-1);
| |
| });
| |
| | |
| nextBtn.addEventListener('click', (e) => {
| |
| e.stopPropagation();
| |
| navigateImages(1);
| |
| });
| |
| | |
| // Масштабування
| |
| zoomInBtn.addEventListener('click', (e) => {
| |
| e.stopPropagation();
| |
| zoomImage(currentScale + scaleStep);
| |
| });
| |
| | |
| zoomOutBtn.addEventListener('click', (e) => {
| |
| e.stopPropagation();
| |
| zoomImage(currentScale - scaleStep);
| |
| });
| |
| | |
| resetZoomBtn.addEventListener('click', (e) => {
| |
| e.stopPropagation();
| |
| currentScale = 1;
| |
| img.style.transform = 'scale(1)';
| |
| updateZoomButtons();
| |
| setTimeout(updateButtonPanelPosition, 50);
| |
| });
| |
| | |
| // Інформація
| |
| infoBtn.addEventListener('click', (e) => {
| |
| e.stopPropagation();
| |
| toggleInfoPanel();
| |
| });
| |
| | |
| // Клавіатура
| |
| const keyHandler = (e) => {
| |
| if (!currentOverlay) return;
| |
|
| |
| switch(e.key) {
| |
| case 'Escape':
| |
| closeOverlay();
| |
| break;
| |
| case 'ArrowLeft':
| |
| navigateImages(-1);
| |
| break;
| |
| case 'ArrowRight':
| |
| navigateImages(1);
| |
| break;
| |
| case 'i':
| |
| case 'І':
| |
| e.preventDefault();
| |
| toggleInfoPanel();
| |
| break;
| |
| case '+':
| |
| case '=':
| |
| if (e.ctrlKey) {
| |
| e.preventDefault();
| |
| zoomImage(currentScale + scaleStep);
| |
| }
| |
| break;
| |
| case '-':
| |
| if (e.ctrlKey) {
| |
| e.preventDefault();
| |
| zoomImage(currentScale - scaleStep);
| |
| }
| |
| break;
| |
| case '0':
| |
| if (e.ctrlKey) {
| |
| e.preventDefault();
| |
| currentScale = 1;
| |
| img.style.transform = 'scale(1)';
| |
| updateZoomButtons();
| |
| setTimeout(updateButtonPanelPosition, 50);
| |
| }
| |
| break;
| |
| }
| |
| };
| |
| | |
| document.addEventListener('keydown', keyHandler);
| |
| | |
| // Видаляємо обробник при закритті
| |
| overlay.addEventListener('click', function handler() {
| |
| if (overlay.style.display === 'none') {
| |
| document.removeEventListener('keydown', keyHandler);
| |
| overlay.removeEventListener('click', handler);
| |
| }
| |
| });
| |
| | |
| // Hover ефекти
| |
| [closeBtn, prevBtn, nextBtn, zoomInBtn, zoomOutBtn, resetZoomBtn, infoBtn].forEach(btn => {
| |
| btn.addEventListener('mouseenter', () => {
| |
| if (!btn.disabled) {
| |
| btn.style.background = 'rgba(0,0,0,0.9)';
| |
| btn.style.transform = 'scale(1.1)';
| |
| }
| |
| });
| |
| btn.addEventListener('mouseleave', () => {
| |
| btn.style.background = config.buttons.background;
| |
| btn.style.transform = 'scale(1)';
| |
| });
| |
| });
| |
| | |
| // Оновлюємо позицію при завантаженні зображення
| |
| img.addEventListener('load', () => {
| |
| setTimeout(updateButtonPanelPosition, 100);
| |
| });
| |
| }
| |
| | |
| setupEventListeners();
| |
| updateZoomButtons();
| |
| | |
| return {
| |
| overlay,
| |
| img,
| |
| infoPanel,
| |
| prevBtn,
| |
| nextBtn,
| |
| zoomInBtn,
| |
| zoomOutBtn,
| |
| resetZoomBtn,
| |
| infoBtn,
| |
| buttonPanel,
| |
| updateZoomButtons,
| |
| updateButtonPanelPosition
| |
| };
| |
| }
| |
| | |
| // Створення кнопки навігації
| |
| function createNavButton(text, title) {
| |
| const btn = document.createElement('button');
| |
| btn.innerHTML = text;
| |
| btn.title = title;
| |
| btn.style.cssText = `
| |
| position: absolute;
| |
| top: 50%;
| |
| transform: translateY(-50%);
| |
| width: ${config.buttons.size};
| |
| height: ${config.buttons.size};
| |
| background: ${config.buttons.background};
| |
| color: ${config.buttons.color};
| |
| border: none;
| |
| border-radius: 50%;
| |
| font-size: ${config.buttons.fontSize};
| |
| cursor: pointer;
| |
| display: none;
| |
| align-items: center;
| |
| justify-content: center;
| |
| transition: all 0.2s ease;
| |
| z-index: 10001;
| |
| `;
| |
| return btn;
| |
| }
| |
| | |
| // Створення кнопки інструменту
| |
| function createToolButton(text, title) {
| |
| const btn = document.createElement('button');
| |
| btn.innerHTML = text;
| |
| btn.title = title;
| |
| btn.style.cssText = `
| |
| min-width: ${config.buttons.size};
| |
| height: ${config.buttons.size};
| |
| background: ${config.buttons.background};
| |
| color: ${config.buttons.color};
| |
| border: none;
| |
| border-radius: ${config.buttons.borderRadius};
| |
| font-size: ${config.buttons.fontSize};
| |
| cursor: pointer;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| transition: all 0.2s ease;
| |
| padding: 0 10px;
| |
| `;
| |
| return btn;
| |
| }
| |
| | |
| // Навігація по зображенням
| |
| function navigateImages(direction) {
| |
| if (imagesInGallery.length <= 1) return;
| |
|
| |
| currentImageIndex += direction;
| |
|
| |
| if (currentImageIndex < 0) {
| |
| currentImageIndex = imagesInGallery.length - 1;
| |
| } else if (currentImageIndex >= imagesInGallery.length) {
| |
| currentImageIndex = 0;
| |
| }
| |
|
| |
| showImage(imagesInGallery[currentImageIndex]);
| |
| }
| |
| | |
| // Показ інформації
| |
| function toggleInfoPanel() {
| |
| if (!currentOverlay) return;
| |
| const infoPanel = currentOverlay.infoPanel;
| |
| infoPanel.style.display = infoPanel.style.display === 'none' ? 'block' : 'none';
| |
| }
| |
| | |
| // Збір всіх зображень на сторінці для галереї
| |
| function collectAllImages(clickedImage) {
| |
| const images = Array.from(document.querySelectorAll('img'))
| |
| .filter(img => shouldOpenInOverlay(img) && !img.closest('.custom-media-viewer'))
| |
| .map(img => ({
| |
| src: img.src,
| |
| alt: img.alt || 'Зображення',
| |
| title: img.title || '',
| |
| width: img.naturalWidth,
| |
| height: img.naturalHeight
| |
| }));
| |
|
| |
| currentImageIndex = images.findIndex(img => img.src === clickedImage.src);
| |
| return images;
| |
| }
| |
| | |
| // Перевірка, чи повинна картинка відкриватися в оверлеї
| |
| function shouldOpenInOverlay(element) {
| |
| if (config.excludeSelectors.some(selector =>
| |
| element.matches(selector) || element.closest(selector))) {
| |
| return false;
| |
| }
| |
| | |
| if (element.width < 50 || element.height < 50) {
| |
| return false;
| |
| }
| |
| | |
| if (element.closest('.gallery, .thumb, .mw-gallery')) {
| |
| return false;
| |
| }
| |
| | |
| return true;
| |
| }
| |
| | |
| // Показ оверлею
| |
| function showMediaViewerOverlay(imageElement) {
| |
| if (imageElement.closest('a')) {
| |
| const link = imageElement.closest('a');
| |
| if (link.href && link.href.includes('/wiki/File:')) {
| |
| link.addEventListener('click', function(e) {
| |
| e.preventDefault();
| |
| e.stopImmediatePropagation();
| |
| }, true);
| |
| }
| |
| }
| |
| | |
| if (!currentOverlay) {
| |
| currentOverlay = createMediaViewerStyleOverlay();
| |
| }
| |
| | |
| imagesInGallery = collectAllImages(imageElement);
| |
|
| |
| if (imagesInGallery.length === 0) return;
| |
| | |
| showImage(imagesInGallery[currentImageIndex]);
| |
|
| |
| currentOverlay.overlay.style.display = 'flex';
| |
| setTimeout(() => {
| |
| currentOverlay.overlay.style.opacity = '1';
| |
| }, 10);
| |
|
| |
| document.body.style.overflow = 'hidden';
| |
|
| |
| currentOverlay.prevBtn.style.display = imagesInGallery.length > 1 ? 'flex' : 'none';
| |
| currentOverlay.nextBtn.style.display = imagesInGallery.length > 1 ? 'flex' : 'none';
| |
|
| |
| currentScale = 1;
| |
| currentOverlay.img.style.transform = 'scale(1)';
| |
| if (currentOverlay.updateZoomButtons) {
| |
| currentOverlay.updateZoomButtons();
| |
| }
| |
|
| |
| // Оновлюємо позицію кнопок після показу
| |
| setTimeout(() => {
| |
| if (currentOverlay && currentOverlay.updateButtonPanelPosition) {
| |
| currentOverlay.updateButtonPanelPosition();
| |
| }
| |
| }, 200);
| |
| }
| |
| | |
| // Показ конкретного зображення
| |
| function showImage(imageData) {
| |
| if (!currentOverlay) return;
| |
|
| |
| currentOverlay.img.src = imageData.src;
| |
| currentOverlay.img.alt = imageData.alt;
| |
|
| |
| currentOverlay.infoPanel.innerHTML = `
| |
| <div><strong>${imageData.alt}</strong></div>
| |
| <div>Розмір: ${imageData.width} × ${imageData.height}px</div>
| |
| <div style="margin-top: 10px; opacity: 0.7;">
| |
| ← → для навігації • I для інформації • Ctrl + +-/0 для масштабу • Esc для закриття
| |
| </div>
| |
| `;
| |
|
| |
| currentScale = 1;
| |
| currentOverlay.img.style.transform = 'scale(1)';
| |
| if (currentOverlay.updateZoomButtons) {
| |
| currentOverlay.updateZoomButtons();
| |
| }
| |
|
| |
| // Оновлюємо позицію кнопок після завантаження нового зображення
| |
| currentOverlay.img.onload = () => {
| |
| setTimeout(() => {
| |
| if (currentOverlay && currentOverlay.updateButtonPanelPosition) {
| |
| currentOverlay.updateButtonPanelPosition();
| |
| }
| |
| }, 100);
| |
| };
| |
| }
| |
| | |
| // Обробник кліків
| |
| document.addEventListener('click', function(e) {
| |
| const target = e.target;
| |
| | |
| if (target.closest('.custom-media-viewer')) {
| |
| return;
| |
| }
| |
| | |
| if (target.tagName === 'IMG' && shouldOpenInOverlay(target)) {
| |
| e.preventDefault();
| |
| e.stopImmediatePropagation();
| |
| showMediaViewerOverlay(target);
| |
| return false;
| |
| }
| |
| | |
| if (target.tagName === 'A' && 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);
| |
| return false;
| |
| }
| |
| }
| |
| }, true);
| |
| | |
| // Повністю відключаємо MediaViewer при завантаженні
| |
| document.addEventListener('DOMContentLoaded', disableMediaViewerCompletely);
| |
| setTimeout(disableMediaViewerCompletely, 100);
| |
| | |
| // Стилі
| |
| const style = document.createElement('style');
| |
| style.textContent = `
| |
| .custom-media-viewer * {
| |
| box-sizing: border-box;
| |
| }
| |
|
| |
| .custom-media-viewer button:hover:not(:disabled) {
| |
| transform: scale(1.1) !important;
| |
| background: rgba(0,0,0,0.9) !important;
| |
| }
| |
|
| |
| .custom-media-viewer button:disabled {
| |
| cursor: not-allowed !important;
| |
| opacity: 0.5 !important;
| |
| }
| |
|
| |
| .custom-media-viewer img {
| |
| transition: transform 0.3s ease !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;
| |
| }
| |
|
| |
| /* Повністю ховаємо стандартний MediaViewer */
| |
| .mw-mmv-overlay,
| |
| .mediaViewerOverlay {
| |
| display: none !important;
| |
| }
| |
|
| |
| @media (max-width: 768px) {
| |
| .custom-media-viewer button {
| |
| min-width: 35px !important;
| |
| height: 35px !important;
| |
| font-size: 16px !important;
| |
| padding: 0 8px !important;
| |
| }
| |
|
| |
| .image-info-panel {
| |
| font-size: 12px !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;
| |
| }
| |
| }
| |
| `;
| |
| document.head.appendChild(style);
| |
| | |
| })();
| |
| | |
| | |
| | |
| | |
| // Виносимо функцію для кнопки "Випадкова" ЗА МЕЖІ інших слухачів
| |
| function createRandomButtonOnly() {
| |
| // Перевіряємо чи кнопка вже існує
| |
| if (document.getElementById('float-random-btn')) { | |
| return;
| |
| }
| |
|
| |
| // Перевіряємо чи це мобільна версія
| |
| if (!document.body.classList.contains('skin-minerva')) {
| |
| return; | | return; |
| } | | } |
|
| |
| console.log('Створюємо кнопку Випадкова...');
| |
| | | |
| const btn = document.createElement('button'); | | const btn = document.createElement('button'); |
| Рядок 856: |
Рядок 133: |
| bottom: 100px; | | bottom: 100px; |
| right: 15px; | | right: 15px; |
| z-index: 10000; | | z-index: 9998; |
| background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%); | | background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%); |
| color: white; | | color: white; |
| Рядок 884: |
Рядок 161: |
| this.style.transform = 'scale(1)'; | | this.style.transform = 'scale(1)'; |
| this.style.boxShadow = '0 4px 15px rgba(0,0,0,0.3)'; | | this.style.boxShadow = '0 4px 15px rgba(0,0,0,0.3)'; |
| }; | | }); |
| | | |
| document.body.appendChild(btn); | | document.body.appendChild(btn); |
| } | | } |
|
| |
|
| // Окремий слухач для приховування елементів і створення кнопки | | // ========================= |
| document.addEventListener('DOMContentLoaded', function() {
| | // ПРИХОВАННЯ ЕЛЕМЕНТІВ У МОБІЛЬНІЙ ВЕРСІЇ |
| // Приховування "Відмови" (ваш код)
| | // ========================= |
| if (window.innerWidth <= 768 || document.body.classList.contains('skin-minerva')) { | | function hideMobileElements() { |
| const allElements = document.querySelectorAll('*'); | | if (!document.body.classList.contains('skin-minerva')) return; |
| allElements.forEach(element => { | | |
| | // Приховуємо елементи з текстом "Відмова" |
| | setTimeout(() => { |
| | const elements = document.querySelectorAll('*'); |
| | elements.forEach(element => { |
| if (element.textContent && element.textContent.includes('Відмова')) { | | if (element.textContent && element.textContent.includes('Відмова')) { |
| element.style.display = 'none'; | | element.style.display = 'none'; |
| if (element.closest('li')) { | | const parentLi = element.closest('li'); |
| element.closest('li').style.display = 'none';
| | if (parentLi) parentLi.style.display = 'none'; |
| }
| |
| } | | } |
| }); | | }); |
| | | |
| const links = document.querySelectorAll('a[href]'); | | // Приховуємо за посиланням |
| | const links = document.querySelectorAll('a[href*="%D0%92%D1%96%D0%B4%D0%BC%D0%BE%D0%B2%D0%B0"]'); |
| links.forEach(link => { | | links.forEach(link => { |
| if (link.href.includes('%D0%92%D1%96%D0%B4%D0%BC%D0%BE%D0%B2%D0%B0') || | | link.style.display = 'none'; |
| link.textContent.includes('Відмова')) {
| | const parentLi = link.closest('li'); |
| link.style.display = 'none';
| | if (parentLi) parentLi.style.display = 'none'; |
| if (link.closest('li')) link.closest('li').style.display = 'none'; | | }); |
| | }, 1000); |
| | } |
| | |
| | // ========================= |
| | // OVERLAY ДЛЯ ЗОБРАЖЕНЬ (спрощена версія) |
| | // ========================= |
| | function initImageOverlay() { |
| | // Простий оверлей для зображень |
| | document.addEventListener('click', function(e) { |
| | if (e.target.tagName === 'IMG' && e.target.width > 100) { |
| | e.preventDefault(); |
| | |
| | const overlay = document.createElement('div'); |
| | overlay.style.cssText = ` |
| | position: fixed; |
| | top: 0; |
| | left: 0; |
| | width: 100%; |
| | height: 100%; |
| | background: rgba(0,0,0,0.9); |
| | display: flex; |
| | justify-content: center; |
| | align-items: center; |
| | z-index: 10000; |
| | cursor: pointer; |
| | `; |
| | |
| | const img = document.createElement('img'); |
| | img.src = e.target.src; |
| | img.style.cssText = ` |
| | max-width: 90%; |
| | max-height: 90%; |
| | object-fit: contain; |
| | `; |
| | |
| | overlay.appendChild(img); |
| | document.body.appendChild(overlay); |
| | |
| | overlay.addEventListener('click', function() { |
| | document.body.removeChild(overlay); |
| | }); |
| | } |
| | }); |
| | } |
| | |
| | // ========================= |
| | // ЗАГАЛЬНИЙ ІНІЦІАЛІЗАТОР |
| | // ========================= |
| | document.addEventListener('DOMContentLoaded', function() { |
| | // Ініціалізуємо оверлей |
| | initImageOverlay(); |
| | |
| | // Для мобільної версії |
| | if (document.body.classList.contains('skin-minerva')) { |
| | // Приховуємо елементи |
| | hideMobileElements(); |
| | |
| | // Створюємо кнопку випадкової сторінки |
| | createRandomButton(); |
| | |
| | // Додаткова перевірка через 2 секунди |
| | setTimeout(() => { |
| | if (!document.getElementById('float-random-btn')) { |
| | createRandomButton(); |
| } | | } |
| }); | | hideMobileElements(); |
| | }, 2000); |
| } | | } |
|
| |
| // Створення кнопки "Випадкова"
| |
| createRandomButtonOnly();
| |
| }); | | }); |
|
| |
|
| // Додаткові способи запуску для надійності | | // Додаткова перевірка при повному завантаженні |
| window.addEventListener('load', function() { | | window.addEventListener('load', function() { |
| setTimeout(createRandomButtonOnly, 500); | | if (document.body.classList.contains('skin-minerva')) { |
| | setTimeout(createRandomButton, 500); |
| | } |
| }); | | }); |
|
| |
|
| // Якщо все ще не працює, додамо простий інтервал | | // Резервний виклик |
| setTimeout(function() { | | setTimeout(function() { |
| if (!document.getElementById('float-random-btn') && | | if (document.body.classList.contains('skin-minerva') && !document.getElementById('float-random-btn')) { |
| document.body.classList.contains('skin-minerva')) {
| | createRandomButton(); |
| createRandomButtonOnly(); | |
| } | | } |
| }, 1000); | | }, 3000); |