MediaWiki:Common.js: Perbedaan antara revisi

/* ==========================================================
   🧠 MIPPEDIA DATA - SMART CONTEXT + AUTO THUMBNAIL
   Features: Smart Sync, Auto-Age, Auto-Bold, Smart Links,
             Dynamic Context, AND NEW: Auto Thumbnail Image
   ========================================================== */
(function() {
    $(document).ready(function() {
        var $descSection = $('#mip-desc-section'), $descBox = $('#mip-auto-description'),
            $sourceInfo = $('#mip-source-info'), $portalLinks = $('#mip-portal-links'),
            $projectPortal = $('#mip-project-portal');
        
        if (!$descBox.length) return;

        var pageTitle = mw.config.get('wgPageName').replace(/_/g, ' '),
            cacheKey = 'mip_smart_context_thumb_' + pageTitle, now = new Date().getTime(),
            currentYear = 2026;

        var projects = [
            { id: 'id', name: 'Mippedia bahasa Indonesia', url: 'https://id.mippedia.org/api.php', base: 'https://id.mippedia.org/wiki/', label: 'Bahasa Indonesia' },
            { id: 'en', name: 'Mippedia bahasa Inggris', url: 'https://en.mippedia.org/api.php', base: 'https://en.mippedia.org/wiki/', label: 'Bahasa Inggris' },
            { id: 'concise', name: 'Mippedia bahasa Indonesia ringkas', url: 'https://concise.mippedia.org/api.php', base: 'https://concise.mippedia.org/wiki/', label: 'Versi Ringkas' }
        ];

        // --- SEMUA FUNGSI AWAL (TETAP UTUH) ---
        function applyAutoBold(text) { return text.replace(new RegExp('(' + pageTitle + ')', 'gi'), '<strong>$1</strong>'); }
        function cleanExtract(text) { return text.replace(/\[\d+\]/g, '').replace(/\{\{[^}]+\}\}/g, '').replace(/\(\s*\)/g, '').replace(/\s\s+/g, ' ').trim(); }
        
        function applyDynamicContext(text) {
            var date = new Date();
            var hari = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"];
            var bulan = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
            var tglSkrg = hari[date.getDay()] + ", " + date.getDate() + " " + bulan[date.getMonth()] + " " + date.getFullYear();

            return text
                .replace(/(hari ini|saat ini|sekarang)/gi, '$1 (' + tglSkrg + ')')
                .replace(/(\d{1,2}\s(?:Januari|Februari|Maret|April|Mei|Juni|Juli|Agustus|September|Oktober|November|Desember)\s(\d{4}))/gi, function(m, f, y) { 
                    return f + " <span style='color: #444; font-weight: bold;'>– usia " + (currentYear - parseInt(y)) + " tahun</span>"; 
                })
                .replace(/(sejak|tahun)\s(\d{4})/gi, function(m, k, y) {
                    var gap = currentYear - parseInt(y);
                    if (gap > 0 && gap < 100) return k + " " + y + " <small style='color: #888;'>(" + gap + " thn lalu)</small>";
                    return m;
                });
        }

        function applySummary(text) {
            var limit = 250;
            if (text.length <= limit) return '<span>' + text + '</span>';
            return '<span>' + text.substring(0, limit) + '</span><span class="mip-dots">... </span><span class="mip-more" style="display:none;">' + text.substring(limit) + '</span><span class="mip-read-btn" style="color: #6a5acd; cursor: pointer; font-weight: bold; margin-left: 5px;">Baca selengkapnya</span>';
        }

        function buildSmartLinks(currentId) {
            $portalLinks.empty();
            var validLinks = [];
            var checkRequests = projects.filter(p => p.id !== currentId).map(function(p) {
                return $.ajax({ url: p.url, data: { action: 'query', titles: pageTitle, format: 'json', origin: '*' }, dataType: 'json' })
                    .then(function(data) { if (data.query.pages["-1"] === undefined) { validLinks.push('<a href="' + p.base + encodeURIComponent(pageTitle) + '" target="_blank" style="color: #6a5acd; text-decoration: underline; font-weight: bold;">' + p.label + '</a>'); } });
            });
            $.when.apply($, checkRequests).done(function() {
                if (validLinks.length > 0) { $portalLinks.html(validLinks.join(' <span style="color:#ccc; margin: 0 5px;">•</span> ')); $projectPortal.fadeIn(); }
            });
        }

        // --- SISTEM SMART CHECK DENGAN SUPPORT THUMBNAIL ---
        var cached = JSON.parse(localStorage.getItem(cacheKey) || "{}");

        function init() {
            var pCheck = projects[Math.floor(Math.random() * projects.length)];
            $.ajax({
                url: pCheck.url,
                data: { action: 'query', prop: 'revisions|pageimages', rvprop: 'timestamp', piprop: 'thumbnail', pithumbsize: 150, titles: pageTitle, format: 'json', origin: '*' },
                dataType: 'json',
                success: function(res) {
                    var pg = res.query.pages, id = Object.keys(pg)[0];
                    var latestTS = (id != "-1") ? pg[id].revisions[0].timestamp : "0";
                    // Ambil thumbnail kalau ada
                    var thumbUrl = (id != "-1" && pg[id].thumbnail) ? pg[id].thumbnail.source : "";

                    if (cached.content && cached.ts === latestTS) {
                        renderAll(cached.p, cached.content, cached.isTrans, cached.orig, cached.img);
                    } else { 
                        fetchFreshData(latestTS, thumbUrl); 
                    }
                },
                error: function() { if (cached.content) renderAll(cached.p, cached.content, cached.isTrans, cached.orig, cached.img); }
            });
        }

        function fetchFreshData(newTS, img) {
            var found = false;
            var shuffled = projects.sort(() => Math.random() - 0.5);
            shuffled.forEach(function(p) {
                if (found) return;
                $.ajax({
                    url: p.url,
                    data: { action: 'query', prop: 'extracts', exintro: 1, explaintext: 1, titles: pageTitle, format: 'json', origin: '*' },
                    dataType: 'json',
                    success: function(data) {
                        if (found) return;
                        var pages = data.query.pages, pageId = Object.keys(pages)[0];
                        if (pageId != "-1" && pages[pageId].extract) {
                            found = true;
                            var extract = cleanExtract(pages[pageId].extract);
                            if (p.id === 'en') {
                                $.ajax({ url: "https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=id&dt=t&q=" + encodeURIComponent(extract), success: function(res) { 
                                    var trans = ""; res[0].forEach(s => { if (s[0]) trans += s[0]; });
                                    finalize(p, trans, true, extract, newTS, img);
                                }});
                            } else { 
                                finalize(p, extract, false, "", newTS, img); 
                            }
                        }
                    }
                });
            });
        }

        function finalize(p, c, t, o, ts, img) {
            localStorage.setItem(cacheKey, JSON.stringify({p:p, content:c, isTrans:t, orig:o, ts:ts, img:img}));
            renderAll(p, c, t, o, img);
        }

        function renderAll(p, currentText, isTranslated, originalText, img) {
            var processedText = applyAutoBold(applyDynamicContext(currentText));
            
            // Layouting Thumbnail (Tetap ringan: hanya render jika gambar ada)
            var thumbHtml = img ? '<div style="float: right; margin-left: 15px; margin-bottom: 10px; border: 1px solid #ddd; padding: 3px; background: #fff; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"><img src="'+img+'" style="max-width: 100px; display: block; height: auto;"></div>' : '';

            $descSection.show();
            // Masukkan thumbnail ke dalam konten box
            $descBox.show().html(thumbHtml + applySummary(processedText) + '<div style="clear:both;"></div>');
            
            var footer = '<div style="font-size: 0.9em; color: #777;">Sumber Dari : <a href="' + p.base + encodeURIComponent(pageTitle) + '" target="_blank" style="color: #6a5acd; font-weight: bold; text-decoration: none;">' + p.name + '.</a>';
            if (isTranslated) { footer += '<br><span style="font-size: 0.85em; font-style: italic;">(Diterjemahkan secara otomatis)</span> <span id="mip-toggle-orig" style="color: #6a5acd; cursor: pointer; text-decoration: underline; margin-left: 5px;">Tampilkan versi asli</span>'; }
            $sourceInfo.show().html(footer);
            
            buildSmartLinks(p.id);
            
            // Handlers
            $(document).off('click', '.mip-read-btn').on('click', '.mip-read-btn', function() { $(this).hide(); $('.mip-dots').hide(); $('.mip-more').fadeIn(); });
            $(document).off('click', '#mip-toggle-orig').on('click', '#mip-toggle-orig', function() {
                var isOrig = ($(this).text() === 'Tampilkan versi asli');
                var textToDisplay = applyAutoBold(applyDynamicContext(isOrig ? originalText : currentText));
                // Pastikan thumbnail tetap ada saat toggle versi asli
                $descBox.html(thumbHtml + applySummary(textToDisplay) + '<div style="clear:both;"></div>');
                $(this).text(isOrig ? 'Tampilkan terjemahan' : 'Tampilkan versi asli');
            });
        }

        init();
    });
})();

/* ==========================================================
   📦 MIPPEDIA DATA - TOP PERMANENT HEADER
   Fungsi: Identitas project (Hanya di Namespace Utama)
   ========================================================== */
(function() {
    $(document).ready(function() {
        // PROTEKSI NAMESPACE: Hanya muncul di artikel utama (0), bukan Talk, User, atau Project.
        if (mw.config.get('wgNamespaceNumber') !== 0 || mw.config.get('wgAction') !== 'view') return;

        var headerHtml = 
            '<div id="mip-data-header" style="background: #f8f9fa; border-left: 5px solid #6a5acd; border-right: 1px solid #ddd; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 12px; margin-bottom: 15px; border-radius: 0 4px 4px 0; font-family: sans-serif;">' +
                '<div style="display: flex; align-items: center; margin-bottom: 5px;">' +
                    '<span style="background: #6a5acd; color: white; padding: 2px 8px; border-radius: 3px; font-size: 10px; font-weight: bold; margin-right: 8px; text-transform: uppercase;">Basis Data</span>' +
                    '<strong style="color: #333; font-size: 14px;">Mippedia Data Project</strong>' +
                '</div>' +
                '<p style="margin: 0; font-size: 12.5px; color: #555; line-height: 1.5;">' +
                    'Halaman ini merupakan repositori data terstruktur dari ekosistem <strong>Mippedia</strong>. ' +
                    'Informasi yang ditampilkan di bawah ini adalah metadata entitas yang disinkronisasi secara otomatis untuk keperluan referensi terbuka.' +
                '</p>' +
            '</div>';

        $('#mw-content-text').prepend(headerHtml);
    });
})();

/* ==========================================================
   🛡️ MIPPEDIA DATA - BOTTOM PERMANENT FOOTER
   Fungsi: Lisensi & Atribusi (Hanya di Namespace Utama)
   ========================================================== */
(function() {
    $(document).ready(function() {
        // PROTEKSI NAMESPACE: Hanya muncul di artikel utama (0)
        if (mw.config.get('wgNamespaceNumber') !== 0 || mw.config.get('wgAction') !== 'view') return;

        var footerHtml = 
            '<div id="mip-data-footer" style="background: #fff; border: 1px dashed #ccc; padding: 10px; margin-top: 20px; text-align: center; border-radius: 6px;">' +
                '<div style="font-size: 11px; color: #888; margin-bottom: 4px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px;">Lisensi & Penggunaan Data</div>' +
                '<p style="margin: 0; font-size: 12px; color: #666; line-height: 1.4;">' +
                    'Seluruh data di dalam <strong>Mippedia Data</strong> tersedia di bawah lisensi ' +
                    '<a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" style="color: #6a5acd; text-decoration: none;">CC BY-SA 4.0</a>. ' +
                    'Data ini dapat digunakan kembali dengan mencantumkan atribusi ke Mippedia Community.' +
                '</p>' +
            '</div>';

        $('#mw-content-text').append(footerHtml);
    });
})();

/* ==========================================================
   🔗 MIPPEDIA DATA - ULTIMATE SITELINK CONNECTOR (PRO V4)
   Status: INDUSTRIAL GRADE (Namespace Protection & API Check)
   ========================================================== */
(function() {
    $(document).ready(function() {
        // HANYA MUNCUL DI NAMESPACE UTAMA (0)
        if (mw.config.get('wgAction') !== 'view' || mw.config.get('wgNamespaceNumber') !== 0) return;

        var pageTitle = mw.config.get('wgPageName');
        var dataPage = 'MediaWiki:Sitelinks-Data.json';
        var projects = {
            'id': { name: 'ID', url: 'https://id.mippedia.org/api.php', base: 'https://id.mippedia.org/wiki/', color: '#6a5acd' },
            'en': { name: 'EN', url: 'https://en.mippedia.org/api.php', base: 'https://en.mippedia.org/wiki/', color: '#4169e1' },
            'concise': { name: 'Concise', url: 'https://concise.mippedia.org/api.php', base: 'https://concise.mippedia.org/wiki/', color: '#20b2aa' }
        };

        // 1. Desain Notifikasi Professional & Modern
        function showFancyNotif(msg, type) {
            $('.mip-notif').remove();
            var color = type === 'success' ? '#00ffa3' : '#ff4d4d'; // Neon colors
            var icon = type === 'success' ? '✓' : '✕';
            
            var $notif = $('<div class="mip-notif" style="position:fixed; top:40px; left:50%; transform:translateX(-50%); background:rgba(15,15,15,0.92); backdrop-filter:blur(12px); color:white; padding:14px 28px; border-radius:12px; font-size:13px; font-weight:600; z-index:10000; display:flex; align-items:center; gap:12px; box-shadow:0 15px 35px rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.1); border-bottom:3px solid '+color+'; animation:mipSlideDown 0.5s cubic-bezier(0.19, 1, 0.22, 1);">'+
                '<span style="background:'+color+'; color:#000; width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:12px; font-weight:900;">'+icon+'</span>'+
                '<span>'+msg+'</span>'+
            '</div>').appendTo('body');

            setTimeout(function() { 
                $notif.css('transform', 'translateX(-50%) translateY(-20px)').css('opacity', '0').css('transition', '0.4s');
                setTimeout(function(){ $notif.remove(); }, 400); 
            }, 3800);
        }

        // 2. Load Data Awal
        function loadServerData() {
            new mw.Api().get({ action: 'query', prop: 'revisions', titles: dataPage, rvprop: 'content', formatversion: 2 }).done(function(data) {
                var content = data.query.pages[0].revisions ? JSON.parse(data.query.pages[0].revisions[0].content) : {};
                renderLinks(content[pageTitle] || {});
            }).fail(function() {
                $('#mip-link-display').html('<em style="color:#ff4d4d; font-size:12px;">Pusat data tidak merespon.</em>');
            });
        }

        function renderLinks(links) {
            var $display = $('#mip-link-display').empty();
            var hasAny = false;
            Object.keys(projects).forEach(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>');
                    $('#input-' + p).val(links[p]);
                } else { $('#input-' + p).val(''); }
            });
            if (!hasAny) $display.html('<em style="color:#888; font-size:12px; font-style:normal;">Belum ada koneksi ekosistem.</em>');
        }

        // 3. UI Construction
        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; opacity:0.7;">✎</span>' : '';
        
        var uiHtml = '<div id="mip-sitelink-box" style="background:#fff; border:1px solid #e0e0e0; border-radius:14px; padding:20px; margin-top:25px; box-shadow:0 8px 24px rgba(0,0,0,0.04);">' +
            '<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;">' +
            '<strong style="font-size:14px; color:#1a1a1a; letter-spacing:-0.2px;">🔗 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:18px; border-top:1px solid #f0f0f0; padding-top:18px;">' +
            Object.keys(projects).map(p => '<div style="margin-bottom:10px; display:flex; gap:10px;"><span style="width:65px; font-size:10px; font-weight:800; background:#f5f5f5; display:flex; align-items:center; justify-content:center; border-radius:8px; color:#666;">'+projects[p].name+'</span><input type="text" id="input-'+p+'" placeholder="Ketik judul artikel..." style="flex:1; padding:9px 12px; font-size:13px; border:1.5px solid #eee; border-radius:8px; outline:none; transition:0.2s;" onfocus="this.style.borderColor=\'#6a5acd\'" onblur="this.style.borderColor=\'#eee\'"></div>').join('') +
            '<button id="mip-save-links" style="width:100%; margin-top:12px; padding:12px; background:#6a5acd; color:white; border:none; border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; transition:0.3s; box-shadow:0 4px 12px rgba(106,90,205,0.2);">Sinkronkan Data</button></div></div>' +
            '<style>@keyframes mipSlideDown{from{top:0; opacity:0;} to{top:40px; opacity:1;}} .mip-pill{color:white !important; padding:7px 15px; border-radius:8px; font-size:11px; font-weight:700; text-decoration:none !important; transition:0.3s; border-bottom:2px solid rgba(0,0,0,0.15);} .mip-pill:hover{transform:translateY(-2px); box-shadow:0 5px 10px rgba(0,0,0,0.12); opacity:0.9;}</style>';

        $('#mip-data-footer').before(uiHtml);

        // 4. Brain Function: Verification & Storage
        $(document).on('click', '#mip-save-links', function() {
            var $btn = $(this);
            var api = new mw.Api();
            var newData = {};
            var isDeleting = true;
            var checkPromises = [];
            var invalidTitles = [];

            $btn.text('Memverifikasi Artikel...').prop('disabled', true);

            // Validasi Input & Cek API per Proyek
            Object.keys(projects).forEach(p => {
                var v = $('#input-' + p).val().trim();
                if (v) {
                    isDeleting = false;
                    var promise = $.ajax({
                        url: projects[p].url,
                        data: { action: 'query', titles: v, format: 'json', origin: '*' },
                        dataType: 'json'
                    }).done(function(data) {
                        if (data.query.pages["-1"] !== undefined) {
                            invalidTitles.push(projects[p].name + ': "' + v + '"');
                        } else {
                            newData[p] = v;
                        }
                    });
                    checkPromises.push(promise);
                }
            });

            $.when.apply($, checkPromises).then(function() {
                if (invalidTitles.length > 0) {
                    showFancyNotif('Judul Tidak Ditemukan: ' + invalidTitles.join(', '), 'error');
                    $btn.text('Sinkronkan Data').prop('disabled', false);
                    return;
                }

                $btn.text('Menyimpan ke Server...');
                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) : {};
                    
                    if (isDeleting) delete fullData[pageTitle];
                    else fullData[pageTitle] = newData;

                    api.postWithEditToken({
                        action: 'edit', title: dataPage, text: JSON.stringify(fullData, null, 2),
                        summary: 'Update Sitelink: ' + pageTitle + ' [Automated Check]', format: 'json'
                    }).done(function() {
                        showFancyNotif(isDeleting ? 'Koneksi Berhasil Dicabut' : 'Data Ekosistem Terkoneksi!', 'success');
                        setTimeout(function(){ location.reload(); }, 1200);
                    }).fail(function(code) {
                        showFancyNotif('Gagal: ' + code, 'error');
                        $btn.text('Sinkronkan Data').prop('disabled', false);
                    });
                });
            });
        });

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