MediaWiki:Common.js: Perbedaan antara revisi

/* ==========================================================
   🧠 MIPPEDIA DATA - ULTIMATE ENGINE
   Features: Chaining, Translate, Toggle, Citation Cleaner, Smart Summary
   ========================================================== */
(function() {
    $(document).ready(function() {
        var $descSection = $('#mip-desc-section');
        var $descBox = $('#mip-auto-description');
        var $sourceInfo = $('#mip-source-info');
        if (!$descBox.length) return;

        var pageTitle = mw.config.get('wgPageName');
        var projects = [
            { id: 'id', name: 'Mippedia bahasa Indonesia', url: 'https://id.mippedia.org/api.php', base: 'https://id.mippedia.org/wiki/' },
            { id: 'en', name: 'Mippedia bahasa Inggris', url: 'https://en.mippedia.org/api.php', base: 'https://en.mippedia.org/wiki/' },
            { id: 'concise', name: 'Mippedia bahasa Indonesia ringkas', url: 'https://concise.mippedia.org/api.php', base: 'https://concise.mippedia.org/wiki/' }
        ];

        // 🧹 Fitur 1: Pembersih Teks Cerdas (Hapus [1], [2], dll)
        function cleanExtract(text) {
            return text.replace(/\[\d+\]/g, '') // Hapus sitasi [1]
                       .replace(/\{\{[^}]+\}\}/g, '') // Hapus template sisa
                       .replace(/\(\s*\)/g, '') // Hapus kurung kosong
                       .replace(/\s\s+/g, ' ') // Hapus spasi ganda
                       .trim();
        }

        // 📖 Fitur 2: Smart Summary (Baca Selengkapnya)
        function applySummary(text) {
            var limit = 250; // Batas karakter sebelum dipotong
            if (text.length <= limit) {
                return '<span>' + text + '</span>';
            }
            var visibleText = text.substring(0, limit);
            var hiddenText = text.substring(limit);
            return '<span>' + visibleText + '</span>' +
                   '<span class="mip-more-dot">... </span>' +
                   '<span class="mip-hidden-text" style="display:none;">' + hiddenText + '</span>' +
                   '<span class="mip-read-btn" style="color: #6a5acd; cursor: pointer; font-weight: bold; font-size: 0.9em; margin-left: 5px;">Baca selengkapnya</span>';
        }

        function translateText(text, callback) {
            var translateUrl = "https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=id&dt=t&q=" + encodeURIComponent(text);
            $.ajax({
                url: translateUrl,
                success: function(res) {
                    var translated = "";
                    res[0].forEach(function(s) { if (s[0]) translated += s[0]; });
                    callback(translated);
                },
                error: function() { callback(text); }
            });
        }

        function renderContent(finalText, p, isTranslated, originalRaw) {
            var sourceLink = p.base + encodeURIComponent(pageTitle);
            
            // Masukkan teks dengan fitur summary
            $descBox.html('<div id="mip-main-text">' + applySummary(finalText) + '</div>');
            
            // Masukkan info sumber
            var footerHtml = '<div style="font-size: 0.9em; color: #777; margin-top: 10px;">' +
                             'Sumber Dari : <a href="' + sourceLink + '" target="_blank" style="color: #6a5acd; font-weight: bold; text-decoration: none;">' + p.name + '.</a>';
            if (isTranslated) {
                footerHtml += '<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>';
            }
            footerHtml += '</div>';
            $sourceInfo.html(footerHtml);

            // Logic Klik Baca Selengkapnya
            $(document).off('click', '.mip-read-btn').on('click', '.mip-read-btn', function() {
                $(this).hide();
                $('.mip-more-dot').hide();
                $('.mip-hidden-text').fadeIn();
            });

            // Logic Klik Toggle Versi Asli
            if (isTranslated) {
                $(document).off('click', '#mip-toggle-orig').on('click', '#mip-toggle-orig', function() {
                    if ($(this).text() === 'Tampilkan versi asli') {
                        $descBox.html('<div id="mip-main-text">' + applySummary(originalRaw) + '</div>');
                        $(this).text('Tampilkan terjemahan');
                    } else {
                        $descBox.html('<div id="mip-main-text">' + applySummary(finalText) + '</div>');
                        $(this).text('Tampilkan versi asli');
                    }
                });
            }
        }

        function fetchDescription(index) {
            if (index >= projects.length) { $descSection.hide(); return; }
            var p = projects[index];
            $descBox.html('<div class="mip-loading-shimmer"></div>');
            $sourceInfo.empty();
            $descSection.show();

            $.ajax({
                url: p.url,
                data: { action: 'query', prop: 'extracts', exintro: true, explaintext: true, titles: pageTitle, format: 'json', origin: '*' },
                dataType: 'json',
                success: function(data) {
                    var pages = data.query.pages;
                    var pageId = Object.keys(pages)[0];
                    if (pageId != "-1") {
                        var extract = cleanExtract(pages[pageId].extract);
                        if (extract !== "") {
                            if (p.id === 'en') {
                                translateText(extract, function(trans) { renderContent(trans, p, true, extract); });
                            } else {
                                renderContent(extract, p, false);
                            }
                            return;
                        }
                    }
                    fetchDescription(index + 1);
                },
                error: function() { fetchDescription(index + 1); }
            });
        }

        fetchDescription(0);

        if ($('#mip-shimmer-style').length === 0) {
            $('<style id="mip-shimmer-style">').text(`
                .mip-loading-shimmer { height: 16px; width: 100%; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: mip-shimmer 1.5s infinite; border-radius: 4px; }
                @keyframes mip-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
            `).appendTo('head');
        }
    });
})();