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 ( | /* 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; | ||
// Fungsi buat eksekusi suara | |||
function toggleSpeech($el) { | |||
if (!isSpeaking) { | if (!isSpeaking) { | ||
var textToSpeak = $('#mw-content-text p').text().substring(0, | var textToSpeak = $('#mw-content-text p').text().substring(0, 2000); | ||
var utterThis = new SpeechSynthesisUtterance(textToSpeak); | var utterThis = new SpeechSynthesisUtterance(textToSpeak); | ||
utterThis.lang = 'id-ID'; | utterThis.lang = 'id-ID'; | ||
utterThis.onend = function() { isSpeaking = false; | utterThis.onend = function() { | ||
isSpeaking = false; | |||
$el.find('span').text('Dengarkan Artikel'); | |||
}; | |||
synth.speak(utterThis); | synth.speak(utterThis); | ||
isSpeaking = true; | isSpeaking = true; | ||
$el.find('span').text('Stop Mendengar'); | |||
} else { | } else { | ||
synth.cancel(); | synth.cancel(); | ||
isSpeaking = false; | isSpeaking = false; | ||
$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(); | |||
} | } | ||
}); | }); | ||