| 1 |
jQuery(function($){ |
| 2 |
|
| 3 |
var concat = ajaxurl.indexOf("?") > 0 ? "&" : "?"; |
| 4 |
|
| 5 |
// avoid error on IE |
| 6 |
var imagify = { |
| 7 |
log: function (content) { |
| 8 |
if (console !== 'undefined') console.log(content); |
| 9 |
} |
| 10 |
}; |
| 11 |
|
| 12 |
var overviewCanvas = document.getElementById("imagify-overview-chart"), |
| 13 |
overviewData = [ |
| 14 |
{ |
| 15 |
value: imagifyBulk.totalUnoptimizedAttachments, |
| 16 |
color:"#D9E4EB", |
| 17 |
highlight: "#D9E4EB", |
| 18 |
label: imagifyBulk.overviewChartLabels.unoptimized |
| 19 |
}, |
| 20 |
{ |
| 21 |
value: imagifyBulk.totalOptimizedAttachments, |
| 22 |
color: "#46B1CE", |
| 23 |
highlight: "#46B1CE", |
| 24 |
label: imagifyBulk.overviewChartLabels.optimized |
| 25 |
}, |
| 26 |
{ |
| 27 |
value: imagifyBulk.totalErrorsAttachments, |
| 28 |
color: "#2E3242", |
| 29 |
highlight: "#2E3242", |
| 30 |
label: imagifyBulk.overviewChartLabels.error |
| 31 |
} |
| 32 |
]; |
| 33 |
|
| 34 |
// to avoid JS error |
| 35 |
if ( overviewCanvas ) { |
| 36 |
var overviewDoughnut = new Chart(overviewCanvas.getContext("2d")).Doughnut(overviewData, { |
| 37 |
segmentStrokeColor : "transparent", |
| 38 |
segmentStrokeWidth : 0, |
| 39 |
animateRotate : true, |
| 40 |
animation: true, |
| 41 |
percentageInnerCutout: 85, |
| 42 |
legendTemplate : "<ul class=\"imagify-<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>", |
| 43 |
tooltipTemplate: "<%= value %>" |
| 44 |
}); |
| 45 |
|
| 46 |
//then you just need to generate the legend |
| 47 |
//var overviewLegend = overviewDoughnut.generateLegend(); |
| 48 |
//bugged `segments undefined` ? |
| 49 |
|
| 50 |
//and append it to your page somewhere |
| 51 |
overviewLegend = '<ul class="imagify-doughnut-legend">'; |
| 52 |
|
| 53 |
$(overviewData).each(function(i){ |
| 54 |
overviewLegend += '<li><span style="background-color:' + overviewData[i].color + '"></span>' + overviewData[i].label + '</li>'; |
| 55 |
}); |
| 56 |
|
| 57 |
overviewLegend += '</ul>'; |
| 58 |
|
| 59 |
document.getElementById("imagify-overview-chart-legend").innerHTML = overviewLegend; |
| 60 |
} |
| 61 |
|
| 62 |
// Heartbeat |
| 63 |
$(document).on('heartbeat-send', function(e, data) { |
| 64 |
data['imagify_heartbeat'] = 'update_bulk_data'; |
| 65 |
}); |
| 66 |
|
| 67 |
// Listen for the custom event "heartbeat-tick" on $(document). |
| 68 |
$(document).on( 'heartbeat-tick', function(e, data) { |
| 69 |
if ( ! data['imagify_bulk_data'] ) { |
| 70 |
return; |
| 71 |
} |
| 72 |
|
| 73 |
data = data['imagify_bulk_data']; |
| 74 |
|
| 75 |
// The overview chart percent |
| 76 |
$('#imagify-overview-chart-percent').html(data.optimized_attachments_percent + '<span>%</span>'); |
| 77 |
|
| 78 |
// The comsuption bar |
| 79 |
$('.imagify-unconsumed-percent').html(data.unconsumed_quota + '%'); |
| 80 |
$('.imagify-unconsumed-bar').animate({'width': data.unconsumed_quota + '%'}); |
| 81 |
|
| 82 |
// The total optimized images |
| 83 |
$('#imagify-total-optimized-attachments').html(data.already_optimized_attachments); |
| 84 |
|
| 85 |
// The original bar |
| 86 |
$('#imagify-original-bar').find('.imagify-barnb') |
| 87 |
.html(data.original_human); |
| 88 |
|
| 89 |
// The optimized bar |
| 90 |
$('#imagify-optimized-bar').animate({'width': data.optimized_percent+"%"}) |
| 91 |
$('#imagify-optimized-bar').find('.imagify-barnb') |
| 92 |
.html(data.optimized_human); |
| 93 |
|
| 94 |
// The Percent data |
| 95 |
$('#imagify-total-optimized-attachments-pct').html( data.optimized_percent + '%' ); |
| 96 |
|
| 97 |
overviewDoughnut.segments[0].value = data.unoptimized_attachments; |
| 98 |
overviewDoughnut.segments[1].value = data.optimized_attachments; |
| 99 |
overviewDoughnut.segments[2].value = data.errors_attachments; |
| 100 |
overviewDoughnut.update(); |
| 101 |
}); |
| 102 |
|
| 103 |
// Simulate a click on the "Imagif'em all" button |
| 104 |
$('#imagify-simulate-bulk-action').click(function(e){ |
| 105 |
e.preventDefault(); |
| 106 |
$('#imagify-bulk-action').trigger('click'); |
| 107 |
}); |
| 108 |
|
| 109 |
$('#imagify-bulk-action').click(function(){ |
| 110 |
var $obj = $(this), |
| 111 |
$optimization_level = $('[name="optimization_level"]:checked').val(); |
| 112 |
|
| 113 |
if (typeof $optimization_level === "undefined") { |
| 114 |
$optimization_level = -1; |
| 115 |
} |
| 116 |
|
| 117 |
if ( $obj.attr('disabled') ) { |
| 118 |
return false; |
| 119 |
} |
| 120 |
|
| 121 |
$obj.attr('disabled', 'disabled'); |
| 122 |
$obj.find('.dashicons').addClass('rotate'); |
| 123 |
|
| 124 |
|
| 125 |
confirmMessage = function(){ |
| 126 |
return imagifyBulk.processing; |
| 127 |
}; |
| 128 |
$(window).on('beforeunload', confirmMessage); |
| 129 |
|
| 130 |
// Display an alert to wait |
| 131 |
swal({ |
| 132 |
title:imagifyBulk.waitTitle, |
| 133 |
text: imagifyBulk.waitText, |
| 134 |
closeOnConfirm: false, |
| 135 |
showConfirmButton: false, |
| 136 |
imageUrl: imagifyBulk.waitImageUrl |
| 137 |
}); |
| 138 |
|
| 139 |
$.get(ajaxurl+concat+"action=imagify_get_unoptimized_attachment_ids&optimization_level="+$optimization_level+"&imagifybulkuploadnonce="+$('#imagifybulkuploadnonce').val()) |
| 140 |
.done(function(response) { |
| 141 |
if( !response.success ) { |
| 142 |
$obj.removeAttr('disabled'); |
| 143 |
$obj.find('.dashicons').removeClass('rotate'); |
| 144 |
|
| 145 |
// remove confirm dialog before quit the page |
| 146 |
$(window).off('beforeunload', confirmMessage); |
| 147 |
|
| 148 |
imagify.log(response); |
| 149 |
|
| 150 |
if ( response.data.message == 'over-quota' ) { |
| 151 |
// Display an alert to warn that the monthly quota is consumed |
| 152 |
swal({ |
| 153 |
title:imagifyBulk.overQuotaTitle, |
| 154 |
text: imagifyBulk.overQuotaText, |
| 155 |
type: "error", |
| 156 |
customClass: "imagify-sweet-alert", |
| 157 |
html: true |
| 158 |
}); |
| 159 |
} |
| 160 |
|
| 161 |
if ( response.data.message == 'no-images' ) { |
| 162 |
// Display an alert to warn that all images has been optimized |
| 163 |
swal({ |
| 164 |
title:imagifyBulk.noAttachmentToOptimizeTitle, |
| 165 |
text: imagifyBulk.noAttachmentToOptimizeText, |
| 166 |
type: "info", |
| 167 |
customClass: "imagify-sweet-alert" |
| 168 |
}); |
| 169 |
} |
| 170 |
|
| 171 |
} else { |
| 172 |
swal.close(); |
| 173 |
|
| 174 |
var config = { |
| 175 |
'lib': ajaxurl+concat+"action=imagify_bulk_upload&imagifybulkuploadnonce="+$('#imagifybulkuploadnonce').val(), |
| 176 |
'images': response.data |
| 177 |
} |
| 178 |
|
| 179 |
var table = $('.imagify-bulk-table table tbody'), |
| 180 |
files = 0, |
| 181 |
errors = 0, |
| 182 |
original_overall_size = 0, |
| 183 |
overall_saving = 0; |
| 184 |
|
| 185 |
$('.imagify-row-progress').slideDown(); |
| 186 |
$('.imagify-no-uploaded-yet, .imagify-row-complete').hide(200); |
| 187 |
|
| 188 |
Optimizer = new ImagifyGulp(config); |
| 189 |
|
| 190 |
// before the attachment optimization |
| 191 |
Optimizer.before(function(data) { |
| 192 |
table.append('<tr id="attachment-'+data.id+'"><td class="imagify-cell-filename"><span class="imagiuploaded"><img src="'+data.thumbnail+'"/>"</span><span class="imagifilename">'+data.filename+'</span></td><td class="imagify-cell-status"><span class="imagistatus status-compressing"><span class="dashicons dashicons-admin-generic rotate"></span>Compressing<span></span></span></td><td class="imagify-cell-original"></td><td class="imagify-cell-optimized"></td><td class="imagify-cell-percentage"></td><td class="imagify-cell-thumbnails"></td><td class="imagify-cell-savings"></td></tr>'); |
| 193 |
}) |
| 194 |
// after the attachment optimization |
| 195 |
.each(function (data) { |
| 196 |
var $progress = $('#imagify-progress-bar'); |
| 197 |
$progress.css({'width': data.progress + '%'}); |
| 198 |
$progress.find('.percent').html(data.progress + '%'); |
| 199 |
|
| 200 |
if ( data.success ) { |
| 201 |
$('#attachment-'+data.image+' .imagify-cell-status').html('<span class="imagistatus status-complete"><span class="dashicons dashicons-yes"></span>Complete</span>'); |
| 202 |
$('#attachment-'+data.image+' .imagify-cell-original').html(data.original_size_human); |
| 203 |
$('#attachment-'+data.image+' .imagify-cell-optimized').html(data.new_size_human); |
| 204 |
$('#attachment-'+data.image+' .imagify-cell-percentage').html('<span class="imagify-chart"><span class="imagify-chart-container"><canvas height="18" width="18" id="imagify-consumption-chart" style="width: 18px; height: 18px;"></canvas></span></span><span class="imagipercent">'+data.percent+'</span>%'); |
| 205 |
draw_me_a_chart( $('#attachment-'+data.image+' .imagify-cell-percentage').find('canvas') ); |
| 206 |
$('#attachment-'+data.image+' .imagify-cell-thumbnails').html(data.thumbnails); |
| 207 |
$('#attachment-'+data.image+' .imagify-cell-savings').html(Optimizer.humanSize(data.overall_saving, 1)); |
| 208 |
|
| 209 |
// The table footer total optimized files |
| 210 |
files = files + data.thumbnails + 1; |
| 211 |
$('.imagify-cell-nb-files').html(files + ' file(s)'); |
| 212 |
|
| 213 |
// The table footer original size |
| 214 |
original_overall_size = original_overall_size + data.original_overall_size; |
| 215 |
$('.imagify-total-original').html(Optimizer.humanSize(original_overall_size, 1)); |
| 216 |
|
| 217 |
// The table footer overall saving |
| 218 |
overall_saving = overall_saving + data.overall_saving; |
| 219 |
$('.imagify-total-gain').html(Optimizer.humanSize(overall_saving, 1)); |
| 220 |
|
| 221 |
} else { |
| 222 |
error_class = 'error'; |
| 223 |
error_dashicon = 'dismiss'; |
| 224 |
error_message = 'Error'; |
| 225 |
|
| 226 |
if ( data.error.indexOf("You've consumed all your data") >= 0 ) { |
| 227 |
swal({ |
| 228 |
title: imagifyBulk.overQuotaTitle, |
| 229 |
text: imagifyBulk.overQuotaText, |
| 230 |
type: "error", |
| 231 |
customClass: "imagify-sweet-alert", |
| 232 |
html: true, |
| 233 |
}, |
| 234 |
function(){ |
| 235 |
location.reload(); |
| 236 |
}); |
| 237 |
} |
| 238 |
|
| 239 |
if ( data.error.indexOf("This image is already compressed") >=0 ) { |
| 240 |
error_class = 'warning'; |
| 241 |
error_dashicon = 'warning'; |
| 242 |
error_message = 'Notice'; |
| 243 |
} else { |
| 244 |
errors++; |
| 245 |
$('.imagify-cell-errors').html(errors + ' error(s)'); |
| 246 |
} |
| 247 |
|
| 248 |
$('#attachment-'+data.image).after('<tr><td colspan="7"><span class="status-'+error_class+'">'+data.error+'</span></td></tr>'); |
| 249 |
|
| 250 |
$('#attachment-'+data.image+' .imagify-cell-status').html('<span class="imagistatus status-'+error_class+'"><span class="dashicons dashicons-'+error_dashicon+'"></span>'+error_message+'</span>'); |
| 251 |
} |
| 252 |
}) |
| 253 |
// after all attachments optimization |
| 254 |
.done(function (data) { |
| 255 |
$obj.removeAttr('disabled'); |
| 256 |
$obj.find('.dashicons').removeClass('rotate'); |
| 257 |
|
| 258 |
// remove confirm dialog before quit the page |
| 259 |
$(window).off('beforeunload', confirmMessage); |
| 260 |
|
| 261 |
// Hide the progress bar |
| 262 |
$('.imagify-row-progress').slideUp(); |
| 263 |
|
| 264 |
if ( data.global_percent !== 'NaN' ) { |
| 265 |
// Display the complete section |
| 266 |
$('.imagify-row-complete').removeClass('hidden') |
| 267 |
.addClass( 'done' ) |
| 268 |
.attr('aria-hidden', 'false'); |
| 269 |
$('html, body').animate({ |
| 270 |
scrollTop: $('.imagify-row-complete').offset().top |
| 271 |
}, 200); |
| 272 |
|
| 273 |
$('.imagify-ac-rt-total-gain').html(data.global_gain_human); |
| 274 |
$('.imagify-ac-rt-total-original').html(data.global_original_size_human); |
| 275 |
|
| 276 |
text2share = imagifyBulk.textToShare; |
| 277 |
text2share = text2share.replace( '%1$s', data.global_gain_human ); |
| 278 |
text2share = text2share.replace( '%2$s', data.global_original_size_human ); |
| 279 |
text2share = encodeURIComponent(text2share); |
| 280 |
|
| 281 |
$('.imagify-sn-twitter').attr( 'href', 'https://twitter.com/intent/tweet?source=webclient&original_referer=' + imagifyBulk.pluginURL + '&text=' + text2share + '&url=' + imagifyBulk.pluginURL + '&related=imagify&hastags=performance,web,wordpress' ); |
| 282 |
|
| 283 |
$('.imagify-ac-chart').attr('data-percent', data.global_percent); |
| 284 |
draw_me_complete_chart( $('.imagify-ac-chart').find('canvas') ); |
| 285 |
} |
| 286 |
}) |
| 287 |
.error(function (id) { |
| 288 |
imagify.log('Can\'t optimize image with id ' + id); |
| 289 |
}) |
| 290 |
.run(); |
| 291 |
} |
| 292 |
}) |
| 293 |
.fail(function () { |
| 294 |
swal({ |
| 295 |
title: imagifyBulk.getUnoptimizedImagesErrorTitle, |
| 296 |
text: imagifyBulk.getUnoptimizedImagesErrorText, |
| 297 |
type: "error", |
| 298 |
customClass: "imagify-sweet-alert" |
| 299 |
}, |
| 300 |
function(){ |
| 301 |
location.reload(); |
| 302 |
}); |
| 303 |
}); |
| 304 |
}); |
| 305 |
|
| 306 |
/* |
| 307 |
* Mini chart |
| 308 |
* You can use draw_me_a_chart() function with AJAX calls |
| 309 |
* |
| 310 |
* @param {element} canvas |
| 311 |
*/ |
| 312 |
function draw_me_a_chart( canvas ) { |
| 313 |
canvas.each(function(){ |
| 314 |
|
| 315 |
var the_value = parseInt( $(this).closest('.imagify-chart').next('.imagipercent').text() ), |
| 316 |
overviewData = [ |
| 317 |
{ |
| 318 |
value: the_value, |
| 319 |
color: "#00B3D3" |
| 320 |
}, |
| 321 |
{ |
| 322 |
value: 100 - the_value, |
| 323 |
color:"#D8D8D8" |
| 324 |
} |
| 325 |
], |
| 326 |
overviewDoughnut = new Chart( $(this)[0].getContext("2d")).Doughnut(overviewData, { |
| 327 |
segmentStrokeColor : "#FFF", |
| 328 |
segmentStrokeWidth : 1, |
| 329 |
animateRotate : true, |
| 330 |
tooltipEvents: [] |
| 331 |
}); |
| 332 |
}); |
| 333 |
} |
| 334 |
|
| 335 |
/* |
| 336 |
* Complete Chart |
| 337 |
* You can use draw_me_complete_chart() function with AJAX calls |
| 338 |
* |
| 339 |
* @param {element} canvas |
| 340 |
*/ |
| 341 |
function draw_me_complete_chart( canvas ) { |
| 342 |
canvas.each(function(){ |
| 343 |
|
| 344 |
var the_value = parseInt( $(this).closest('.imagify-ac-chart').attr('data-percent') ), |
| 345 |
overviewData = [ |
| 346 |
{ |
| 347 |
value: the_value, |
| 348 |
color: "#40B1D0" |
| 349 |
}, |
| 350 |
{ |
| 351 |
value: 100 - the_value, |
| 352 |
color:"#FFFFFF" |
| 353 |
} |
| 354 |
], |
| 355 |
overviewDoughnut = new Chart( $(this)[0].getContext("2d")).Doughnut(overviewData, { |
| 356 |
segmentStrokeColor : "transparent", |
| 357 |
segmentStrokeWidth : 0, |
| 358 |
animateRotate : true, |
| 359 |
animation: true, |
| 360 |
percentageInnerCutout: 70, |
| 361 |
tooltipEvents: [] |
| 362 |
}); |
| 363 |
}); |
| 364 |
} |
| 365 |
}); |
| 366 |
|
| 367 |
var width = 700, height = 290; |
| 368 |
if ( window.innerWidth ) { |
| 369 |
var clientLeft = (window.innerWidth-width)/2; |
| 370 |
var clientTop = (window.innerHeight-height)/2; |
| 371 |
} |
| 372 |
else { |
| 373 |
var clientLeft = (document.body.clientWidth-width)/2; |
| 374 |
var clientTop = (document.body.clientHeight-height)/2; |
| 375 |
} |
| 376 |
|
| 377 |
[].forEach.call( document.querySelectorAll('.imagify-share-networks a'), function(el) { |
| 378 |
el.addEventListener('click', function(evt) { |
| 379 |
window.open(this.href,'',"status=no, scrollbars=no, menubar=no, top="+clientTop+", left="+clientLeft+", width="+width+", height="+height); |
| 380 |
evt.preventDefault(); |
| 381 |
}, false); |
| 382 |
}); |
