From 5a92b1798197bd3bacfd23aa95dd3dd4168d94c2 Mon Sep 17 00:00:00 2001 From: Andrew Nacin Date: Wed, 23 Oct 2013 19:51:09 +0000 Subject: [PATCH] About page: Cache our zxcvbn calls and limit the variation of the animation. Diff is mostly whitespace. props jorbin, azaozz. fixes #25603. Built from https://develop.svn.wordpress.org/trunk@25884 git-svn-id: http://core.svn.wordpress.org/trunk@25796 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-admin/js/about.js | 128 ++++++++++++++++++++++----------------- wp-admin/js/about.min.js | 2 +- 2 files changed, 72 insertions(+), 58 deletions(-) diff --git a/wp-admin/js/about.js b/wp-admin/js/about.js index 5864a5e376..3aaa66d7ae 100644 --- a/wp-admin/js/about.js +++ b/wp-admin/js/about.js @@ -1,66 +1,80 @@ (function($){ - var password = 'Gosh, WordPress is grand.', - $input = $('#pass'), - shouldAnimate = true, - indicatorString = $('#pass-strength-result').text(); + var password = 'Gosh, WordPress is grand.', + $input = $('#pass'), + shouldAnimate = true, + timesForAnimation = [280, 300, 305, 310, 315, 325, 330, 345, 360, 370, 380, 400, 450, 500, 600], + resultsCache = {}, + indicatorString = $('#pass-strength-result').text(); - function updateResult(){ - var strength = wp.passwordStrength.meter($input.val(), [], $input.val()); + function updateResult(){ + var strength; - $('#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 resetMeter(){ - $input.val(''); - $('#pass-strength-result').text(indicatorString); - $('#pass-strength-result').removeClass('short bad good strong'); - } + if ( typeof( resultsCache[ $input.val() ]) === 'undefined') { + strength = wp.passwordStrength.meter($input.val(), [], $input.val()); + resultsCache[ $input.val() ] = strength; + } else { + strength = resultsCache[ $input.val() ]; + } - function animate(){ - if (shouldAnimate === false) - return; - if ($input.val().length < password.length){ - $input.val( password.substr(0, $input.val().length + 1) ); - updateResult(); - } else { - resetMeter(); - } - // 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); - } + $('#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 resetMeter(){ + $input.val(''); + $('#pass-strength-result').text(indicatorString); + $('#pass-strength-result').removeClass('short bad good strong'); + } - // Turn off the animation on focus - $input.on('focus', function(){ - shouldAnimate = false; - resetMeter(); - }); + function animate(){ + if (shouldAnimate === false) + return; + if ($input.val().length < password.length){ + $input.val( password.substr(0, $input.val().length + 1) ); + updateResult(); - // Act like a normal password strength meter - $input.on('keyup', function(){ - updateResult(); - }); + // Look like real typing by changing the speed new letters are added each time + setTimeout( animate, ( timesForAnimation[ Math.floor( Math.random() * timesForAnimation.length ) ] ) ); + } else { + resetMeter(); - // Start the animation - begin(); + // When we reset, let's wait a bit longer than normal to start again + setTimeout(animate, 700); + } + + } + + 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; + resetMeter(); + }); + + // Act like a normal password strength meter + $input.on('keyup', function(){ + updateResult(); + }); + + // Start the animation + begin(); })(jQuery); diff --git a/wp-admin/js/about.min.js b/wp-admin/js/about.min.js index f7a895af7e..4720562f2c 100644 --- a/wp-admin/js/about.min.js +++ b/wp-admin/js/about.min.js @@ -1 +1 @@ -!function(a){function b(){var b=wp.passwordStrength.meter(g.val(),[],g.val());switch(a("#pass-strength-result").removeClass("short bad good strong"),b){case 2:a("#pass-strength-result").addClass("bad").html(pwsL10n.bad);break;case 3:a("#pass-strength-result").addClass("good").html(pwsL10n.good);break;case 4:a("#pass-strength-result").addClass("strong").html(pwsL10n.strong);break;default:a("#pass-strength-result").addClass("short").html(pwsL10n["short"])}}function c(){g.val(""),a("#pass-strength-result").text(i),a("#pass-strength-result").removeClass("short bad good strong")}function d(){h!==!1&&(g.val().length