MediaWiki:Common.js: Perbedaan antara revisi

/* 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;
    });
});


/* 3. Notifikasi Link Luar */
$(document).ready(function() {
    $('a.external').click(function(e) {
        var url = $(this).attr('href');
        if (!confirm('Anda akan meninggalkan Mippedia menuju situs luar:\n' + url + '\n\nLanjutkan?')) {
            e.preventDefault();
        }
    });
});


/* 3. Anti-Ghosting pada Link Kosong (Redlinks) */
$(document).ready(function() {
    $('a.new').click(function(e) {
        var confirmCreate = confirm("Halaman ini belum tersedia di Mippedia.\n\nApakah Anda ingin berkontribusi membuatnya?");
        if (!confirmCreate) {
            e.preventDefault();
        }
    });
});

/* 1. Navigasi Bab Melayang (Vertical Stack Edition) */
$(document).ready(function() {
    if (mw.config.get('wgIsArticle') && $('#toc').length) {
        
        // CSS untuk posisi menumpuk secara vertikal
        var $quickNav = $('<div id="quick-nav" style="position:fixed; bottom:20px; right:20px; width:45px; height:45px; background:#36c; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:9996; box-shadow:0 4px 12px rgba(0,0,0,0.2); cursor:pointer; font-size:20px; transition: all 0.3s ease;">≡</div>');
        
        // Tombol Back to Top lo biasanya di bottom: 80px atau 90px kan? 
        // Kita paksa Back to Top naik sedikit, dan navigasi bab ada di bawahnya.
        // Script ini bakal otomatis menyesuaikan posisi tombol panah atas lo.
        
        $('body').append($quickNav);

        // Menyesuaikan posisi tombol Back to Top bawaan (jika ada) biar gak tabrakan
        // Kita set navigasi di bottom 20px, dan Back to Top di bottom 80px
        $('.back-to-top, #mw-mf-back-to-top').css('bottom', '85px');

        $quickNav.click(function() {
            var $toc = $('#toc ul').first().clone();
            var $modal = $('<div id="nav-modal" style="position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:20001; display:flex; align-items:flex-end; justify-content:center; backdrop-filter:blur(5px); opacity:0; transition:opacity 0.3s ease;">' +
                '<div id="nav-card" style="background:#fff; width:100%; max-height:75%; overflow-y:auto; border-top-left-radius:30px; border-top-right-radius:30px; padding:25px; transform:translateY(100%); transition:transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);">' +
                '<div style="width:50px; height:5px; background:#eee; border-radius:10px; margin:0 auto 20px;"></div>' +
                '<h3 style="margin-top:0; color:#36c; font-size:1.3em; text-align:center;">Daftar Isi</h3>' +
                '<div id="nav-list" style="margin-top:10px;"></div>' +
                '</div></div>');
            
            $('body').append($modal);
            $modal.find('#nav-list').append($toc);
            
            setTimeout(function() {
                $modal.css('opacity', '1');
                $modal.find('#nav-card').css('transform', 'translateY(0)');
            }, 10);

            // Styling link agar terasa seperti menu aplikasi
            $modal.find('a').css({
                'display':'block', 
                'padding':'15px 10px', 
                'color':'#333', 
                'text-decoration':'none', 
                'border-bottom':'1px solid #f9f9f9',
                'font-size':'1.1em'
            });

            function closeModal() {
                $modal.find('#nav-card').css('transform', 'translateY(100%)');
                $modal.css('opacity', '0');
                setTimeout(function() { $modal.remove(); }, 400);
            }

            $modal.on('click', function(e) { if(e.target === this) closeModal(); });
        });
    }
});

/* 2. Auto-Night Shift (Berdasarkan Jam Lokal) */
$(document).ready(function() {
    var hour = new Date().getHours();
    if (hour >= 21 || hour < 6) { // Jam 9 malem sampe 6 pagi
        $("<style id='night-shift'>").prop("type", "text/css").html(`
            body::after {
                content: "";
                position: fixed;
                top: 0; left: 0;
                width: 100vw; height: 100vh;
                background: rgba(255, 165, 0, 0.05); /* Filter orange tipis */
                pointer-events: none;
                z-index: 99999;
            }
        `).appendTo("head");
    }
});

/* 3. Smooth Fade-In saat Ganti Halaman */
$(document).ready(function() {
    $('body').css({'opacity': '0', 'transition': 'opacity 0.5s ease'});
    setTimeout(function() { $('body').css('opacity', '1'); }, 100);
});

/* 1. Smart Text Selection Menu (Pop-up Action) */
$(document).ready(function() {
    var $selectMenu = $('<div id="select-menu" style="position:absolute; display:none; background:#333; color:#fff; padding:5px 10px; border-radius:8px; font-size:12px; z-index:11000; box-shadow:0 4px 10px rgba(0,0,0,0.3);"></div>');
    var $copyBtn = $('<span style="cursor:pointer; margin-right:10px;">📋 Salin</span>');
    var $searchBtn = $('<span style="cursor:pointer;">🔍 Cari</span>');
    
    $selectMenu.append($copyBtn).append($searchBtn);
    $('body').append($selectMenu);

    $(document).on('mouseup touchend', function(e) {
        var selection = window.getSelection();
        var selectedText = selection.toString().trim();

        if (selectedText.length > 3) {
            var range = selection.getRangeAt(0).getBoundingClientRect();
            $selectMenu.css({
                top: range.top + window.scrollY - 40,
                left: range.left + window.scrollX + (range.width / 2) - 40,
                display: 'block'
            });
        } else {
            $selectMenu.hide();
        }
    });

    $copyBtn.click(function() {
        document.execCommand('copy');
        alert('Teks tersalin!');
        $selectMenu.hide();
    });

    $searchBtn.click(function() {
        var text = window.getSelection().toString();
        window.location.href = '/w/index.php?search=' + encodeURIComponent(text);
    });
});

/* 2. Engagement Pop (Notif Transparan) */
$(document).ready(function() {
    var hasShown = false;
    $(window).scroll(function() {
        var scrollPercent = ($(window).scrollTop() / ($(document).height() - $(window).height())) * 100;
        if (scrollPercent > 50 && !hasShown) {
            var $engagement = $('<div id="engage-pop" style="position:fixed; bottom:150px; left:20px; background:rgba(54,102,204,0.9); color:#fff; padding:10px 15px; border-radius:10px; font-size:12px; z-index:9995; backdrop-filter:blur(5px); animation: fadeIn 0.5s;">' +
                '✨ Sedang asik membaca? Jangan lupa bagikan artikel ini!' +
                '</div>');
            $('body').append($engagement);
            hasShown = true;
            setTimeout(function() { $engagement.fadeOut(); }, 5000);
        }
    });
});

/* 3. Smooth Scroll Behavior */
$("<style>").prop("type", "text/css").html(`
    html { scroll-behavior: smooth; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
`).appendTo("head");

/* 2. Auto-Source on Copy (Kredit Otomatis) */
document.addEventListener('copy', function(e) {
    var selection = window.getSelection();
    if (selection.toString().length > 1) { // Hanya aktif kalau copy lebih dari 50 karakter
        var body_element = document.getElementsByTagName('body')[0];
        var newdiv = document.createElement('div');
        newdiv.style.position = 'absolute';
        newdiv.style.left = '-99999px';
        body_element.appendChild(newdiv);
        newdiv.innerHTML = selection + '<br /><br />Sumber: ' + document.title + '<br />Link: ' + window.location.href;
        selection.selectAllChildren(newdiv);
        window.setTimeout(function() {
            body_element.removeChild(newdiv);
        }, 0);
    }
});

/* 3. Smooth Selection (Biar Highlight Teks Berwarna Biru Mippedia) */
$("<style>").prop("type", "text/css").html(`
    ::selection { background: #36c; color: #fff; }
    ::-moz-selection { background: #36c; color: #fff; }
`).appendTo("head");