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) | /* 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 | // Muncul kalau sudah scroll 92% halaman (agak telat dikit biar pas di footer) | ||
if($(window).scrollTop() + $(window).height() > $(document).height() - | if($(window).scrollTop() + $(window).height() > $(document).height() - 80) { | ||
if ($('#exit-recommend').length === 0) { | if ($('#exit-recommend').length === 0) { | ||
// | // Style dasar dengan Opacity 0 buat awal animasi | ||
setTimeout(function() { $('#exit-recommend'). | 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); | |||
} | } | ||
} | } | ||