[ Index ]

PHP Cross Reference of WordPress

title

Body

[close]

/wp-admin/js/ -> site-health.js (source)

   1  /**
   2   * Interactions used by the Site Health modules in WordPress.
   3   *
   4   * @output wp-admin/js/site-health.js
   5   */
   6  
   7  /* global ajaxurl, ClipboardJS, SiteHealth, wp */
   8  
   9  jQuery( document ).ready( function( $ ) {
  10  
  11      var __ = wp.i18n.__,
  12          _n = wp.i18n._n,
  13          sprintf = wp.i18n.sprintf,
  14          clipboard = new ClipboardJS( '.site-health-copy-buttons .copy-button' ),
  15          isDebugTab = $( '.health-check-body.health-check-debug-tab' ).length,
  16          pathsSizesSection = $( '#health-check-accordion-block-wp-paths-sizes' ),
  17          successTimeout;
  18  
  19      // Debug information copy section.
  20      clipboard.on( 'success', function( e ) {
  21          var triggerElement = $( e.trigger ),
  22              successElement = $( '.success', triggerElement.closest( 'div' ) );
  23  
  24          // Clear the selection and move focus back to the trigger.
  25          e.clearSelection();
  26          // Handle ClipboardJS focus bug, see https://github.com/zenorocha/clipboard.js/issues/680
  27          triggerElement.focus();
  28  
  29          // Show success visual feedback.
  30          clearTimeout( successTimeout );
  31          successElement.removeClass( 'hidden' );
  32  
  33          // Hide success visual feedback after 3 seconds since last success.
  34          successTimeout = setTimeout( function() {
  35              successElement.addClass( 'hidden' );
  36              // Remove the visually hidden textarea so that it isn't perceived by assistive technologies.
  37              if ( clipboard.clipboardAction.fakeElem && clipboard.clipboardAction.removeFake ) {
  38                  clipboard.clipboardAction.removeFake();
  39              }
  40          }, 3000 );
  41  
  42          // Handle success audible feedback.
  43          wp.a11y.speak( __( 'Site information has been copied to your clipboard.' ) );
  44      } );
  45  
  46      // Accordion handling in various areas.
  47      $( '.health-check-accordion' ).on( 'click', '.health-check-accordion-trigger', function() {
  48          var isExpanded = ( 'true' === $( this ).attr( 'aria-expanded' ) );
  49  
  50          if ( isExpanded ) {
  51              $( this ).attr( 'aria-expanded', 'false' );
  52              $( '#' + $( this ).attr( 'aria-controls' ) ).attr( 'hidden', true );
  53          } else {
  54              $( this ).attr( 'aria-expanded', 'true' );
  55              $( '#' + $( this ).attr( 'aria-controls' ) ).attr( 'hidden', false );
  56          }
  57      } );
  58  
  59      // Site Health test handling.
  60  
  61      $( '.site-health-view-passed' ).on( 'click', function() {
  62          var goodIssuesWrapper = $( '#health-check-issues-good' );
  63  
  64          goodIssuesWrapper.toggleClass( 'hidden' );
  65          $( this ).attr( 'aria-expanded', ! goodIssuesWrapper.hasClass( 'hidden' ) );
  66      } );
  67  
  68      /**
  69       * Validates the Site Health test result format.
  70       *
  71       * @since 5.6.0
  72       *
  73       * @param {Object} issue
  74       *
  75       * @return {boolean}
  76       */
  77  	function validateIssueData( issue ) {
  78          // Expected minimum format of a valid SiteHealth test response.
  79          var minimumExpected = {
  80                  test: 'string',
  81                  label: 'string',
  82                  description: 'string'
  83              },
  84              passed = true,
  85              key, value, subKey, subValue;
  86  
  87          // If the issue passed is not an object, return a `false` state early.
  88          if ( 'object' !== typeof( issue ) ) {
  89              return false;
  90          }
  91  
  92          // Loop over expected data and match the data types.
  93          for ( key in minimumExpected ) {
  94              value = minimumExpected[ key ];
  95  
  96              if ( 'object' === typeof( value ) ) {
  97                  for ( subKey in value ) {
  98                      subValue = value[ subKey ];
  99  
 100                      if ( 'undefined' === typeof( issue[ key ] ) ||
 101                          'undefined' === typeof( issue[ key ][ subKey ] ) ||
 102                          subValue !== typeof( issue[ key ][ subKey ] )
 103                      ) {
 104                          passed = false;
 105                      }
 106                  }
 107              } else {
 108                  if ( 'undefined' === typeof( issue[ key ] ) ||
 109                      value !== typeof( issue[ key ] )
 110                  ) {
 111                      passed = false;
 112                  }
 113              }
 114          }
 115  
 116          return passed;
 117      }
 118  
 119      /**
 120       * Appends a new issue to the issue list.
 121       *
 122       * @since 5.2.0
 123       *
 124       * @param {Object} issue The issue data.
 125       */
 126  	function appendIssue( issue ) {
 127          var template = wp.template( 'health-check-issue' ),
 128              issueWrapper = $( '#health-check-issues-' + issue.status ),
 129              heading,
 130              count;
 131  
 132          /*
 133           * Validate the issue data format before using it.
 134           * If the output is invalid, discard it.
 135           */
 136          if ( ! validateIssueData( issue ) ) {
 137              return false;
 138          }
 139  
 140          SiteHealth.site_status.issues[ issue.status ]++;
 141  
 142          count = SiteHealth.site_status.issues[ issue.status ];
 143  
 144          // If no test name is supplied, append a placeholder for markup references.
 145          if ( typeof issue.test === 'undefined' ) {
 146              issue.test = issue.status + count;
 147          }
 148  
 149          if ( 'critical' === issue.status ) {
 150              heading = sprintf(
 151                  _n( '%s critical issue', '%s critical issues', count ),
 152                  '<span class="issue-count">' + count + '</span>'
 153              );
 154          } else if ( 'recommended' === issue.status ) {
 155              heading = sprintf(
 156                  _n( '%s recommended improvement', '%s recommended improvements', count ),
 157                  '<span class="issue-count">' + count + '</span>'
 158              );
 159          } else if ( 'good' === issue.status ) {
 160              heading = sprintf(
 161                  _n( '%s item with no issues detected', '%s items with no issues detected', count ),
 162                  '<span class="issue-count">' + count + '</span>'
 163              );
 164          }
 165  
 166          if ( heading ) {
 167              $( '.site-health-issue-count-title', issueWrapper ).html( heading );
 168          }
 169  
 170          $( '.issues', '#health-check-issues-' + issue.status ).append( template( issue ) );
 171      }
 172  
 173      /**
 174       * Updates site health status indicator as asynchronous tests are run and returned.
 175       *
 176       * @since 5.2.0
 177       */
 178  	function recalculateProgression() {
 179          var r, c, pct;
 180          var $progress = $( '.site-health-progress' );
 181          var $wrapper = $progress.closest( '.site-health-progress-wrapper' );
 182          var $progressLabel = $( '.site-health-progress-label', $wrapper );
 183          var $circle = $( '.site-health-progress svg #bar' );
 184          var totalTests = parseInt( SiteHealth.site_status.issues.good, 0 ) +
 185              parseInt( SiteHealth.site_status.issues.recommended, 0 ) +
 186              ( parseInt( SiteHealth.site_status.issues.critical, 0 ) * 1.5 );
 187          var failedTests = ( parseInt( SiteHealth.site_status.issues.recommended, 0 ) * 0.5 ) +
 188              ( parseInt( SiteHealth.site_status.issues.critical, 0 ) * 1.5 );
 189          var val = 100 - Math.ceil( ( failedTests / totalTests ) * 100 );
 190  
 191          if ( 0 === totalTests ) {
 192              $progress.addClass( 'hidden' );
 193              return;
 194          }
 195  
 196          $wrapper.removeClass( 'loading' );
 197  
 198          r = $circle.attr( 'r' );
 199          c = Math.PI * ( r * 2 );
 200  
 201          if ( 0 > val ) {
 202              val = 0;
 203          }
 204          if ( 100 < val ) {
 205              val = 100;
 206          }
 207  
 208          pct = ( ( 100 - val ) / 100 ) * c;
 209  
 210          $circle.css( { strokeDashoffset: pct } );
 211  
 212          if ( 1 > parseInt( SiteHealth.site_status.issues.critical, 0 ) ) {
 213              $( '#health-check-issues-critical' ).addClass( 'hidden' );
 214          }
 215  
 216          if ( 1 > parseInt( SiteHealth.site_status.issues.recommended, 0 ) ) {
 217              $( '#health-check-issues-recommended' ).addClass( 'hidden' );
 218          }
 219  
 220          if ( 80 <= val && 0 === parseInt( SiteHealth.site_status.issues.critical, 0 ) ) {
 221              $wrapper.addClass( 'green' ).removeClass( 'orange' );
 222  
 223              $progressLabel.text( __( 'Good' ) );
 224              wp.a11y.speak( __( 'All site health tests have finished running. Your site is looking good, and the results are now available on the page.' ) );
 225          } else {
 226              $wrapper.addClass( 'orange' ).removeClass( 'green' );
 227  
 228              $progressLabel.text( __( 'Should be improved' ) );
 229              wp.a11y.speak( __( 'All site health tests have finished running. There are items that should be addressed, and the results are now available on the page.' ) );
 230          }
 231  
 232          if ( ! isDebugTab ) {
 233              $.post(
 234                  ajaxurl,
 235                  {
 236                      'action': 'health-check-site-status-result',
 237                      '_wpnonce': SiteHealth.nonce.site_status_result,
 238                      'counts': SiteHealth.site_status.issues
 239                  }
 240              );
 241  
 242              if ( 100 === val ) {
 243                  $( '.site-status-all-clear' ).removeClass( 'hide' );
 244                  $( '.site-status-has-issues' ).addClass( 'hide' );
 245              }
 246          }
 247      }
 248  
 249      /**
 250       * Queues the next asynchronous test when we're ready to run it.
 251       *
 252       * @since 5.2.0
 253       */
 254  	function maybeRunNextAsyncTest() {
 255          var doCalculation = true;
 256  
 257          if ( 1 <= SiteHealth.site_status.async.length ) {
 258              $.each( SiteHealth.site_status.async, function() {
 259                  var data = {
 260                      'action': 'health-check-' + this.test.replace( '_', '-' ),
 261                      '_wpnonce': SiteHealth.nonce.site_status
 262                  };
 263  
 264                  if ( this.completed ) {
 265                      return true;
 266                  }
 267  
 268                  doCalculation = false;
 269  
 270                  this.completed = true;
 271  
 272                  if ( 'undefined' !== typeof( this.has_rest ) && this.has_rest ) {
 273                      wp.apiRequest( {
 274                          url: this.test,
 275                          headers: this.headers
 276                      } )
 277                          .done( function( response ) {
 278                              /** This filter is documented in wp-admin/includes/class-wp-site-health.php */
 279                              appendIssue( wp.hooks.applyFilters( 'site_status_test_result', response ) );
 280                          } )
 281                          .fail( function( response ) {
 282                              var description;
 283  
 284                              if ( 'undefined' !== typeof( response.responseJSON ) && 'undefined' !== typeof( response.responseJSON.message ) ) {
 285                                  description = response.responseJSON.message;
 286                              } else {
 287                                  description = __( 'No details available' );
 288                              }
 289  
 290                              addFailedSiteHealthCheckNotice( this.url, description );
 291                          } )
 292                          .always( function() {
 293                              maybeRunNextAsyncTest();
 294                          } );
 295                  } else {
 296                      $.post(
 297                          ajaxurl,
 298                          data
 299                      ).done( function( response ) {
 300                          /** This filter is documented in wp-admin/includes/class-wp-site-health.php */
 301                          appendIssue( wp.hooks.applyFilters( 'site_status_test_result', response.data ) );
 302                      } ).fail( function( response ) {
 303                          var description;
 304  
 305                          if ( 'undefined' !== typeof( response.responseJSON ) && 'undefined' !== typeof( response.responseJSON.message ) ) {
 306                              description = response.responseJSON.message;
 307                          } else {
 308                              description = __( 'No details available' );
 309                          }
 310  
 311                          addFailedSiteHealthCheckNotice( this.url, description );
 312                      } ).always( function() {
 313                          maybeRunNextAsyncTest();
 314                      } );
 315                  }
 316  
 317                  return false;
 318              } );
 319          }
 320  
 321          if ( doCalculation ) {
 322              recalculateProgression();
 323          }
 324      }
 325  
 326      /**
 327       * Add the details of a failed asynchronous test to the list of test results.
 328       *
 329       * @since 5.6.0
 330       */
 331  	function addFailedSiteHealthCheckNotice( url, description ) {
 332          var issue;
 333  
 334          issue = {
 335              'status': 'recommended',
 336              'label': __( 'A test is unavailable' ),
 337              'badge': {
 338                  'color': 'red',
 339                  'label': __( 'Unavailable' )
 340              },
 341              'description': '<p>' + url + '</p><p>' + description + '</p>',
 342              'actions': ''
 343          };
 344  
 345          /** This filter is documented in wp-admin/includes/class-wp-site-health.php */
 346          appendIssue( wp.hooks.applyFilters( 'site_status_test_result', issue ) );
 347      }
 348  
 349      if ( 'undefined' !== typeof SiteHealth && ! isDebugTab ) {
 350          if ( 0 === SiteHealth.site_status.direct.length && 0 === SiteHealth.site_status.async.length ) {
 351              recalculateProgression();
 352          } else {
 353              SiteHealth.site_status.issues = {
 354                  'good': 0,
 355                  'recommended': 0,
 356                  'critical': 0
 357              };
 358          }
 359  
 360          if ( 0 < SiteHealth.site_status.direct.length ) {
 361              $.each( SiteHealth.site_status.direct, function() {
 362                  appendIssue( this );
 363              } );
 364          }
 365  
 366          if ( 0 < SiteHealth.site_status.async.length ) {
 367              maybeRunNextAsyncTest();
 368          } else {
 369              recalculateProgression();
 370          }
 371      }
 372  
 373  	function getDirectorySizes() {
 374          var timestamp = ( new Date().getTime() );
 375  
 376          // After 3 seconds announce that we're still waiting for directory sizes.
 377          var timeout = window.setTimeout( function() {
 378              wp.a11y.speak( __( 'Please wait...' ) );
 379          }, 3000 );
 380  
 381          wp.apiRequest( {
 382              path: '/wp-site-health/v1/directory-sizes'
 383          } ).done( function( response ) {
 384              updateDirSizes( response || {} );
 385          } ).always( function() {
 386              var delay = ( new Date().getTime() ) - timestamp;
 387  
 388              $( '.health-check-wp-paths-sizes.spinner' ).css( 'visibility', 'hidden' );
 389              recalculateProgression();
 390  
 391              if ( delay > 3000 ) {
 392                  /*
 393                   * We have announced that we're waiting.
 394                   * Announce that we're ready after giving at least 3 seconds
 395                   * for the first announcement to be read out, or the two may collide.
 396                   */
 397                  if ( delay > 6000 ) {
 398                      delay = 0;
 399                  } else {
 400                      delay = 6500 - delay;
 401                  }
 402  
 403                  window.setTimeout( function() {
 404                      wp.a11y.speak( __( 'All site health tests have finished running.' ) );
 405                  }, delay );
 406              } else {
 407                  // Cancel the announcement.
 408                  window.clearTimeout( timeout );
 409              }
 410  
 411              $( document ).trigger( 'site-health-info-dirsizes-done' );
 412          } );
 413      }
 414  
 415  	function updateDirSizes( data ) {
 416          var copyButton = $( 'button.button.copy-button' );
 417          var clipboardText = copyButton.attr( 'data-clipboard-text' );
 418  
 419          $.each( data, function( name, value ) {
 420              var text = value.debug || value.size;
 421  
 422              if ( typeof text !== 'undefined' ) {
 423                  clipboardText = clipboardText.replace( name + ': loading...', name + ': ' + text );
 424              }
 425          } );
 426  
 427          copyButton.attr( 'data-clipboard-text', clipboardText );
 428  
 429          pathsSizesSection.find( 'td[class]' ).each( function( i, element ) {
 430              var td = $( element );
 431              var name = td.attr( 'class' );
 432  
 433              if ( data.hasOwnProperty( name ) && data[ name ].size ) {
 434                  td.text( data[ name ].size );
 435              }
 436          } );
 437      }
 438  
 439      if ( isDebugTab ) {
 440          if ( pathsSizesSection.length ) {
 441              getDirectorySizes();
 442          } else {
 443              recalculateProgression();
 444          }
 445      }
 446  } );


Generated: Sun Nov 29 01:00:04 2020 Cross-referenced by PHPXref 0.7.1