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 153: | Baris 153: | ||
/* ========================================================== | /* ========================================================== | ||
🚀 MIPPEDIA DATA - TOTAL INTERFACE | 🚀 MIPPEDIA DATA - TOTAL INTERFACE (FINAL BUNDLE V6) | ||
Status: MOBILE OPTIMIZED & SMART PERMISSION | |||
Rules: Namespace 0, Not Main Page, Responsive Notif | |||
========================================================== */ | ========================================================== */ | ||
(function() { | (function() { | ||
$(document).ready(function() { | $(document).ready(function() { | ||
// --- 1. FILTER GLOBAL | // --- 1. FILTER GLOBAL --- | ||
if (mw.config.get('wgNamespaceNumber') !== 0 || | if (mw.config.get('wgNamespaceNumber') !== 0 || | ||
mw.config.get('wgIsMainPage') || | mw.config.get('wgIsMainPage') || | ||
| Baris 169: | Baris 169: | ||
var userGroups = mw.config.get('wgUserGroups'); | var userGroups = mw.config.get('wgUserGroups'); | ||
var isAdmin = userGroups.includes('sysop') || userGroups.includes('interface-admin'); | var isAdmin = userGroups.includes('sysop') || userGroups.includes('interface-admin'); | ||
// Cek apakah halaman ini dilindungi (protected) | |||
var isProtected = mw.config.get('wgRestrictionEdit') && mw.config.get('wgRestrictionEdit').includes('sysop'); | |||
var projects = { | var projects = { | ||
| Baris 176: | Baris 179: | ||
}; | }; | ||
// --- 2. | // --- 2. NOTIFIKASI KOTAK (RESPONSIVE HP & PC) --- | ||
function showBoxNotif(title, msg, type) { | function showBoxNotif(title, msg, type) { | ||
$('.mip-box-notif').remove(); | $('.mip-box-notif').remove(); | ||
| Baris 182: | Baris 185: | ||
{bg:'#fff5f5', border:'#f56565', text:'#742a2a', icon:'🚫'}; | {bg:'#fff5f5', border:'#f56565', text:'#742a2a', icon:'🚫'}; | ||
var $notif = $('<div class="mip-box-notif" style="position:fixed; | // Logika Responsif via JS: Tengah di HP, Pojok di PC | ||
var isMobile = $(window).width() < 768; | |||
var positionStyle = isMobile ? 'left:10px; right:10px; top:20px;' : 'right:25px; top:25px; width:340px;'; | |||
var $notif = $('<div class="mip-box-notif" style="position:fixed; '+positionStyle+' background:'+theme.bg+'; border-left:6px solid '+theme.border+'; padding:16px; z-index:99999; border-radius:12px; box-shadow:0 15px 35px rgba(0,0,0,0.2); font-family:sans-serif; animation:mipSlideIn 0.4s ease-out;">' + | |||
'<div style="display:flex; align-items:center; gap:12px; margin-bottom:6px;">' + | '<div style="display:flex; align-items:center; gap:12px; margin-bottom:6px;">' + | ||
'<span style="font-size:18px;">'+theme.icon+'</span>' + | '<span style="font-size:18px;">'+theme.icon+'</span>' + | ||
'<strong style="color:'+theme.text+'; font-size:14px | '<strong style="color:'+theme.text+'; font-size:14px;">'+title+'</strong>' + | ||
'</div>' + | '</div>' + | ||
'<p style="margin:0; font-size:12.5px; color:'+theme.text+'; line-height:1.5 | '<p style="margin:0; font-size:12.5px; color:'+theme.text+'; line-height:1.5;">'+msg+'</p>' + | ||
'</div>').appendTo('body'); | '</div>').appendTo('body'); | ||
setTimeout(function() { $notif.fadeOut(function(){ $(this).remove(); }); }, | setTimeout(function() { $notif.fadeOut(function(){ $(this).remove(); }); }, 4500); | ||
} | } | ||
// --- 3. UI GENERATOR | // --- 3. UI GENERATOR --- | ||
// A. Header ( | // A. Header (Identitas) | ||
var headerHtml = '<div id="mip-header" style="background:#f8f9fa; border:1px solid #ddd; border-left:5px solid #6a5acd; padding:15px; margin-bottom:20px; border-radius:4px;">' + | var headerHtml = '<div id="mip-header" style="background:#f8f9fa; border:1px solid #ddd; border-left:5px solid #6a5acd; padding:15px; margin-bottom:20px; border-radius:4px;">' + | ||
'<div style="display:flex; align-items:center; gap: | '<div style="display:flex; align-items:center; gap:8px; margin-bottom:5px;">' + | ||
'<span style="background:#6a5acd; color:white; padding:2px | '<span style="background:#6a5acd; color:white; padding:2px 6px; border-radius:3px; font-size:9px; font-weight:bold;">DATA</span>' + | ||
'<strong style="color:#1a1a1a | '<strong style="font-size:14px; color:#1a1a1a;">Mippedia Data Project</strong></div>' + | ||
'<p style="margin:0; font-size: | '<p style="margin:0; font-size:12px; color:#555;">Metadata repositori terstruktur ekosistem Mippedia.</p></div>'; | ||
// B. Connector ( | // B. Connector (Hanya munculkan ikon pensil jika USER ADMIN DAN HALAMAN TIDAK PROTECTED) | ||
var editBtn = '<span id="mip-open-editor" style="cursor:pointer; font-size:18px; color:#6a5acd; opacity:0. | // Jika halaman diproteksi, ikon pensil hilang. | ||
var connectorHtml = '<div id="mip-connector" style="background:#fff; border:1px solid #e0e0e0; border-radius:14px; padding: | var editBtn = (isAdmin && !isProtected) ? '<span id="mip-open-editor" style="cursor:pointer; font-size:18px; color:#6a5acd; opacity:0.8;">✎</span>' : ''; | ||
'<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom: | |||
'<div id="mip-display" style="display:flex; gap: | var connectorHtml = '<div id="mip-connector" style="background:#fff; border:1px solid #e0e0e0; border-radius:14px; padding:18px; margin-top:20px; box-shadow:0 4px 15px rgba(0,0,0,0.05);">' + | ||
'<div id="mip-editor" style="display:none; margin-top: | '<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:15px;"><strong style="font-size:13px; color:#1a1a1a;">🔗 Koneksi Ekosistem</strong>'+editBtn+'</div>' + | ||
Object.keys(projects).map(p => '<div style="margin-bottom: | '<div id="mip-display" style="display:flex; gap:8px; flex-wrap:wrap;"><small style="color:#bbb;">Memproses...</small></div>' + | ||
'<button id="mip-save" style="width:100%; padding:12px; background:#6a5acd; color:white; border:none; border-radius:10px | '<div id="mip-editor" style="display:none; margin-top:15px; border-top:1px solid #f0f0f0; padding-top:15px;">' + | ||
Object.keys(projects).map(p => '<div style="margin-bottom:10px; display:flex; gap:8px;"><span style="width:60px; font-size:10px; font-weight:bold; background:#f5f5f5; display:flex; align-items:center; justify-content:center; border-radius:6px; color:#666;">'+projects[p].name+'</span><input type="text" id="in-'+p+'" placeholder="Judul artikel..." style="flex:1; padding:10px; font-size:13px; border:1.5px solid #eee; border-radius:8px; outline:none; -webkit-appearance:none;"></div>').join('') + | |||
'<button id="mip-save" style="width:100%; padding:12px; background:#6a5acd; color:white; border:none; border-radius:10px; font-weight:bold; cursor:pointer;">Sinkronkan Data</button>' + | |||
'</div></div>'; | '</div></div>'; | ||
// C. Footer ( | // C. Footer (Lisensi) | ||
var footerHtml = '<div id="mip-footer" style="background:#fff; border:1px dashed #ccc; padding: | var footerHtml = '<div id="mip-footer" style="background:#fff; border:1px dashed #ccc; padding:12px; margin-top:20px; text-align:center; border-radius:8px;">' + | ||
'<div style="font-size: | '<div style="font-size:10px; color:#999; font-weight:bold; text-transform:uppercase; margin-bottom:4px;">Lisensi Data</div>' + | ||
'<p style="margin:0; font-size: | '<p style="margin:0; font-size:11.5px; color:#666;">Tersedia di bawah lisensi <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" style="color:#6a5acd; font-weight:bold; text-decoration:none;">CC BY-SA 4.0</a></p></div>'; | ||
// Injeksi | // Injeksi | ||
$('#mw-content-text').prepend(headerHtml); | $('#mw-content-text').prepend(headerHtml); | ||
$('#mw-content-text').append(connectorHtml).append(footerHtml); | $('#mw-content-text').append(connectorHtml).append(footerHtml); | ||
// --- 4. LOGIC | // --- 4. LOGIC CORE --- | ||
function loadLinks() { | function loadLinks() { | ||
new mw.Api().get({ action: 'query', prop: 'revisions', titles: dataPage, rvprop: 'content', formatversion: 2 }).done(function(d) { | new mw.Api().get({ action: 'query', prop: 'revisions', titles: dataPage, rvprop: 'content', formatversion: 2 }).done(function(d) { | ||
| Baris 231: | Baris 240: | ||
if (data[p]) { | if (data[p]) { | ||
found = true; | found = true; | ||
$box.append('<a style="background:'+projects[p].color+'; color:white; padding: | $box.append('<a style="background:'+projects[p].color+'; color:white !important; padding:8px 14px; border-radius:10px; font-size:11px; font-weight:bold; text-decoration:none !important;" href="'+projects[p].base+encodeURIComponent(data[p])+'" target="_blank">Mippedia '+projects[p].name+': '+data[p]+'</a>'); | ||
$('#in-' + p).val(data[p]); | $('#in-' + p).val(data[p]); | ||
} | } | ||
}); | }); | ||
if (!found) $box.html('<em style="color:# | if (!found) $box.html('<em style="color:#ccc; font-size:11.5px;">Belum terhubung ke ekosistem.</em>'); | ||
}); | }); | ||
} | } | ||
$(document).on('click', '#mip-save', function() { | $(document).on('click', '#mip-save', function() { | ||
if (!isAdmin) { | if (!isAdmin) { | ||
showBoxNotif('Akses | showBoxNotif('Akses Ditolak', 'Hanya grup <b>Pengurus</b> yang diizinkan mengedit metadata ini.', 'error'); | ||
return; | return; | ||
} | } | ||
var $btn = $(this).text(' | var $btn = $(this).text('Memeriksa...').prop('disabled', true); | ||
var api = new mw.Api(); | var api = new mw.Api(); | ||
var newData = {}, promises = [], invalid = [], isDel = true; | var newData = {}, promises = [], invalid = [], isDel = true; | ||
| Baris 262: | Baris 270: | ||
$.when.apply($, promises).then(function() { | $.when.apply($, promises).then(function() { | ||
if (invalid.length > 0) { | if (invalid.length > 0) { | ||
showBoxNotif(' | showBoxNotif('Judul Salah', 'Artikel tidak ada di Mippedia ' + invalid.join(', ') + '.', 'error'); | ||
$btn.text('Sinkronkan Data').prop('disabled', false); return; | $btn.text('Sinkronkan Data').prop('disabled', false); return; | ||
} | } | ||
api.get({ action: 'query', prop: 'revisions', titles: dataPage, rvprop: 'content', formatversion: 2 }).done(function(r) { | api.get({ action: 'query', prop: 'revisions', titles: dataPage, rvprop: 'content', formatversion: 2 }).done(function(r) { | ||
var full = r.query.pages[0].revisions ? JSON.parse(r.query.pages[0].revisions[0].content) : {}; | var full = r.query.pages[0].revisions ? JSON.parse(r.query.pages[0].revisions[0].content) : {}; | ||
if (isDel) delete full[pageTitle]; else full[pageTitle] = newData; | if (isDel) delete full[pageTitle]; else full[pageTitle] = newData; | ||
api.postWithEditToken({ action: 'edit', title: dataPage, text: JSON.stringify(full, null, 2), summary: 'Sync: ' + pageTitle }).done(function() { | |||
api.postWithEditToken({ action: 'edit', title: dataPage, text: JSON.stringify(full, null, 2), summary: 'Sync | showBoxNotif('Berhasil!', 'Data ekosistem diperbarui.', 'success'); | ||
showBoxNotif(' | |||
setTimeout(function(){ location.reload(); }, 1500); | setTimeout(function(){ location.reload(); }, 1500); | ||
}); | }); | ||
}); | }); | ||