458 lines
13 KiB
JavaScript
458 lines
13 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.filesList = {
|
|
|
|
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' );
|
|
|
|
// Handle bulk actions.
|
|
this.insertBulkActionTags();
|
|
|
|
$( '#doaction, #doaction2' ).on( 'click.imagify', this.processBulkAction );
|
|
|
|
// Optimize, restore, etc.
|
|
$document.on( 'click.imagify', '.button-imagify-optimize, .button-imagify-manual-reoptimize, .button-imagify-generate-webp, .button-imagify-delete-webp, .button-imagify-restore, .button-imagify-refresh-status', 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 = $( '.wp-list-table.imagify-files .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( 'tr' ).find( '.check-column [name="bulk_select[]"]' ).each( function() {
|
|
var id = w.imagify.filesList.sanitizeId( this.value );
|
|
|
|
w.imagify.filesList.lockItem( w.imagifyFiles.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();
|
|
},
|
|
|
|
// Bulk optimization =======================================================================
|
|
|
|
/**
|
|
* Insert the bulk actions in the <select> tag.
|
|
*/
|
|
insertBulkActionTags: function() {
|
|
var bulkActions = '<option value="imagify-bulk-optimize">' + w.imagifyFiles.labels.bulkActionsOptimize + '</option>';
|
|
|
|
if ( w.imagifyFiles.backupOption || $( '.file-has-backup' ).length ) {
|
|
// If the backup option is enabled, or if we have items that can be restored.
|
|
bulkActions += '<option value="imagify-bulk-restore">' + w.imagifyFiles.labels.bulkActionsRestore + '</option>';
|
|
}
|
|
|
|
$( '.bulkactions select[name="action"] option:first-child, .bulkactions select[name="action2"] option:first-child' ).after( bulkActions );
|
|
},
|
|
|
|
/**
|
|
* Process one of these actions: bulk restore, bulk optimize, or bulk refresh-status.
|
|
*
|
|
* @param {object} e Event.
|
|
*/
|
|
processBulkAction: function( e ) {
|
|
var value = $( this ).prev( 'select' ).val(),
|
|
action;
|
|
|
|
if ( 'imagify-bulk-optimize' !== value && 'imagify-bulk-restore' !== value && 'imagify-bulk-refresh-status' !== value ) {
|
|
return;
|
|
}
|
|
|
|
e.preventDefault();
|
|
|
|
action = value.replace( 'imagify-bulk-', '' );
|
|
|
|
$( 'input[name="bulk_select[]"]:checked' ).closest( 'tr' ).find( '.button-imagify-' + action ).each( function ( index, el ) {
|
|
setTimeout( function() {
|
|
$( el ).trigger( 'click.imagify' );
|
|
}, index * 500 );
|
|
} );
|
|
},
|
|
|
|
// Optimization ============================================================================
|
|
|
|
/**
|
|
* Process one of these actions: optimize, re-optimize, restore, or refresh-status.
|
|
*
|
|
* @param {object} e Event.
|
|
*/
|
|
processOptimization: function( e ) {
|
|
var $button = $( this ),
|
|
$row = $button.closest( 'tr' ),
|
|
$checkbox = $row.find( '.check-column [type="checkbox"]' ),
|
|
id = imagify.filesList.sanitizeId( $checkbox.val() ),
|
|
context = w.imagifyFiles.context,
|
|
$parent, href, processingTemplate;
|
|
|
|
e.preventDefault();
|
|
|
|
if ( imagify.filesList.isItemLocked( context, id ) ) {
|
|
return;
|
|
}
|
|
|
|
imagify.filesList.lockItem( context, id );
|
|
|
|
href = $button.attr( 'href' );
|
|
processingTemplate = w.imagify.template( 'imagify-button-processing' );
|
|
$parent = $button.closest( '.column-actions, .column-status' );
|
|
|
|
$parent.html( processingTemplate( {
|
|
label: $button.data( 'processing-label' )
|
|
} ) );
|
|
|
|
$.get( href.replace( 'admin-post.php', 'admin-ajax.php' ) )
|
|
.done( function( r ) {
|
|
if ( ! r.success ) {
|
|
if ( r.data && r.data.row ) {
|
|
$row.html( '<td class="colspanchange" colspan="' + $row.children().length + '">' + r.data.row + '</td>' );
|
|
} else {
|
|
$parent.html( r.data );
|
|
}
|
|
|
|
$row.find( '.check-column [type="checkbox"]' ).prop( 'checked', false );
|
|
|
|
imagify.filesList.unlockItem( context, id );
|
|
return;
|
|
}
|
|
|
|
if ( r.data && r.data.columns ) {
|
|
// The work is done.
|
|
w.imagify.filesList.displayProcessResult( context, id, r.data.columns );
|
|
} 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 $boxes = $( '.wp-list-table.imagify-files .check-column [name="bulk_select[]"]' );
|
|
|
|
if ( ! $boxes.length ) {
|
|
return;
|
|
}
|
|
|
|
data[ w.imagifyFiles.imagifybeatID ] = {};
|
|
|
|
$boxes.each( function() {
|
|
var id = w.imagify.filesList.sanitizeId( this.value ),
|
|
context = w.imagifyFiles.context,
|
|
locked = w.imagify.filesList.isItemLocked( context, id ) ? 1 : 0;
|
|
|
|
data[ w.imagifyFiles.imagifybeatID ][ context ] = data[ w.imagifyFiles.imagifybeatID ][ context ] || {};
|
|
data[ w.imagifyFiles.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.imagifyFiles.imagifybeatID ] === 'undefined' ) {
|
|
return;
|
|
}
|
|
|
|
$.each( data[ w.imagifyFiles.imagifybeatID ], function( contextId, columns ) {
|
|
var context, id;
|
|
|
|
context = $.trim( contextId ).match( /^(.+)_(\d+)$/ );
|
|
|
|
if ( ! context ) {
|
|
return;
|
|
}
|
|
|
|
id = w.imagify.filesList.sanitizeId( context[2] );
|
|
context = w.imagify.filesList.sanitizeContext( context[1] );
|
|
|
|
if ( context !== w.imagifyFiles.context ) {
|
|
return;
|
|
}
|
|
|
|
w.imagify.filesList.displayProcessResult( context, id, columns );
|
|
} );
|
|
},
|
|
|
|
// DOM manipulation tools ==================================================================
|
|
|
|
/**
|
|
* Display a successful process result.
|
|
*
|
|
* @param {string} context The media context.
|
|
* @param {int} id The media ID.
|
|
* @param {string} columns A list of HTML, keyed by column name.
|
|
*/
|
|
displayProcessResult: function( context, id, columns ) {
|
|
var $row = w.imagify.filesList.getContainers( id );
|
|
|
|
$.each( columns, function( k, v ) {
|
|
$row.children( '.column-' + k ).html( v );
|
|
} );
|
|
|
|
$row.find( '.check-column [type="checkbox"]' ).prop( 'checked', false );
|
|
|
|
w.imagify.filesList.unlockItem( context, id );
|
|
|
|
if ( ! w.imagify.filesList.working.length ) {
|
|
// Work is done.
|
|
// Reset Imagifybeat interval.
|
|
w.imagify.beat.resetInterval();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Get all containers matching the given id.
|
|
*
|
|
* @param {int} id The media ID.
|
|
* @return {object} A jQuery collection.
|
|
*/
|
|
getContainers: function( id ) {
|
|
return $( '.wp-list-table.imagify-files .check-column [name="bulk_select[]"][value="' + id + '"]' ).closest( 'tr' );
|
|
},
|
|
|
|
// 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.filesList.init();
|
|
|
|
} )(jQuery, document, window);
|
|
|
|
|
|
(function(w) { // eslint-disable-line no-shadow, no-shadow-restricted-names
|
|
|
|
/**
|
|
* requestAnimationFrame polyfill by Erik Möller.
|
|
* Fixes from Paul Irish and Tino Zijdel.
|
|
* MIT license - http://paulirish.com/2011/requestanimationframe-for-smart-animating/ - http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating.
|
|
*/
|
|
var lastTime = 0,
|
|
vendors = ['ms', 'moz', 'webkit', 'o'];
|
|
|
|
for ( var x = 0; x < vendors.length && ! w.requestAnimationFrame; ++x ) {
|
|
w.requestAnimationFrame = w[vendors[x] + 'RequestAnimationFrame'];
|
|
w.cancelAnimationFrame = w[vendors[x] + 'CancelAnimationFrame'] || w[vendors[x] + 'CancelRequestAnimationFrame'];
|
|
}
|
|
|
|
if ( ! w.requestAnimationFrame ) {
|
|
w.requestAnimationFrame = function( callback ) {
|
|
var currTime = new Date().getTime(),
|
|
timeToCall = Math.max( 0, 16 - ( currTime - lastTime ) ),
|
|
id = setTimeout( function() {
|
|
callback( currTime + timeToCall );
|
|
}, timeToCall );
|
|
|
|
lastTime = currTime + timeToCall;
|
|
return id;
|
|
};
|
|
}
|
|
|
|
if ( ! w.cancelAnimationFrame ) {
|
|
w.cancelAnimationFrame = function( id ) {
|
|
clearTimeout( id );
|
|
};
|
|
}
|
|
|
|
})(window);
|
|
|
|
|
|
(function($, d, w, undefined) { // eslint-disable-line no-unused-vars, no-shadow, no-shadow-restricted-names
|
|
|
|
/**
|
|
* LazyLoad images in the list.
|
|
*/
|
|
var lazyImages = $( '#imagify-files-list-form' ).find( '[data-lazy-src]' ),
|
|
lazyTimer;
|
|
|
|
function lazyLoadThumbnails() {
|
|
w.cancelAnimationFrame( lazyTimer );
|
|
lazyTimer = w.requestAnimationFrame( lazyLoadThumbnailsCallback ); // eslint-disable-line no-use-before-define
|
|
}
|
|
|
|
function lazyLoadThumbnailsCallback() {
|
|
var $w = $( w ),
|
|
winScroll = $w.scrollTop(),
|
|
winHeight = $w.outerHeight();
|
|
|
|
$.each( lazyImages, function() {
|
|
var $image = $( this ),
|
|
imgTop = $image.offset().top,
|
|
imgBottom = imgTop + $image.outerHeight(),
|
|
screenTopThresholded = winScroll - 150,
|
|
screenBottomThresholded = winScroll + winHeight + 150,
|
|
src;
|
|
|
|
lazyImages = lazyImages.not( $image );
|
|
|
|
if ( ! lazyImages.length ) {
|
|
$w.off( 'scroll resize orientationchange', lazyLoadThumbnails );
|
|
}
|
|
|
|
/**
|
|
* Hidden images that are above the fold and below the top, are reported as:
|
|
* - offset: window scroll,
|
|
* - height: 0,
|
|
* (at least in Firefox).
|
|
* That's why I use <= and >=.
|
|
*
|
|
* 150 is the threshold.
|
|
*/
|
|
if ( imgBottom >= screenTopThresholded && imgTop <= screenBottomThresholded ) {
|
|
src = $image.attr( 'data-lazy-src' );
|
|
|
|
if ( undefined !== src && src ) {
|
|
$image.attr( 'src', src ).removeAttr( 'data-lazy-src' );
|
|
}
|
|
|
|
$image.next( 'noscript' ).remove();
|
|
}
|
|
} );
|
|
}
|
|
|
|
if ( lazyImages.length ) {
|
|
$( w ).on( 'scroll resize orientationchange', lazyLoadThumbnails );
|
|
lazyLoadThumbnailsCallback();
|
|
}
|
|
|
|
} )(jQuery, document, window);
|