MediaWiki:Common.js: Perbedaan antara revisi
Tidak ada ringkasan suntingan Tanda: Suntingan perangkat seluler Suntingan peramban seluler |
Tidak ada ringkasan suntingan Tanda: Dikembalikan Suntingan perangkat seluler Suntingan peramban seluler |
||
| Baris 1.325: | Baris 1.325: | ||
}); | }); | ||
}); | }); | ||
/* ========================================================== | |||
👁️ MIPPEDIA PASSWORD TOGGLE (SHOW/HIDE) | |||
Menambahkan ikon mata pada kolom sandi & konfirmasi sandi | |||
========================================================== */ | |||
(function() { | |||
var specialPage = mw.config.get('wgCanonicalSpecialPageName'); | |||
if (specialPage !== 'Userlogin' && specialPage !== 'CreateAccount') return; | |||
// 1. CSS untuk posisi ikon mata agar pas di dalam kotak | |||
var style = document.createElement('style'); | |||
style.innerHTML = ` | |||
.mip-password-wrapper { | |||
position: relative; | |||
display: block; | |||
width: 100%; | |||
} | |||
.mip-eye-icon { | |||
position: absolute; | |||
right: 10px; | |||
top: 50%; | |||
transform: translateY(-50%); | |||
cursor: pointer; | |||
z-index: 10; | |||
user-select: none; | |||
font-size: 18px; | |||
color: #777; | |||
padding: 5px; | |||
} | |||
/* Penyesuaian agar teks tidak tertutup ikon */ | |||
input[type="password"], input[type="text"].mip-password-input { | |||
padding-right: 40px !important; | |||
} | |||
`; | |||
document.head.appendChild(style); | |||
// 2. Fungsi untuk membungkus input dan pasang ikon | |||
$(document).ready(function() { | |||
// Cari semua input password (wpPassword, wpRetype, dll) | |||
$('input[type="password"]').each(function() { | |||
var $input = $(this); | |||
// Bungkus input dengan div relatif | |||
$input.wrap('<div class="mip-password-wrapper"></div>'); | |||
// Tambahkan ikon mata (menggunakan karakter Unicode) | |||
var $eye = $('<span class="mip-eye-icon">👁️</span>'); | |||
$input.after($eye); | |||
// Logika klik ikon | |||
$eye.on('click', function() { | |||
if ($input.attr('type') === 'password') { | |||
$input.attr('type', 'text').addClass('mip-password-input'); | |||
$(this).text('🔒').css('color', '#3498db'); // Ganti jadi gembok saat terlihat | |||
} else { | |||
$input.attr('type', 'password').removeClass('mip-password-input'); | |||
$(this).text('👁️').css('color', '#777'); // Balik ke mata saat tersembunyi | |||
} | |||
}); | |||
}); | |||
}); | |||
})(); | |||