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
9jQuery( 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} );
483