WordPress/wp-admin/js/about.js
Andrew Nacin b13c7791a9 Awesome about page design for WordPress 3.7.
The page includes a giant password meter that serves as both an animated example and a working demo. How cool is that?

props jorbin, melchoyce.
see #25603.

Built from https://develop.svn.wordpress.org/trunk@25839


git-svn-id: http://core.svn.wordpress.org/trunk@25839 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-10-24 22:55:12 +00:00

64 lines
2.1 KiB
JavaScript

(function($){
var password = 'Gosh, WordPress is grand.',
$input = $('#pass'),
shouldAnimate = true,
indicatorString = $('#pass-strength-result').text();
function updateResult(){
var strength = wp.passwordStrength.meter($input.val(), [], $input.val());
$('#pass-strength-result').removeClass('short bad good strong');
switch ( strength ) {
case 2:
$('#pass-strength-result').addClass('bad').html( pwsL10n['bad'] );
break;
case 3:
$('#pass-strength-result').addClass('good').html( pwsL10n['good'] );
break;
case 4:
$('#pass-strength-result').addClass('strong').html( pwsL10n['strong'] );
break;
default:
$('#pass-strength-result').addClass('short').html( pwsL10n['short'] );
}
}
function animate(){
if (shouldAnimate === false)
return;
if ($input.val().length < password.length){
$input.val( password.substr(0, $input.val().length + 1) );
updateResult();
} else {
$input.val('');
$('#pass-strength-result').removeClass('short bad good strong');
}
// Look like real typing by changing the speed new letters are added each time
setTimeout(animate, 220 + Math.floor(Math.random() * ( 800 - 220)) );
}
//
function begin(){
// we async load zxcvbn, so we need to make sure it's loaded before starting
if (typeof(zxcvbn) !== 'undefined')
animate();
else
setTimeout(begin,800);
}
// Turn off the animation on focus
$input.on('focus', function(){
shouldAnimate = false;
$('#pass-strength-result').removeClass('short bad good strong');
$('#pass-strength-result').text(indicatorString);
$input.val('')
});
// Act like a normal password strength meter
$input.on('keyup', function(){
updateResult();
});
// Start the animation
begin();
})(jQuery);