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

MediaWiki:Common.js (переглянути вихідний код)

Версія за 11:28, 15 січня 2026

1680 байтів вилучено , 15 січень

нема опису редагування

Admin

Бюрократи, Адміністратори інтерфейсу, Адміністратори

6202

редагування

@@ Рядок 105: / Рядок 105: @@
 // ==================================================
-// ВИПРАВЛЕННЯ ПОШУКУ - БЕЗ OVERLAY
+// МОБІЛЬНИЙ ПОШУК
 // ==================================================
-$(document).ready(function() {
+$(function() {
-     var $searchInput = $('#searchInput');
+     // Тільки для мобільних
-    var $body = $('body');
+    if ($(window).width() > 768) return;
-     // Невелика затримка щоб DOM повністю завантажився
+    var $searchBtn = $('.mobile-search-btn');
-     setTimeout(function() {
+    var $overlay = $('.mobile-search-overlay');
-         // Змінюємо placeholder
-        $searchInput.attr('placeholder', 'Пошук...');
+     // Якщо вже є - не створюємо заново
+     if ($searchBtn.length === 0) {
+         $searchBtn = $('<div class="mobile-search-btn">' +
+            '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">' +
+            '<circle cx="11" cy="11" r="8"/>' +
+            '<path d="m21 21-4.35-4.35"/>' +
+            '</svg>' +
+        '</div>');
-         // Прибираємо readonly
+         $overlay = $('<div class="mobile-search-overlay">' +
-        $searchInput.prop('readonly', false);
+            '<input type="text" placeholder="Пошук..." autocomplete="off">' +
-         $searchInput.removeAttr('readonly');
+            '<div class="mobile-search-close">×</div>' +
+         '</div>');
-        // Прибираємо класи тригера
+         $('.minerva-header .branding-box').after($searchBtn);
-         $searchInput.removeClass('skin-minerva-search-trigger');
+         $('body').append($overlay);
+    }
-        // Прибираємо всі обробники подій з input
-        $searchInput.off();
+    var $input = $overlay.find('input');
+    var $close = $overlay.find('.mobile-search-close');
-        // Блокуємо overlay при кліку/фокусі
-         $searchInput.on('click focus', function(e) {
-            e.stopPropagation();
-            e.stopImmediatePropagation();
-            // Прибираємо overlay класи
-            $body.removeClass('overlay-enabled search-enabled');
-            // Ховаємо overlay
-            $('.overlay, .search-overlay').remove();
-            // Прибираємо hash
-            if (window.location.hash === '#/search') {
-                history.replaceState(null, null, window.location.pathname);
-            }
-            // Фокус на input
-            $(this).focus();
-        });
-        // При введенні тексту
-        $searchInput.on('input', function(e) {
-            $body.removeClass('overlay-enabled search-enabled');
-            $('.overlay, .search-overlay').remove();
-        });
-        // При Enter - перехід на сторінку пошуку
-        $searchInput.on('keydown', function(e) {
-            if (e.which === 13 || e.keyCode === 13) {
-                e.preventDefault();
-                e.stopPropagation();
-                var query = $(this).val().trim();
-                if (query) {
-                    window.location.href = '/index.php?title=Спеціальна:Пошук&search=' + encodeURIComponent(query);
-                }
-                return false;
-            }
-        });
-    }, 50);
-     // MutationObserver - блокуємо overlay класи на body
+     $searchBtn.on('click', function(e) {
-    var observer = new MutationObserver(function(mutations) {
+         e.preventDefault();
-         mutations.forEach(function(mutation) {
+        e.stopPropagation();
-            if (mutation.attributeName === 'class') {
+        $overlay.addClass('active');
-                if ($body.hasClass('overlay-enabled')) {
+        setTimeout(function() { $input.focus(); }, 100);
-                    $body.removeClass('overlay-enabled search-enabled');
-                    $('.overlay, .search-overlay').remove();
-                    // Прибираємо hash
-                    if (window.location.hash === '#/search') {
-                        history.replaceState(null, null, window.location.pathname);
-                    }
-                }
-            }
-        });
      });
-     observer.observe(document.body, { attributes: true });
+     $close.on('click', function() {
+        $overlay.removeClass('active');
+        $input.val('');
+    });
-    // Блокуємо hashchange на #/search
+     $input.on('keydown', function(e) {
-     $(window).on('hashchange', function(e) {
+         if (e.keyCode === 13) {
-         if (window.location.hash === '#/search') {
+             var query = $input.val().trim();
-             e.preventDefault();
+             if (query) {
-             history.replaceState(null, null, window.location.pathname);
+                window.location.href = '/index.php?title=Спеціальна:Пошук&search=' + encodeURIComponent(query);
-             $body.removeClass('overlay-enabled search-enabled');
+            }
-             $('.overlay, .search-overlay').remove();
+        }
+        if (e.keyCode === 27) {
+             $overlay.removeClass('active');
+             $input.val('');
          }
      });
-     // Перевіряємо hash при завантаженні
+     $overlay.on('click', function(e) {
-    if (window.location.hash === '#/search') {
+        if (e.target === this) {
-        history.replaceState(null, null, window.location.pathname);
+            $overlay.removeClass('active');
-     }
+            $input.val('');
+        }
+     });
 });