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 - Pindah ke Menu Titik Tiga (Minerva) */
/* 2. Tombol Dengar Artikel - Ikon Cepat di Samping Titik Tiga */
$(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;
          
          
         // Fungsi buat eksekusi suara
         // Fungsi Suara
         function toggleSpeech($el) {
         function toggleSpeech($iconEl) {
             if (!isSpeaking) {
             if (!isSpeaking) {
                 var textToSpeak = $('#mw-content-text p').text().substring(0, 2000);
                 var textToSpeak = $('#mw-content-text p').text().substring(0, 2000);
Baris 179: Baris 179:
                 utterThis.onend = function() {  
                 utterThis.onend = function() {  
                     isSpeaking = false;  
                     isSpeaking = false;  
                     $el.find('span').text('Dengarkan Artikel');
                     $iconEl.find('span').text('🔊');
                    $iconEl.css('background-color', 'transparent');
                 };
                 };
                 synth.speak(utterThis);
                 synth.speak(utterThis);
                 isSpeaking = true;
                 isSpeaking = true;
                 $el.find('span').text('Stop Mendengar');
                 $iconEl.find('span').text('🛑');
                $iconEl.css('background-color', '#fee7e6'); // Merah muda pas stop
             } else {
             } else {
                 synth.cancel();
                 synth.cancel();
                 isSpeaking = false;
                 isSpeaking = false;
                 $el.find('span').text('Dengarkan Artikel');
                 $iconEl.find('span').text('🔊');
                $iconEl.css('background-color', 'transparent');
             }
             }
         }
         }


         // Bikin elemen list untuk menu titik tiga
         // Bikin Ikon Baru
        // Kita pake struktur HTML yang sama ama menu Minerva asli biar icon-nya rapi
         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%;">' +
         var liSpeech = $('<li class="page-actions-menu__list-item">' +
             '<span style="font-size: 20px;">🔊</span>' +
            '<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;">' +
             '</a>');
             '<span>Dengarkan Artikel</span>' +
             '</a>' +
            '</li>');


         // Tunggu menu Minerva siap, lalu tempel di paling atas daftar
         function injectIconButton() {
        function injectMenu() {
            // Kita cari kontainer "Page Actions" (Bahasa, Bintang, Titik Tiga)
             var $menu = $('#p-tb ul, .page-actions-menu__list');
             var $actionGroup = $('.page-actions-menu');
             if ($menu.length) {
           
                 $menu.prepend(liSpeech);
             if ($actionGroup.length) {
                // Tempel di SETELAH (after) kontainer menu utama
                 $actionGroup.append($btnDengar);
                  
                  
                 liSpeech.click(function(e) {
                 $btnDengar.click(function(e) {
                     e.preventDefault();
                     e.preventDefault();
                     toggleSpeech($(this));
                     toggleSpeech($(this));
                 });
                 });
             } else {
             } else {
                // Kalo menu belum dimuat, coba lagi dikit
                 setTimeout(injectIconButton, 500);
                 setTimeout(injectMenu, 500);
             }
             }
         }
         }


         injectMenu();
         injectIconButton();
     }
     }
});
});