Mippedia Data

MediaWiki:Common.js: Perbedaan antara revisi

← Revisi sebelumnyaRevisi selanjutnya →

Admin (bicara | kontrib)

7 grup pengguna
168 suntingan
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 (DATA REPO)
   ⏳ MIPPEDIA DATA - ULTIMATE SMART TIMELINE (SIDEBAR MODE)
   Otomatis membuat link di Deskripsi & Infobox Mippedia Data
   Fitur: Floating Button & Slide-out Timeline (No Bottom Box)
   ========================================================== */
   ========================================================== */
(function() {
(function() {
     $(document).ready(function() {
     $(document).ready(function() {
         var api = new mw.Api();
         var events = [];
        var currentTitle = mw.config.get('wgPageName').replace(/_/g, ' ');
       
        // 1. Scan data tahun dari tabel secara cerdas
        $('.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();
            var yearMatch = value.match(/\b(19|20)\d{2}\b/);
           
            if (yearMatch && label && label.length < 25) {
                events.push({ year: yearMatch[0], label: label, info: value });
            }
        });


         // Target: Box deskripsi otomatis dan seluruh tabel data
         if (events.length === 0) return;
         var $targetElements = $('#mip-auto-description, .infobox td, .wikitable td');
         events.sort((a, b) => a.year - b.year);


         api.get({
         // 2. Buat Floating Button (Ikon Jam)
             action: 'query',
        var $floatBtn = $('<div id="mip-timeline-btn">⏳</div>').css({
             list: 'allpages',
             'position': 'fixed', 'bottom': '25px', 'right': '25px',
             aplimit: '500',
             'width': '50px', 'height': '50px', 'background': '#6a5acd',
             format: 'json'
             'color': 'white', 'border-radius': '50%', 'display': 'flex',
         }).done(function(data) {
             'align-items': 'center', 'justify-content': 'center',
             var pages = data.query.allpages;
            'font-size': '20px', 'cursor': 'pointer', 'z-index': '1000',
           
            'box-shadow': '0 4px 15px rgba(106, 92, 205, 0.4)', 'transition': '0.3s'
            // Sort judul terpanjang dulu biar presisi
         });
            pages.sort(function(a, b) { return b.title.length - a.title.length; });
 
        // 3. Buat Sidebar Panel (Tersembunyi di awal)
        var $sidePanel = $('<div id="mip-timeline-panel">').css({
             'position': 'fixed', 'top': '0', 'right': '-350px',
            'width': '320px', 'height': '100%', 'background': '#fff',
            'box-shadow': '-5px 0 25px rgba(0,0,0,0.1)', 'z-index': '1001',
            'transition': '0.4s cubic-bezier(0.16, 1, 0.3, 1)', 'padding': '25px',
            'overflow-y': 'auto', 'font-family': 'sans-serif'
        });
 
        // Isi Panel
        var panelHtml = '<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:25px; border-bottom:2px solid #eee; padding-bottom:10px;">' +
                        '<span style="font-weight:bold; color:#333; font-size:1.1em;">Kronologi Entitas</span>' +
                        '<span id="close-mip-timeline" style="cursor:pointer; font-size:20px; color:#999;">×</span></div>';
       
        var listHtml = '<div style="border-left:2px solid #6a5acd; margin-left:10px; padding-left:20px;">';
        events.forEach(function(ev) {
            listHtml += '<div style="position:relative; margin-bottom:20px;">' +
                        '<div style="position:absolute; left:-26px; top:5px; width:10px; height:10px; background:#6a5acd; border-radius:50%; border:2px solid #fff;"></div>' +
                        '<div style="font-weight:bold; color:#6a5acd; font-size:0.9em;">' + ev.year + '</div>' +
                        '<div style="font-size:0.85em; color:#333; margin-top:3px;"><strong>' + ev.label + '</strong></div>' +
                        '<div style="font-size:0.8em; color:#777;">' + ev.info + '</div></div>';
        });
        listHtml += '</div>';
 
        $sidePanel.html(panelHtml + listHtml);
        $('body').append($floatBtn).append($sidePanel);


            pages.forEach(function(page) {
        // 4. Efek Interaksi
                var targetTitle = page.title;
        $floatBtn.on('mouseenter', function() { $(this).css('transform', 'scale(1.1) rotate(15deg)'); });
                if (targetTitle !== currentTitle && targetTitle.length > 3) {
        $floatBtn.on('mouseleave', function() { $(this).css('transform', 'scale(1) rotate(0)'); });
                   
                    var regex = new RegExp('\\b(' + targetTitle.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') + ')\\b', 'gi');


                    $targetElements.each(function() {
        $floatBtn.on('click', function() {
                        var $this = $(this);
            $sidePanel.css('right', '0');
                        var html = $this.html();
        });


                        // Cek biar gak double link atau ngerusak tag HTML
        $('#close-mip-timeline').on('click', function() {
                        if (!/<a[^>]*>/.test(html) || html.indexOf(targetTitle) === -1) {
            $sidePanel.css('right', '-350px');
                            var newHtml = html.replace(regex, function(match) {
        });
                                return '<a href="/wiki/' + encodeURIComponent(targetTitle.replace(/ /g, '_')) + '" class="mip-data-link">' + match + '</a>';
                            });
                            $this.html(newHtml);
                        }
                    });
                }
            });


            // Styling biar tetep rapih & pro
        // Tutup jika klik di luar panel
            if (!$('#mip-linker-style').length) {
        $(document).on('mouseup', function(e) {
                $('<style id="mip-linker-style">')
            if (!$sidePanel.is(e.target) && $sidePanel.has(e.target).length === 0 && !$floatBtn.is(e.target)) {
                    .html('.mip-data-link { color: #6a5acd !important; font-weight: bold; text-decoration: none; border-bottom: 1px dotted #6a5acd; } .mip-data-link:hover { background: rgba(106, 92, 205, 0.1); border-bottom: 1px solid #6a5acd; }')
                $sidePanel.css('right', '-350px');
                    .appendTo('head');
             }
             }
         });
         });
     });
     });
})();
})();
Diperoleh dari "https://data.mippedia.org/wiki/MediaWiki:Common.js"