Mippedia

MediaWiki:Common.js: Perbedaan antara revisi

← Revisi sebelumnyaRevisi selanjutnya →

Mippedia Patroli (bicara | kontrib)

8 grup pengguna
512 suntingan
Tidak ada ringkasan suntingan
Tanda: Suntingan perangkat seluler Suntingan peramban seluler
Tidak ada ringkasan suntingan
Tanda: Suntingan perangkat seluler Suntingan peramban seluler
Baris 1.327: Baris 1.327:


/* ==========================================================
/* ==========================================================
   🧠 MIPPEDIA SMART-SUMMARY V4 - CINEMATIC OVERLAY
   🧠 MIPPEDIA SMART-SUMMARY V5 - TYPEWRITER EDITION
   - Posisi: Melayang presisi di atas ikon pensil (Tidak merusak layout)
   - Posisi: Absolute Floating (Aman dari tab menu)
   - UI: Pop-up Modal dengan background blur
   - Efek: Typing Animation (Satu per satu kata)
   - Animasi: Teks mengalir dari atas ke bawah
   - UI: Compact Modal (Scrollable content)
   ========================================================== */
   ========================================================== */
(function() {
(function() {
Baris 1.336: Baris 1.336:
         var paragraphs = $('#mw-content-text p').filter(function() {
         var paragraphs = $('#mw-content-text p').filter(function() {
             return $(this).text().trim().length > 40;
             return $(this).text().trim().length > 40;
         }).slice(0, 5);
         }).slice(0, 4); // Ambil 4 poin biar gak kepanjangan
          
          
         var points = [];
         var points = [];
         paragraphs.each(function() {
         paragraphs.each(function() {
             var sentence = $(this).text().split('.')[0];
             var sentence = $(this).text().split('.')[0];
             if (sentence.length > 10) points.push(sentence + '.');
             if (sentence.length > 10) points.push('• ' + sentence + '.');
         });
         });
         return points;
         return points.join('\n\n');
     }
     }


Baris 1.350: Baris 1.350:
         if (ns !== 0 || mw.config.get('wgAction') !== 'view') return;
         if (ns !== 0 || mw.config.get('wgAction') !== 'view') return;


         // 1. Tombol Melayang (Tidak ganggu teks Halaman/Pembicaraan)
         // 1. Tombol Melayang Presisi
         var $btn = $('<div id="mip-summary-btn">✨ Rangkum</div>').css({
         var $btn = $('<div id="mip-summary-btn">✨ Rangkum</div>').css({
             'position': 'absolute',
             'position': 'absolute', 'right': '15px', 'top': '-35px',
            'right': '15px',
             'padding': '4px 14px', 'background': '#3498db', 'color': '#fff',
            'top': '-35px', // Melayang tepat di atas area pensil
             'border-radius': '20px', 'cursor': 'pointer', 'font-size': '11px',
             'padding': '4px 12px',
             'font-weight': 'bold', 'z-index': '10', 'box-shadow': '0 2px 8px rgba(0,0,0,0.15)'
            'background': '#3498db',
            'color': '#fff',
             'border-radius': '20px',
            'cursor': 'pointer',
            'font-size': '11px',
             'font-weight': 'bold',
            'z-index': '10',
            'box-shadow': '0 2px 8px rgba(0,0,0,0.15)',
            'transition': '0.3s'
         });
         });
        // Tempelkan tombol ke container menu aksi agar posisinya relatif terhadap area edit
         $('.page-actions-menu').css('position', 'relative').prepend($btn);
         $('.page-actions-menu').css('position', 'relative').prepend($btn);


         // 2. Logic Pop-up & Animasi Teks
         // 2. Logic Cinematic Typing
         $btn.on('click', function() {
         $btn.on('click', function() {
             var points = getSummary();
             var fullText = getSummary();
              
              
            // Create Overlay
             var $overlay = $('<div id="mip-sum-ov"></div>').css({
             var $overlay = $('<div id="mip-summary-overlay"></div>').css({
                 'position': 'fixed', 'top': 0, 'left': 0, 'width': '100%', 'height': '100%',
                 'position': 'fixed', 'top': 0, 'left': 0, 'width': '100%', 'height': '100%',
                 'background': 'rgba(0,0,0,0.7)', 'backdrop-filter': 'blur(5px)',
                 'background': 'rgba(0,0,0,0.8)', 'backdrop-filter': 'blur(4px)',
                 'z-index': '1000000', 'display': 'flex', 'align-items': 'center', 'justify-content': 'center',
                 'z-index': '1000000', 'display': 'flex', 'align-items': 'center', 'justify-content': 'center',
                 'opacity': '0', 'transition': 'opacity 0.4s'
                 'opacity': '0', 'transition': 'opacity 0.3s'
             });
             });


             var $modal = $('<div id="mip-summary-modal"></div>').css({
             var $modal = $('<div id="mip-sum-mod"></div>').css({
                 'background': '#fff', 'width': '85%', 'max-width': '400px', 'padding': '25px',
                 'background': '#fff', 'width': '88%', 'max-height': '80vh', 'padding': '20px',
                 'border-radius': '15px', 'position': 'relative', 'transform': 'translateY(20px)',
                 'border-radius': '12px', 'display': 'flex', 'flex-direction': 'column',
                'transition': '0.4s'
                'box-shadow': '0 10px 30px rgba(0,0,0,0.5)', 'transform': 'scale(0.9)', 'transition': '0.3s'
             });
             });


             var htmlContent = '<h3 style="margin-top:0; color:#2c3e50; border-bottom:2px solid #3498db; padding-bottom:10px;">📌 Intisari Mippedia</h3>';
             $modal.html(`
            htmlContent += '<div id="mip-text-flow" style="color:#444; line-height:1.7; font-size:15px; overflow:hidden;"></div>';
                <div style="font-weight:bold; color:#3498db; border-bottom:1px solid #eee; padding-bottom:10px; margin-bottom:15px; font-size:16px;">📌 Intisari Mippedia</div>
            htmlContent += '<div id="mip-close-modal" style="margin-top:20px; text-align:center; color:#3498db; font-weight:bold; cursor:pointer;">Tutup</div>';
                <div id="mip-typing-area" style="color:#333; line-height:1.6; font-size:14px; overflow-y:auto; flex-grow:1; white-space: pre-wrap; font-family: sans-serif;"></div>
                <div id="mip-close" style="margin-top:15px; padding-top:10px; border-top:1px solid #eee; text-align:center; color:#e74c3c; font-weight:bold; cursor:pointer; font-size:14px;">Tutup</div>
            `);


            $modal.html(htmlContent);
             $overlay.append($modal);
             $overlay.append($modal);
             $('body').append($overlay);
             $('body').append($overlay);


            // Munculkan Modal
             setTimeout(function() {  
             setTimeout(function() {
                 $overlay.css('opacity', '1');  
                 $overlay.css('opacity', '1');
                 $modal.css('transform', 'scale(1)');
                 $modal.css({'transform': 'translateY(0)'});
             }, 50);
             }, 10);


             // Animasi Teks Mengalir (Pelan-pelan muncul per poin)
             // FUNGSI TYPING (Muncul satu per satu huruf)
             var i = 0;
             var i = 0;
             function showNextPoint() {
            var speed = 25; // Makin kecil makin cepet
                 if (i < points.length) {
             function typeWriter() {
                     var $p = $('<p style="opacity:0; transform:translateY(-10px); transition:0.6s; margin-bottom:12px;">• ' + points[i] + '</p>');
                 if (i < fullText.length) {
                    $('#mip-text-flow').append($p);
                     document.getElementById("mip-typing-area").innerHTML += fullText.charAt(i);
                    setTimeout(function() {
                        $p.css({'opacity': '1', 'transform': 'translateY(0)'});
                    }, 50);
                     i++;
                     i++;
                     setTimeout(showNextPoint, 600); // Jeda antar poin biar "mahal" efeknya
                    // Auto-scroll ke bawah pas ngetik biar gak ilang
                    var area = document.getElementById("mip-typing-area");
                    area.scrollTop = area.scrollHeight;
                     setTimeout(typeWriter, speed);
                 }
                 }
             }
             }
             setTimeout(showNextPoint, 500);
             setTimeout(typeWriter, 500);


             // Close Logic
             // Close
             $('#mip-close-modal, #mip-summary-overlay').on('click', function(e) {
             $('#mip-close, #mip-sum-ov').on('click', function(e) {
                 if (e.target !== this) return;
                 if (e.target !== this) return;
                 $overlay.css('opacity', '0');
                 $overlay.css('opacity', '0');
                $modal.css('transform', 'translateY(20px)');
                 setTimeout(function() { $overlay.remove(); }, 300);
                 setTimeout(function() { $overlay.remove(); }, 400);
             });
             });
         });
         });
     });
     });
})();
})();
Diperoleh dari "https://id.mippedia.org/wiki/MediaWiki:Common.js"