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




/* 2. Tombol Dengar Artikel (Speech Synthesis) */
/* 2. Tombol Dengar Artikel - Pindah ke Menu Titik Tiga (Minerva) */
$(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) {
Baris 171: Baris 171:
         var synth = window.speechSynthesis;
         var synth = window.speechSynthesis;
          
          
         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>');
         // Fungsi buat eksekusi suara
          
         function toggleSpeech($el) {
        if ($('.page-heading').length) {
            $('.page-heading').after(speakBtn);
        } else {
            $('#firstHeading').after(speakBtn);
        }
 
        speakBtn.click(function() {
             if (!isSpeaking) {
             if (!isSpeaking) {
                 var textToSpeak = $('#mw-content-text p').text().substring(0, 1000); // Batasi 1000 karakter biar gak berat
                 var textToSpeak = $('#mw-content-text p').text().substring(0, 2000);
                 var utterThis = new SpeechSynthesisUtterance(textToSpeak);
                 var utterThis = new SpeechSynthesisUtterance(textToSpeak);
                 utterThis.lang = 'id-ID'; // Set Bahasa Indonesia
                 utterThis.lang = 'id-ID';
                 utterThis.onend = function() { isSpeaking = false; speakBtn.text('🔊 Dengarkan Artikel'); };
                 utterThis.onend = function() {  
                    isSpeaking = false;  
                    $el.find('span').text('Dengarkan Artikel');
                };
                 synth.speak(utterThis);
                 synth.speak(utterThis);
                 isSpeaking = true;
                 isSpeaking = true;
                 speakBtn.text('🛑 Berhenti Mendengar');
                 $el.find('span').text('Stop Mendengar');
             } else {
             } else {
                 synth.cancel();
                 synth.cancel();
                 isSpeaking = false;
                 isSpeaking = false;
                 speakBtn.text('🔊 Dengarkan Artikel');
                 $el.find('span').text('Dengarkan Artikel');
            }
        }
 
        // Bikin elemen list untuk menu titik tiga
        // Kita pake struktur HTML yang sama ama menu Minerva asli biar icon-nya rapi
        var liSpeech = $('<li class="page-actions-menu__list-item">' +
            '<a href="javascript:void(0);" id="ca-speak" class="mw-ui-icon mw-ui-icon-before mw-ui-icon-minerva-audio" style="display:flex; align-items:center;">' +
            '<span>Dengarkan Artikel</span>' +
            '</a>' +
            '</li>');
 
        // Tunggu menu Minerva siap, lalu tempel di paling atas daftar
        function injectMenu() {
            var $menu = $('#p-tb ul, .page-actions-menu__list');
            if ($menu.length) {
                $menu.prepend(liSpeech);
               
                liSpeech.click(function(e) {
                    e.preventDefault();
                    toggleSpeech($(this));
                });
            } else {
                // Kalo menu belum dimuat, coba lagi dikit
                setTimeout(injectMenu, 500);
             }
             }
         });
         }
 
        injectMenu();
     }
     }
});
});