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 203: Baris 203:


/* ==========================================================
/* ==========================================================
   🔗 MIPPEDIA DATA - ULTIMATE SITELINK CONNECTOR (PRO VERSION)
   🔗 MIPPEDIA DATA - ULTIMATE SITELINK CONNECTOR (FINAL V3)
   Status: INDUSTRIAL GRADE (Anti-Crash & Protection Aware)
   Status: STABLE & BEAUTIFIED (Fixing Sync & Delete Bug)
   ========================================================== */
   ========================================================== */
(function() {
(function() {
     $(document).ready(function() {
     $(document).ready(function() {
        // Hanya jalan di halaman artikel utama
         if (mw.config.get('wgAction') !== 'view' || mw.config.get('wgNamespaceNumber') !== 0) return;
         if (mw.config.get('wgAction') !== 'view' || mw.config.get('wgNamespaceNumber') !== 0) return;


         var pageTitle = mw.config.get('wgPageName');
         var pageTitle = mw.config.get('wgPageName');
         var dataPage = 'MediaWiki:Sitelinks-Data.json';
         var dataPage = 'MediaWiki:Sitelinks-Data.json';
        var isProtected = mw.config.get('wgRestrictionEdit') && mw.config.get('wgRestrictionEdit').includes('sysop');
        var userGroups = mw.config.get('wgUserGroups');
        var isAdmin = userGroups.includes('sysop') || userGroups.includes('interface-admin');
         var projects = {
         var projects = {
             'id': { name: 'ID', url: 'https://id.mippedia.org/api.php', base: 'https://id.mippedia.org/wiki/', color: '#6a5acd' },
             'id': { name: 'ID', url: 'https://id.mippedia.org/api.php', base: 'https://id.mippedia.org/wiki/', color: '#6a5acd' },
Baris 223: Baris 218:
         };
         };


         // 1. Tampilkan Box Utama
         // 1. Desain Notifikasi Keren
         var editIcon = (isProtected && !isAdmin) ? '' : '<span id="mip-edit-links" style="cursor: pointer; color: #6a5acd; font-size: 18px; transition: 0.3s;" title="Edit Koneksi">✎</span>';
         function showFancyNotif(msg, type) {
       
            $('.mip-notif').remove();
        var containerHtml =  
            var icon = type === 'success' ? '🚀' : '⚠️';
            '<div id="mip-sitelink-box" style="background: #fff; border: 1px solid #ddd; border-radius: 12px; padding: 18px; margin-top: 25px; font-family: sans-serif; box-shadow: 0 4px 15px rgba(0,0,0,0.05);">' +
            var color = type === 'success' ? '#2ecc71' : '#e74c3c';
                '<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">' +
            var $notif = $('<div class="mip-notif" style="position:fixed; top:30px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.85); backdrop-filter:blur(10px); color:white; padding:12px 24px; border-radius:50px; font-size:13px; font-weight:bold; z-index:10000; display:flex; align-items:center; gap:10px; box-shadow:0 10px 30px rgba(0,0,0,0.3); border:1px solid '+color+'; animation:mipPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);">'+icon+' '+msg+'</div>').appendTo('body');
                    '<strong style="font-size: 14px; color: #333; letter-spacing: 0.3px;">🔗 Koneksi Ekosistem Mippedia</strong>' +
            setTimeout(function() { $notif.css('transform', 'translateX(-50%) translateY(-100px)').css('opacity', '0'); setTimeout(function(){ $notif.remove(); }, 500); }, 3500);
                    editIcon +
        }
                '</div>' +
                '<div id="mip-link-display" style="display: flex; gap: 10px; flex-wrap: wrap;"><div class="mip-loader"></div></div>' +
                '<div id="mip-link-editor" style="display: none; margin-top: 15px; border-top: 1px solid #eee; padding-top: 15px; animation: fadeIn 0.4s;">' +
                    Object.keys(projects).map(p =>
                        '<div style="margin-bottom: 10px; display: flex; gap: 8px;">' +
                            '<span style="width: 60px; font-size: 10px; font-weight: 800; background: #f0f0f0; display: flex; align-items: center; justify-content: center; border-radius: 6px; color: #555;">' + projects[p].name + '</span>' +
                            '<input type="text" id="input-' + p + '" placeholder="Judul artikel..." style="flex: 1; padding: 7px 12px; font-size: 13px; border: 1px solid #ddd; border-radius: 6px; outline: none; transition: 0.2s;">' +
                        '</div>'
                    ).join('') +
                    '<button id="mip-save-links" style="width: 100%; margin-top: 10px; padding: 10px; background: #6a5acd; color: white; border: none; border-radius: 8px; font-size: 13px; cursor: pointer; font-weight: bold; transition: 0.3s;">Sinkronkan Data</button>' +
                '</div>' +
            '</div>' +
            '<style>' +
                '.mip-loader { border: 2px solid #f3f3f3; border-top: 2px solid #6a5acd; border-radius: 50%; width: 15px; height: 15px; animation: spin 1s linear infinite; }' +
                '@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }' +
                '@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }' +
                '#mip-save-links:hover { background: #5a4db8; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(106, 90, 205, 0.3); }' +
                '#mip-edit-links:hover { transform: scale(1.2) rotate(15deg); }' +
                '.mip-pill { text-decoration: none !important; color: white !important; padding: 6px 14px; border-radius: 20px; font-size: 11px; font-weight: bold; transition: 0.3s; display: flex; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }' +
                '.mip-pill:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); opacity: 0.9; }' +
            '</style>';


        $('#mip-data-footer').before(containerHtml);
         // 2. Load Data Awal
 
         function loadServerData() {
         // 2. Fungsi Load Data (Global & Public)
             new mw.Api().get({ action: 'query', prop: 'revisions', titles: dataPage, rvprop: 'content', formatversion: 2 }).done(function(data) {
         function loadData() {
                 var content = data.query.pages[0].revisions ? JSON.parse(data.query.pages[0].revisions[0].content) : {};
             $.getJSON(mw.util.wikiScript('api'), {
                 renderLinks(content[pageTitle] || {});
                action: 'query', prop: 'revisions', titles: dataPage, rvprop: 'content', formatversion: 2, origin: location.origin
            }).done(function(data) {
                 var raw = data.query.pages[0].revisions ? data.query.pages[0].revisions[0].content : "{}";
                var fullData = JSON.parse(raw);
                 renderLinks(fullData[pageTitle] || {});
             }).fail(function() {
             }).fail(function() {
                 $('#mip-link-display').html('<small style="color:red;">Gagal memuat data server.</small>');
                 $('#mip-link-display').html('<em style="color:#e74c3c; font-size:12px;">Gagal tersambung ke pusat data.</em>');
             });
             });
         }
         }
Baris 270: Baris 239:
         function renderLinks(links) {
         function renderLinks(links) {
             var $display = $('#mip-link-display').empty();
             var $display = $('#mip-link-display').empty();
             var count = 0;
             var hasAny = false;
             for (var p in projects) {
             Object.keys(projects).forEach(p => {
                 if (links[p]) {
                 if (links[p]) {
                    hasAny = true;
                     $display.append('<a class="mip-pill" style="background:'+projects[p].color+'" href="'+projects[p].base+encodeURIComponent(links[p])+'" target="_blank">Mippedia '+projects[p].name+': '+links[p]+'</a>');
                     $display.append('<a class="mip-pill" style="background:'+projects[p].color+'" href="'+projects[p].base+encodeURIComponent(links[p])+'" target="_blank">Mippedia '+projects[p].name+': '+links[p]+'</a>');
                     $('#input-' + p).val(links[p]);
                     $('#input-' + p).val(links[p]);
                     count++;
                } else {
                     $('#input-' + p).val(''); // Pastikan input kosong kalau gak ada data
                 }
                 }
             }
             });
             if (count === 0) $display.html('<em style="color: #bbb; font-size: 12px;">Entitas ini belum terhubung ke artikel manapun.</em>');
             if (!hasAny) $display.html('<em style="color:#bbb; font-size:12px;">Data belum terhubung.</em>');
         }
         }


         // 3. Fungsi Animasi Sukses (Pop-up Profesional)
         // 3. Render HTML UI
         function showNotif(msg, type) {
        var editIcon = mw.config.get('wgUserGroups').includes('sysop') || !mw.config.get('wgRestrictionEdit').includes('sysop') ? '<span id="mip-edit-links" style="cursor:pointer; color:#6a5acd; font-size:18px; transition:0.3s;">✎</span>' : '';
             var color = type === 'success' ? '#2ecc71' : '#e74c3c';
       
             var $notif = $('<div style="position:fixed; top:20px; left:50%; transform:translateX(-50%); background:'+color+'; color:white; padding:12px 25px; border-radius:50px; font-size:14px; font-weight:bold; z-index:10000; box-shadow:0 10px 20px rgba(0,0,0,0.2); animation: fadeIn 0.3s;">'+msg+'</div>').appendTo('body');
         var uiHtml = '<div id="mip-sitelink-box" style="background:#fff; border:1px solid #ddd; border-radius:12px; padding:18px; margin-top:25px; box-shadow:0 4px 15px rgba(0,0,0,0.05);">' +
            setTimeout(function() { $notif.fadeOut(function() { $(this).remove(); }); }, 3000);
            '<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:15px;">' +
        }
             '<strong style="font-size:14px; color:#333;">🔗 Koneksi Ekosistem Mippedia</strong>' + editIcon + '</div>' +
            '<div id="mip-link-display" style="display:flex; gap:10px; flex-wrap:wrap;"><div class="mip-loader"></div></div>' +
            '<div id="mip-link-editor" style="display:none; margin-top:15px; border-top:1px solid #eee; padding-top:15px;">' +
            Object.keys(projects).map(p => '<div style="margin-bottom:8px; display:flex; gap:8px;"><span style="width:60px; font-size:10px; font-weight:800; background:#f0f0f0; display:flex; align-items:center; justify-content:center; border-radius:6px;">'+projects[p].name+'</span><input type="text" id="input-'+p+'" placeholder="Judul..." style="flex:1; padding:7px; font-size:13px; border:1px solid #ddd; border-radius:6px;"></div>').join('') +
             '<button id="mip-save-links" style="width:100%; margin-top:10px; padding:10px; background:#6a5acd; color:white; border:none; border-radius:8px; font-size:13px; font-weight:bold; cursor:pointer;">Sinkronkan Data</button></div></div>' +
            '<style>@keyframes mipPop{0%{transform:translateX(-50%) scale(0.5); opacity:0;} 100%{transform:translateX(-50%) scale(1); opacity:1;}} .mip-pill{color:white !important; padding:6px 14px; border-radius:20px; font-size:11px; font-weight:bold; text-decoration:none !important; transition:0.2s;} .mip-pill:hover{transform:translateY(-2px); box-shadow:0 4px 8px rgba(0,0,0,0.1);}</style>';
 
        $('#mip-data-footer').before(uiHtml);


         // 4. Sinkronisasi (Save/Delete)
         // 4. Aksi Simpan & Hapus Permanen
         $(document).on('click', '#mip-save-links', function() {
         $(document).on('click', '#mip-save-links', function() {
             var btn = $(this).text('Proses Mendata...').prop('disabled', true);
             var $btn = $(this);
            $btn.text('Menyimpan...').prop('disabled', true);
             var api = new mw.Api();
             var api = new mw.Api();


             api.get({ action: 'query', prop: 'revisions', titles: dataPage, rvprop: 'content', formatversion: 2 }).done(function(res) {
             api.get({ action: 'query', prop: 'revisions', titles: dataPage, rvprop: 'content', formatversion: 2 }).done(function(res) {
                 var fullData = res.query.pages[0].revisions ? JSON.parse(res.query.pages[0].revisions[0].content) : {};
                 var fullData = res.query.pages[0].revisions ? JSON.parse(res.query.pages[0].revisions[0].content) : {};
                 var currentEntry = {};
                 var newData = {};
                 var isDeleting = true;
                 var isDeleting = true;


                 Object.keys(projects).forEach(p => {
                 Object.keys(projects).forEach(p => {
                     var val = $('#input-' + p).val().trim();
                     var v = $('#input-' + p).val().trim();
                     if (val) {
                     if (v) { newData[p] = v; isDeleting = false; }
                        currentEntry[p] = val;
                        isDeleting = false;
                    }
                 });
                 });


                 if (isDeleting) delete fullData[pageTitle];
                 if (isDeleting) delete fullData[pageTitle];
                 else fullData[pageTitle] = currentEntry;
                 else fullData[pageTitle] = newData;


                 api.postWithEditToken({
                 api.postWithEditToken({
                     action: 'edit', title: dataPage, text: JSON.stringify(fullData, null, 2),
                     action: 'edit', title: dataPage, text: JSON.stringify(fullData, null, 2),
                     summary: 'Update Sitelink: ' + pageTitle + ' [Automated System]', format: 'json'
                     summary: 'Update Sitelink: ' + pageTitle, format: 'json'
                 }).done(function() {
                 }).done(function() {
                     showNotif(isDeleting ? 'Koneksi berhasil dihapus!' : '🚀 Berhasil menghubungkan data!', 'success');
                     showFancyNotif(isDeleting ? 'Koneksi Berhasil Dihapus' : 'Data Berhasil Terhubung!', 'success');
                     setTimeout(function() { location.reload(); }, 1000);
                     setTimeout(function(){ location.reload(); }, 1200);
                 }).fail(function(code) {
                 }).fail(function(code) {
                     showNotif('❌ Gagal: ' + code + '. Pastikan Anda login atau memiliki izin.', 'error');
                     showFancyNotif('Error: ' + code + '. Periksa izin server.', 'error');
                     btn.text('Sinkronkan Data').prop('disabled', false);
                     $btn.text('Sinkronkan Data').prop('disabled', false);
                 });
                 });
             });
             });
Baris 323: Baris 299:


         $(document).on('click', '#mip-edit-links', function() { $('#mip-link-editor').slideToggle(); });
         $(document).on('click', '#mip-edit-links', function() { $('#mip-link-editor').slideToggle(); });
          
         loadServerData();
        loadData();
     });
     });
})();
})();