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();
}
});
});
/* 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();
}
});
});
/* 1. Navigasi Bab Melayang (Vertical Stack Edition) */
$(document).ready(function() {
if (mw.config.get('wgIsArticle') && $('#toc').length) {
// CSS untuk posisi menumpuk secara vertikal
var $quickNav = $('<div id="quick-nav" style="position:fixed; bottom:20px; 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 12px rgba(0,0,0,0.2); cursor:pointer; font-size:20px; transition: all 0.3s ease;">≡</div>');
// Tombol Back to Top lo biasanya di bottom: 80px atau 90px kan?
// Kita paksa Back to Top naik sedikit, dan navigasi bab ada di bawahnya.
// Script ini bakal otomatis menyesuaikan posisi tombol panah atas lo.
$('body').append($quickNav);
// Menyesuaikan posisi tombol Back to Top bawaan (jika ada) biar gak tabrakan
// Kita set navigasi di bottom 20px, dan Back to Top di bottom 80px
$('.back-to-top, #mw-mf-back-to-top').css('bottom', '85px');
$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.5); z-index:20001; display:flex; align-items:flex-end; justify-content:center; backdrop-filter:blur(5px); opacity:0; transition:opacity 0.3s ease;">' +
'<div id="nav-card" style="background:#fff; width:100%; max-height:75%; overflow-y:auto; border-top-left-radius:30px; border-top-right-radius:30px; padding:25px; transform:translateY(100%); transition:transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);">' +
'<div style="width:50px; height:5px; background:#eee; border-radius:10px; margin:0 auto 20px;"></div>' +
'<h3 style="margin-top:0; color:#36c; font-size:1.3em; text-align:center;">Daftar Isi</h3>' +
'<div id="nav-list" style="margin-top:10px;"></div>' +
'</div></div>');
$('body').append($modal);
$modal.find('#nav-list').append($toc);
setTimeout(function() {
$modal.css('opacity', '1');
$modal.find('#nav-card').css('transform', 'translateY(0)');
}, 10);
// Styling link agar terasa seperti menu aplikasi
$modal.find('a').css({
'display':'block',
'padding':'15px 10px',
'color':'#333',
'text-decoration':'none',
'border-bottom':'1px solid #f9f9f9',
'font-size':'1.1em'
});
function closeModal() {
$modal.find('#nav-card').css('transform', 'translateY(100%)');
$modal.css('opacity', '0');
setTimeout(function() { $modal.remove(); }, 400);
}
$modal.on('click', function(e) { if(e.target === this) closeModal(); });
});
}
});
/* 2. Auto-Night Shift (Berdasarkan Jam Lokal) */
$(document).ready(function() {
var hour = new Date().getHours();
if (hour >= 21 || hour < 6) { // Jam 9 malem sampe 6 pagi
$("<style id='night-shift'>").prop("type", "text/css").html(`
body::after {
content: "";
position: fixed;
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");
}
});
/* 3. Smooth Fade-In saat Ganti Halaman */
$(document).ready(function() {
$('body').css({'opacity': '0', 'transition': 'opacity 0.5s ease'});
setTimeout(function() { $('body').css('opacity', '1'); }, 100);
});
/* 1. Smart Text Selection Menu (Pop-up Action) */
$(document).ready(function() {
var $selectMenu = $('<div id="select-menu" style="position:absolute; display:none; background:#333; color:#fff; padding:5px 10px; border-radius:8px; font-size:12px; z-index:11000; box-shadow:0 4px 10px rgba(0,0,0,0.3);"></div>');
var $copyBtn = $('<span style="cursor:pointer; margin-right:10px;">📋 Salin</span>');
var $searchBtn = $('<span style="cursor:pointer;">🔍 Cari</span>');
$selectMenu.append($copyBtn).append($searchBtn);
$('body').append($selectMenu);
$(document).on('mouseup touchend', function(e) {
var selection = window.getSelection();
var selectedText = selection.toString().trim();
if (selectedText.length > 3) {
var range = selection.getRangeAt(0).getBoundingClientRect();
$selectMenu.css({
top: range.top + window.scrollY - 40,
left: range.left + window.scrollX + (range.width / 2) - 40,
display: 'block'
});
} else {
$selectMenu.hide();
}
});
$copyBtn.click(function() {
document.execCommand('copy');
alert('Teks tersalin!');
$selectMenu.hide();
});
$searchBtn.click(function() {
var text = window.getSelection().toString();
window.location.href = '/w/index.php?search=' + encodeURIComponent(text);
});
});
/* 3. Smooth Scroll Behavior */
$("<style>").prop("type", "text/css").html(`
html { scroll-behavior: smooth; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
`).appendTo("head");
/* 2. Auto-Source on Copy (Kredit Otomatis) */
document.addEventListener('copy', function(e) {
var selection = window.getSelection();
if (selection.toString().length > 1) { // Hanya aktif kalau copy lebih dari 50 karakter
var body_element = document.getElementsByTagName('body')[0];
var newdiv = document.createElement('div');
newdiv.style.position = 'absolute';
newdiv.style.left = '-99999px';
body_element.appendChild(newdiv);
newdiv.innerHTML = selection + '<br /><br />Sumber: ' + document.title + '<br />Link: ' + window.location.href;
selection.selectAllChildren(newdiv);
window.setTimeout(function() {
body_element.removeChild(newdiv);
}, 0);
}
});
/* 3. Smooth Selection (Biar Highlight Teks Berwarna Biru Mippedia) */
$("<style>").prop("type", "text/css").html(`
::selection { background: #36c; color: #fff; }
::-moz-selection { background: #36c; color: #fff; }
`).appendTo("head");
/* 2. Smart Image Glow (Fokus Visual) */
$(document).ready(function() {
$('.mw-parser-output img').css({
'transition': 'box-shadow 0.3s ease, transform 0.3s ease',
'border-radius': '8px'
});
$(window).scroll(function() {
$('.mw-parser-output img').each(function() {
var winTop = $(window).scrollTop();
var imgTop = $(this).offset().top;
if (imgTop < winTop + 400 && imgTop > winTop) {
$(this).css({
'box-shadow': '0 10px 30px rgba(54,102,204,0.2)',
'transform': 'scale(1.02)'
});
} else {
$(this).css({
'box-shadow': 'none',
'transform': 'scale(1)'
});
}
});
});
});
/* 3. Custom Image Zoom (Tanpa Klik) */
$(document).ready(function() {
// Memberikan efek zoom halus saat gambar tersentuh di mobile
$('.mw-parser-output img').on('touchstart', function() {
$(this).css('transform', 'scale(1.1)');
}).on('touchend', function() {
$(this).css('transform', 'scale(1)');
});
});
/* Pindahkan Mippedia Data ke Sebelah Tab Pembicaraan - FIX VERSION */
$(document).ready(function() {
function moveMippediaData() {
// 1. Cari elemen template aslinya
var $dataTemplate = $('.mw-parser-output div:contains("Mippedia Data")').first();
// Cari URL-nya dari tombol "Lihat"
var dataUrl = $dataTemplate.find('a').attr('href');
if ($dataTemplate.length && dataUrl) {
// 2. Buat elemen List Item (li) biar sama kayak tab Halaman & Pembicaraan
var $dataTab = $('<li id="ca-mippediadata" style="display: inline-block; margin-left: 10px; vertical-align: middle;">' +
'<a href="' + dataUrl + '" target="_blank" style="text-decoration: none !important; display: flex; align-items: center;">' +
'<span style="background: #36c; color: #fff; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: bold; box-shadow: 0 2px 4px rgba(54,102,204,0.3);">LIHAT DI MIPPEDIA DATA</span>' +
'</a>' +
'</li>');
// 3. Masukkan tepat setelah li terakhir di area tab (Pembicaraan)
var $lastTab = $('.page-tabs li:last-child, .minerva__tab-container li:last-child');
if ($lastTab.length) {
$lastTab.after($dataTab);
// Hapus template lama biar gak berantakan di bawah
$dataTemplate.remove();
}
}
}
// Jalankan langsung dan kasih delay dikit buat mastiin Minerva udah render tab-nya
moveMippediaData();
setTimeout(moveMippediaData, 500);
});
/* Smart Random Toaster Raksasa (Fixed: Article Only & Anti-Duplicate) */
$(document).ready(function() {
var isViewAction = mw.config.get('wgAction') === 'view';
var isSpecialPage = mw.config.get('wgNamespaceNumber') === -1;
var isDiff = mw.config.get('wgDiffOldId') !== null;
if (isViewAction && !isSpecialPage && !isDiff) {
var mippediaDatabase = [
// KATEGORI: FAKTA UNIK (💡)
{ type: "💡 FAKTA UNIK", text: "Mippedia adalah proyek ensiklopedia mandiri yang berfokus pada sejarah, musik, dan teknologi." },
{ type: "💡 FAKTA UNIK", text: "Rumi Haitami, pendiri Mippedia, adalah musisi dan pengusaha muda asal Indonesia." },
{ type: "💡 FAKTA UNIK", text: "Nama 'Mippedia' merepresentasikan identitas kolektif dari Mippedia Community." },
{ type: "💡 FAKTA UNIK", text: "Mippedia tidak berafiliasi dengan Wikimedia Foundation dan mengelola server secara mandiri." },
{ type: "💡 FAKTA UNIK", text: "Sugar Store Id merupakan bagian dari ekosistem bisnis yang dikembangkan pendiri Mippedia." },
{ type: "💡 FAKTA UNIK", text: "Mippedia memiliki ribuan item data yang terhubung melalui sistem Mippedia Data." },
{ type: "💡 FAKTA UNIK", text: "Proyek ini dimulai dengan visi untuk mendokumentasikan pengetahuan secara profesional dan bebas." },
{ type: "💡 FAKTA UNIK", text: "Logo Mippedia melambangkan integrasi ilmu pengetahuan global dan lokal." },
{ type: "💡 FAKTA UNIK", text: "Mippedia Community terdiri dari kontributor yang ahli di bidang teknologi dan dokumentasi digital." },
{ type: "💡 FAKTA UNIK", text: "Selain ensiklopedia, ekosistem Mippedia juga mencakup label rekaman musik." },
{ type: "💡 FAKTA UNIK", text: "Mippedia mendukung standarisasi Wikidata untuk sinkronisasi informasi tokoh." },
{ type: "💡 FAKTA UNIK", text: "Setiap artikel di sini melewati proses kurasi oleh tim administrator Mippedia." },
{ type: "💡 FAKTA UNIK", text: "Sistem pencarian Mippedia dirancang untuk menemukan artikel dalam hitungan milidetik." },
{ type: "💡 FAKTA UNIK", text: "Mippedia menggunakan platform MediaWiki yang telah dimodifikasi secara ekstrim untuk kenyamanan pengguna." },
{ type: "💡 FAKTA UNIK", text: "Warna biru pada tema Mippedia melambangkan kepercayaan, profesionalisme, dan teknologi." },
{ type: "💡 FAKTA UNIK", text: "Mippedia adalah salah satu proyek wiki independen terbesar yang dikelola oleh komunitas lokal." },
{ type: "💡 FAKTA UNIK", text: "Konten musik di Mippedia mencakup diskografi lengkap dari artis-artis di bawah label Mippedia." },
{ type: "💡 FAKTA UNIK", text: "Mippedia menyediakan portal khusus bagi administrator untuk mengelola sistem secara real-time." },
{ type: "💡 FAKTA UNIK", text: "Data kelahiran dan riwayat tokoh di Mippedia diambil dari sumber primer yang tervalidasi." },
{ type: "💡 FAKTA UNIK", text: "Mippedia sering melakukan pembaruan sistem pesan sistem untuk menjaga keamanan komunitas." },
{ type: "💡 FAKTA UNIK", text: "User interface Mippedia dioptimasi agar ramah bagi pengguna perangkat mobile." },
{ type: "💡 FAKTA UNIK", text: "Mippedia memiliki kebijakan privasi yang ketat untuk melindungi data setiap pembacanya." },
{ type: "💡 FAKTA UNIK", text: "Sistem 'Dengarkan Artikel' di Mippedia menggunakan teknologi sintesis suara yang jernih." },
{ type: "💡 FAKTA UNIK", text: "Mippedia secara aktif mengarsipkan dokumen sejarah yang jarang ditemukan di tempat lain." },
{ type: "💡 FAKTA UNIK", text: "Setiap gambar yang diunggah ke Mippedia disimpan dalam repositori lokal yang aman." },
// KATEGORI: INFORMASI (ℹ️)
{ type: "ℹ️ INFORMASI", text: "Anda dapat mendengarkan isi artikel ini dengan mengklik ikon 🔊 di bagian atas halaman." },
{ type: "ℹ️ INFORMASI", text: "Klik ikon ≡ di pojok kanan bawah untuk melihat daftar isi dan melompat antar bagian." },
{ type: "ℹ️ INFORMASI", text: "Gunakan fitur 'Back to Top' (ikon panah) untuk kembali ke atas halaman dengan cepat." },
{ type: "ℹ️ INFORMASI", text: "Artikel ini terakhir diperbarui sesuai dengan log aktivitas Mippedia Community." },
{ type: "ℹ️ INFORMASI", text: "Anda bisa membagikan artikel ini melalui tombol share yang tersedia di akhir tulisan." },
{ type: "ℹ️ INFORMASI", text: "Mippedia Data menyediakan basis data teknis yang terhubung dengan artikel ini." },
{ type: "ℹ️ INFORMASI", text: "Aktifkan Mode Malam pada browser Anda untuk pengalaman membaca yang lebih nyaman di Mippedia." },
{ type: "ℹ️ INFORMASI", text: "Seluruh konten di sini dilindungi oleh lisensi Creative Commons BY-SA 4.0." },
{ type: "ℹ️ INFORMASI", text: "Untuk bantuan teknis atau laporan bug, silakan hubungi tim administrator Mippedia." },
{ type: "ℹ️ INFORMASI", text: "Anda bisa melihat estimasi waktu baca artikel tepat di bawah judul halaman." },
{ type: "ℹ️ INFORMASI", text: "Mippedia menyediakan fitur pencarian pintar di header untuk menemukan topik terkait." },
{ type: "ℹ️ INFORMASI", text: "Pastikan Anda melihat bagian 'Referensi' untuk memverifikasi keaslian data artikel." },
{ type: "ℹ️ INFORMASI", text: "Pendaftaran kontributor Mippedia Community dibuka secara berkala melalui pengumuman resmi." },
{ type: "ℹ️ INFORMASI", text: "Sistem Mippedia secara otomatis mendeteksi perangkat Anda untuk memberikan tampilan terbaik." },
{ type: "ℹ️ INFORMASI", text: "Ikon DATA di sebelah tab Pembicaraan akan mengarahkan Anda ke metadata lengkap tokoh tersebut." },
{ type: "ℹ️ INFORMASI", text: "Mippedia menjaga integritas data dengan sistem proteksi halaman dari suntingan anonim berbahaya." },
{ type: "ℹ️ INFORMASI", text: "Anda bisa mengunduh artikel Mippedia dalam format PDF melalui menu aksi di pojok kanan." },
{ type: "ℹ️ INFORMASI", text: "Jaringan Mippedia mencakup berbagai subdomain untuk proyek bahasa yang berbeda." },
{ type: "ℹ️ INFORMASI", text: "Gunakan fitur seleksi teks untuk mencari istilah yang tidak Anda mengerti di dalam Mippedia." },
{ type: "ℹ️ INFORMASI", text: "Pesan toast ini hanya muncul sekali per sesi halaman untuk kenyamanan membaca Anda." },
{ type: "ℹ️ INFORMASI", text: "Mippedia Community berkomitmen menjaga netralitas informasi di setiap artikel sejarah." },
{ type: "ℹ️ INFORMASI", text: "Pembaruan basis data Mippedia dilakukan setiap hari untuk memastikan akurasi informasi." },
{ type: "ℹ️ INFORMASI", text: "Anda dapat melihat riwayat penyuntingan artikel melalui tab 'History' di menu navigasi." },
{ type: "ℹ️ INFORMASI", text: "Mippedia mendukung integrasi media kaya seperti audio dan video berkualitas tinggi." },
{ type: "ℹ️ INFORMASI", text: "Terima kasih telah menjadi bagian dari pembaca setia Mippedia Community!" }
];
// LOGIKA ACAK: Pilih 1 dari 50
var randomItem = mippediaDatabase[Math.floor(Math.random() * mippediaDatabase.length)];
setTimeout(function() {
// JANGAN MUNCUL jika sedang ngetik/focus
if ($('input:focus, textarea:focus').length > 0) return;
var $toaster = $('<div id="smart-toaster" style="position:fixed; top:25px; left:20px; right:20px; background:rgba(255,255,255,0.98); border-left:5px solid #36c; color:#333; padding:15px; border-radius:12px; z-index:11000; box-shadow:0 10px 30px rgba(0,0,0,0.15); backdrop-filter:blur(10px); display:none; font-family:sans-serif;">' +
'<div style="color:#36c; font-weight:bold; font-size:11px; margin-bottom:5px; text-transform:uppercase; letter-spacing:1px;">' + randomItem.type + '</div>' +
'<div style="font-size:13px; line-height:1.4; color:#444;">' + randomItem.text + '</div>' +
'</div>');
$('body').append($toaster);
$toaster.slideDown(500).delay(7000).slideUp(500, function() { $(this).remove(); });
}, 5000);
}
});