bulk-optimization.js
241 lines
| 1 | (function() { |
| 2 | function updateProgressBar(successFullCompressions) { |
| 3 | var totalToOptimize = parseInt(jQuery("div#compression-progress-bar").data("number-to-optimize")) |
| 4 | |
| 5 | var optimizedSoFar = parseInt(jQuery("#optimized-so-far").text()) |
| 6 | jQuery("#optimized-so-far").html(successFullCompressions + optimizedSoFar) |
| 7 | |
| 8 | var percentage = "100%" |
| 9 | if (totalToOptimize > 0) { |
| 10 | percentage = Math.round((successFullCompressions + optimizedSoFar) / totalToOptimize * 100, 1) + "%" |
| 11 | } |
| 12 | jQuery("div#compression-progress-bar #progress-size").css("width", percentage) |
| 13 | jQuery("div#compression-progress-bar #percentage").html("(" + percentage + ")") |
| 14 | |
| 15 | var numberToOptimize = parseInt(jQuery("#optimizable-image-sizes").html()) |
| 16 | jQuery("#optimizable-image-sizes").html(numberToOptimize - successFullCompressions) |
| 17 | } |
| 18 | |
| 19 | function updateSavings(successFullCompressions, successFullSaved, newHumanReadableLibrarySize) { |
| 20 | |
| 21 | window.currentLibraryBytes = window.currentLibraryBytes + successFullSaved |
| 22 | |
| 23 | var imagesSizedOptimized = parseInt(jQuery("#optimized-image-sizes").text()) + successFullCompressions |
| 24 | var initialLibraryBytes = parseInt(jQuery("#unoptimized-library-size").data("bytes")) |
| 25 | var percentage = (1 - window.currentLibraryBytes / initialLibraryBytes) |
| 26 | var chartSize = jQuery("div#optimization-chart").data("full-circle-size") |
| 27 | |
| 28 | jQuery("#optimized-image-sizes").html(imagesSizedOptimized) |
| 29 | jQuery("#optimized-library-size").attr("data-bytes", window.currentLibraryBytes) |
| 30 | jQuery("#optimized-library-size").html(newHumanReadableLibrarySize) |
| 31 | jQuery("#savings-percentage").html(Math.round(percentage * 1000) / 10 + "%") |
| 32 | jQuery("div#optimization-chart svg circle.main").css("stroke-dasharray", "" + (chartSize * percentage) + " " + chartSize) |
| 33 | |
| 34 | } |
| 35 | |
| 36 | function handleCancellation() { |
| 37 | jQuery("div#bulk-optimization-actions").hide() |
| 38 | jQuery("div.progress").css("animation", "none") |
| 39 | } |
| 40 | |
| 41 | function updateRowAfterCompression(row, data) { |
| 42 | var successFullCompressions = parseInt(data.success) |
| 43 | var successFullSaved = parseInt(data.size_change) |
| 44 | var newHumanReadableLibrarySize = data.human_readable_library_size |
| 45 | if (successFullCompressions == 0) { |
| 46 | row.find(".status").html(tinyCompress.L10nNoActionTaken) |
| 47 | } else { |
| 48 | row.find(".status").html(successFullCompressions + " " + tinyCompress.L10nCompressed) |
| 49 | updateProgressBar(successFullCompressions); |
| 50 | updateSavings(successFullCompressions, successFullSaved, newHumanReadableLibrarySize) |
| 51 | } |
| 52 | } |
| 53 | |
| 54 | function bulkOptimizationCallback(error, data, items, i) { |
| 55 | if (window.optimizationCancelled) { |
| 56 | handleCancellation(); |
| 57 | } |
| 58 | |
| 59 | var row = jQuery("#optimization-items tr").eq(parseInt(i)+1) |
| 60 | |
| 61 | if (error) { |
| 62 | row.addClass("failed") |
| 63 | row.find(".status").html(tinyCompress.L10nInternalError + "<br>" + error.toString()) |
| 64 | row.find(".status").attr("title", error.toString()) |
| 65 | } else if (data == null) { |
| 66 | row.addClass("failed") |
| 67 | row.find(".status").html(tinyCompress.L10nCancelled) |
| 68 | } else if (data.error) { |
| 69 | row.addClass("failed") |
| 70 | row.find(".status").html(tinyCompress.L10nError + "<br>" + data.error) |
| 71 | row.find(".status").attr("title", data.error) |
| 72 | } else if (data.failed > 0) { |
| 73 | row.addClass("failed") |
| 74 | row.find(".status").html("<span class=\"icon dashicons dashicons-no error\"></span><span class=\"message\">" + tinyCompress.L10nLatestError + ": " + data.message + "</span>"); |
| 75 | row.find(".status").attr("title", data.message) |
| 76 | } else { |
| 77 | row.addClass("success") |
| 78 | updateRowAfterCompression(row, data) |
| 79 | } |
| 80 | |
| 81 | row.find(".name").html(items[i].post_title + "<button class=\"toggle-row\" type=\"button\"><span class=\"screen-reader-text\">" + tinyCompress.L10nShowMoreDetails + "</span></button>") |
| 82 | |
| 83 | if (!data.image_sizes_optimized) { |
| 84 | data.image_sizes_optimized = "-"; |
| 85 | } |
| 86 | if (!data.initial_total_size) { |
| 87 | data.initial_total_size = "-"; |
| 88 | } |
| 89 | if (!data.optimized_total_size) { |
| 90 | data.optimized_total_size = "-"; |
| 91 | } |
| 92 | if (!data.savings || data.savings == 0) { |
| 93 | data.savings = "-"; |
| 94 | } else { |
| 95 | data.savings += "%"; |
| 96 | } |
| 97 | |
| 98 | row.find(".thumbnail").html(data.thumbnail) |
| 99 | row.find(".sizes-optimized").html(data.image_sizes_optimized) |
| 100 | row.find(".initial-size").html(data.initial_total_size) |
| 101 | row.find(".optimized-size").html(data.optimized_total_size) |
| 102 | row.find(".savings").html(data.savings) |
| 103 | |
| 104 | if (items[++i]) { |
| 105 | if (!window.optimizationCancelled) { |
| 106 | drawSomeRows(items, 1); |
| 107 | } |
| 108 | bulkOptimizeItem(items, i) |
| 109 | } else { |
| 110 | var message = jQuery("<div class=\"updated\"><p></p></div>") |
| 111 | message.find("p").html(tinyCompress.L10nAllDone) |
| 112 | message.insertAfter(jQuery("#tiny-bulk-optimization h1")) |
| 113 | jQuery("div#optimization-spinner").css("display", "none") |
| 114 | jQuery("div.progress").css("width", "100%") |
| 115 | jQuery("div#bulk-optimization-actions").hide() |
| 116 | jQuery("div.progress").css("animation", "none") |
| 117 | } |
| 118 | } |
| 119 | |
| 120 | function bulkOptimizeItem(items, i) { |
| 121 | if (window.optimizationCancelled) { |
| 122 | return; |
| 123 | } |
| 124 | |
| 125 | var item = items[i] |
| 126 | var row = jQuery("#optimization-items tr").eq(parseInt(i)+1) |
| 127 | row.find(".status").removeClass("todo") |
| 128 | row.find(".status").html(tinyCompress.L10nCompressing) |
| 129 | jQuery.ajax({ |
| 130 | url: ajaxurl, |
| 131 | type: "POST", |
| 132 | dataType: "json", |
| 133 | data: { |
| 134 | _nonce: tinyCompress.nonce, |
| 135 | action: "tiny_compress_image_for_bulk", |
| 136 | id: items[i].ID, |
| 137 | current_size: window.currentLibraryBytes |
| 138 | }, |
| 139 | success: function(data) { bulkOptimizationCallback(null, data, items, i)}, |
| 140 | error: function(xhr, textStatus, errorThrown) { bulkOptimizationCallback(errorThrown, null, items, i) } |
| 141 | }) |
| 142 | jQuery("#tiny-progress span").html(i + 1) |
| 143 | } |
| 144 | |
| 145 | function prepareBulkOptimization(items) { |
| 146 | window.allBulkOptimizationItems = items |
| 147 | updateProgressBar(0) |
| 148 | } |
| 149 | |
| 150 | function startBulkOptimization(items) { |
| 151 | window.optimizationCancelled = false |
| 152 | window.totalRowsDrawn = 0 |
| 153 | window.currentLibraryBytes = parseInt(jQuery("#optimized-library-size").data("bytes")) |
| 154 | |
| 155 | jQuery("div.progress").css("animation", "progress-bar 80s linear infinite") |
| 156 | jQuery("div#optimization-spinner").css("display", "inline-block") |
| 157 | updateProgressBar(0) |
| 158 | drawSomeRows(items, 10) |
| 159 | bulkOptimizeItem(items, 0) |
| 160 | } |
| 161 | |
| 162 | function drawSomeRows(items, rowsToDraw) { |
| 163 | var list = jQuery("#optimization-items tbody") |
| 164 | var row |
| 165 | for (var drawNow = window.totalRowsDrawn; drawNow < Math.min( rowsToDraw + window.totalRowsDrawn, items.length); drawNow++) { |
| 166 | row = jQuery("<tr class=\"media-item\">" + |
| 167 | "<th class=\"thumbnail\" />" + |
| 168 | "<td class=\"column-primary name\" />" + |
| 169 | "<td class=\"column-author sizes-optimized\" data-colname=\"" + tinyCompress.L10nSizesOptimized + "\" ></>" + |
| 170 | "<td class=\"column-author initial-size\" data-colname=\"" + tinyCompress.L10nInitialSize + "\" ></>" + |
| 171 | "<td class=\"column-author optimized-size\" data-colname=\"" + tinyCompress.L10nCurrentSize + "\" ></>" + |
| 172 | "<td class=\"column-author savings\" data-colname=\"" + tinyCompress.L10nSavings + "\" ></>" + |
| 173 | "<td class=\"status todo\" data-colname=\"" + tinyCompress.L10nStatus + "\" />" + |
| 174 | "</tr>") |
| 175 | row.find(".status").html(tinyCompress.L10nWaiting) |
| 176 | row.find(".name").html(items[drawNow].post_title) |
| 177 | list.append(row) |
| 178 | } |
| 179 | window.totalRowsDrawn = drawNow |
| 180 | } |
| 181 | |
| 182 | function cancelOptimization() { |
| 183 | window.optimizationCancelled = true; |
| 184 | jQuery("div#optimization-spinner").css("display", "none"); |
| 185 | jQuery(jQuery("#optimization-items tr td.status.todo")).html(tinyCompress.L10nCancelled) |
| 186 | jQuery("div#bulk-optimization-actions input").removeClass("visible") |
| 187 | jQuery("div#bulk-optimization-actions input#id-cancelling").addClass("visible") |
| 188 | } |
| 189 | |
| 190 | jQuery("div#bulk-optimization-actions input").click(function() { |
| 191 | if ((jQuery(this).attr("id") == "id-start") && jQuery(this).hasClass("visible")) { |
| 192 | jQuery("div#bulk-optimization-actions input#id-start").removeClass("visible") |
| 193 | jQuery("div#bulk-optimization-actions input#id-optimizing").addClass("visible") |
| 194 | startBulkOptimization(window.allBulkOptimizationItems); |
| 195 | } |
| 196 | if ((jQuery(this).attr("id") == "id-cancel") && jQuery(this).hasClass("visible")) { |
| 197 | cancelOptimization(); |
| 198 | } |
| 199 | }); |
| 200 | |
| 201 | jQuery("div#bulk-optimization-actions input").hover(function() { |
| 202 | if ((jQuery(this).attr("id") == "id-optimizing") && jQuery(this).hasClass("visible")) { |
| 203 | window.lastActiveButton = jQuery("div#bulk-optimization-actions input.visible") |
| 204 | lastActiveButton.removeClass("visible") |
| 205 | jQuery("div#bulk-optimization-actions input#id-cancel").addClass("visible") |
| 206 | } |
| 207 | }, function() { |
| 208 | if ((jQuery(this).attr("id") == "id-cancel") && jQuery(this).hasClass("visible")) { |
| 209 | window.lastActiveButton.addClass("visible") |
| 210 | jQuery("div#bulk-optimization-actions input#id-cancel").removeClass("visible") |
| 211 | } |
| 212 | }); |
| 213 | |
| 214 | function attachToolTipEventHandlers() { |
| 215 | var tooltip = '#tiny-bulk-optimization div.tooltip' |
| 216 | var tip = 'div.tip' |
| 217 | var toolTipTimeout = null |
| 218 | jQuery(tooltip).mouseleave(function(){ |
| 219 | var that = this |
| 220 | toolTipTimeout = setTimeout(function() { |
| 221 | if (jQuery(that).find(tip).is(':visible')) { |
| 222 | jQuery(tooltip).find(tip).hide() |
| 223 | } |
| 224 | }, 100) |
| 225 | }) |
| 226 | jQuery(tooltip).mouseenter(function(){ |
| 227 | jQuery(this).find(tip).show() |
| 228 | clearTimeout(toolTipTimeout) |
| 229 | }) |
| 230 | jQuery(tooltip).find(tip).mouseenter(function(){ |
| 231 | clearTimeout(toolTipTimeout) |
| 232 | }) |
| 233 | } |
| 234 | |
| 235 | attachToolTipEventHandlers() |
| 236 | |
| 237 | window.bulkOptimizationAutorun = startBulkOptimization |
| 238 | window.bulkOptimization = prepareBulkOptimization |
| 239 | |
| 240 | }).call() |
| 241 |