PluginProbe
WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance / 4.7.0
WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance v4.7.0
4.7.0 4.6.1 4.6.0 4.5.5 4.5.4 4.5.3 4.5.2 3.2.20 3.2.21 3.2.22 3.2.3 3.2.5 3.2.6 3.2.7 3.2.9 3.3.0 3.3.1 3.3.2 3.4.0 3.4.1 3.4.2 3.5.0 3.6.0 3.7.0 3.7.1 All 111 releases
← All changes | js/wposmush.js +593 -344 3.2.9 → 4.7.0 View file →
@@ -5,17 +5,20 @@
5 5 var WP_Optimize_Smush = function() {
6 6
7 7 var $ = jQuery;
8 8
9 + var heartbeat = WP_Optimize_Heartbeat();
10 + var heartbeat_agents = [];
11 +
12 + var last_ui_update_agent_uid = null;
13 +
14 + var block_ui = wp_optimize.block_ui;
15 +
9 16 /**
10 17 * Variables for smushing.
11 18 */
12 - var smush_nav_tab = $('#wp-optimize-images-nav-tab-smush'),
13 - smush_images_grid = $('#wpo_smush_images_grid'),
19 + var smush_images_grid = $('#wpo_smush_images_grid'),
14 20 smush_images_optimization_message = $('#smush_info_images'),
15 - smush_images_pending_tasks_container = $('#wpo_smush_images_pending_tasks_container'),
16 - smush_images_pending_tasks_btn = $('#wpo_smush_images_pending_tasks_button'),
17 - smush_images_save_options_btn = $('.wpo-fieldgroup #wpo_smush_images_save_options_button'),
18 21 smush_images_refresh_btn = $('#wpo_smush_images_refresh'),
19 22 smush_images_select_all_btn = $('#wpo_smush_images_select_all'),
20 23 smush_images_select_none_btn = $('#wpo_smush_images_select_none'),
21 24 smush_images_stats_clear_btn = $('#wpo_smush_clear_stats_btn'),
@@ -20,10 +23,8 @@
20 23 smush_images_select_none_btn = $('#wpo_smush_images_select_none'),
21 24 smush_images_stats_clear_btn = $('#wpo_smush_clear_stats_btn'),
22 25 smush_selected_images_btn = $('#wpo_smush_images_btn'),
23 26 smush_mark_as_compressed_btn = $('#wpo_smush_mark_as_compressed'),
24 - smush_single_image_btn = $('.wpo_smush_single_image .button'),
25 - smush_single_restore_btn = $('.wpo_restore_single_image .button'),
26 27 smush_mark_all_as_uncompressed_btn = $('#wpo_smush_mark_all_as_uncompressed_btn'),
27 28 restore_all_compressed_images_btn = $('#wpo_smush_restore_all_compressed_images_btn'),
28 29 smush_view_logs_btn = $('.wpo_smush_get_logs'),
29 30 smush_delete_backup_images_btn = $('#wpo_smush_delete_backup_btn'),
@@ -35,16 +36,113 @@
35 36 smush_timer_locked = false,
36 37 smush_timer_handle = 0,
37 38 smush_image_list = [],
38 39 smush_completed = false,
40 + smush_from_media_library = false,
39 41 smush_mark_all_as_uncompressed = false,
40 42 smush_affected_images = {},
41 - pending_tasks_cancel_btn = $('#wpo_smush_images_pending_tasks_cancel_button');
43 + pending_tasks_cancel_btn = $('#wpo_smush_images_pending_tasks_cancel_button'),
44 + uncompressed_images_sites_select = $('#wpo_uncompressed_images_sites_select');
42 45
43 46 /**
47 + * These options used for block UI with custom content.
48 + */
49 + var block_ui_custom_options = {
50 + baseZ: 160001,
51 + css: {
52 + top: '50%',
53 + transform: 'translate(0, -50%)',
54 + width: '400px',
55 + padding: '20px',
56 + cursor: 'pointer'
57 + }
58 + }
59 +
60 + $('#doaction, #doaction2').on('click', function(e) {
61 + e.stopImmediatePropagation();
62 + var action = $(this).prev('select').val();
63 + if ('wp_optimize_bulk_compression' !== action && 'wp_optimize_bulk_restore' !== action ) return;
64 +
65 + var $selected_images = get_media_library_selected_images();
66 + if (0 === $selected_images.length) return;
67 + e.preventDefault();
68 + if ('wp_optimize_bulk_compression' === action) bulk_compression($selected_images);
69 + if ('wp_optimize_bulk_restore' === action) bulk_restore($selected_images);
70 + });
71 +
72 + /**
73 + * Handles bulk compression action from media library
74 + *
75 + * @param {Object} $selected_images
76 + */
77 + function bulk_compression($selected_images) {
78 + block_ui(wposmush.server_check);
79 +
80 + data = { 'server': wposmush.smush_settings.compression_server, skip_notice: true };
81 + smush_manager_send_command('check_server_status', data, function(resp) {
82 + if (resp.online) {
83 + $selected_images.each(function(index, element) {
84 + smush_image_list.push({
85 + 'attachment_id': parseInt(element.value),
86 + 'blog_id': wposmush.blog_id
87 + });
88 + });
89 +
90 + data = {
91 + optimization_id: 'smush',
92 + selected_images: smush_image_list,
93 + smush_options: {
94 + 'compression_server': wposmush.smush_settings.compression_server,
95 + 'image_quality': wposmush.smush_settings.image_quality,
96 + 'lossy_compression': wposmush.smush_settings.lossy_compression,
97 + 'back_up_original': wposmush.smush_settings.back_up_original,
98 + 'preserve_exif': wposmush.smush_settings.preserve_exif
99 + }
100 + }
101 + smush_from_media_library = true;
102 + smush_completed = false;
103 + if (smush_timer_locked) return;
104 + block_ui('', $.extend(block_ui_custom_options, {message: $('#wpo_smush_images_information_container')}), false, true);
105 + clear_smush_stats();
106 +
107 + smush_timer_handle = window.setInterval(smush_timer, 1000);
108 + smush_manager_send_command('process_bulk_smush', data);
109 + } else {
110 + error_message = resp.error ? resp.error + '<br>' + wposmush.server_error : wposmush.server_error;
111 + block_ui(error_message);
112 + }
113 + });
114 + }
115 +
116 + /**
117 + * Handles bulk restore action from media library
118 + *
119 + * @param {Object} $selected_images
120 + */
121 + function bulk_restore($selected_images) {
122 + smush_from_media_library = true;
123 +
124 + var processed_elements = [];
125 + var progress = function(element_id) {
126 + return function(callback) {
127 + processed_elements.push(element_id);
128 +
129 + if (1 < processed_elements.length && processed_elements.length === $selected_images.length) {
130 + callback(wposmush.images_restored_successfully);
131 + } else {
132 + callback();
133 + }
134 + }
135 + }
136 +
137 + $selected_images.each(function(index, element) {
138 + restore_selected_image(wposmush.blog_id, parseInt(element.value), progress(parseInt(element.value)));
139 + });
140 + }
141 +
142 + /**
44 143 * Handle Image Selection
45 144 */
46 -
47 145 smush_images_grid.on('click', '.thumbnail', function (e) {
48 146 $(this).closest('input[type="checkbox"]').prop('checked', true);
49 147 });
50 148
@@ -65,11 +163,13 @@
65 163
66 164 // Resets server rewrite capability
67 165 reset_webp_serving_method_btn.on('click', function(e) {
68 166 e.preventDefault();
69 - smush_manager_send_command('reset_webp_serving_method', {}, function(resp) {
167 + smush_manager_send_command('reset_webp_serving_method', { skip_notice: true }, function(resp) {
70 168 if (!resp.success) {
71 - console.log('[Failed] WebP server capability detection');
169 + $('#enable_webp_conversion').prop("checked", false);
170 + $('#smush-information-modal .smush-information').text(resp.error_message);
171 + block_ui('', $.extend(block_ui_custom_options, {message: $('#smush-information-modal')}), false, true);
72 172 } else {
73 173 $('#wpo_reset_webp_serving_method_done').show().delay(3000).fadeOut();
74 174 }
75 175 });
@@ -75,13 +175,21 @@
75 175 });
76 176 });
77 177
78 178 /**
179 + * Boolean flag to track whether uncompressed images have already been loaded,
180 + * preventing multiple unnecessary loads
181 + */
182 + var uncompressed_images_already_loaded = false;
183 +
184 + /**
79 185 * Checks if smush is active and loads images if yes - image tabs change.
80 186 */
81 187 $('#wp-optimize-nav-tab-wrapper__wpo_images .nav-tab').on('click', function() {
188 + if (uncompressed_images_already_loaded) return;
189 +
82 190 if ($(this).is('#wp-optimize-nav-tab-wpo_images-smush')) {
83 - get_info_from_smush_manager();
191 + get_info_from_smush_manager(false);
84 192 }
85 193 });
86 194
87 195 /**
@@ -87,11 +195,13 @@
87 195 /**
88 196 * Checks if smush is active and loads images if yes - main menu change.
89 197 */
90 198 $('#wp-optimize-wrap').on('page-change', function(e, params) {
199 + if (uncompressed_images_already_loaded) return;
200 +
91 201 if ('wpo_images' == params.page) {
92 202 if ($('#wp-optimize-nav-tab-wrapper__wpo_images .nav-tab-active').is('#wp-optimize-nav-tab-wpo_images-smush')) {
93 - get_info_from_smush_manager();
203 + get_info_from_smush_manager(false);
94 204 }
95 205 }
96 206 });
97 207
@@ -149,28 +259,21 @@
149 259 */
150 260 smush_selected_images_btn.off().on('click', function() {
151 261
152 262 if (0 == $('#wpo_smush_images_grid input[type="checkbox"]:checked').length) {
153 - $('#smush-information-modal .smush-information').text(wposmush.please_select_images)
154 - update_view_modal_message($('#smush-information-modal'), $.unblockUI);
263 + block_ui(wposmush.please_select_images);
155 264 return;
156 265 }
157 266
158 - $('#smush-information-modal .smush-information').text(wposmush.server_check);
159 - update_view_modal_message($('#smush-information-modal'));
267 + block_ui(wposmush.server_check);
160 268
161 - data = { 'server': $("input[name='compression_server']:checked").val() };
269 + data = { 'server': $("input[name='compression_server']:checked").val(), skip_notice: true };
162 270 smush_manager_send_command('check_server_status', data, function(resp) {
163 271 if (resp.online) {
164 272 bulk_smush_selected_images();
165 273 } else {
166 - if (resp.error) {
167 - error_message = resp.error + '<br>' + wposmush.server_error
168 - $('#smush-information-modal .smush-information').html(error_message);
169 - } else {
170 - $('#smush-information-modal .smush-information').text(wposmush.server_error);
171 - }
172 - update_view_modal_message($('#smush-information-modal'), $.unblockUI);
274 + error_message = resp.error ? resp.error + '<br>' + wposmush.server_error : wposmush.server_error;
275 + block_ui(error_message);
173 276 }
174 277 });
175 278 });
176 279
@@ -177,13 +280,8 @@
177 280 /**
178 281 * Mark as compressed
179 282 */
180 283 smush_mark_as_compressed_btn.off().on('click', function() {
181 - if (0 == $('#wpo_smush_images_grid input[type="checkbox"]:checked').length) {
182 - $('#smush-information-modal .smush-information').text(wposmush.please_select_compressed_images)
183 - update_view_modal_message($('#smush-information-modal'), $.unblockUI);
184 - return;
185 - }
186 284
187 285 var selected_images = [],
188 286 image;
189 287
@@ -194,15 +292,15 @@
194 292 };
195 293 selected_images.push(image);
196 294 });
197 295
198 - update_view_modal_message(wposmush.please_updating_images_info);
296 + block_ui(wposmush.please_updating_images_info);
199 297
200 298 smush_manager_send_command('mark_as_compressed', {selected_images: selected_images}, function(response) {
201 299 $('#smush-information-modal .smush-information').text(response.summary);
202 - update_view_modal_message($('#smush-information-modal'), $.unblockUI);
300 + block_ui('', $.extend(block_ui_custom_options, {message: $('#smush-information-modal')}));
203 301 // refresh images list.
204 - get_info_from_smush_manager();
302 + get_info_from_smush_manager(false);
205 303 });
206 304 });
207 305
208 306 /**
@@ -212,10 +310,9 @@
212 310 if (!confirm(wposmush.mark_all_images_uncompressed)) return;
213 311
214 312 var restore_backup = confirm(wposmush.restore_images_from_backup);
215 313
216 - update_view_modal_message($('#smush-information-modal-cancel-btn'));
217 - $('#smush-information-modal-cancel-btn .smush-information').text(wposmush.please_wait);
314 + block_ui(wposmush.please_wait);
218 315
219 316 smush_mark_all_as_uncompressed = true;
220 317 run_mark_all_as_uncompressed(restore_backup);
221 318 });
@@ -225,10 +322,9 @@
225 322 */
226 323 restore_all_compressed_images_btn.on('click', function() {
227 324 if (!confirm(wposmush.restore_all_compressed_images)) return;
228 325
229 - update_view_modal_message($('#smush-information-modal-cancel-btn'));
230 - $('#smush-information-modal-cancel-btn .smush-information').text(wposmush.please_wait);
326 + block_ui(wposmush.please_wait);
231 327
232 328 smush_mark_all_as_uncompressed = true;
233 329 run_mark_all_as_uncompressed(true, true);
234 330 });
@@ -245,17 +341,22 @@
245 341 /**
246 342 * Send command for mark all compressed images as uncompressed.
247 343 *
248 344 * @param {bool} restore_backup if set to true then images will restored from backup if possible.
345 + * @param {bool} delete_only_backups_meta if set to true the only backup meta will be deleted
249 346 */
250 347 function run_mark_all_as_uncompressed(restore_backup, delete_only_backups_meta) {
251 348 if (!smush_mark_all_as_uncompressed) return;
252 349
350 + restore_backup = restore_backup ? 1 : 0;
351 + delete_only_backups_meta = delete_only_backups_meta ? 1 : 0;
352 +
253 353 var info = $('#smush-information-modal-cancel-btn .smush-information');
254 354 smush_manager_send_command('mark_all_as_uncompressed',
255 355 {
256 - restore_backup: restore_backup ? 1 : 0,
257 - delete_only_backups_meta: delete_only_backups_meta ? 1 : 0
356 + restore_backup: restore_backup,
357 + delete_only_backups_meta: delete_only_backups_meta,
358 + skip_notice: true
258 359 },
259 360 function(resp) {
260 361 // if cancel button pressed then exit
261 362 if (!smush_mark_all_as_uncompressed) return;
@@ -261,10 +362,9 @@
261 362 if (!smush_mark_all_as_uncompressed) return;
262 363
263 364 // if we get an error then show it
264 365 if (resp.hasOwnProperty('error')) {
265 - update_view_modal_message($('#smush-information-modal'), $.unblockUI);
266 - $('#smush-information-modal .smush-information').text(resp.error);
366 + block_ui(resp.error);
267 367 get_info_from_smush_manager();
268 368 return;
269 369 }
270 370
@@ -269,14 +369,14 @@
269 369 }
270 370
271 371 // if completed then refresh uncompressed images list and show final message.
272 372 if (resp.completed) {
273 - update_view_modal_message($('#smush-information-modal'), $.unblockUI);
373 + block_ui('', $.extend(block_ui_custom_options, {message: $('#smush-information-modal')}));
274 374 $('#smush-information-modal .smush-information').text(resp.message);
275 375 get_info_from_smush_manager();
276 376 } else {
277 377 info.text(resp.message);
278 - run_mark_all_as_uncompressed(restore_backup);
378 + run_mark_all_as_uncompressed(restore_backup, delete_only_backups_meta);
279 379 }
280 380 }
281 381 );
282 382 }
@@ -284,9 +384,10 @@
284 384 /**
285 385 * Refresh image list
286 386 */
287 387 smush_images_refresh_btn.off().on('click', function() {
288 - get_info_from_smush_manager();
388 + // The refresh image list button should not fetch from cache but run the query
389 + get_info_from_smush_manager(false);
289 390 });
290 391
291 392 /**
292 393 * Bind select all / select none controls
@@ -307,9 +408,9 @@
307 408 update_smush_action_buttons_state();
308 409 });
309 410
310 411 /**
311 - * Diplays logs in a modal
412 + * Displays logs in a modal
312 413 */
313 414 smush_view_logs_btn.off().on('click', function() {
314 415 $("#log-panel").text("Please wait, fetching logs.");
315 416 smush_manager_send_command('get_smush_logs', {}, function(resp) {
@@ -348,15 +449,8 @@
348 449 });
349 450 });
350 451
351 452 /**
352 - * Saves options
353 - */
354 - smush_images_save_options_btn.off().on('click', function(e) {
355 - save_options();
356 - });
357 -
358 - /**
359 453 * Binds clear stats button
360 454 */
361 455 smush_images_stats_clear_btn.off().on('click', function(e) {
362 456 $('#wpo_smush_images_clear_stats_spinner').show().delay(3000).fadeOut();
@@ -367,44 +461,17 @@
367 461 });
368 462 });
369 463
370 464 /**
371 - * Binds pending tasks button
372 - */
373 - smush_images_pending_tasks_btn.off().on('click', function(e) {
374 - $('#smush-information-modal .smush-information').text(wposmush.server_check);
375 - update_view_modal_message($('#smush-information-modal'), $.unblockUI);
376 - data = { 'server': $("input[name='compression_server']:checked").val() };
377 - smush_manager_send_command('check_server_status', data, function(resp) {
378 - if (resp.online) {
379 - update_view_bulk_smush_start();
380 - smush_manager_send_command('process_pending_images', {}, function(resp) {
381 - handle_response_from_smush_manager(resp, update_view_bulk_smush_progress);
382 - });
383 - } else {
384 - if (resp.error) {
385 - error_message = resp.error + '<br>' + wposmush.server_error
386 - $('#smush-information-modal .smush-information').html(error_message);
387 - } else {
388 - $('#smush-information-modal .smush-information').text(wposmush.server_error);
389 - }
390 - update_view_modal_message($('#smush-information-modal'), $.unblockUI);
391 - }
392 - });
393 -
394 - });
395 -
396 -
397 - /**
398 465 * Binds smush cancel button
399 466 */
400 467 $('body').on('click', '#wpo_smush_images_pending_tasks_cancel_button', function(e) {
401 468
402 - if (wpoptimize.cancel === pending_tasks_cancel_btn.val()) {
403 - pending_tasks_cancel_btn.val(wpoptimize.cancelling);
469 + if (wposmush.cancel === pending_tasks_cancel_btn.val()) {
470 + pending_tasks_cancel_btn.val(wposmush.cancelling);
404 471 pending_tasks_cancel_btn.prop('disabled', true);
405 472 }
406 - smush_manager_send_command('clear_pending_images', {}, function(resp) {
473 + smush_manager_send_command('clear_pending_images', { restore_images: smush_image_list }, function(resp) {
407 474 $.unblockUI();
408 475 if (resp.status) {
409 476 get_info_from_smush_manager();
410 477 reset_view_bulk_smush();
@@ -410,14 +477,53 @@
410 477 reset_view_bulk_smush();
411 478 } else {
412 479 console.log('Cancelling pending images apparently failed.', resp);
413 480 }
414 - pending_tasks_cancel_btn.val(wpoptimize.cancel);
481 + pending_tasks_cancel_btn.val(wposmush.cancel);
415 482 pending_tasks_cancel_btn.prop('disabled', false);
416 483 });
417 484 });
418 485
419 486 /**
487 + * Handle the click on the 'Compress' button within the Media Library page and open a dialog for the image compression action.
488 + */
489 + $('.column-wpo_smush').on('click', '.wpo-smush-compress-popup-btn', function(e) {
490 + var attachment_id = $(this).data('id'),
491 + blog_id = $(this).data('blog');
492 +
493 + e.preventDefault();
494 +
495 + smush_manager_send_command('get_smush_settings_form', {
496 + attachment_id: attachment_id,
497 + blog_id: blog_id
498 + }, function(resp) {
499 + if (resp.success) {
500 + var html = [
501 + '<div class="wpo-smush-compress-popup-content">',
502 + '<h3>',wposmush.compress_image,'</h3>',
503 + resp.html,
504 + '</div>',
505 + '<div class="wpo_smush_single_image action_button" style="display:inline-block;">',
506 + '<input type="button" data-blog="',blog_id,'" data-id="',attachment_id,'" id="smush_compress_',attachment_id,'" class="button-primary button" value="',wposmush.compress,'">',
507 + '</div>',
508 + '&nbsp;&nbsp;',
509 + '<a href="#" class="button wpo-smush-popup-cancel-btn">',wposmush.close,'</a>'
510 + ].join('');
511 + block_ui('', $.extend(block_ui_custom_options, {message: html}));
512 + }
513 + });
514 +
515 + });
516 +
517 + /**
518 + * Handle the 'Cancel' button in the dialog for the image compression action.
519 + */
520 + $('body').on('click', '.wpo-smush-popup-cancel-btn', function(e) {
521 + e.preventDefault();
522 + $.unblockUI();
523 + });
524 +
525 + /**
420 526 * Single image compression
421 527 */
422 528 $('body').on('click', '.wpo_smush_single_image .button', function() {
423 529
@@ -429,11 +535,11 @@
429 535 if ($('#enable_custom_compression').is(":checked")) {
430 536 image_quality = $('#custom_compression_slider').val();
431 537 } else {
432 538 // The '60' here has to be kept in sync with WP_Optimize::admin_page_wpo_images_smush()
433 - image_quality = $('#enable_lossy_compression').is(":checked") ? 60 : 100;
539 + image_quality = $('#enable_lossy_compression').is(":checked") ? 60 : 92;
434 540 }
435 - lossy_compression = image_quality < 100 ? true : false;
541 + lossy_compression = image_quality < 92 ? true : false;
436 542
437 543 smush_options = {
438 544 'compression_server': $("input[name='compression_server_" + image.attachment_id + "']:checked").val(),
439 545 'image_quality': image_quality,
@@ -442,20 +548,15 @@
442 548 'preserve_exif': $('#smush_exif_' + image.attachment_id).is(":checked")
443 549 }
444 550
445 551 data = { 'server': $("input[name='compression_server_" + $(this).attr('id').substring(15) + "']:checked").val() };
446 - update_view_modal_message(wposmush.server_check);
552 + block_ui(wposmush.server_check);
447 553 smush_manager_send_command('check_server_status', data, function(resp) {
448 554 if (resp.online) {
449 555 smush_selected_image(image, smush_options);
450 556 } else {
451 - if (resp.error) {
452 - error_message = resp.error + '<br>' + wposmush.server_error
453 -
454 - update_view_modal_message(error_message, $.unblockUI);
455 - } else {
456 - update_view_modal_message(wposmush.server_error, $.unblockUI);
457 - }
557 + error_message = resp.error ? resp.error + '<br>' + wposmush.server_error : wposmush.server_error;
558 + block_ui(error_message);
458 559 }
459 560 });
460 561 });
461 562
@@ -461,13 +562,15 @@
461 562
462 563 /**
463 564 * Single image restore
464 565 */
465 - $('body').on('click', '.wpo_restore_single_image .button', function() {
566 + $('body').on('click', '.wpo_restore_single_image .button, .wpo_restore_single_image a', function(e) {
466 567 var clicked_image = $(this);
467 568 blog_id = clicked_image.data('blog');
468 569 image_id = clicked_image.data('id');
469 570
571 + e.preventDefault();
572 +
470 573 if (!image_id || !blog_id) return;
471 574 restore_selected_image(blog_id, image_id);
472 575 });
473 576
@@ -473,58 +576,76 @@
473 576
474 577 /**
475 578 * Mark as compressed
476 579 */
477 - $('body').on('click', '.wpo_smush_mark_single_image .button', function() {
478 - var image = {
479 - 'attachment_id':$(this).data('id'),
480 - 'blog_id': $(this).data('blog')
481 - },
482 - wrapper = $(this).closest('#smush-metabox-inside-wrapper');
580 + $('body').on('click', '.wpo_smush_mark_single_image .button, .wpo_smush_mark_single_image a', function(e) {
581 + mark_unmark_as_compressed_handler($(this), e, true);
582 + });
483 583
484 - update_view_modal_message(wposmush.please_updating_images_info);
485 -
486 - smush_manager_send_command('mark_as_compressed', {selected_images: [ image ]}, function(response) {
487 - $('#smush-information-modal .smush-information').text(response.summary);
488 - update_view_modal_message($('#smush-information-modal'), $.unblockUI);
489 -
490 - if (response.status) {
491 - $('.wpo_smush_single_image', wrapper).hide();
492 - $('.wpo-toggle-advanced-options', wrapper).removeClass('opened');
493 - $('.wpo_smush_mark_single_image', wrapper).hide();
494 - $('.wpo_smush_unmark_single_image', wrapper).show();
495 - $('.wpo_restore_single_image', wrapper).show();
496 - $('#smush_info', wrapper).text(response.info);
497 - }
498 - });
584 + /**
585 + * Unmark as compressed
586 + */
587 + $('body').on('click', '.wpo_smush_unmark_single_image .button, .wpo_smush_unmark_single_image a', function(e) {
588 + mark_unmark_as_compressed_handler($(this), e, false);
499 589 });
500 590
501 591 /**
502 - * Unmark as uncompressed
592 + * Handler for Mark/Unmark as compressed event.
593 + *
594 + * @param {jQuery} target jQuery object for target element
595 + * @param {Event} e
596 + * @param {Boolean} mark True or false - mark / unmark
503 597 */
504 - $('body').on('click', '.wpo_smush_unmark_single_image .button', function() {
505 - var image = {
506 - 'attachment_id':$(this).data('id'),
507 - 'blog_id': $(this).data('blog')
598 + function mark_unmark_as_compressed_handler(target, e, mark) {
599 + var blog_id = target.data('blog'),
600 + attachment_id = target.data('id'),
601 + image = {
602 + 'attachment_id': attachment_id,
603 + 'blog_id': blog_id
508 604 },
509 - wrapper = $(this).closest('#smush-metabox-inside-wrapper');
605 + wrapper = target.closest('#smush-metabox-inside-wrapper')
606 + data = {selected_images: [ image ]};
510 607
511 - update_view_modal_message(wposmush.please_updating_images_info);
608 + if (mark === false) {
609 + data.unmark = true;
610 + }
611 +
612 + e.preventDefault();
613 +
614 + block_ui(wposmush.please_updating_images_info);
615 +
616 + smush_manager_send_command('mark_as_compressed', data, function(response) {
512 617
513 - smush_manager_send_command('mark_as_compressed', {selected_images: [ image ], unmark: true}, function(response) {
514 618 $('#smush-information-modal .smush-information').text(response.summary);
515 - update_view_modal_message($('#smush-information-modal'), $.unblockUI);
516 619
620 + block_ui('', $.extend(block_ui_custom_options, {message: $('#smush-information-modal')}));
621 +
517 622 if (response.status) {
518 - $('.wpo_smush_single_image', wrapper).show();
519 - $('.wpo_smush_mark_single_image', wrapper).show();
520 - $('.wpo_smush_unmark_single_image', wrapper).hide();
521 - $('.wpo_restore_single_image', wrapper).hide();
522 - $('#smush_info', wrapper).text('');
623 + if (wrapper.length) {
624 + if (mark) {
625 + $('.wpo_smush_single_image', wrapper).hide();
626 + $('.wpo-toggle-advanced-options', wrapper).removeClass('opened');
627 + $('.wpo_smush_mark_single_image', wrapper).hide();
628 + $('.wpo_smush_unmark_single_image', wrapper).show();
629 + $('.wpo_restore_single_image', wrapper).show();
630 + $('#smush_info', wrapper).text(response.info);
631 + } else {
632 + $('.wpo_smush_single_image', wrapper).show();
633 + $('.wpo_smush_mark_single_image', wrapper).show();
634 + $('.wpo_smush_unmark_single_image', wrapper).hide();
635 + $('.wpo_restore_single_image', wrapper).hide();
636 + $('#smush_info', wrapper).text(response.info);
637 + }
638 + }
639 +
640 + if (response.hasOwnProperty('media_column_html')) {
641 + update_smush_information_media_library_column(blog_id, attachment_id, response.media_column_html);
642 + }
523 643 }
524 644 });
525 - });
645 + }
526 646
647 +
527 648 $('body').on('click', '#wpo_smush_details .wpo-collapsible', toggle_smush_details);
528 649 $('body').on('click', '.column-wpo_smush .wpo-collapsible', toggle_smush_details);
529 650
530 651 function toggle_smush_details() {
@@ -537,14 +658,29 @@
537 658 }
538 659
539 660 $('body').on('click', '#smush-log-modal .close, #smush-information-modal .information-modal-close', function() {
540 661 $.unblockUI();
662 + if (smush_from_media_library) {
663 + reset_bulk_actions_dropdown();
664 + }
541 665 });
542 666
543 667 $('body').on('click', '.wpo_smush_stats_cta_btn, .wpo_smush_get_logs, #smush-complete-summary .close', function() {
544 668 $.unblockUI();
545 - get_info_from_smush_manager();
546 - setTimeout(reset_view_bulk_smush, 500);
669 + if (smush_from_media_library) {
670 + var selected_images_list = get_media_library_selected_images_list();
671 + smush_manager_send_command('get_smush_details', {selected_images: selected_images_list}, function(response) {
672 + if (response.success) {
673 + window.clearInterval(smush_timer_handle);
674 + update_media_library_screen(response.smush_details);
675 + } else {
676 + console.log(response)
677 + }
678 + });
679 + } else {
680 + get_info_from_smush_manager();
681 + setTimeout(reset_view_bulk_smush, 500);
682 + }
547 683 });
548 684
549 685 $('body').on('click', '.wpo-toggle-advanced-options', function(e) {
550 686 e.preventDefault();
@@ -550,9 +686,9 @@
550 686 e.preventDefault();
551 687 $(this).toggleClass('opened');
552 688 });
553 689
554 - $('.wpo-fieldgroup .autosmush input, .wpo-fieldgroup .compression_level, .wpo-fieldgroup .image_options, #smush-show-metabox, #enable_webp_conversion').on('change', function(e) {
690 + $('.wpo-fieldgroup .autosmush input, .wpo-fieldgroup .compression_level, .wpo-fieldgroup .image_options, #smush-show-metabox').on('change', function(e) {
555 691 save_options();
556 692 });
557 693
558 694 $('body').on('change', '.smush-options.compression_level', function() {
@@ -566,8 +702,61 @@
566 702 $('body').on('change', '.smush-advanced input[type="radio"]', function() {
567 703 update_view_available_options();
568 704 });
569 705
706 + $('#enable_webp_conversion').on('change', function(e) {
707 + // only save when changing the options on the wpo dashboard.
708 + if (!$('#wp-optimize-wrap').length) return;
709 +
710 + $('#wpo_smush_images_save_options_spinner').show().delay(3000).fadeOut();
711 + $('#enable_webp_conversion').prop("disabled", true);
712 +
713 + var smush_options = get_smush_options();
714 + // Skip default notice and use popup to show error messages
715 + smush_options.skip_notice = true;
716 +
717 + smush_manager_send_command('update_webp_options', smush_options, function(resp) {
718 + $('#wpo_smush_images_save_options_spinner').hide();
719 + if (resp.hasOwnProperty('saved') && resp.saved) {
720 + $('#wpo_smush_images_save_options_done').show().delay(3000).fadeOut();
721 + } else {
722 + $('#enable_webp_conversion').prop("checked", false);
723 + if ('update_failed_no_working_webp_converter' === resp.error_code) {
724 + var html_msg = '<p>'
725 + + wposmush.webp_conversion_tool_error
726 + + ' <a href="https://teamupdraft.com/documentation/wp-optimize/topics/image-compression/troubleshooting/the-webp-conversion-tool-is-not-working/" target="_blank">'
727 + + wposmush.webp_conversion_tool_how_to
728 + + '</a></p>';
729 + $('#smush-information-modal .smush-information').html(html_msg);
730 + } else {
731 + $('#smush-information-modal .smush-information').text(resp.error_message);
732 + }
733 + block_ui('', $.extend(block_ui_custom_options, {message: $('#smush-information-modal')}), false, true);
734 + }
735 + $('#enable_webp_conversion').prop("disabled", false);
736 + });
737 + });
738 +
739 + $('body').on('click', '.wpo_smush.column-wpo_smush .convert-to-webp', function(e){
740 + e.preventDefault();
741 + var $link = $(this);
742 + data = {
743 + 'attachment_id': $(this).data('attachment-id'),
744 + skip_notice: true
745 + };
746 + block_ui(wposmush.converting_to_webp, {}, 0, true);
747 + smush_manager_send_command('convert_to_webp_format', data, function(response) {
748 + if (response.success) {
749 + block_ui(response.success, {}, 2000);
750 + $link.next().remove();
751 + if ($link.prev().is('.wpo-action-separator')) $link.prev().remove();
752 + $link.remove();
753 + } else {
754 + block_ui(response.error || response.error_message || wposmush.server_error , {}, 2000);
755 + }
756 + });
757 + });
758 +
570 759 /**
571 760 * Load and show information about uncompressed images.
572 761 *
573 762 * @param {Boolean} use_cache Use the request cache
@@ -579,18 +768,25 @@
579 768 var use_cache = (typeof use_cache === 'undefined') ? true : use_cache;
580 769 var data = { 'use_cache': use_cache };
581 770
582 771 smush_images_optimization_message.html('...');
583 - smush_images_pending_tasks_container.hide();
584 772
585 773 disable_image_optimization_controls(true);
586 774
587 - smush_manager_send_command('get_ui_update', data, function(resp) {
588 - handle_response_from_smush_manager(resp, update_view_show_uncompressed_images);
589 - update_view_available_options();
590 - disable_image_optimization_controls(false);
591 - update_smush_action_buttons_state();
592 - });
775 + heartbeat_agents.push(heartbeat.add_agent({
776 + _wait: false,
777 + _keep: false,
778 + command: 'updraft_smush_ajax',
779 + command_data: {data: data, subaction: 'get_ui_update'},
780 + callback: function(resp) {
781 + handle_response_from_smush_manager(resp, update_view_show_uncompressed_images);
782 + update_view_available_options();
783 + disable_image_optimization_controls(false);
784 + update_smush_action_buttons_state();
785 + }
786 + }));
787 +
788 + uncompressed_images_already_loaded = true;
593 789 }
594 790
595 791
596 792 /**
@@ -620,9 +816,14 @@
620 816 }
621 817 }
622 818
623 819 update_view_bulk_smush_start();
624 - smush_manager_send_command('process_bulk_smush', data);
820 + heartbeat_agents.push(heartbeat.add_agent({
821 + _wait: false,
822 + _keep: false,
823 + command: 'updraft_smush_ajax',
824 + command_data: {data: data, subaction: 'process_bulk_smush'}
825 + }));
625 826 }
626 827
627 828 /**
628 829 * Save options in the DB
@@ -640,12 +841,10 @@
640 841 smush_manager_send_command('update_smush_options', smush_options, function(resp) {
641 842 $('#wpo_smush_images_save_options_spinner').hide();
642 843 if (resp.hasOwnProperty('saved') && resp.saved) {
643 844 $('#wpo_smush_images_save_options_done').show().delay(3000).fadeOut();
644 - smush_images_save_options_btn.hide();
645 845 } else {
646 846 $('#wpo_smush_images_save_options_fail').show().delay(3000).fadeOut();
647 - smush_images_save_options_btn.show();
648 847 }
649 848 });
650 849 }
651 850
@@ -671,17 +870,26 @@
671 870 *
672 871 * @return void
673 872 */
674 873 function trigger_events(time_elapsed) {
675 -
676 874 if (0 == time_elapsed % 3) {
677 - update_smush_stats();
875 + update_smush_stats(time_elapsed);
678 876 }
679 877
680 878 if (0 == time_elapsed % 60) {
681 - smush_manager_send_command('process_pending_images', {}, function(resp) {
682 - handle_response_from_smush_manager(resp, update_view_bulk_smush_progress);
683 - });
879 + if (null != last_ui_update_agent_uid) {
880 + heartbeat.cancel_agent(last_ui_update_agent_uid);
881 + last_ui_update_agent_uid = null;
882 + }
883 +
884 + heartbeat_agents.push(heartbeat.add_agent({
885 + _wait: false,
886 + command: 'updraft_smush_ajax',
887 + command_data: {data: {}, subaction: 'process_pending_images'},
888 + callback: function(resp) {
889 + handle_response_from_smush_manager(resp, update_view_bulk_smush_progress);
890 + }
891 + }));
684 892 }
685 893 }
686 894
687 895 /**
@@ -686,30 +894,41 @@
686 894
687 895 /**
688 896 * Updates the UI with stats
689 897 *
690 - * @param {Boolean} use_cache Use the request cache
898 + * @param {Int} time_elapsed Elapsed time since process start
691 899 *
692 900 * @return void
693 901 */
694 - function update_smush_stats(use_cache) {
695 -
696 - var use_cache = (typeof use_cache === 'undefined') ? true : use_cache;
697 -
902 + function update_smush_stats(time_elapsed) {
698 903 data = {
699 904 update_ui: true,
700 905 use_cache: false
701 906 }
702 907
703 - smush_manager_send_command('get_ui_update', data, function(resp) {
704 - handle_response_from_smush_manager(resp, update_view_bulk_smush_progress);
908 + var initial_requests = time_elapsed < 5;
909 +
910 + var agent = heartbeat.add_agent({
911 + _wait: !initial_requests,
912 + _keep: false,
913 + command: 'updraft_smush_ajax',
914 + command_data: {data: data, subaction: 'get_ui_update'},
915 + callback: function(resp) {
916 + handle_response_from_smush_manager(resp, update_view_bulk_smush_progress);
917 + }
705 918 });
919 +
920 + if (null !== agent) {
921 + last_ui_update_agent_uid = agent;
922 +
923 + heartbeat_agents.push(agent);
924 + }
706 925 }
707 926
708 927 /**
709 928 * Update images optimization tab view with data returned from images optimization.
710 929 *
711 - * @param {Object} data - meta data returned from task manager
930 + * @param {Object} data - metadata returned from task manager
712 931 *
713 932 * @return void
714 933 */
715 934 function update_view_show_uncompressed_images(data) {
@@ -716,35 +935,52 @@
716 935 smush_images_grid.html('');
717 936
718 937 if (!data || !data.hasOwnProperty('unsmushed_images')) return;
719 938
720 - var unsmushed_images = data.unsmushed_images;
721 - var pending_tasks = data.pending_tasks;
939 + var unsmushed_images = data.unsmushed_images,
940 + pending_tasks = data.pending_tasks,
941 + blog_id = 0;
722 942
723 - if (0 == data.unsmushed_images.length && 0 == data.pending_tasks) {
943 + if (0 == unsmushed_images.length && 0 == pending_tasks) {
724 944 smush_images_grid.text(wposmush.all_images_compressed).wrapInner("<div class='wpo-fieldgroup'> </div>");
725 945 }
726 946
727 - if (0 != data.pending_tasks) {
728 - smush_images_pending_tasks_container.show().find('.red').text(data.pending);
947 + if (1 === data.is_multisite) {
948 + blog_id = uncompressed_images_sites_select.find(":selected").val();
949 + add_unsmushed_images_to_grid(blog_id, data);
950 + } else {
951 + for (blog_id in data.unsmushed_images) {
952 + add_unsmushed_images_to_grid(blog_id, data);
953 + }
729 954 }
955 + }
730 956
957 + function sort_unsmushed_images(a, b) {
958 + return a.id - b.id;
959 + }
960 +
961 + function add_unsmushed_images_to_grid(blog_id, data) {
731 962 // Used to have upload.php?item= on multisite (using data.is_multisite), and no suffix
732 - var admin_url_pre_id = 'post.php?post=';
733 - var admin_url_post_id = '&action=edit';
734 -
735 - for (blog_id in data.unsmushed_images) {
736 - data.unsmushed_images[blog_id].sort(function(a, b) {
737 - return a.id - b.id;
738 - });
739 - for (i in data.unsmushed_images[blog_id]) {
740 - if (!data.unsmushed_images[blog_id].hasOwnProperty(i)) continue;
741 - image = data.unsmushed_images[blog_id][i];
742 - add_image_to_grid(image, blog_id, data.admin_urls[blog_id] + admin_url_pre_id + image.id + admin_url_post_id);
743 - }
963 + var admin_url_pre_id = 'post.php?post=',
964 + admin_url_post_id = '&action=edit',
965 + admin_url = data.admin_urls[blog_id],
966 + unsmushed_images = data.unsmushed_images[blog_id];
967 +
968 + if ('undefined' !== typeof unsmushed_images) {
969 + unsmushed_images.sort(sort_unsmushed_images);
744 970 }
971 +
972 + for (i in unsmushed_images) {
973 + if (!unsmushed_images.hasOwnProperty(i)) continue;
974 + var image = unsmushed_images[i];
975 + add_image_to_grid(image, blog_id, admin_url + admin_url_pre_id + image.id + admin_url_post_id);
976 + }
745 977 }
746 978
979 + uncompressed_images_sites_select.on('change', function() {
980 + get_info_from_smush_manager();
981 + });
982 +
747 983 /**
748 984 * Updates the view when bulk smush starts
749 985 *
750 986 * @return void
@@ -750,22 +986,45 @@
750 986 * @return void
751 987 */
752 988 function update_view_bulk_smush_start() {
753 989 if (smush_timer_locked) return;
754 - update_view_modal_message($('#wpo_smush_images_information_container'));
755 990
756 - service = $('.compression_server input[type="radio"]:checked + label small').text();
757 - $('#wpo_smush_images_information_server').html(service);
991 + block_ui('', $.extend(block_ui_custom_options, {message: $('#wpo_smush_images_information_container')}), false, true);
758 992
759 - // Clear stats
993 + clear_smush_stats();
994 +
995 + smush_timer_handle = window.setInterval(smush_timer, 1000);
996 + disable_image_optimization_controls(true);
997 + }
998 +
999 + /**
1000 + * Clears the statistics for image smushing in popup.
1001 + *
1002 + * This function clears the statistics displayed on the popup for image smushing.
1003 + *
1004 + * @returns {void}
1005 + */
1006 + function clear_smush_stats() {
760 1007 $('#smush_stats_pending_images').html("...");
761 1008 $('#smush_stats_completed_images').html("...");
762 1009 $('#smush_stats_bytes_saved').html("...");
763 1010 $('#smush_stats_percent_saved').html("...");
764 1011 $('#smush_stats_timer').html("...");
1012 + }
765 1013
766 - smush_timer_handle = window.setInterval(smush_timer, 1000);
767 - disable_image_optimization_controls(true);
1014 + /**
1015 + * Updates the media library screen with the provided smush details.
1016 + *
1017 + * @param {Object} smush_details - The details of the smushed images
1018 + * @return {void}
1019 + */
1020 + function update_media_library_screen(smush_details) {
1021 + for (var image_id in smush_details) {
1022 + if(smush_details.hasOwnProperty(image_id)) {
1023 + $('#post-' + image_id + ' .column-wpo_smush').html(smush_details[image_id]);
1024 + }
1025 + }
1026 + reset_bulk_actions_dropdown();
768 1027 }
769 1028
770 1029 /**
771 1030 * Updates the view with progress related stats
@@ -784,9 +1043,11 @@
784 1043
785 1044 // Show summary and close the modal
786 1045 if (true == resp.smush_complete) {
787 1046 // Force a delay here to avoid stale data
788 - setTimeout(update_view_bulk_smush_complete, 1500);
1047 + setTimeout(function() {
1048 + update_view_bulk_smush_complete(function() { get_info_from_smush_manager(false); });
1049 + }, 1500);
789 1050 }
790 1051 }
791 1052
792 1053 /**
@@ -793,26 +1054,45 @@
793 1054 * Updates the view when bulk smush completes
794 1055 *
795 1056 * @return void
796 1057 */
797 - function update_view_bulk_smush_complete() {
1058 + function update_view_bulk_smush_complete(callback) {
798 1059
799 1060 data = {
800 1061 update_ui: true,
801 1062 use_cache: false,
802 1063 image_list: smush_image_list
803 - }
1064 + };
804 1065
805 - smush_manager_send_command('get_ui_update', data, function(resp) {
1066 + (function(single_callback) {
1067 + heartbeat_agents.push(heartbeat.add_agent({
1068 + // We have to use a non-unique agent in the complete action because the info update subactions
1069 + // have the same names, and the agent may not be added. This ensures that the "smush_complete" action will run.
1070 + _unique: false,
1071 + _wait: false,
1072 + _keep: false,
1073 + command: 'updraft_smush_ajax',
1074 + command_data: {data: data, subaction: 'get_ui_update'},
1075 + callback: function(resp) {
806 1076
807 - summary = resp.session_stats;
1077 + summary = resp.session_stats;
1078 + // Prevent pops with undefined headers
1079 + if (!resp.session_stats) {
1080 + return;
1081 + }
808 1082
809 - if (0 != resp.completed_task_count) {
810 - summary += '<hr>' + resp.summary;
1083 + if (0 != resp.completed_task_count) {
1084 + summary += '<hr>' + resp.summary;
1085 + }
1086 +
1087 + show_smush_summary(summary);
1088 +
1089 + if (single_callback instanceof Function) {
1090 + single_callback();
1091 + }
811 1092 }
812 -
813 - show_smush_summary(summary);
814 - });
1093 + }));
1094 + })(callback);
815 1095 }
816 1096
817 1097 /**
818 1098 * Displays a modal with compression data
@@ -826,10 +1106,12 @@
826 1106 if (smush_completed) return;
827 1107
828 1108 $('#summary-message').html(summary);
829 1109 reset_view_bulk_smush();
830 - update_view_modal_message($('#smush-complete-summary'));
1110 + block_ui('', $.extend(block_ui_custom_options, {message: $('#smush-complete-summary')}));
831 1111 smush_completed = true;
1112 +
1113 + heartbeat.cancel_agents(heartbeat_agents);
832 1114 }
833 1115
834 1116 /**
835 1117 * Updates the view when bulk smush completes
@@ -841,9 +1123,12 @@
841 1123 smush_total_seconds = 0;
842 1124 smush_timer_locked = false;
843 1125 smush_completed = false;
844 1126 smush_image_list = [];
845 - window.clearInterval(smush_timer_handle);
1127 +
1128 + heartbeat.cancel_agents(heartbeat_agents);
1129 + clearInterval(smush_timer_handle);
1130 +
846 1131 disable_image_optimization_controls(false);
847 1132 }
848 1133
849 1134 /**
@@ -905,11 +1190,9 @@
905 1190 $.each([
906 1191 smush_selected_images_btn,
907 1192 smush_images_select_all_btn,
908 1193 smush_images_select_none_btn,
909 - smush_images_save_options_btn,
910 1194 smush_images_refresh_btn,
911 - smush_images_pending_tasks_btn,
912 1195 smush_mark_as_compressed_btn,
913 1196 ], function(i, el) {
914 1197 el.prop('disabled', disable);
915 1198 });
@@ -937,12 +1220,13 @@
937 1220 if (0 == selected_image.length) return;
938 1221
939 1222 data = {
940 1223 selected_image: selected_image,
941 - smush_options: smush_options
1224 + smush_options: smush_options,
1225 + skip_notice: true
942 1226 }
943 1227
944 - update_view_modal_message(wposmush.compress_single_image_dialog);
1228 + block_ui(wposmush.compress_single_image_dialog, {}, false, true);
945 1229 smush_manager_send_command('compress_single_image', data, function(resp) {
946 1230 handle_response_from_smush_manager(resp, update_view_single_image_complete);
947 1231 });
948 1232 }
@@ -949,23 +1233,37 @@
949 1233
950 1234 /**
951 1235 * Get selected image and make an ajax request to compress it.
952 1236 *
953 - * @param {Number} blog_id - The blog id
954 - * @param {Number} selected_image - The image id
1237 + * @param {Number} blog_id - The blog id
1238 + * @param {Number} selected_image - The image id
1239 + * @param {Function} done_callback - Optional. It will be called when the AJAX command is done, used for multiple calls that need a single `done` action (like bulk_restore)
955 1240 *
956 1241 * @return void
957 1242 */
958 - function restore_selected_image(blog_id, selected_image) {
1243 + function restore_selected_image(blog_id, selected_image, done_callback) {
959 1244
960 1245 // if no selected images then exit.
961 1246 if (0 == selected_image.length) return;
962 1247
963 - update_view_modal_message(wposmush.please_wait, $.unblockUI);
964 - var data = { 'blog_id': blog_id, 'selected_image': selected_image };
965 - smush_manager_send_command('restore_single_image', data, function(resp) {
966 - handle_response_from_smush_manager(resp, update_view_single_image_complete);
967 - });
1248 + block_ui(wposmush.please_wait);
1249 + var data = { 'blog_id': blog_id, 'selected_image': selected_image, skip_notice: true };
1250 +
1251 + smush_manager_send_command.apply({unique: false}, ['restore_single_image', data, function(resp) {
1252 + var done = function(resp_summary_alt) {
1253 + if ('undefined' != typeof(resp_summary_alt)) {
1254 + resp.summary = resp_summary_alt;
1255 + }
1256 +
1257 + handle_response_from_smush_manager(resp, update_view_single_image_complete);
1258 + }
1259 +
1260 + if (done_callback instanceof Function) {
1261 + done_callback(done);
1262 + } else {
1263 + done();
1264 + }
1265 + }]);
968 1266 }
969 1267
970 1268 /**
971 1269 * Updates the view once a single image is compressed or restored.
@@ -977,9 +1275,9 @@
977 1275 function update_view_single_image_complete(resp) {
978 1276
979 1277 if (resp.hasOwnProperty('success') && resp.success) {
980 1278 $(".smush-information").text(resp.summary);
981 - update_view_modal_message($("#smush-information-modal"), $.unblockUI);
1279 + block_ui('', $.extend(block_ui_custom_options, {message: $("#smush-information-modal")}));
982 1280
983 1281 $('.wpo-toggle-advanced-options.wpo_smush_single_image').removeClass('opened');
984 1282
985 1283 update_view_singe_image_compress(resp.operation, resp.summary, resp.restore_possible, resp);
@@ -992,8 +1290,12 @@
992 1290
993 1291 if (!smush_affected_images.hasOwnProperty(blog_id)) smush_affected_images[blog_id] = {};
994 1292 if (!smush_affected_images[blog_id].hasOwnProperty(image_id)) smush_affected_images[blog_id][image_id] = {};
995 1293
1294 + if (resp.hasOwnProperty('media_column_html')) {
1295 + update_smush_information_media_library_column(blog_id, image_id, resp.media_column_html);
1296 + }
1297 +
996 1298 if ('compress' == resp.operation) {
997 1299 smush_affected_images[blog_id][image_id] = {
998 1300 operation: resp.operation,
999 1301 summary: resp.summary,
@@ -999,19 +1301,34 @@
999 1301 summary: resp.summary,
1000 1302 restore_possible: resp.restore_possible
1001 1303 }
1002 1304 } else {
1305 + if (image_id) {
1306 + reset_bulk_actions_dropdown();
1307 + }
1003 1308 smush_affected_images[blog_id][image_id] = {
1004 1309 operation: resp.operation
1005 1310 }
1006 1311 }
1007 1312 } else {
1008 - $(".smush-information").text(resp.error_message);
1009 - update_view_modal_message($("#smush-information-modal"), $.unblockUI);
1313 + // Update the error message to be user-friendly
1314 + if (/exceeded_max_filesize/.test(resp.error_message)) resp.error_message = wposmush.exceeded_max_filesize
1315 + block_ui(resp.error_message, {}, 4000);
1010 1316 }
1011 1317 }
1012 1318
1013 1319 /**
1320 + * Update information for the WP-Optimize column in the Media Library.
1321 + *
1322 + * @param {number} blog_id
1323 + * @param {number} image_id
1324 + * @param {string} html
1325 + */
1326 + function update_smush_information_media_library_column(blog_id, image_id, html) {
1327 + $(['.wpo-smush-media-library-column[data-blog="',blog_id,'"][data-id="',image_id,'"]'].join('')).parent().html(html);
1328 + }
1329 +
1330 + /**
1014 1331 * Update metabox view depending on a command response.
1015 1332 *
1016 1333 * @param {string} operation
1017 1334 * @param {string} summary
@@ -1020,8 +1337,10 @@
1020 1337 */
1021 1338 function update_view_singe_image_compress(operation, summary, restore_possible, smush_image_data) {
1022 1339 var wrapper = $("#smush_info").closest('#smush-metabox-inside-wrapper');
1023 1340
1341 + if (0 === wrapper.length) return;
1342 +
1024 1343 if ('compress' == operation) {
1025 1344 $(".wpo_smush_single_image").hide();
1026 1345 $(".wpo_restore_single_image").show();
1027 1346
@@ -1068,30 +1387,8 @@
1068 1387 }
1069 1388 });
1070 1389
1071 1390 /**
1072 - * Display a modal message
1073 - *
1074 - * @param {string} message The message or element to display
1075 - * @param {Function} callback Called when the overlay is clicked
1076 - *
1077 - * @return void
1078 - */
1079 - function update_view_modal_message(message, callback) {
1080 -
1081 - $.blockUI({
1082 - message: message,
1083 - onOverlayClick: callback,
1084 - baseZ: 160001,
1085 - css: {
1086 - width: '400px',
1087 - padding: '20px',
1088 - cursor: 'pointer'
1089 - }
1090 - });
1091 - }
1092 -
1093 - /**
1094 1391 * Check returned response from the smush manager and call update view callback.
1095 1392 *
1096 1393 * @param {Object} resp - response from smush manager.
1097 1394 * @param {Function} update_view_callback - callback function to update view.
@@ -1105,8 +1402,41 @@
1105 1402 alert(wposmush.error_unexpected_response);
1106 1403 console.log(resp);
1107 1404 }
1108 1405 }
1406 +
1407 + /**
1408 + * Retrieves the selected images from the media library.
1409 + *
1410 + * @return {jQuery} - The selected images as a jQuery object.
1411 + */
1412 + function get_media_library_selected_images() {
1413 + return $('input[name="media[]"]:checked');
1414 + }
1415 +
1416 + /**
1417 + * Retrieves the list of selected images from the media library.
1418 + *
1419 + * @return {Array.<number>} The list of selected image IDs.
1420 + */
1421 + function get_media_library_selected_images_list() {
1422 + var selected_images_list = [];
1423 + var $selected_images = get_media_library_selected_images();
1424 + $selected_images.each(function(index, element) {
1425 + selected_images_list.push(parseInt(element.value));
1426 + });
1427 + return selected_images_list;
1428 + }
1429 +
1430 + /**
1431 + * Resets the bulk action dropdown by setting its value to "-1" and unchecking all the selected checkboxes.
1432 + *
1433 + * @returns {void}
1434 + */
1435 + function reset_bulk_actions_dropdown() {
1436 + $('#bulk-action-selector-top, #bulk-action-selector-bottom').val("-1");
1437 + $('input[name="media[]"]:checked, #cb-select-all-1, #cb-select-all-2').prop('checked', false);
1438 + }
1109 1439
1110 1440 /**
1111 1441 * Send an action to the task manager via admin-ajax.php.
1112 1442 *
@@ -1113,60 +1443,53 @@
1113 1443 * @param {string} action The action to send
1114 1444 * @param {[type]} data Data to send
1115 1445 * @param {Function} callback Will be called with the results
1116 1446 * @param {boolean} json_parse JSON parse the results
1447 + * @param {boolean} wait Wait for the response
1117 1448 *
1118 1449 * @return {JSON}
1119 1450 */
1120 - function smush_manager_send_command(action, data, callback, json_parse) {
1451 + function smush_manager_send_command(action, data, callback, json_parse, wait) {
1121 1452
1122 1453 json_parse = ('undefined' === typeof json_parse) ? true : json_parse;
1123 - data = $.isEmptyObject(data) ? {'use_cache' : false} : data;
1454 + var _wait = ('undefined' === typeof wait) ? false : wait;
1124 1455
1125 - var ajax_data = {
1126 - action: 'updraft_smush_ajax',
1127 - subaction: action,
1128 - nonce: wposmush.smush_ajax_nonce,
1129 - data: data
1130 - };
1456 + var skip_notice = data.hasOwnProperty('skip_notice');
1457 + var data_has_only_skip_notice = skip_notice && 1 === Object.keys(data).length;
1458 + var is_data_empty = $.isEmptyObject(data);
1131 1459
1132 - var ajax_opts = {
1133 - type: 'POST',
1134 - url: ajaxurl,
1135 - data: ajax_data,
1136 - success: function(response) {
1460 + data = is_data_empty ? {'use_cache' : false} : data;
1461 + if (data_has_only_skip_notice) data.use_cache = false;
1137 1462
1138 - if (json_parse) {
1139 - try {
1140 - var resp = wpo_parse_json(response);
1141 - } catch (e) {
1142 - console.log("smush_manager_send_command JSON parse error");
1143 - console.log(e);
1144 - console.log(response);
1145 - alert(wposmush.error_unexpected_response);
1463 + (function(single_callback, _keep, _unique) {
1464 + heartbeat_agents.push(heartbeat.add_agent({
1465 + _wait: _wait,
1466 + _keep: _keep,
1467 + _unique: _unique,
1468 + command: 'updraft_smush_ajax',
1469 + command_data: {data: data, subaction: action},
1470 + callback: function(response) {
1471 + if (json_parse) {
1472 + try {
1473 + var resp = wpo_parse_json(response);
1474 + } catch (e) {
1475 + console.log("smush_manager_send_command JSON parse error");
1476 + console.log(e);
1477 + console.log(response);
1478 + alert(wposmush.error_unexpected_response);
1479 + }
1480 + if ('undefined' !== typeof single_callback) single_callback(resp);
1481 + } else {
1482 + if ('undefined' !== typeof single_callback) single_callback(response);
1146 1483 }
1147 - if ('undefined' !== typeof callback) callback(resp);
1148 - } else {
1149 - if ('undefined' !== typeof callback) callback(response);
1150 1484 }
1151 - },
1152 - error: function(response, status, error_code) {
1153 - console.log("smush_manager_send_command AJAX parse error: "+status+" ("+error_code+")");
1154 - if ('undefined' !== typeof callback) {
1155 - callback(response);
1156 - } else {
1157 - console.log(response);
1158 - alert(wposmush.error_unexpected_response);
1159 - }
1160 - },
1161 - dataType: 'text'
1485 + }));
1486 + })(callback, this.keep, this.unique);
1487 + };
1162 1488
1163 - }
1489 + // Attach heartbeat API events
1490 + heartbeat.setup();
1164 1491
1165 - $.ajax(ajax_opts);
1166 -
1167 - };
1168 -
1169 1492 // Gather smush options
1170 1493 var get_smush_options = function() {
1171 1494 var image_quality = '';
1172 1495 if ($('#enable_custom_compression').is(":checked")) {
@@ -1172,11 +1495,11 @@
1172 1495 if ($('#enable_custom_compression').is(":checked")) {
1173 1496 image_quality = $('#custom_compression_slider').val();
1174 1497 } else {
1175 1498 // The '90' here has to be kept in sync with WP_Optimize::admin_page_wpo_images_smush()
1176 - image_quality = $('#enable_lossy_compression').is(":checked") ? 60 : 100;
1499 + image_quality = $('#enable_lossy_compression').is(":checked") ? 60 : 92;
1177 1500 }
1178 - var lossy_compression = image_quality < 100 ? true : false;
1501 + var lossy_compression = image_quality < 92 ? true : false;
1179 1502
1180 1503 return {
1181 1504 'compression_server': $("input[name='compression_server']:checked").val(),
1182 1505 'image_quality': image_quality,
@@ -1192,78 +1515,4 @@
1192 1515 }
1193 1516 wp_optimize.smush_settings = get_smush_options;
1194 1517 } // END WP_Optimize_Smush
1195 1518
1196 -/**
1197 - * Parse JSON string, including automatically detecting unwanted extra input and skipping it
1198 - *
1199 - * @param {string|object} json_mix_str - JSON string which need to parse and convert to object
1200 - *
1201 - * @throws SyntaxError|String (including passing on what JSON.parse may throw) if a parsing error occurs.
1202 - *
1203 - * @return mixed parsed JSON object. Will only return if parsing is successful (otherwise, will throw)
1204 - */
1205 -function wpo_parse_json(json_mix_str) {
1206 - // When using wp_send_json to return the value, the format is already parsed.
1207 - if ('object' === typeof json_mix_str) return json_mix_str;
1208 -
1209 - // Just try it - i.e. the 'default' case where things work (which can include extra whitespace/line-feeds, and simple strings, etc.).
1210 - try {
1211 - var result = JSON.parse(json_mix_str);
1212 - return result;
1213 - } catch (e) {
1214 - console.log("WPO: Exception when trying to parse JSON (1) - will attempt to fix/re-parse");
1215 - console.log(json_mix_str);
1216 - }
1217 -
1218 - var json_start_pos = json_mix_str.indexOf('{');
1219 - var json_last_pos = json_mix_str.lastIndexOf('}');
1220 -
1221 - // Case where some php notice may be added after or before json string
1222 - if (json_start_pos > -1 && json_last_pos > -1) {
1223 - var json_str = json_mix_str.slice(json_start_pos, json_last_pos + 1);
1224 - try {
1225 - var parsed = JSON.parse(json_str);
1226 - return parsed;
1227 - } catch (e) {
1228 - console.log("WPO: Exception when trying to parse JSON (2) - will attempt to fix/re-parse based upon bracket counting");
1229 -
1230 - var cursor = json_start_pos;
1231 - var open_count = 0;
1232 - var last_character = '';
1233 - var inside_string = false;
1234 -
1235 - // Don't mistake this for a real JSON parser. Its aim is to improve the odds in real-world cases seen, not to arrive at universal perfection.
1236 - while ((open_count > 0 || cursor == json_start_pos) && cursor <= json_last_pos) {
1237 -
1238 - var current_character = json_mix_str.charAt(cursor);
1239 -
1240 - if (!inside_string && '{' == current_character) {
1241 - open_count++;
1242 - } else if (!inside_string && '}' == current_character) {
1243 - open_count--;
1244 - } else if ('"' == current_character && '\\' != last_character) {
1245 - inside_string = inside_string ? false : true;
1246 - }
1247 -
1248 - last_character = current_character;
1249 - cursor++;
1250 - }
1251 -
1252 - console.log("Started at cursor="+json_start_pos+", ended at cursor="+cursor+" with result following:");
1253 - console.log(json_mix_str.substring(json_start_pos, cursor));
1254 -
1255 - try {
1256 - var parsed = JSON.parse(json_mix_str.substring(json_start_pos, cursor));
1257 - // console.log('WPO: JSON re-parse successful');
1258 - return parsed;
1259 - } catch (e) {
1260 - // Throw it again, so that our function works just like JSON.parse() in its behaviour.
1261 - throw e;
1262 - }
1263 -
1264 - }
1265 - }
1266 -
1267 - throw "WPO: could not parse the JSON";
1268 -
1269 -}