WordPress.org

Make WordPress Core

Changeset 25887


Ignore:
Timestamp:
10/23/2013 07:54:30 PM (6 years ago)
Author:
nacin
Message:

About page: Cache our zxcvbn calls and limit the variation of the animation.

Merges [25884] to the 3.7 branch.

Diff is mostly whitespace.

props jorbin, azaozz.
fixes #25603.

Location:
branches/3.7
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • branches/3.7

  • branches/3.7/src

  • branches/3.7/src/wp-admin/js/about.js

    r25881 r25887  
    11(function($){
    2     var password = 'Gosh, WordPress is grand.',
    3         $input = $('#pass'),
    4         shouldAnimate = true,
    5         indicatorString = $('#pass-strength-result').text();
     2    var password = 'Gosh, WordPress is grand.',
     3        $input = $('#pass'),
     4        shouldAnimate = true,
     5        timesForAnimation = [280, 300, 305, 310, 315, 325, 330, 345, 360, 370, 380, 400, 450, 500, 600],
     6        resultsCache = {},
     7        indicatorString = $('#pass-strength-result').text();
    68
    7     function updateResult(){
    8         var strength = wp.passwordStrength.meter($input.val(), [], $input.val());
     9    function updateResult(){
     10        var strength;
    911
    10         $('#pass-strength-result').removeClass('short bad good strong');
    11         switch ( strength ) {
    12             case 2:
    13                 $('#pass-strength-result').addClass('bad').html( pwsL10n['bad'] );
    14                 break;
    15             case 3:
    16                 $('#pass-strength-result').addClass('good').html( pwsL10n['good'] );
    17                 break;
    18             case 4:
    19                 $('#pass-strength-result').addClass('strong').html( pwsL10n['strong'] );
    20                 break;
    21             default:
    22                 $('#pass-strength-result').addClass('short').html( pwsL10n['short'] );
    23         }
    24     }
    25     function resetMeter(){
    26         $input.val('');
    27         $('#pass-strength-result').text(indicatorString);
    28         $('#pass-strength-result').removeClass('short bad good strong');
    29     }
     12        if ( typeof( resultsCache[ $input.val() ]) === 'undefined') {
     13            strength = wp.passwordStrength.meter($input.val(), [], $input.val());
     14            resultsCache[ $input.val() ] = strength;
     15        } else {
     16            strength = resultsCache[ $input.val() ];
     17        }
    3018
    31     function animate(){
    32         if (shouldAnimate === false)
    33             return;
    34         if ($input.val().length < password.length){
    35             $input.val( password.substr(0, $input.val().length + 1) );
    36             updateResult();
    37         } else {
    38             resetMeter();
    39         }
    40         // Look like real typing by changing the speed new letters are added each time
    41         setTimeout(animate, 220 + Math.floor(Math.random() * ( 800 - 220)) );
    42     }
    43     //
    44     function begin(){
    45         // we async load zxcvbn, so we need to make sure it's loaded before starting
    46         if (typeof(zxcvbn) !== 'undefined')
    47             animate();
    48         else
    49             setTimeout(begin,800);
    50     }
     19        $('#pass-strength-result').removeClass('short bad good strong');
     20        switch ( strength ) {
     21            case 2:
     22                $('#pass-strength-result').addClass('bad').html( pwsL10n['bad'] );
     23                break;
     24            case 3:
     25                $('#pass-strength-result').addClass('good').html( pwsL10n['good'] );
     26                break;
     27            case 4:
     28                $('#pass-strength-result').addClass('strong').html( pwsL10n['strong'] );
     29                break;
     30            default:
     31                $('#pass-strength-result').addClass('short').html( pwsL10n['short'] );
     32        }
     33    }
     34    function resetMeter(){
     35        $input.val('');
     36        $('#pass-strength-result').text(indicatorString);
     37        $('#pass-strength-result').removeClass('short bad good strong');
     38    }
    5139
    52     // Turn off the animation on focus
    53     $input.on('focus', function(){
    54         shouldAnimate = false;
    55         resetMeter();
    56     });
     40    function animate(){
     41        if (shouldAnimate === false)
     42            return;
     43        if ($input.val().length < password.length){
     44            $input.val( password.substr(0, $input.val().length + 1) );
     45            updateResult();
    5746
    58     // Act like a normal password strength meter
    59     $input.on('keyup', function(){
    60         updateResult();
    61     });
     47            // Look like real typing by changing the speed new letters are added each time
     48            setTimeout( animate, ( timesForAnimation[ Math.floor( Math.random() * timesForAnimation.length ) ] ) );
     49        } else {
     50            resetMeter();
    6251
    63     // Start the animation
    64     begin();
     52            // When we reset, let's wait a bit longer than normal to start again
     53            setTimeout(animate, 700);
     54        }
     55
     56    }
     57
     58    function begin(){
     59        // we async load zxcvbn, so we need to make sure it's loaded before starting
     60        if (typeof(zxcvbn) !== 'undefined')
     61            animate();
     62        else
     63            setTimeout(begin,800);
     64    }
     65
     66    // Turn off the animation on focus
     67    $input.on('focus', function(){
     68        shouldAnimate = false;
     69        resetMeter();
     70    });
     71
     72    // Act like a normal password strength meter
     73    $input.on('keyup', function(){
     74        updateResult();
     75    });
     76
     77    // Start the animation
     78    begin();
    6579
    6680})(jQuery);
Note: See TracChangeset for help on using the changeset viewer.