|
|
| Рядок 101: |
Рядок 101: |
| } | | } |
| applyFontSize(); | | applyFontSize(); |
| });
| |
|
| |
| // ================== КІОСКОВИЙ РЕЖИМ ДЛЯ ЗОБРАЖЕНЬ ==================
| |
| // Додайте в MediaWiki:Common.js
| |
|
| |
| $(document).ready(function() {
| |
| // Перевіряємо чи це кіосковий режим
| |
| var isKiosk = document.cookie.includes('kiosk_mode=1') ||
| |
| window.location.href.includes('kiosk=1') ||
| |
| /mobile|android|iphone|ipad|touch|tablet/i.test(navigator.userAgent);
| |
|
| |
| // Якщо це пряме зображення і кіосковий режим
| |
| if (isKiosk && isImagePage()) {
| |
| addKioskInterfaceToImage();
| |
| }
| |
|
| |
| // Додаємо перемикач режиму
| |
| addModeSwitcher();
| |
| });
| |
|
| |
| // Перевірка чи це сторінка з зображенням
| |
| function isImagePage() {
| |
| return window.location.pathname.includes('/images/') &&
| |
| /\.(png|jpg|jpeg|gif)$/i.test(window.location.pathname);
| |
| }
| |
|
| |
| // Додаємо інтерфейс для зображень
| |
| function addKioskInterfaceToImage() {
| |
| console.log('Додаємо кіосковий інтерфейс до зображення');
| |
|
| |
| // Робимо фон чорним
| |
| document.body.style.background = 'black';
| |
| document.body.style.margin = '0';
| |
| document.body.style.padding = '0';
| |
| document.body.style.height = '100vh';
| |
| document.body.style.overflow = 'hidden';
| |
|
| |
| // Центруємо зображення
| |
| var images = document.getElementsByTagName('img');
| |
| if (images.length > 0) {
| |
| var img = images[0];
| |
| img.style.display = 'block';
| |
| img.style.margin = 'auto';
| |
| img.style.maxWidth = '95%';
| |
| img.style.maxHeight = '95%';
| |
| img.style.position = 'absolute';
| |
| img.style.top = '0';
| |
| img.style.bottom = '0';
| |
| img.style.left = '0';
| |
| img.style.right = '0';
| |
| }
| |
|
| |
| // Додаємо кнопки
| |
| addKioskButtons();
| |
|
| |
| // Додаємо обробку жествів
| |
| addTouchGestures();
| |
| }
| |
|
| |
| // Додаємо кнопки управління
| |
| function addKioskButtons() {
| |
| var buttonHTML = `
| |
| <div id="kiosk-buttons" style="
| |
| position: fixed;
| |
| top: 20px;
| |
| left: 20px;
| |
| right: 20px;
| |
| z-index: 10000;
| |
| display: flex;
| |
| justify-content: space-between;
| |
| ">
| |
| <button onclick="goHome()" style="
| |
| background: #0066cc;
| |
| color: white;
| |
| border: none;
| |
| padding: 20px 25px;
| |
| font-size: 24px;
| |
| border-radius: 10px;
| |
| cursor: pointer;
| |
| ">⌂ ДОДОМУ</button>
| |
|
| |
| <button onclick="closeImage()" style="
| |
| background: #cc0000;
| |
| color: white;
| |
| border: none;
| |
| padding: 20px 25px;
| |
| font-size: 24px;
| |
| border-radius: 10px;
| |
| cursor: pointer;
| |
| ">✕ ЗАКРИТИ</button>
| |
| </div>
| |
| `;
| |
|
| |
| document.body.insertAdjacentHTML('afterbegin', buttonHTML);
| |
| }
| |
|
| |
| // Додаємо жести для тачскрінів
| |
| function addTouchGestures() {
| |
| var startY;
| |
|
| |
| document.addEventListener('touchstart', function(e) {
| |
| startY = e.touches[0].clientY;
| |
| });
| |
|
| |
| document.addEventListener('touchend', function(e) {
| |
| if (!startY) return;
| |
|
| |
| var endY = e.changedTouches[0].clientY;
| |
| if (endY - startY > 100) { // Свайп вниз
| |
| closeImage();
| |
| }
| |
| startY = null;
| |
| });
| |
| }
| |
|
| |
| // Функції управління
| |
| function closeImage() {
| |
| if (window.history.length > 1) {
| |
| window.history.back();
| |
| } else {
| |
| window.location.href = '/wiki/';
| |
| }
| |
| }
| |
|
| |
| function goHome() {
| |
| window.location.href = '/wiki/';
| |
| }
| |
|
| |
| // Додаємо перемикач режиму на всі сторінки
| |
| function addModeSwitcher() {
| |
| var isKiosk = document.cookie.includes('kiosk_mode=1') ||
| |
| window.location.href.includes('kiosk=1');
| |
|
| |
| var switcherHTML = `
| |
| <div style="
| |
| position: fixed;
| |
| bottom: 10px;
| |
| right: 10px;
| |
| background: #333;
| |
| color: white;
| |
| padding: 10px;
| |
| border-radius: 5px;
| |
| z-index: 9999;
| |
| font-size: 14px;
| |
| ">
| |
| ${isKiosk ? '📱 Кіосковий режим' : '💻 Звичайний режим'}
| |
| | <a href="${isKiosk ? '?kiosk=0' : '?kiosk=1'}"
| |
| style="color: white; text-decoration: underline;">
| |
| ${isKiosk ? 'Перейти в звичайний' : 'Перейти в кіосковий'}
| |
| </a>
| |
| </div>
| |
| `;
| |
|
| |
| document.body.insertAdjacentHTML('beforeend', switcherHTML);
| |
| }
| |
|
| |
| // Обробка клавіші ESC
| |
| document.addEventListener('keydown', function(e) {
| |
| if (e.key === 'Escape' && isImagePage()) {
| |
| closeImage();
| |
| }
| |
| });
| |
|
| |
| // Додайте в кінець Common.js - для MediaViewer
| |
| $(document).on('mmv-loaded', function() {
| |
| // Перевіряємо чи це кіосковий режим
| |
| var isKiosk = document.cookie.includes('kiosk_mode=1') ||
| |
| window.location.href.includes('kiosk=1');
| |
|
| |
| if (isKiosk) {
| |
| // Додаємо велику кнопку закриття для MediaViewer
| |
| setTimeout(function() {
| |
| var closeBtn = $('.mw-mmv-close');
| |
| if (closeBtn.length > 0) {
| |
| closeBtn.css({
| |
| 'width': '50px',
| |
| 'height': '50px',
| |
| 'font-size': '30px',
| |
| 'line-height': '50px'
| |
| });
| |
|
| |
| // Додаткова велика кнопка
| |
| $('<button>')
| |
| .text('ЗАКРИТИ')
| |
| .css({
| |
| 'position': 'fixed',
| |
| 'top': '20px',
| |
| 'right': '20px',
| |
| 'background': 'red',
| |
| 'color': 'white',
| |
| 'padding': '20px',
| |
| 'font-size': '24px',
| |
| 'border': 'none',
| |
| 'border-radius': '10px',
| |
| 'z-index': '10001',
| |
| 'cursor': 'pointer'
| |
| })
| |
| .click(function() {
| |
| closeBtn.click();
| |
| })
| |
| .appendTo('body');
| |
| }
| |
| }, 1000);
| |
| }
| |
| }); | | }); |