first commit
This commit is contained in:
Rachit Bhargava
334
wp/wp-content/plugins/imagify/assets/js/media-modal.js
Normal file
334
wp/wp-content/plugins/imagify/assets/js/media-modal.js
Normal file
@@ -0,0 +1,334 @@
|
||||
/**
|
||||
* 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);
|
||||
Reference in New Issue
Block a user