MediaWiki:Common.js
Catatan: Setelah menerbitkan, Anda mungkin perlu melewati tembolok peramban web Anda untuk melihat perubahan.
- Firefox/Safari: Tekan dan tahan Shift sembari mengeklik Reload, atau tekan Ctrl-F5 atau Ctrl-R (⌘-R di Mac)
- Google Chrome: Tekan Ctrl-Shift-R (⌘-Shift-R di Mac)
- Edge: Tahan Ctrl sembari mengeklik Refresh, atau tekan Ctrl-F5
/* Script Estimasi Waktu Baca - Spesialis Mobile (Minerva) & Desktop */
$(document).ready(function() {
// Hanya jalan di halaman artikel asli
if (mw.config.get('wgIsArticle') && mw.config.get('wgAction') === 'view' && mw.config.get('wgNamespaceNumber') === 0) {
function hitungWaktuBaca() {
// Ambil teks dari konten utama
var content = $('#mw-content-text').text();
// Hitung jumlah kata (asumsi rata-rata orang baca 200 kata per menit)
var wordsPerMinute = 200;
var textLength = content.split(/\s+/).length; // Pecah berdasarkan spasi
var readingTime = Math.ceil(textLength / wordsPerMinute);
// Bikin elemen tampilannya
var icon = '🕒'; // Emoji jam biar simpel dan ringan
var label = (readingTime <= 1) ? 'Kurang dari 1 menit' : readingTime + ' menit';
var html = '<div id="reading-time-auto" style="font-size: 0.9em; color: #54595d; margin-bottom: 15px; display: flex; align-items: center; font-family: sans-serif;">';
html += '<span style="margin-right: 5px;">' + icon + '</span>';
html += '<span>Estimasi waktu baca: <b>' + label + '</b></span>';
html += '</div>';
// PENEMPELAN TARGET:
// Di Minerva (HP), judul biasanya ada di .page-heading
// Di Vector (Desktop), judul ada di #firstHeading
if ($('.page-heading').length) {
$('.page-heading').after(html); // Target Mobile
} else if ($('#firstHeading').length) {
$('#firstHeading').after(html); // Target Desktop
}
}
// Jalankan fungsi
hitungWaktuBaca();
}
});
/* Script Tombol Back to Top (Spesial Mobile) */
$(document).ready(function() {
// Bikin tombolnya lewat JS biar gak ribet edit CSS/HTML
var btnHtml = '<div id="backToTop" style="display:none; position:fixed; bottom:80px; right:20px; z-index:9999; background:#36c; color:#fff; width:45px; height:45px; border-radius:50%; text-align:center; line-height:45px; font-size:24px; cursor:pointer; box-shadow: 0 4px 6px rgba(0,0,0,0.3); opacity: 0.8;">↑</div>';
$('body').append(btnHtml);
// Fungsi munculin tombol pas di-scroll
$(window).scroll(function() {
if ($(this).scrollTop() > 300) {
$('#backToTop').fadeIn();
} else {
$('#backToTop').fadeOut();
}
});
// Fungsi pas tombol diklik
$('#backToTop').click(function() {
$('html, body').animate({scrollTop: 0}, 600);
return false;
});
});
/* Smart Glossary Pop-up (Pratinjau Link Ringan) */
$(document).ready(function() {
if (mw.config.get('wgIsArticle') && mw.config.get('wgAction') === 'view') {
var timer;
// Targetkan link di dalam konten artikel saja
$('#mw-content-text a').on('mouseenter touchstart', function(e) {
var $link = $(this);
var title = $link.attr('title');
// Jangan jalan kalau link-nya bukan artikel (misal link luar atau redlink)
if (!title || $link.hasClass('new') || $link.hasClass('external')) return;
timer = setTimeout(function() {
$.getJSON(mw.util.wikiScript('api'), {
action: 'query',
prop: 'extracts',
exintro: true,
exsentences: 2, // Ambil 2 kalimat aja biar singkat
titles: title,
explaintext: true,
format: 'json'
}, function(data) {
var pages = data.query.pages;
var pageId = Object.keys(pages)[0];
var extract = pages[pageId].extract;
if (extract) {
// Hapus pop-up lama kalau ada
$('.wiki-preview').remove();
var preview = $('<div class="wiki-preview" style="position:absolute; background:#fff; color:#202122; border:1px solid #a2a9b1; padding:12px; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.2); z-index:10001; font-size:13px; max-width:250px; line-height:1.4; opacity:0; transition:opacity 0.3s ease;"></div>');
preview.text(extract);
$('body').append(preview);
// Atur posisi pop-up di deket link
var offset = $link.offset();
preview.css({
top: offset.top + 25,
left: Math.min(offset.left, $(window).width() - 270),
opacity: 1
});
// Hilang kalau klik di mana aja atau setelah 5 detik
setTimeout(function() { $('.wiki-preview').fadeOut(function() { $(this).remove(); }); }, 5000);
}
});
}, 600); // Delay 0.6 detik biar gak ganggu kalau cuma scrolling lewat
}).on('mouseleave', function() {
clearTimeout(timer);
});
$(document).on('mousedown touchstart', function() {
$('.wiki-preview').remove();
});
}
});
/* 1. Auto-Hide Header (Minerva Mobile Optimized) */
$(document).ready(function() {
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('.header-container').outerHeight() || 50;
$(window).scroll(function() {
var st = $(this).scrollTop();
// Cek scroll harus lebih dari delta
if(Math.abs(lastScrollTop - st) <= delta) return;
// Scroll ke bawah & sudah lewat navbar
if (st > lastScrollTop && st > navbarHeight){
// Sembunyiin Header
$('.header-container, .minerva-header').css({
'transform': 'translateY(-100%)',
'transition': 'transform 0.3s ease-in-out'
});
} else {
// Scroll ke atas
if(st + $(window).height() < $(document).height()) {
$('.header-container, .minerva-header').css({
'transform': 'translateY(0)',
'transition': 'transform 0.3s ease-in-out'
});
}
}
lastScrollTop = st;
});
});
/* 3. Notifikasi Link Luar */
$(document).ready(function() {
$('a.external').click(function(e) {
var url = $(this).attr('href');
if (!confirm('Anda akan meninggalkan Mippedia menuju situs luar:\n' + url + '\n\nLanjutkan?')) {
e.preventDefault();
}
});
});
/* 2. Tombol Dengar Artikel - Pindah ke Menu Titik Tiga (Minerva) */
$(document).ready(function() {
if (mw.config.get('wgIsArticle') && mw.config.get('wgNamespaceNumber') === 0) {
var isSpeaking = false;
var synth = window.speechSynthesis;
// Fungsi buat eksekusi suara
function toggleSpeech($el) {
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;
$el.find('span').text('Dengarkan Artikel');
};
synth.speak(utterThis);
isSpeaking = true;
$el.find('span').text('Stop Mendengar');
} else {
synth.cancel();
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();
}
});
/* 3. Anti-Ghosting pada Link Kosong (Redlinks) */
$(document).ready(function() {
$('a.new').click(function(e) {
var confirmCreate = confirm("Halaman ini belum tersedia di Mippedia.\n\nApakah Anda ingin berkontribusi membuatnya?");
if (!confirmCreate) {
e.preventDefault();
}
});
});
/* 4. Highlight Teks saat di-Share (Text Fragment) */
$(document).ready(function() {
// Fitur modern browser buat highlight teks yang diseleksi saat link dibuka
if ('scrollRestoration' in history) {
document.addEventListener('mouseup', function() {
var selectedText = window.getSelection().toString();
if (selectedText.length > 10) {
// Bisa dikembangkan buat munculin menu "Share highlighted text"
console.log("User tertarik pada bagian: " + selectedText);
}
});
}
});
/* 5. Custom Scrollbar (Biar Estetik di Desktop & HP) */
$("<style>").prop("type", "text/css").html(`
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #36c; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #2a4b8d; }
`).appendTo("head");