MediaWiki:Common.js: Perbedaan antara revisi
Tidak ada ringkasan suntingan Tanda: Pengembalian manual Suntingan perangkat seluler Suntingan peramban seluler |
Tidak ada ringkasan suntingan Tanda: Suntingan perangkat seluler Suntingan peramban seluler |
||
| Baris 1.300: | Baris 1.300: | ||
}); | }); | ||
}); | }); | ||
/* ========================================================== | |||
🎭 MIPPEDIA AUTH LOADER - LOGIN & REGISTER ANIMATION | |||
Memberikan kesan profesional saat masuk/daftar ke sistem. | |||
========================================================== */ | |||
(function() { | |||
var action = mw.config.get('wgAction'); | |||
var specialPage = mw.config.get('wgCanonicalSpecialPageName'); | |||
// Hanya jalan di halaman Login dan CreateAccount | |||
if (specialPage !== 'Userlogin' && specialPage !== 'CreateAccount') return; | |||
// 1. CSS Injection: Desain Overlay & Animasi Loading | |||
var style = document.createElement('style'); | |||
style.innerHTML = ` | |||
#mippedia-loader { | |||
position: fixed; top: 0; left: 0; width: 100%; height: 100%; | |||
background: rgba(255, 255, 255, 0.95); | |||
display: none; flex-direction: column; align-items: center; justify-content: center; | |||
z-index: 10000; backdrop-filter: blur(5px); transition: all 0.3s ease; | |||
} | |||
.mip-spinner { | |||
width: 60px; height: 60px; | |||
border: 5px solid #f3f3f3; border-top: 5px solid #3498db; | |||
border-radius: 50%; animation: mip-spin 1s linear infinite; | |||
margin-bottom: 20px; box-shadow: 0 0 15px rgba(52, 152, 219, 0.2); | |||
} | |||
.mip-text { | |||
font-family: 'Segoe UI', Roboto, sans-serif; | |||
font-size: 18px; color: #2c3e50; font-weight: 500; | |||
letter-spacing: 1px; animation: mip-fade 1.5s infinite; | |||
} | |||
@keyframes mip-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } | |||
@keyframes mip-fade { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } | |||
`; | |||
document.head.appendChild(style); | |||
// 2. HTML Injection: Membuat elemen Loader | |||
var loader = document.createElement('div'); | |||
loader.id = 'mippedia-loader'; | |||
loader.innerHTML = ` | |||
<div class="mip-spinner"></div> | |||
<div class="mip-text" id="mip-loader-msg">Mengautentikasi...</div> | |||
`; | |||
document.body.appendChild(loader); | |||
// 3. Logic: Trigger saat form disubmit | |||
$(document).ready(function() { | |||
var $form = $('#mw-upload-form, #userlogin2, #userlogin'); | |||
// MediaWiki menggunakan ID berbeda tergantung skin, kita ambil selector umum form login | |||
$('form').on('submit', function() { | |||
var buttonId = $(document.activeElement).attr('id'); | |||
// Pastikan loader muncul hanya saat tombol submit ditekan | |||
if (buttonId === 'wpLoginAttempt' || buttonId === 'wpCreateaccount') { | |||
// Ganti teks sesuai aksi | |||
if (buttonId === 'wpCreateaccount') { | |||
$('#mip-loader-msg').text('Mempersiapkan Akun Mippedia...'); | |||
} else { | |||
$('#mip-loader-msg').text('Menghubungkan ke Inti Mippedia...'); | |||
} | |||
// Munculkan Loader dengan efek transisi | |||
$('#mippedia-loader').css('display', 'flex').hide().fadeIn(300); | |||
} | |||
}); | |||
}); | |||
})(); | |||