MediaWiki:Common.js: Perbedaan antara revisi
Tidak ada ringkasan suntingan Tanda: Suntingan perangkat seluler Suntingan peramban seluler |
Tidak ada ringkasan suntingan Tanda: Suntingan perangkat seluler Suntingan peramban seluler |
||
| Baris 1.327: | Baris 1.327: | ||
/* ========================================================== | /* ========================================================== | ||
🔍 MIPPEDIA GLOBAL SEARCH SWITCHER | 🔍 MIPPEDIA GLOBAL SEARCH SWITCHER (MOBILE ULTRA FIX) | ||
Fungsi: | Fungsi: Paksa muncul di overlay pencarian seluler | ||
========================================================== */ | ========================================================== */ | ||
(function() { | (function() { | ||
$(document).ready(function() { | $(document).ready(function() { | ||
var projects = [ | var projects = [ | ||
{ id: 'en', name: 'Mippedia English', url: 'https://en.mippedia.org/w/index.php?search=' }, | { id: 'en', name: 'Mippedia English', url: 'https://en.mippedia.org/w/index.php?search=' }, | ||
| Baris 1.340: | Baris 1.338: | ||
]; | ]; | ||
// | // 1. CSS Khusus Mobile Overlay agar melayang di atas saran pencarian | ||
$('<style>').text(` | $('<style>').text(` | ||
.mip-search-switcher { | .mip-search-switcher { | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
gap: | gap: 8px; | ||
padding: | padding: 12px; | ||
background: # | background: #f1f3f4; | ||
border-top: 1px solid #ddd; | |||
border-bottom: 1px solid #ddd; | border-bottom: 1px solid #ddd; | ||
z-index: 100000; | |||
} | } | ||
.mip-search-btn { | .mip-search-btn { | ||
font-size: 11px; | font-size: 11px; | ||
padding: | padding: 6px 12px; | ||
background: #fff; | background: #fff; | ||
border: 1px solid #3498db; | border: 1px solid #3498db; | ||
color: #3498db; | color: #3498db; | ||
border-radius: | border-radius: 20px; | ||
cursor: pointer; | cursor: pointer; | ||
font-weight: bold; | font-weight: bold; | ||
box-shadow: 0 2px 4px rgba(0,0,0,0.05); | |||
} | } | ||
.mip-hidden { display: none !important; } | .mip-hidden { display: none !important; } | ||
`).appendTo('head'); | `).appendTo('head'); | ||
function createSwitcher() { | |||
function | if ($('#mip-switcher-container').length) return $('#mip-switcher-container'); | ||
if ($('#mip-switcher-container').length | var $container = $('<div id="mip-switcher-container" class="mip-search-switcher mip-hidden"></div>'); | ||
$container.append('<div style="width:100%; font-size:10px; color:#5f6368; margin-bottom:6px; font-weight:bold;">CARI DI PROYEK LAIN:</div>'); | |||
projects.forEach(function(p) { | |||
var $btn = $(`<div class="mip-search-btn">${p.name}</div>`); | |||
$btn.on('click', function(e) { | |||
e.preventDefault(); | |||
var query = $('.mw-ui-input:visible, .searchInput:visible').val(); | |||
if (query) { | |||
window.location.href = p.url + encodeURIComponent(query); | |||
} | |||
} | |||
}); | }); | ||
$container.append($btn); | |||
}); | |||
return $container; | |||
} | |||
// 2. Monitoring Input (Gunakan Event Delegation karena elemennya dinamis) | |||
$(document).on('input focus', '.mw-ui-input, .searchInput', function() { | |||
var $input = $(this); | |||
var val = $input.val().trim(); | |||
var $container = createSwitcher(); | |||
// Injeksi lokasi: cari elemen pembungkus hasil pencarian di mobile | |||
var $target = $('.search-content, .results, .search-overlay'); | |||
if ($target.length && !$.contains($target[0], $container[0])) { | |||
$target.prepend($container); // Taruh di paling atas daftar hasil | |||
} | } | ||
if (val.length > 0) { | if (val.length > 0) { | ||
$ | $container.removeClass('mip-hidden'); | ||
} else { | } else { | ||
$ | $container.addClass('mip-hidden'); | ||
} | } | ||
}); | }); | ||
}); | }); | ||
})(); | })(); | ||