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