335 lines
9.6 KiB
JavaScript
335 lines
9.6 KiB
JavaScript
/**
|
|
* Mini chart.
|
|
*
|
|
* @param {element} canvas The canvas element.
|
|
*/
|
|
window.imagify.drawMeAChart = function( canvas ) {
|
|
canvas.each( function() {
|
|
var value = parseInt( jQuery( this ).closest( '.imagify-chart' ).next( '.imagify-chart-value' ).text(), 10 );
|
|
|
|
new window.imagify.Chart( this, { // eslint-disable-line no-new
|
|
type: 'doughnut',
|
|
data: {
|
|
datasets: [ {
|
|
data: [ value, 100 - value ],
|
|
backgroundColor: [ '#00B3D3', '#D8D8D8' ],
|
|
borderColor: '#fff',
|
|
borderWidth: 1
|
|
} ]
|
|
},
|
|
options: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
events: [],
|
|
animation: {
|
|
easing: 'easeOutBounce'
|
|
},
|
|
tooltips: {
|
|
enabled: false
|
|
},
|
|
responsive: false
|
|
}
|
|
} );
|
|
} );
|
|
};
|
|
|
|
(function($, d, w, undefined) { // eslint-disable-line no-unused-vars, no-shadow, no-shadow-restricted-names
|
|
|
|
w.imagify.modal = {
|
|
|
|
working: [],
|
|
|
|
/*
|
|
* Init.
|
|
*/
|
|
init: function () {
|
|
var $document = $( d ),
|
|
$processing;
|
|
|
|
// Update the chart in the media modal when a media is selected, and the ones already printed.
|
|
$( w ).on( 'canvasprinted.imagify', this.updateChart ).trigger( 'canvasprinted.imagify' );
|
|
|
|
// Toggle slide in custom column.
|
|
$( '.imagify-datas-details' ).hide();
|
|
|
|
$document.on( 'click', '.imagify-datas-more-action a', this.toggleSlide );
|
|
|
|
// Optimize, restore, etc.
|
|
$document.on( 'click', '.button-imagify-restore, .button-imagify-optimize, .button-imagify-manual-reoptimize, .button-imagify-optimize-missing-sizes, .button-imagify-generate-webp, .button-imagify-delete-webp', this.processOptimization );
|
|
|
|
$document.on( 'imagifybeat-send', this.addToImagifybeat );
|
|
$document.on( 'imagifybeat-tick', this.processImagifybeat );
|
|
|
|
// Some items may be processed in background on page load.
|
|
$processing = $( '.imagify-data-actions-container .button-imagify-processing' );
|
|
|
|
if ( $processing.length ) {
|
|
// Some media are already being processed.
|
|
// Lock the items, so we can check their status with Imagifybeat.
|
|
$processing.closest( '.imagify-data-actions-container' ).each( function() {
|
|
var $this = $( this ),
|
|
id = w.imagify.modal.sanitizeId( $this.data( 'id' ) ),
|
|
context = w.imagify.modal.sanitizeContext( $this.data( 'context' ) );
|
|
|
|
w.imagify.modal.lockItem( context, id );
|
|
} );
|
|
|
|
// Fasten Imagifybeat.
|
|
w.imagify.beat.interval( 15 );
|
|
}
|
|
},
|
|
|
|
// Charts ==================================================================================
|
|
|
|
/**
|
|
* Update the chart in the media modal when a media is selected, and the ones already printed.
|
|
*
|
|
* @param {object} e Event.
|
|
* @param {string} selector A CSS selector.
|
|
*/
|
|
updateChart: function( e, selector ) {
|
|
var $canvas;
|
|
|
|
selector = selector || '.imagify-consumption-chart';
|
|
$canvas = $( selector );
|
|
|
|
w.imagify.drawMeAChart( $canvas );
|
|
|
|
$canvas.closest( '.imagify-datas-list' ).siblings( '.imagify-datas-details' ).hide();
|
|
},
|
|
|
|
// Optimization ============================================================================
|
|
|
|
/**
|
|
* Process to one of these actions: restore, optimize, re-optimize, or optimize missing sizes.
|
|
*
|
|
* @param {object} e Event.
|
|
*/
|
|
processOptimization: function( e ) {
|
|
var $obj = $( this ),
|
|
$container = $obj.parents( '.imagify-data-actions-container' ),
|
|
id = w.imagify.modal.sanitizeId( $container.data( 'id' ) ),
|
|
context = w.imagify.modal.sanitizeContext( $container.data( 'context' ) ),
|
|
href, processingTemplate;
|
|
|
|
e.preventDefault();
|
|
|
|
if ( w.imagify.modal.isItemLocked( context, id ) ) {
|
|
return;
|
|
}
|
|
|
|
w.imagify.modal.lockItem( context, id );
|
|
|
|
href = $obj.attr( 'href' );
|
|
processingTemplate = w.imagify.template( 'imagify-button-processing' );
|
|
|
|
$container.html( processingTemplate( {
|
|
label: $obj.data( 'processing-label' )
|
|
} ) );
|
|
|
|
$.get( href.replace( 'admin-post.php', 'admin-ajax.php' ) )
|
|
.done( function( response ) {
|
|
if ( response.data && response.data.html ) {
|
|
// The work is done.
|
|
w.imagify.modal.displayProcessResult( context, id, response.data.html );
|
|
} else {
|
|
// Still processing in background: we're waiting for the result by poking Imagifybeat.
|
|
// Set the Imagifybeat interval to 15 seconds.
|
|
w.imagify.beat.interval( 15 );
|
|
}
|
|
} );
|
|
},
|
|
|
|
// Imagifybeat =============================================================================
|
|
|
|
/**
|
|
* Send the media IDs and their status to Imagifybeat.
|
|
*
|
|
* @param {object} e Event object.
|
|
* @param {object} data Object containing all Imagifybeat IDs.
|
|
*/
|
|
addToImagifybeat: function ( e, data ) {
|
|
var $containers = $( '.imagify-data-actions-container' );
|
|
|
|
if ( ! $containers.length ) {
|
|
return;
|
|
}
|
|
|
|
data[ w.imagifyModal.imagifybeatID ] = {};
|
|
|
|
$containers.each( function() {
|
|
var $this = $( this ),
|
|
id = w.imagify.modal.sanitizeId( $this.data( 'id' ) ),
|
|
context = w.imagify.modal.sanitizeContext( $this.data( 'context' ) ),
|
|
locked = w.imagify.modal.isItemLocked( context, id ) ? 1 : 0;
|
|
|
|
data[ w.imagifyModal.imagifybeatID ][ context ] = data[ w.imagifyModal.imagifybeatID ][ context ] || {};
|
|
data[ w.imagifyModal.imagifybeatID ][ context ][ '_' + id ] = locked;
|
|
} );
|
|
},
|
|
|
|
/**
|
|
* Listen for the custom event "imagifybeat-tick" on $(document).
|
|
*
|
|
* @param {object} e Event object.
|
|
* @param {object} data Object containing all Imagifybeat IDs.
|
|
*/
|
|
processImagifybeat: function ( e, data ) {
|
|
if ( typeof data[ w.imagifyModal.imagifybeatID ] === 'undefined' ) {
|
|
return;
|
|
}
|
|
|
|
$.each( data[ w.imagifyModal.imagifybeatID ], function( contextId, htmlContent ) {
|
|
var context, id;
|
|
|
|
context = $.trim( contextId ).match( /^(.+)_(\d+)$/ );
|
|
|
|
if ( ! context ) {
|
|
return;
|
|
}
|
|
|
|
id = w.imagify.modal.sanitizeId( context[2] );
|
|
context = w.imagify.modal.sanitizeContext( context[1] );
|
|
|
|
w.imagify.modal.displayProcessResult( context, id, htmlContent );
|
|
} );
|
|
},
|
|
|
|
// DOM manipulation tools ==================================================================
|
|
|
|
/**
|
|
* Display the process result.
|
|
*
|
|
* @param {string} context The media context.
|
|
* @param {int} id The media ID.
|
|
* @param {string} htmlContent The HTML to insert.
|
|
*/
|
|
displayProcessResult: function( context, id, htmlContent ) {
|
|
var $containers = w.imagify.modal.getContainers( context, id );
|
|
|
|
$containers.html( htmlContent );
|
|
w.imagify.modal.unlockItem( context, id );
|
|
|
|
if ( ! w.imagify.modal.working.length ) {
|
|
// Work is done.
|
|
// Open the last container being processed.
|
|
w.imagify.modal.openSlide( $containers );
|
|
// Reset Imagifybeat interval.
|
|
w.imagify.beat.resetInterval();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Open a slide rapidly.
|
|
*
|
|
* @param {object} $containers A jQuery collection.
|
|
*/
|
|
openSlide: function( $containers ) {
|
|
$containers.each( function() {
|
|
var $container = $( this ),
|
|
text = $container.find( '.imagify-datas-more-action a' ).data( 'close' );
|
|
|
|
$container.find( '.imagify-datas-more-action a' ).addClass( 'is-open' ).find( '.the-text' ).text( text );
|
|
$container.find( '.imagify-datas-details' ).show().addClass( 'is-open' );
|
|
} );
|
|
},
|
|
|
|
/**
|
|
* Toggle slide in custom column.
|
|
*
|
|
* @param {object} e Event.
|
|
*/
|
|
toggleSlide: function( e ) {
|
|
var $this = $( this );
|
|
|
|
e.preventDefault();
|
|
|
|
if ( $this.hasClass( 'is-open' ) ) {
|
|
$( $this.attr( 'href' ) ).slideUp( 300 ).removeClass( 'is-open' );
|
|
$this.removeClass( 'is-open' ).find( '.the-text' ).text( $this.data( 'open' ) );
|
|
} else {
|
|
$( $this.attr( 'href' ) ).slideDown( 300 ).addClass( 'is-open' );
|
|
$this.addClass( 'is-open' ).find( '.the-text' ).text( $this.data( 'close' ) );
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Get all containers matching the given context and id.
|
|
*
|
|
* @param {string} context The media context.
|
|
* @param {int} id The media ID.
|
|
* @return {object} A jQuery collection.
|
|
*/
|
|
getContainers: function( context, id ) {
|
|
return $( '.imagify-data-actions-container[data-id="' + id + '"][data-context="' + context + '"]' );
|
|
},
|
|
|
|
// Sanitization ============================================================================
|
|
|
|
/**
|
|
* Sanitize a media ID.
|
|
*
|
|
* @param {int|string} id A media ID.
|
|
* @return {int}
|
|
*/
|
|
sanitizeId: function( id ) {
|
|
return parseInt( id, 10 );
|
|
},
|
|
|
|
/**
|
|
* Sanitize a media context.
|
|
*
|
|
* @param {string} context A media context.
|
|
* @return {string}
|
|
*/
|
|
sanitizeContext: function( context ) {
|
|
context = context.replace( '/[^a-z0-9_-]/gi', '' ).toLowerCase();
|
|
return context ? context : 'wp';
|
|
},
|
|
|
|
// Locks ===================================================================================
|
|
|
|
/**
|
|
* Lock an item.
|
|
*
|
|
* @param {string} context The media context.
|
|
* @param {int} id The media ID.
|
|
*/
|
|
lockItem: function( context, id ) {
|
|
if ( ! this.isItemLocked( context, id ) ) {
|
|
this.working.push( context + '_' + id );
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Unlock an item.
|
|
*
|
|
* @param {string} context The media context.
|
|
* @param {int} id The media ID.
|
|
*/
|
|
unlockItem: function( context, id ) {
|
|
var name = context + '_' + id,
|
|
i = _.indexOf( this.working, name );
|
|
|
|
if ( i > -1 ) {
|
|
this.working.splice( i, 1 );
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Tell if an item is locked.
|
|
*
|
|
* @param {string} context The media context.
|
|
* @param {int} id The media ID.
|
|
* @return {bool}
|
|
*/
|
|
isItemLocked: function( context, id ) {
|
|
return _.indexOf( this.working, context + '_' + id ) > -1;
|
|
}
|
|
};
|
|
|
|
w.imagify.modal.init();
|
|
|
|
} )(jQuery, document, window);
|