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


/* ==========================================================
/* ==========================================================
   🔗 MIPPEDIA DATA - AUTO API RELATION LINKER
   MIPPEDIA DATA - TIMELINE KRONOLOGI (FROM INFOBOX)
   Otomatis membuat link berdasarkan database judul halaman asli
   Menyusun sejarah entitas dari data tabel Mippedia Data
   ========================================================== */
   ========================================================== */
(function() {
(function() {
     $(document).ready(function() {
     $(document).ready(function() {
         var $content = $('#mw-content-text p'); // Target paragraf
         var events = [];
        var currentTitle = mw.config.get('wgPageName').replace(/_/g, ' ');
       
        var api = new mw.Api();
        // Ambil data dari baris infobox atau tabel data
        $('.infobox tr, .wikitable tr, .mip-data-table tr').each(function() {
            var label = $(this).find('th').text().trim().replace(':', '');
            var value = $(this).find('td').text().trim();
           
            // Cari angka tahun (19xx atau 20xx) di dalam kolom data
            var yearMatch = value.match(/\b(19|20)\d{2}\b/);
           
            if (yearMatch && label) {
                events.push({
                    year: yearMatch[0],
                    label: label,
                    fullInfo: value
                });
            }
        });


         // 1. Ambil daftar semua judul halaman dari API
         // Urutkan kronologi
         api.get({
         events.sort((a, b) => a.year - b.year);
            action: 'query',
            list: 'allpages',
            aplimit: '500', // Ambil sampai 500 judul halaman
            format: 'json'
        }).done(function(data) {
            var pages = data.query.allpages;
            var currentContentHtml = $content.html();


            // 2. Sorting judul dari yang terpanjang (biar gak bentrok)
        if (events.length > 0) {
             pages.sort(function(a, b) { return b.title.length - a.title.length; });
             var $timelineSection = $('<div id="mip-timeline-section">').css({
                'margin': '20px 0', 'padding': '15px', 'background': '#fff',
                'border': '1px solid #eee', 'border-radius': '10px', 'box-shadow': '0 2px 8px rgba(0,0,0,0.05)'
            });


             pages.forEach(function(page) {
             $timelineSection.append('<div style="font-weight:bold; color:#333; margin-bottom:15px; border-bottom:2px solid #6a5acd; display:inline-block;">⏳ Kronologi Data</div>');
                var targetTitle = page.title;
           
            var $wrapper = $('<div style="border-left: 2px solid #6a5acd; margin-left: 10px; padding-left: 20px;"></div>');


                // Jangan nge-link ke diri sendiri & minimal 3 karakter biar gak typo
            events.forEach(function(ev) {
                if (targetTitle !== currentTitle && targetTitle.length > 3) {
                var $node = $('<div style="position:relative; margin-bottom:15px;">');
                   
                $node.append('<div style="position:absolute; left:-27px; top:4px; width:10px; height:10px; background:#6a5acd; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 2px #6a5acd;"></div>');
                    // Regex pintar: Cari kata yang pas, bukan di dalam kata lain
                $node.append('<div style="font-weight:bold; color:#6a5acd; font-size:0.95em;">' + ev.year + '</div>');
                    // Misal: Cari "Mippedia", jangan sampai kena "MippediaCommunity"
                $node.append('<div style="font-size:0.85em; color:#555;"><strong>' + ev.label + ':</strong> ' + ev.fullInfo + '</div>');
                    var regex = new RegExp('\\b(' + targetTitle.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') + ')\\b', 'gi');
                $wrapper.append($node);
 
                    $content.each(function() {
                        var $this = $(this);
                        var html = $this.html();
 
                        // Cek apakah kata itu sudah ada di dalam tag <a> (biar gak double link)
                        // Kita pakai trik: ganti hanya jika tidak berada di dalam tanda > <
                        if (html.indexOf('href') === -1 || !new RegExp('<a[^>]*>.*' + targetTitle + '.*<\/a>', 'i').test(html)) {
                            var newHtml = html.replace(regex, function(match) {
                                return '<a href="/wiki/' + encodeURIComponent(targetTitle.replace(/ /g, '_')) + '" class="mip-auto-link">' + match + '</a>';
                            });
                            $this.html(newHtml);
                        }
                    });
                }
             });
             });


             // 3. Tambahin CSS dikit biar tampilannya pro
             $timelineSection.append($wrapper);
             $('<style>')
              
                .prop('type', 'text/css')
            // Masukkan ke bagian paling bawah konten Mippedia Data
                .html('.mip-auto-link { color: #6a5acd; font-weight: 500; border-bottom: 1px dotted #6a5acd; text-decoration: none; transition: 0.2s; } .mip-auto-link:hover { background: rgba(106, 92, 205, 0.1); border-bottom: 1px solid #6a5acd; }')
            $('#mw-content-text').append($timelineSection);
                .appendTo('head');
         }
         });
     });
     });
})();
})();