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 154: Baris 154:




/* 1. Lazy Loading Gambar - Kecepatan Maksimal */
/* 3. Notifikasi Link Luar */
$(document).ready(function() {
$(document).ready(function() {
     if (mw.config.get('wgIsArticle')) {
     $('a.external').click(function(e) {
        $('img').each(function() {
        var url = $(this).attr('href');
            var $img = $(this);
        if (!confirm('Anda akan meninggalkan Mippedia menuju situs luar:\n' + url + '\n\nLanjutkan?')) {
            if ($img.attr('src')) {
            e.preventDefault();
                $img.attr('data-src', $img.attr('src'));
        }
                $img.removeAttr('src');
    });
                $img.css('opacity', '0.3');
});
            }
        });


        $(window).on('scroll.lazyload', function() {
            $('img[data-src]').each(function() {
                var $img = $(this);
                if ($img.offset().top < $(window).scrollTop() + $(window).height() + 200) {
                    $img.attr('src', $img.attr('data-src'));
                    $img.removeAttr('data-src');
                    $img.animate({opacity: 1}, 500);
                }
            });
        });
    }
});


/* 2. Floating Share Button (Khusus Mobile) */
/* 2. Tombol Dengar Artikel (Speech Synthesis) */
$(document).ready(function() {
$(document).ready(function() {
     if (mw.config.get('wgIsArticle') && mw.config.get('wgNamespaceNumber') === 0) {
     if (mw.config.get('wgIsArticle') && mw.config.get('wgNamespaceNumber') === 0) {
         var shareHtml = '<div id="floating-share" style="position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:9997; display:flex; gap:10px; background:rgba(255,255,255,0.9); padding:8px 15px; border-radius:30px; box-shadow:0 4px 10px rgba(0,0,0,0.1); backdrop-filter:blur(5px);">' +
         var isSpeaking = false;
            '<a href="https://api.whatsapp.com/send?text=' + encodeURIComponent(document.title + ' - ' + window.location.href) + '" target="_blank" style="color:#25D366; font-size:18px;">WA</a>' +
        var synth = window.speechSynthesis;
            '<div style="width:1px; background:#ddd;"></div>' +
       
            '<a href="https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(window.location.href) + '" target="_blank" style="color:#1877F2; font-size:18px;">FB</a>' +
        var speakBtn = $('<div id="speak-btn" style="display:inline-block; background:#f8f9fa; border:1px solid #a2a9b1; padding:5px 12px; border-radius:20px; font-size:12px; cursor:pointer; margin-bottom:15px; color:#36c; font-weight:bold;">🔊 Dengarkan Artikel</div>');
            '</div>';
          
          
         // Muncul kalau sudah scroll dikit
         if ($('.page-heading').length) {
         $(window).scroll(function() {
            $('.page-heading').after(speakBtn);
             if ($(this).scrollTop() > 500) { $('#floating-share').fadeIn(); } else { $('#floating-share').fadeOut(); }
         } else {
            $('#firstHeading').after(speakBtn);
        }
 
        speakBtn.click(function() {
             if (!isSpeaking) {
                var textToSpeak = $('#mw-content-text p').text().substring(0, 1000); // Batasi 1000 karakter biar gak berat
                var utterThis = new SpeechSynthesisUtterance(textToSpeak);
                utterThis.lang = 'id-ID'; // Set Bahasa Indonesia
                utterThis.onend = function() { isSpeaking = false; speakBtn.text('🔊 Dengarkan Artikel'); };
                synth.speak(utterThis);
                isSpeaking = true;
                speakBtn.text('🛑 Berhenti Mendengar');
            } else {
                synth.cancel();
                isSpeaking = false;
                speakBtn.text('🔊 Dengarkan Artikel');
            }
         });
         });
       
        $('body').append(shareHtml);
     }
     }
});
});


/* 3. Notifikasi Link Luar */
/* 3. Anti-Ghosting pada Link Kosong (Redlinks) */
$(document).ready(function() {
$(document).ready(function() {
     $('a.external').click(function(e) {
     $('a.new').click(function(e) {
         var url = $(this).attr('href');
         var confirmCreate = confirm("Halaman ini belum tersedia di Mippedia.\n\nApakah Anda ingin berkontribusi membuatnya?");
         if (!confirm('Anda akan meninggalkan Mippedia menuju situs luar:\n' + url + '\n\nLanjutkan?')) {
         if (!confirmCreate) {
             e.preventDefault();
             e.preventDefault();
         }
         }
Baris 207: Baris 207:
});
});


/* 4. Reading Progress Circle (Indikator Pojok) */
/* 4. Highlight Teks saat di-Share (Text Fragment) */
$(document).ready(function() {
$(document).ready(function() {
     var circleHtml = '<div id="read-circle" style="position:fixed; top:15px; right:15px; width:40px; height:40px; z-index:10002; display:none;">' +
     // Fitur modern browser buat highlight teks yang diseleksi saat link dibuka
         '<svg width="40" height="40"><circle cx="20" cy="20" r="18" fill="none" stroke="#ddd" stroke-width="4" /><circle id="progress-circle" cx="20" cy="20" r="18" fill="none" stroke="#36c" stroke-width="4" stroke-dasharray="113.1" stroke-dashoffset="113.1" transform="rotate(-90 20 20)" /></svg>' +
    if ('scrollRestoration' in history) {
         '</div>';
         document.addEventListener('mouseup', function() {
     $('body').append(circleHtml);
            var selectedText = window.getSelection().toString();
            if (selectedText.length > 10) {
                // Bisa dikembangkan buat munculin menu "Share highlighted text"
                console.log("User tertarik pada bagian: " + selectedText);
            }
         });
     }
});


    $(window).scroll(function() {
/* 5. Custom Scrollbar (Biar Estetik di Desktop & HP) */
        var scrollPercent = ($(window).scrollTop() / ($(document).height() - $(window).height())) * 100;
$("<style>").prop("type", "text/css").html(`
        var offset = 113.1 - (scrollPercent / 100) * 113.1;
    ::-webkit-scrollbar { width: 6px; height: 6px; }
        $('#progress-circle').css('stroke-dashoffset', offset);
    ::-webkit-scrollbar-track { background: #f1f1f1; }
        if ($(window).scrollTop() > 100) { $('#read-circle').fadeIn(); } else { $('#read-circle').fadeOut(); }
    ::-webkit-scrollbar-thumb { background: #36c; border-radius: 10px; }
    });
    ::-webkit-scrollbar-thumb:hover { background: #2a4b8d; }
});
`).appendTo("head");