You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
313 lines
6.7 KiB
JavaScript
313 lines
6.7 KiB
JavaScript
7 months ago
|
/* global wp_mail_smtp_dashboard_widget, ajaxurl, moment, WPMailSMTPChart */
|
||
|
/**
|
||
|
* WP Mail SMTP Dashboard Widget function.
|
||
|
*
|
||
|
* @since 2.9.0
|
||
|
*/
|
||
|
|
||
|
'use strict';
|
||
|
|
||
|
var WPMailSMTPDashboardWidget = window.WPMailSMTPDashboardWidget || ( function( document, window, $ ) {
|
||
|
|
||
|
/**
|
||
|
* Elements reference.
|
||
|
*
|
||
|
* @since 2.9.0
|
||
|
*
|
||
|
* @type {object}
|
||
|
*/
|
||
|
var el = {
|
||
|
$canvas : $( '#wp-mail-smtp-dash-widget-chart' ),
|
||
|
$settingsBtn : $( '#wp-mail-smtp-dash-widget-settings-button' ),
|
||
|
$dismissBtn : $( '.wp-mail-smtp-dash-widget-dismiss-chart-upgrade' ),
|
||
|
$summaryReportEmailBlock : $( '.wp-mail-smtp-dash-widget-summary-report-email-block' ),
|
||
|
$summaryReportEmailDismissBtn : $( '.wp-mail-smtp-dash-widget-summary-report-email-dismiss' ),
|
||
|
$summaryReportEmailEnableInput: $( '#wp-mail-smtp-dash-widget-summary-report-email-enable' ),
|
||
|
$emailAlertsDismissBtn : $( '#wp-mail-smtp-dash-widget-dismiss-email-alert-block' ),
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* Chart.js functions and properties.
|
||
|
*
|
||
|
* @since 2.9.0
|
||
|
*
|
||
|
* @type {object}
|
||
|
*/
|
||
|
var chart = {
|
||
|
|
||
|
/**
|
||
|
* Chart.js instance.
|
||
|
*
|
||
|
* @since 2.9.0
|
||
|
*/
|
||
|
instance: null,
|
||
|
|
||
|
/**
|
||
|
* Chart.js settings.
|
||
|
*
|
||
|
* @since 2.9.0
|
||
|
*/
|
||
|
settings: {
|
||
|
type: 'line',
|
||
|
data: {
|
||
|
labels: [],
|
||
|
datasets: [
|
||
|
{
|
||
|
label: '',
|
||
|
data: [],
|
||
|
backgroundColor: 'rgba(34, 113, 177, 0.15)',
|
||
|
borderColor: 'rgba(34, 113, 177, 1)',
|
||
|
borderWidth: 2,
|
||
|
pointRadius: 4,
|
||
|
pointBorderWidth: 1,
|
||
|
pointBackgroundColor: 'rgba(255, 255, 255, 1)',
|
||
|
}
|
||
|
],
|
||
|
},
|
||
|
options: {
|
||
|
maintainAspectRatio: false,
|
||
|
scales: {
|
||
|
xAxes: [ {
|
||
|
type: 'time',
|
||
|
time: {
|
||
|
unit: 'day',
|
||
|
tooltipFormat: 'MMM D',
|
||
|
},
|
||
|
distribution: 'series',
|
||
|
ticks: {
|
||
|
beginAtZero: true,
|
||
|
source: 'labels',
|
||
|
padding: 10,
|
||
|
minRotation: 25,
|
||
|
maxRotation: 25,
|
||
|
callback: function( value, index, values ) {
|
||
|
|
||
|
// Distribute the ticks equally starting from a right side of xAxis.
|
||
|
var gap = Math.floor( values.length / 7 );
|
||
|
|
||
|
if ( gap < 1 ) {
|
||
|
return value;
|
||
|
}
|
||
|
if ( ( values.length - index - 1 ) % gap === 0 ) {
|
||
|
return value;
|
||
|
}
|
||
|
},
|
||
|
},
|
||
|
} ],
|
||
|
yAxes: [ {
|
||
|
ticks: {
|
||
|
beginAtZero: true,
|
||
|
maxTicksLimit: 6,
|
||
|
padding: 20,
|
||
|
callback: function( value ) {
|
||
|
|
||
|
// Make sure the tick value has no decimals.
|
||
|
if ( Math.floor( value ) === value ) {
|
||
|
return value;
|
||
|
}
|
||
|
},
|
||
|
},
|
||
|
} ],
|
||
|
},
|
||
|
elements: {
|
||
|
line: {
|
||
|
tension: 0,
|
||
|
},
|
||
|
},
|
||
|
animation: {
|
||
|
duration: 0,
|
||
|
},
|
||
|
hover: {
|
||
|
animationDuration: 0,
|
||
|
},
|
||
|
legend: {
|
||
|
display: false,
|
||
|
},
|
||
|
tooltips: {
|
||
|
displayColors: false,
|
||
|
},
|
||
|
responsiveAnimationDuration: 0,
|
||
|
},
|
||
|
},
|
||
|
|
||
|
/**
|
||
|
* Init Chart.js.
|
||
|
*
|
||
|
* @since 2.9.0
|
||
|
*/
|
||
|
init: function() {
|
||
|
|
||
|
var ctx;
|
||
|
|
||
|
if ( ! el.$canvas.length ) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
ctx = el.$canvas[ 0 ].getContext( '2d' );
|
||
|
|
||
|
chart.instance = new WPMailSMTPChart( ctx, chart.settings );
|
||
|
|
||
|
chart.updateWithDummyData();
|
||
|
|
||
|
chart.instance.update();
|
||
|
},
|
||
|
|
||
|
/**
|
||
|
* Update Chart.js settings with dummy data.
|
||
|
*
|
||
|
* @since 2.9.0
|
||
|
*/
|
||
|
updateWithDummyData: function() {
|
||
|
|
||
|
var end = moment().startOf( 'day' ),
|
||
|
days = 7,
|
||
|
data = [ 55, 45, 34, 45, 32, 55, 65 ],
|
||
|
date,
|
||
|
i;
|
||
|
|
||
|
for ( i = 1; i <= days; i++ ) {
|
||
|
|
||
|
date = end.clone().subtract( i, 'days' );
|
||
|
|
||
|
chart.settings.data.labels.push( date );
|
||
|
chart.settings.data.datasets[ 0 ].data.push( {
|
||
|
t: date,
|
||
|
y: data[ i - 1 ],
|
||
|
} );
|
||
|
}
|
||
|
},
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* Public functions and properties.
|
||
|
*
|
||
|
* @since 2.9.0
|
||
|
*
|
||
|
* @type {object}
|
||
|
*/
|
||
|
var app = {
|
||
|
|
||
|
/**
|
||
|
* Publicly accessible Chart.js functions and properties.
|
||
|
*
|
||
|
* @since 2.9.0
|
||
|
*/
|
||
|
chart: chart,
|
||
|
|
||
|
/**
|
||
|
* Start the engine.
|
||
|
*
|
||
|
* @since 2.9.0
|
||
|
*/
|
||
|
init: function() {
|
||
|
$( app.ready );
|
||
|
},
|
||
|
|
||
|
/**
|
||
|
* Document ready.
|
||
|
*
|
||
|
* @since 2.9.0
|
||
|
*/
|
||
|
ready: function() {
|
||
|
|
||
|
el.$settingsBtn.on( 'click', function( e ) {
|
||
|
$( this ).toggleClass( 'open' );
|
||
|
$( this ).siblings( '.wp-mail-smtp-dash-widget-settings-menu' ).fadeToggle( 200 );
|
||
|
} );
|
||
|
|
||
|
el.$dismissBtn.on( 'click', function( event ) {
|
||
|
event.preventDefault();
|
||
|
|
||
|
app.saveWidgetMeta( 'hide_graph', 1 );
|
||
|
$( this ).closest( '.wp-mail-smtp-dash-widget-chart-block-container' ).remove();
|
||
|
$( '#wp-mail-smtp-dash-widget-upgrade-footer' ).show();
|
||
|
} );
|
||
|
|
||
|
// Hide summary report email block on dismiss icon click.
|
||
|
el.$summaryReportEmailDismissBtn.on( 'click', function( event ) {
|
||
|
event.preventDefault();
|
||
|
|
||
|
app.saveWidgetMeta( 'hide_summary_report_email_block', 1 );
|
||
|
el.$summaryReportEmailBlock.slideUp();
|
||
|
} );
|
||
|
|
||
|
// Enable summary report email on checkbox enable.
|
||
|
el.$summaryReportEmailEnableInput.on( 'change', function( event ) {
|
||
|
event.preventDefault();
|
||
|
|
||
|
var $self = $( this ),
|
||
|
$loader = $self.next( 'i' );
|
||
|
|
||
|
$self.hide();
|
||
|
$loader.show();
|
||
|
|
||
|
var data = {
|
||
|
_wpnonce: wp_mail_smtp_dashboard_widget.nonce,
|
||
|
action : 'wp_mail_smtp_' + wp_mail_smtp_dashboard_widget.slug + '_enable_summary_report_email'
|
||
|
};
|
||
|
|
||
|
$.post( ajaxurl, data )
|
||
|
.done( function() {
|
||
|
el.$summaryReportEmailBlock.find( '.wp-mail-smtp-dash-widget-summary-report-email-block-setting' )
|
||
|
.addClass( 'hidden' );
|
||
|
el.$summaryReportEmailBlock.find( '.wp-mail-smtp-dash-widget-summary-report-email-block-applied' )
|
||
|
.removeClass( 'hidden' );
|
||
|
} )
|
||
|
.fail( function() {
|
||
|
$self.show();
|
||
|
$loader.hide();
|
||
|
} );
|
||
|
} );
|
||
|
|
||
|
// Hide email alerts banner on dismiss icon click.
|
||
|
el.$emailAlertsDismissBtn.on( 'click', function( event ) {
|
||
|
event.preventDefault();
|
||
|
|
||
|
$( '#wp-mail-smtp-dash-widget-email-alerts-education' ).remove();
|
||
|
app.saveWidgetMeta( 'hide_email_alerts_banner', 1 );
|
||
|
} );
|
||
|
|
||
|
chart.init();
|
||
|
app.removeOverlay( el.$canvas );
|
||
|
},
|
||
|
|
||
|
/**
|
||
|
* Save dashboard widget meta in backend.
|
||
|
*
|
||
|
* @since 2.9.0
|
||
|
*
|
||
|
* @param {string} meta Meta name to save.
|
||
|
* @param {number} value Value to save.
|
||
|
*/
|
||
|
saveWidgetMeta: function( meta, value ) {
|
||
|
|
||
|
var data = {
|
||
|
_wpnonce: wp_mail_smtp_dashboard_widget.nonce,
|
||
|
action : 'wp_mail_smtp_' + wp_mail_smtp_dashboard_widget.slug + '_save_widget_meta',
|
||
|
meta : meta,
|
||
|
value : value,
|
||
|
};
|
||
|
|
||
|
$.post( ajaxurl, data );
|
||
|
},
|
||
|
|
||
|
/**
|
||
|
* Remove an overlay from a widget block containing $el.
|
||
|
*
|
||
|
* @since 2.9.0
|
||
|
*
|
||
|
* @param {object} $el jQuery element inside a widget block.
|
||
|
*/
|
||
|
removeOverlay: function( $el ) {
|
||
|
$el.siblings( '.wp-mail-smtp-dash-widget-overlay' ).remove();
|
||
|
},
|
||
|
};
|
||
|
|
||
|
// Provide access to public functions/properties.
|
||
|
return app;
|
||
|
|
||
|
}( document, window, jQuery ) );
|
||
|
|
||
|
// Initialize.
|
||
|
WPMailSMTPDashboardWidget.init();
|