Your IP : 216.73.216.138
/* global WPHB_Admin */
/* global wphbHistoricFieldData */
/* global google */
import Fetcher from '../utils/fetcher';
import PerfScanner from '../scanners/PerfScanner';
( function( $ ) {
'use strict';
WPHB_Admin.performance = {
module: 'performance',
iteration: 0,
progress: 0,
pressedKeys: [],
key_timer: false,
init() {
const self = this;
this.wphbSetInterval();
// Init scanner.
this.scanner = new PerfScanner( 100, 0 );
// Run performance test from empty report meta box.
$( '#run-performance-test' ).on( 'click', function( e ) {
e.preventDefault();
self.startPerformanceScan();
} );
// If a hash is present in URL, let's open the rule extra content
const hash = window.location.hash;
if ( hash ) {
const row = $( hash );
if ( row.length && ! row.hasClass( 'sui-box' ) ) {
row.find( '.sui-accordion-open-indicator' ).trigger(
'click'
);
$( 'html, body' ).animate(
{
scrollTop: row.offset().top,
},
1000
);
}
}
// Save performance test settings
$( 'body' ).on( 'submit', '.settings-frm', function( e ) {
e.preventDefault();
const formData = $( this ).serialize();
Fetcher.performance
.savePerformanceTestSettings( formData )
.then( () => WPHB_Admin.notices.show() );
return false;
} );
/**
* Init Google charts on Historic Field Data meta box page.
*
* @since 2.0.0
*/
if (
'undefined' !== typeof google &&
'undefined' !== typeof wphbHistoricFieldData
) {
google.charts.load( 'current', {
packages: [ 'corechart', 'bar' ],
} );
google.charts.setOnLoadCallback( () => {
this.drawChart(
wphbHistoricFieldData.fcp,
'first_contentful_paint'
);
$( window ).resize( () =>
this.drawChart(
wphbHistoricFieldData.fcp,
'first_contentful_paint'
)
);
} );
google.charts.setOnLoadCallback( () => {
this.drawChart(
wphbHistoricFieldData.inp,
'interaction_to_next_paint'
);
$( window ).resize( () =>
this.drawChart(
wphbHistoricFieldData.inp,
'interaction_to_next_paint'
)
);
} );
}
/**
* Parse subsite settings change.
*
* @since 2.0.0
*/
$( 'input[name=subsite-tests]' ).on( 'change', function( e ) {
const otherClass =
'subsite_tests-false' === e.target.id
? 'subsite_tests-true'
: 'subsite_tests-false';
e.target.parentNode.classList.add( 'active' );
document
.getElementById( otherClass )
.parentNode.classList.remove( 'active' );
} );
/**
* Parse report type setting change.
*
* @since 2.0.0
*/
$( 'input[name=report-type]' ).on( 'change', function( e ) {
const divs = document.querySelectorAll(
'input[name=report-type]'
);
for ( let i = 0; i < divs.length; ++i ) {
divs[ i ].parentNode.classList.remove( 'active' );
}
e.target.parentNode.classList.add( 'active' );
} );
/**
* Performance doughnut chart hover states.
*
* @since 3.0.0
*/
$( 'g.metric' ).on( {
mouseenter() {
$( '.wphb-gauge__wrapper' ).addClass( 'state--highlight' );
$( this ).addClass( 'metric--highlight' );
},
mouseleave() {
$( '.wphb-gauge__wrapper' ).removeClass(
'state--highlight'
);
$( this ).removeClass( 'metric--highlight' );
},
} );
/**
* Filter action button on audits page
*
* @since 3.1.0
*/
$( '#wphb-audits-filter-button' ).on( 'click', function( e ) {
e.preventDefault();
$( '.wphb-audits-filter' ).toggle( 'slow' );
$( this ).toggleClass( 'active' ).blur();
} );
/**
* Process filter selection.
*
* @since 3.1.0
*/
$( 'input[name="audits_filter"]' ).on( 'change', function() {
const audits = $( '.sui-accordion-item' );
for ( const [ id, audit ] of Object.entries( audits ) ) {
if ( 'object' !== typeof audit || 'prevObject' === id ) {
continue;
}
audit.classList.remove( 'sui-hidden' ); // Reset visibility.
if (
'all' !== this.value &&
! audit.dataset.metrics.includes( this.value )
) {
audit.classList.add( 'sui-hidden' );
}
}
} );
return this;
},
/**
* Start performance scan.
*/
startPerformanceScan() {
window.SUI.openModal(
'run-performance-test-modal',
'wpbody-content'
);
$( this ).attr( 'disabled', true );
this.scanner.start();
},
wphbSetInterval() {
const self = this;
this.key_timer = window.setInterval( function() {
// Clean pressedKeys every 1sec
self.pressedKeys = [];
}, 1000 );
},
/**
* Draw chart on Historic Field Data meta box.
*
* @since 2.0.0
*
* @param {Object} strings
* @param {string} chartID
*/
drawChart( strings, chartID ) {
const data = google.visualization.arrayToDataTable( [
[
'Type',
'Fast',
{ type: 'string', role: 'tooltip', p: { html: true } },
'Average',
{ type: 'string', role: 'tooltip', p: { html: true } },
'Slow',
{ type: 'string', role: 'tooltip', p: { html: true } },
],
[
'',
strings.fast,
this.generateTooltip( 'fast', strings.fast_desc ),
strings.average,
this.generateTooltip( 'average', strings.average_desc ),
strings.slow,
this.generateTooltip( 'slow', strings.slow_desc ),
],
] );
const options = {
tooltip: { isHtml: true },
colors: [ '#1ABC9C', '#FECF2F', '#FF6D6D' ],
chartArea: { width: '100%' },
hAxis: {
baselineColor: '#fff',
gridlines: { color: '#fff', count: 0 },
textPosition: 'none',
},
isStacked: 'percent',
height: 80,
legend: 'none',
};
const chart = new google.visualization.BarChart(
document.getElementById( chartID )
);
chart.draw( data, options );
},
/**
* Generate custom tooltip.
*
* @since 2.0.0
*
* @param {string} type Metrics type. Accepts: fast, average, slow.
* @param {string} value Tooltip text.
*
* @return {string} Div element.
*/
generateTooltip( type, value ) {
return (
'<div class="wphb-field-data-tooltip wphb-tooltip-' +
type +
'">' +
value +
'</div>'
);
},
};
} )( jQuery );