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




/* 2. Notif Rekomendasi Pintar (Bottom Toast) - Versi Rapi */
/* 2. Notif Rekomendasi Pintar (Premium Bottom Toast) */
$(document).ready(function() {
$(document).ready(function() {
     if (mw.config.get('wgIsArticle') && mw.config.get('wgNamespaceNumber') === 0) {
     if (mw.config.get('wgIsArticle') && mw.config.get('wgNamespaceNumber') === 0) {
         $(window).scroll(function() {
         $(window).scroll(function() {
             // Muncul kalau sudah scroll 90% halaman
             // Muncul kalau sudah scroll 92% halaman (agak telat dikit biar pas di footer)
             if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
             if($(window).scrollTop() + $(window).height() > $(document).height() - 80) {
                 if ($('#exit-recommend').length === 0) {
                 if ($('#exit-recommend').length === 0) {
                    // POSISI DIUBAH: bottom jadi 140px biar di atas tombol Back to Top
                    var toast = $('<div id="exit-recommend" style="position:fixed; bottom:140px; left:20px; right:20px; background:#36c; color:#fff; padding:15px; border-radius:12px; z-index:9998; box-shadow:0 4px 15px rgba(0,0,0,0.3); animation: slideUp 0.5s ease; border-left: 5px solid #ff0;"></div>');
                    toast.html('<div style="font-size:1.1em; margin-bottom:5px;"><b>Suka artikel ini?</b></div><div style="font-size:0.9em; margin-bottom:10px;">Coba cek halaman lainnya di Mippedia!</div><a href="/wiki/Special:Random" style="display:inline-block; background:#ff0; color:#000; padding:5px 15px; border-radius:20px; text-decoration:none; font-weight:bold; font-size:0.9em;">Klik di Sini »</a>');
                    $('body').append(toast);
                      
                      
                     // Hilang otomatis dalam 10 detik biar puas baca
                     // Style dasar dengan Opacity 0 buat awal animasi
                     setTimeout(function() { $('#exit-recommend').fadeOut(); }, 10000);
                    var toastHtml = '<div id="exit-recommend" style="position:fixed; bottom:140px; left:20px; right:20px; background:rgba(54, 100, 204, 0.95); color:#fff; padding:18px; border-radius:15px; z-index:9998; box-shadow:0 10px 30px rgba(0,0,0,0.3); backdrop-filter: blur(5px); opacity:0; transform: translateY(20px); transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); border-left: 6px solid #ff0;">' +
                        '<div style="font-size:1.15em; margin-bottom:6px; font-weight:bold; letter-spacing:0.5px;">Suka artikel ini?</div>' +
                        '<div style="font-size:0.95em; margin-bottom:12px; color:#eaecf0;">Coba cek halaman acak lainnya di Mippedia!</div>' +
                        '<a href="/wiki/Special:Random" style="display:inline-block; background:#ff0; color:#000; padding:7px 20px; border-radius:25px; text-decoration:none; font-weight:bold; font-size:0.9em; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: transform 0.2s ease;">Klik di Sini »</a>' +
                        '</div>';
                       
                    $('body').append(toastHtml);
                   
                    // Trigger animasi MUNCUL (Fade In + Slide Up)
                    setTimeout(function() {
                        $('#exit-recommend').css({'opacity': '1', 'transform': 'translateY(0)'});
                    }, 100); // Delay kecil biar CSS render dulu
 
                    // Trigger animasi HILANG (Fade Out + Slide Down) otomatis dalam 12 detik
                     setTimeout(function() {
                        $('#exit-recommend').css({'opacity': '0', 'transform': 'translateY(20px)'});
                        // Hapus elemen dari DOM setelah animasi selesai
                        setTimeout(function() { $('#exit-recommend').remove(); }, 600);
                    }, 12000);
                 }
                 }
             }
             }