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 164: Baris 164:
});
});


/* 2. Tombol Dengar Artikel - Ikon Cepat di Samping Titik Tiga */
$(document).ready(function() {
    if (mw.config.get('wgIsArticle') && mw.config.get('wgNamespaceNumber') === 0) {
        var isSpeaking = false;
        var synth = window.speechSynthesis;
       
        // Fungsi Suara
        function toggleSpeech($iconEl) {
            if (!isSpeaking) {
                var textToSpeak = $('#mw-content-text p').text().substring(0, 2000);
                var utterThis = new SpeechSynthesisUtterance(textToSpeak);
                utterThis.lang = 'id-ID';
                utterThis.onend = function() {
                    isSpeaking = false;
                    $iconEl.find('span').text('🔊');
                    $iconEl.css('background-color', 'transparent');
                };
                synth.speak(utterThis);
                isSpeaking = true;
                $iconEl.find('span').text('🛑');
                $iconEl.css('background-color', '#fee7e6'); // Merah muda pas stop
            } else {
                synth.cancel();
                isSpeaking = false;
                $iconEl.find('span').text('🔊');
                $iconEl.css('background-color', 'transparent');
            }
        }
        // Bikin Ikon Baru
        var $btnDengar = $('<a href="javascript:void(0);" id="ca-speak-icon" class="mw-ui-icon mw-ui-icon-element" style="margin-left: 5px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;">' +
            '<span style="font-size: 20px;">🔊</span>' +
            '</a>');
        function injectIconButton() {
            // Kita cari kontainer "Page Actions" (Bahasa, Bintang, Titik Tiga)
            var $actionGroup = $('.page-actions-menu');
           
            if ($actionGroup.length) {
                // Tempel di SETELAH (after) kontainer menu utama
                $actionGroup.append($btnDengar);
               
                $btnDengar.click(function(e) {
                    e.preventDefault();
                    toggleSpeech($(this));
                });
            } else {
                setTimeout(injectIconButton, 500);
            }
        }
        injectIconButton();
    }
});


/* 3. Anti-Ghosting pada Link Kosong (Redlinks) */
/* 3. Anti-Ghosting pada Link Kosong (Redlinks) */
Baris 230: Baris 175:
});
});


/* 4. Highlight Teks saat di-Share (Text Fragment) */
/* 1. Navigasi Bab Melayang (Quick Jump) */
$(document).ready(function() {
    if (mw.config.get('wgIsArticle') && $('#toc').length) {
        var $quickNav = $('<div id="quick-nav" style="position:fixed; bottom:140px; 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 10px rgba(0,0,0,0.3); cursor:pointer; font-weight:bold; font-size:18px;">≡</div>');
        $('body').append($quickNav);
 
        $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.8); z-index:20001; display:flex; align-items:center; justify-content:center;">' +
                '<div style="background:#fff; width:85%; max-height:70%; overflow-y:auto; border-radius:15px; padding:20px; position:relative;">' +
                '<div id="close-nav" style="position:absolute; top:10px; right:15px; font-size:24px; color:#333;">×</div>' +
                '<h3 style="margin-top:0; color:#36c;">Lompat ke Bagian:</h3>' +
                '<div id="nav-list"></div>' +
                '</div></div>');
           
            $('body').append($modal);
            $modal.find('#nav-list').append($toc);
           
            // Style link di dalam modal biar enak diklik jempol
            $modal.find('a').css({'display':'block', 'padding':'10px 0', 'color':'#333', 'text-decoration':'none', 'border-bottom':'1px solid #eee'});
 
            $('#close-nav, #nav-modal').click(function(e) {
                if (e.target !== this && e.target.id !== 'close-nav') return;
                $modal.remove();
            });
        });
    }
});
 
/* 2. Auto-Night Shift (Berdasarkan Jam Lokal) */
$(document).ready(function() {
$(document).ready(function() {
     // Fitur modern browser buat highlight teks yang diseleksi saat link dibuka
     var hour = new Date().getHours();
     if ('scrollRestoration' in history) {
     if (hour >= 21 || hour < 6) { // Jam 9 malem sampe 6 pagi
         document.addEventListener('mouseup', function() {
         $("<style id='night-shift'>").prop("type", "text/css").html(`
            var selectedText = window.getSelection().toString();
             body::after {
             if (selectedText.length > 10) {
                 content: "";
                 // Bisa dikembangkan buat munculin menu "Share highlighted text"
                position: fixed;
                 console.log("User tertarik pada bagian: " + selectedText);
                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");
     }
     }
});
});


/* 5. Custom Scrollbar (Biar Estetik di Desktop & HP) */
/* 3. Smooth Fade-In saat Ganti Halaman */
$("<style>").prop("type", "text/css").html(`
$(document).ready(function() {
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    $('body').css({'opacity': '0', 'transition': 'opacity 0.5s ease'});
     ::-webkit-scrollbar-track { background: #f1f1f1; }
     setTimeout(function() { $('body').css('opacity', '1'); }, 100);
    ::-webkit-scrollbar-thumb { background: #36c; border-radius: 10px; }
});
    ::-webkit-scrollbar-thumb:hover { background: #2a4b8d; }
`).appendTo("head");