[Summary view] [Print] [Text view]

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