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: Menambahkan opsi cari ke proyek Mippedia lain
   Fungsi: Paksa muncul di overlay pencarian seluler
  Target: Mobile & Desktop
   ========================================================== */
   ========================================================== */
(function() {
(function() {
     $(document).ready(function() {
     $(document).ready(function() {
        // 1. Konfigurasi Subdomain Mippedia
         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:
         ];
         ];


         // 2. CSS agar tampilan tombol rapi di bawah bar pencarian
         // 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: 5px;
                 gap: 8px;
                 padding: 10px;
                 padding: 12px;
                 background: #f8f9fa;
                 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: 5px 10px;
                 padding: 6px 12px;
                 background: #fff;
                 background: #fff;
                 border: 1px solid #3498db;
                 border: 1px solid #3498db;
                 color: #3498db;
                 color: #3498db;
                 border-radius: 15px;
                 border-radius: 20px;
                 cursor: pointer;
                 cursor: pointer;
                 font-weight: bold;
                 font-weight: bold;
                 transition: 0.2s;
                 box-shadow: 0 2px 4px rgba(0,0,0,0.05);
             }
             }
            .mip-search-btn:hover {
                background: #3498db;
                color: #fff;
            }
            /* Sembunyikan jika tidak ada input */
             .mip-hidden { display: none !important; }
             .mip-hidden { display: none !important; }
         `).appendTo('head');
         `).appendTo('head');


        // 3. Logic Injeksi Tombol
         function createSwitcher() {
         function injectSwitcher() {
             if ($('#mip-switcher-container').length) return $('#mip-switcher-container');
            // Cek apakah kontainer sudah ada, kalau belum buat
           
             if ($('#mip-switcher-container').length === 0) {
            var $container = $('<div id="mip-switcher-container" class="mip-search-switcher mip-hidden"></div>');
                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>');
               
           
                // Tambahkan teks instruksi kecil
            projects.forEach(function(p) {
                $container.append('<div style="width:100%; font-size:10px; color:#777; margin-bottom:5px;">Cari di proyek lain:</div>');
                var $btn = $(`<div class="mip-search-btn">${p.name}</div>`);
               
                $btn.on('click', function(e) {
                projects.forEach(function(p) {
                    e.preventDefault();
                    var $btn = $(`<div class="mip-search-btn" data-url="${p.url}">${p.name}</div>`);
                    var query = $('.mw-ui-input:visible, .searchInput:visible').val();
                    $btn.on('click', function() {
                    if (query) {
                        var query = $('.mw-ui-input, .searchInput').val(); // Ambil apa yang diketik user
                        window.location.href = p.url + encodeURIComponent(query);
                        if (query) {
                     }
                            window.location.href = $(this).data('url') + encodeURIComponent(query);
                        }
                     });
                    $container.append($btn);
                 });
                 });
                $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();


                // Masukkan ke bawah kolom input pencarian (Mobile & Desktop support)
            // Injeksi lokasi: cari elemen pembungkus hasil pencarian di mobile
                $('.search-overlay .search-content, #searchform, .mw-searchInput-container').after($container);
            var $target = $('.search-content, .results, .search-overlay');
           
            if ($target.length && !$.contains($target[0], $container[0])) {
                $target.prepend($container); // Taruh di paling atas daftar hasil
             }
             }
        }


        // 4. Trigger: Munculkan tombol hanya saat user mulai mengetik
        $(document).on('input', '.mw-ui-input, .searchInput, .mw-searchInput', function() {
            var val = $(this).val().trim();
            injectSwitcher(); // Pastikan container terpasang
           
             if (val.length > 0) {
             if (val.length > 0) {
                 $('#mip-switcher-container').removeClass('mip-hidden');
                 $container.removeClass('mip-hidden');
             } else {
             } else {
                 $('#mip-switcher-container').addClass('mip-hidden');
                 $container.addClass('mip-hidden');
             }
             }
         });
         });
     });
     });
})();
})();