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

← Попереднє редагування Наступне редагування →

@@ Рядок 101: / Рядок 101: @@
      }
      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();
+    }
 });