Lompat ke isi

MediaWiki:Common.js: Perbedaan antara revisi

Dari Mippedia bahasa Indonesia, ensiklopedia umum
Tidak ada ringkasan suntingan
Tanda: Suntingan perangkat seluler Suntingan peramban seluler
Tidak ada ringkasan suntingan
Tanda: Suntingan perangkat seluler Suntingan peramban seluler
Baris 121: Baris 121:




/* Smart Search Overlay - Spesialis Mobile */
/* 1. Auto-Hide Header (Minerva Mobile Optimized) */
$(document).ready(function() {
$(document).ready(function() {
     // Cari tombol search bawaan (ikon kaca pembesar)
     var lastScrollTop = 0;
     var searchBtn = $('#searchIcon, .mw-ui-icon-minerva-search');
    var delta = 5;
     var navbarHeight = $('.header-container').outerHeight() || 50;


     if (searchBtn.length) {
     $(window).scroll(function() {
        searchBtn.click(function(e) {
        var st = $(this).scrollTop();
             // Cegah buka halaman search standar kalau di HP
       
             if ($(window).width() < 768) {
        // Cek scroll harus lebih dari delta
                 e.preventDefault();
        if(Math.abs(lastScrollTop - st) <= delta) return;
                 showSearchOverlay();
       
        // Scroll ke bawah & sudah lewat navbar
        if (st > lastScrollTop && st > navbarHeight){
            // Sembunyiin Header
            $('.header-container, .minerva-header').css({
                'transform': 'translateY(-100%)',
                'transition': 'transform 0.3s ease-in-out'
            });
        } else {
             // Scroll ke atas
             if(st + $(window).height() < $(document).height()) {
                 $('.header-container, .minerva-header').css({
                    'transform': 'translateY(0)',
                    'transition': 'transform 0.3s ease-in-out'
                 });
             }
             }
         });
         }
    }
        lastScrollTop = st;
    });
});


    function showSearchOverlay() {
/* 2. Tombol Salin Cepat (Copy to Clipboard) */
        var overlayHtml = '<div id="custom-search-overlay" style="position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.98); z-index:20000; display:flex; flex-direction:column; align-items:center; padding-top:50px; opacity:0; transition:all 0.4s ease;">' +
$(document).ready(function() {
            '<div id="close-search" style="position:absolute; top:20px; right:20px; font-size:30px; cursor:pointer; color:#333;">×</div>' +
    if (mw.config.get('wgIsArticle')) {
             '<h2 style="margin-bottom:20px; color:#36c; font-family:sans-serif;">Cari di Mippedia</h2>' +
        // Targetkan elemen pre, code, atau blockquote
             '<form action="/w/index.php" method="get" style="width:85%;">' +
        $('pre, code, blockquote').each(function() {
                '<input type="hidden" name="title" value="Istimewa:Pencarian">' +
             var $this = $(this);
                '<input type="search" name="search" placeholder="Ketik kata kunci..." autofocus style="width:100%; padding:15px; border:2px solid #36c; border-radius:30px; font-size:18px; outline:none; box-shadow:0 4px 10px rgba(54,102,204,0.1);">' +
             $this.css('position', 'relative');
                '<button type="submit" style="margin-top:20px; width:100%; background:#36c; color:#fff; border:none; padding:12px; border-radius:30px; font-weight:bold; font-size:16px;">Cari Sekarang</button>' +
           
            '</form>' +
            var $copyBtn = $('<div style="position:absolute; top:5px; right:5px; background:#36c; color:#fff; padding:2px 8px; border-radius:4px; font-size:10px; cursor:pointer; opacity:0.6;">SALIN</div>');
            '</div>';
 
        if ($('#custom-search-overlay').length === 0) {
            $('body').append(overlayHtml);
              
              
             // Animasi masuk
             $copyBtn.click(function() {
            setTimeout(function() {
                 var text = $this.text();
                 $('#custom-search-overlay').css('opacity', '1');
                navigator.clipboard.writeText(text).then(function() {
            }, 10);
                    $copyBtn.text('BERHASIL!').css('background', '#00af89');
 
                    setTimeout(function() {
            // Fungsi tutup
                        $copyBtn.text('SALIN').css('background', '#36c');
            $('#close-search, #custom-search-overlay').click(function(e) {
                    }, 2000);
                if (e.target !== this && e.target.id !== 'close-search') return;
                });
                $('#custom-search-overlay').css('opacity', '0');
                setTimeout(function() { $('#custom-search-overlay').remove(); }, 400);
             });
             });
         }
           
            $this.append($copyBtn);
         });
     }
     }
});
});

Revisi per 9 April 2026 20.51

/* Script Estimasi Waktu Baca - Spesialis Mobile (Minerva) & Desktop */
$(document).ready(function() {
    // Hanya jalan di halaman artikel asli
    if (mw.config.get('wgIsArticle') && mw.config.get('wgAction') === 'view' && mw.config.get('wgNamespaceNumber') === 0) {
        
        function hitungWaktuBaca() {
            // Ambil teks dari konten utama
            var content = $('#mw-content-text').text();
            
            // Hitung jumlah kata (asumsi rata-rata orang baca 200 kata per menit)
            var wordsPerMinute = 200;
            var textLength = content.split(/\s+/).length; // Pecah berdasarkan spasi
            var readingTime = Math.ceil(textLength / wordsPerMinute);
            
            // Bikin elemen tampilannya
            var icon = '🕒'; // Emoji jam biar simpel dan ringan
            var label = (readingTime <= 1) ? 'Kurang dari 1 menit' : readingTime + ' menit';
            
            var html = '<div id="reading-time-auto" style="font-size: 0.9em; color: #54595d; margin-bottom: 15px; display: flex; align-items: center; font-family: sans-serif;">';
            html += '<span style="margin-right: 5px;">' + icon + '</span>';
            html += '<span>Estimasi waktu baca: <b>' + label + '</b></span>';
            html += '</div>';

            // PENEMPELAN TARGET:
            // Di Minerva (HP), judul biasanya ada di .page-heading
            // Di Vector (Desktop), judul ada di #firstHeading
            if ($('.page-heading').length) {
                $('.page-heading').after(html); // Target Mobile
            } else if ($('#firstHeading').length) {
                $('#firstHeading').after(html); // Target Desktop
            }
        }

        // Jalankan fungsi
        hitungWaktuBaca();
    }
});


/* Script Tombol Back to Top (Spesial Mobile) */
$(document).ready(function() {
    // Bikin tombolnya lewat JS biar gak ribet edit CSS/HTML
    var btnHtml = '<div id="backToTop" style="display:none; position:fixed; bottom:80px; right:20px; z-index:9999; background:#36c; color:#fff; width:45px; height:45px; border-radius:50%; text-align:center; line-height:45px; font-size:24px; cursor:pointer; box-shadow: 0 4px 6px rgba(0,0,0,0.3); opacity: 0.8;">↑</div>';
    $('body').append(btnHtml);

    // Fungsi munculin tombol pas di-scroll
    $(window).scroll(function() {
        if ($(this).scrollTop() > 300) {
            $('#backToTop').fadeIn();
        } else {
            $('#backToTop').fadeOut();
        }
    });

    // Fungsi pas tombol diklik
    $('#backToTop').click(function() {
        $('html, body').animate({scrollTop: 0}, 600);
        return false;
    });
});


/* Smart Glossary Pop-up (Pratinjau Link Ringan) */
$(document).ready(function() {
    if (mw.config.get('wgIsArticle') && mw.config.get('wgAction') === 'view') {
        
        var timer;
        // Targetkan link di dalam konten artikel saja
        $('#mw-content-text a').on('mouseenter touchstart', function(e) {
            var $link = $(this);
            var title = $link.attr('title');
            
            // Jangan jalan kalau link-nya bukan artikel (misal link luar atau redlink)
            if (!title || $link.hasClass('new') || $link.hasClass('external')) return;

            timer = setTimeout(function() {
                $.getJSON(mw.util.wikiScript('api'), {
                    action: 'query',
                    prop: 'extracts',
                    exintro: true,
                    exsentences: 2, // Ambil 2 kalimat aja biar singkat
                    titles: title,
                    explaintext: true,
                    format: 'json'
                }, function(data) {
                    var pages = data.query.pages;
                    var pageId = Object.keys(pages)[0];
                    var extract = pages[pageId].extract;

                    if (extract) {
                        // Hapus pop-up lama kalau ada
                        $('.wiki-preview').remove();

                        var preview = $('<div class="wiki-preview" style="position:absolute; background:#fff; color:#202122; border:1px solid #a2a9b1; padding:12px; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.2); z-index:10001; font-size:13px; max-width:250px; line-height:1.4; opacity:0; transition:opacity 0.3s ease;"></div>');
                        preview.text(extract);
                        
                        $('body').append(preview);

                        // Atur posisi pop-up di deket link
                        var offset = $link.offset();
                        preview.css({
                            top: offset.top + 25,
                            left: Math.min(offset.left, $(window).width() - 270),
                            opacity: 1
                        });

                        // Hilang kalau klik di mana aja atau setelah 5 detik
                        setTimeout(function() { $('.wiki-preview').fadeOut(function() { $(this).remove(); }); }, 5000);
                    }
                });
            }, 600); // Delay 0.6 detik biar gak ganggu kalau cuma scrolling lewat
        }).on('mouseleave', function() {
            clearTimeout(timer);
        });

        $(document).on('mousedown touchstart', function() {
            $('.wiki-preview').remove();
        });
    }
});


/* 1. Auto-Hide Header (Minerva Mobile Optimized) */
$(document).ready(function() {
    var lastScrollTop = 0;
    var delta = 5;
    var navbarHeight = $('.header-container').outerHeight() || 50;

    $(window).scroll(function() {
        var st = $(this).scrollTop();
        
        // Cek scroll harus lebih dari delta
        if(Math.abs(lastScrollTop - st) <= delta) return;
        
        // Scroll ke bawah & sudah lewat navbar
        if (st > lastScrollTop && st > navbarHeight){
            // Sembunyiin Header
            $('.header-container, .minerva-header').css({
                'transform': 'translateY(-100%)',
                'transition': 'transform 0.3s ease-in-out'
            });
        } else {
            // Scroll ke atas
            if(st + $(window).height() < $(document).height()) {
                $('.header-container, .minerva-header').css({
                    'transform': 'translateY(0)',
                    'transition': 'transform 0.3s ease-in-out'
                });
            }
        }
        lastScrollTop = st;
    });
});

/* 2. Tombol Salin Cepat (Copy to Clipboard) */
$(document).ready(function() {
    if (mw.config.get('wgIsArticle')) {
        // Targetkan elemen pre, code, atau blockquote
        $('pre, code, blockquote').each(function() {
            var $this = $(this);
            $this.css('position', 'relative');
            
            var $copyBtn = $('<div style="position:absolute; top:5px; right:5px; background:#36c; color:#fff; padding:2px 8px; border-radius:4px; font-size:10px; cursor:pointer; opacity:0.6;">SALIN</div>');
            
            $copyBtn.click(function() {
                var text = $this.text();
                navigator.clipboard.writeText(text).then(function() {
                    $copyBtn.text('BERHASIL!').css('background', '#00af89');
                    setTimeout(function() {
                        $copyBtn.text('SALIN').css('background', '#36c');
                    }, 2000);
                });
            });
            
            $this.append($copyBtn);
        });
    }
});