| 1 |
<?php |
| 2 |
/** |
| 3 |
* Outputs JS code for the rules panel. |
| 4 |
*/ |
| 5 |
|
| 6 |
if ( $ao_ccss_debug ) { |
| 7 |
echo "console.log('[WARN] Autoptimize CriticalCSS Power-Up is in DEBUG MODE!');\n"; |
| 8 |
echo "console.log('[WARN] Avoid using debug mode on production/live environments unless for ad-hoc troubleshooting purposes and make sure to disable it after!');\n"; |
| 9 |
} |
| 10 |
?> |
| 11 |
|
| 12 |
var rulesOriginEl = document.getElementById("critCssOrigin"); |
| 13 |
var deferInlineEl = document.getElementById("autoptimize_css_defer_inline"); |
| 14 |
var additionalEl = document.getElementById("autoptimize_ccss_additional"); |
| 15 |
if (rulesOriginEl) |
| 16 |
rulesOriginEl.style.display = 'none'; |
| 17 |
if (deferInlineEl) |
| 18 |
deferInlineEl.style.display = 'none'; |
| 19 |
if (additionalEl) |
| 20 |
additionalEl.style.display = 'none'; |
| 21 |
|
| 22 |
if (rulesOriginEl) { |
| 23 |
jQuery(document).ready(function() { |
| 24 |
critCssArray=JSON.parse(document.getElementById("critCssOrigin").value); |
| 25 |
<?php |
| 26 |
if ( $ao_ccss_debug ) { |
| 27 |
echo "console.log('Rules Object:', critCssArray);\n"; |
| 28 |
} |
| 29 |
?> |
| 30 |
drawTable(critCssArray); |
| 31 |
jQuery("#addCritCssButton").click(function(){addEditRow();}); |
| 32 |
jQuery("#editDefaultButton").click(function(){editDefaultCritCss();}); |
| 33 |
jQuery("#editAdditionalButton").click(function(){editAdditionalCritCss();}); |
| 34 |
jQuery("#removeAllRules").click(function(){removeAllRules();}); |
| 35 |
}); |
| 36 |
} |
| 37 |
|
| 38 |
function drawTable(critCssArray) { |
| 39 |
jQuery("#rules-list").empty(); |
| 40 |
jQuery.each(critCssArray,function(k,v) { |
| 41 |
if (k=="paths") { |
| 42 |
kstring="<?php _e( 'Path Based Rules', 'autoptimize' ); ?>"; |
| 43 |
} else { |
| 44 |
kstring="<?php _e( 'Conditional Tags, Custom Post Types and Page Templates Rules', 'autoptimize' ); ?>"; |
| 45 |
} |
| 46 |
if (!(jQuery.isEmptyObject(v))) { |
| 47 |
jQuery("#rules-list").append("<tr><td colspan='5'><h4>" + kstring + "</h4></td></tr>"); |
| 48 |
jQuery("#rules-list").append("<tr class='header "+k+"Rule'><th><?php _e( 'Type', 'autoptimize' ); ?></th><th><?php _e( 'Target', 'autoptimize' ); ?></th><th><?php _e( 'Critical CSS File', 'autoptimize' ); ?></th><th colspan='2'><?php _e( 'Actions', 'autoptimize' ); ?></th></tr>"); |
| 49 |
} |
| 50 |
nodeNumber=0; |
| 51 |
jQuery.each(v,function(i,nv){ |
| 52 |
nodeNumber++; |
| 53 |
nodeId=k + "_" + nodeNumber; |
| 54 |
hash=nv.hash; |
| 55 |
file=nv.file; |
| 56 |
filest=nv.file; |
| 57 |
if (file == 0) { |
| 58 |
file='<?php _e( 'To be fetched from criticalcss.com in the next queue run...', 'autoptimize' ); ?>'; |
| 59 |
} |
| 60 |
if (nv.hash === 0 && filest != 0) { |
| 61 |
type='<?php _e( 'MANUAL', 'autoptimize' ); ?>'; |
| 62 |
typeClass = 'manual'; |
| 63 |
} else { |
| 64 |
type='<?php _e( 'AUTO', 'autoptimize' ); ?>'; |
| 65 |
typeClass = 'auto'; |
| 66 |
} |
| 67 |
if (file && typeof file == 'string') { |
| 68 |
rmark=file.split('_'); |
| 69 |
if (rmark[2] || rmark[2] == 'R.css') { |
| 70 |
rmark = '<span class="badge review rule">R</span>' |
| 71 |
} else { |
| 72 |
rmark = ''; |
| 73 |
} |
| 74 |
} |
| 75 |
if ( k == "paths" ) { |
| 76 |
target = '<a href="<?php echo AUTOPTIMIZE_WP_SITE_URL; ?>' + i + '" target="_blank">' + i + '</a>'; |
| 77 |
} else { |
| 78 |
target = i.replace(/(woo_|template_|custom_post_|edd_|bp_|bbp_)/,''); |
| 79 |
} |
| 80 |
jQuery("#rules-list").append("<tr class='rule "+k+"Rule'><td class='type'><span class='badge " + typeClass + "'>" + type + "</span>" + rmark + "</td><td class='target'>" + target + "</td><td class='file'>" + file + "</td><td class='btn edit'><span class=\"button-secondary\" id=\"" + nodeId + "_edit\"><?php _e( 'Edit', 'autoptimize' ); ?></span></td><td class='btn delete'><span class=\"button-secondary\" id=\"" + nodeId + "_remove\"><?php _e( 'Remove', 'autoptimize' ); ?></span></td></tr>"); |
| 81 |
jQuery("#" + nodeId + "_edit").click(function(){addEditRow(this.id);}); |
| 82 |
jQuery("#" + nodeId + "_remove").click(function(){confirmRemove(this.id);}); |
| 83 |
}) |
| 84 |
}); |
| 85 |
} |
| 86 |
|
| 87 |
function confirmRemove(idToRemove) { |
| 88 |
jQuery( "#confirm-rm" ).dialog({ |
| 89 |
resizable: false, |
| 90 |
height:235, |
| 91 |
modal: true, |
| 92 |
buttons: { |
| 93 |
"<?php _e( 'Delete', 'autoptimize' ); ?>": function() { |
| 94 |
removeRow(idToRemove); |
| 95 |
updateAfterChange(); |
| 96 |
jQuery( this ).dialog( "close" ); |
| 97 |
}, |
| 98 |
"<?php _e( 'Cancel', 'autoptimize' ); ?>": function() { |
| 99 |
jQuery( this ).dialog( "close" ); |
| 100 |
} |
| 101 |
} |
| 102 |
}); |
| 103 |
} |
| 104 |
|
| 105 |
function removeAllRules() { |
| 106 |
jQuery( "#confirm-rm-all" ).dialog({ |
| 107 |
resizable: false, |
| 108 |
height:235, |
| 109 |
modal: true, |
| 110 |
buttons: { |
| 111 |
"<?php _e( 'Delete All', 'autoptimize' ); ?>": function() { |
| 112 |
critCssArray={'paths':[],'types':[]}; |
| 113 |
drawTable(critCssArray); |
| 114 |
updateAfterChange(); |
| 115 |
removeAllCcssFilesOnServer(); |
| 116 |
jQuery( this ).dialog( "close" ); |
| 117 |
}, |
| 118 |
"<?php _e( 'Cancel', 'autoptimize' ); ?>": function() { |
| 119 |
jQuery( this ).dialog( "close" ); |
| 120 |
} |
| 121 |
} |
| 122 |
}); |
| 123 |
} |
| 124 |
|
| 125 |
function removeRow(idToRemove) { |
| 126 |
splits=idToRemove.split(/_/); |
| 127 |
crit_type=splits[0]; |
| 128 |
crit_item=splits[1]; |
| 129 |
crit_key=Object.keys(critCssArray[crit_type])[crit_item-1]; |
| 130 |
crit_file=critCssArray[crit_type][crit_key].file; |
| 131 |
delete critCssArray[crit_type][crit_key]; |
| 132 |
|
| 133 |
var data = { |
| 134 |
'action': 'rm_critcss', |
| 135 |
'critcss_rm_nonce': '<?php echo wp_create_nonce( 'rm_critcss_nonce' ); ?>', |
| 136 |
'cachebustingtimestamp': new Date().getTime(), |
| 137 |
'critcssfile': crit_file |
| 138 |
}; |
| 139 |
|
| 140 |
jQuery.ajaxSetup({ |
| 141 |
async: false |
| 142 |
}); |
| 143 |
|
| 144 |
jQuery.post(ajaxurl, data, function(response) { |
| 145 |
response_array=JSON.parse(response); |
| 146 |
if (response_array["code"]!=200) { |
| 147 |
// not displaying notice, as the end result is OK; the file isn't there |
| 148 |
// displayNotice(response_array["string"]); |
| 149 |
} |
| 150 |
}); |
| 151 |
} |
| 152 |
|
| 153 |
function removeAllCcssFilesOnServer() { |
| 154 |
var data = { |
| 155 |
'action': 'rm_critcss_all', |
| 156 |
'critcss_rm_all_nonce': '<?php echo wp_create_nonce( 'rm_critcss_all_nonce' ); ?>', |
| 157 |
'cachebustingtimestamp': new Date().getTime() |
| 158 |
}; |
| 159 |
|
| 160 |
jQuery.ajaxSetup({ |
| 161 |
async: false |
| 162 |
}); |
| 163 |
|
| 164 |
jQuery.post(ajaxurl, data, function(response) { |
| 165 |
response_array=JSON.parse(response); |
| 166 |
if (response_array["code"]!=200) { |
| 167 |
// not displaying notice, as the end result is OK; the file isn't there |
| 168 |
// displayNotice(response_array["string"]); |
| 169 |
} |
| 170 |
}); |
| 171 |
} |
| 172 |
|
| 173 |
function addEditRow(idToEdit) { |
| 174 |
resetForm(); |
| 175 |
if (idToEdit) { |
| 176 |
dialogTitle="<?php _e( 'Edit Critical CSS Rule', 'autoptimize' ); ?>"; |
| 177 |
|
| 178 |
splits=idToEdit.split(/_/); |
| 179 |
crit_type=splits[0]; |
| 180 |
crit_item=splits[1]; |
| 181 |
crit_key=Object.keys(critCssArray[crit_type])[crit_item-1]; |
| 182 |
crit_file=critCssArray[crit_type][crit_key].file; |
| 183 |
|
| 184 |
jQuery("#critcss_addedit_id").val(idToEdit); |
| 185 |
jQuery("#critcss_addedit_type").val(crit_type); |
| 186 |
jQuery("#critcss_addedit_file").val(crit_file); |
| 187 |
jQuery("#critcss_addedit_css").attr("placeholder", "<?php _e( 'Loading critical CSS...', 'autoptimize' ); ?>"); |
| 188 |
jQuery("#critcss_addedit_type").attr("disabled",true); |
| 189 |
|
| 190 |
if (crit_type==="paths") { |
| 191 |
jQuery("#critcss_addedit_path").val(crit_key); |
| 192 |
jQuery("#critcss_addedit_path_wrapper").show(); |
| 193 |
jQuery("#critcss_addedit_pagetype_wrapper").hide(); |
| 194 |
} else { |
| 195 |
jQuery("#critcss_addedit_pagetype").val(crit_key); |
| 196 |
jQuery("#critcss_addedit_pagetype_wrapper").show(); |
| 197 |
jQuery("#critcss_addedit_path_wrapper").hide(); |
| 198 |
} |
| 199 |
|
| 200 |
var data = { |
| 201 |
'action': 'fetch_critcss', |
| 202 |
'critcss_fetch_nonce': '<?php echo wp_create_nonce( 'fetch_critcss_nonce' ); ?>', |
| 203 |
'cachebustingtimestamp': new Date().getTime(), |
| 204 |
'critcssfile': crit_file |
| 205 |
}; |
| 206 |
|
| 207 |
jQuery.post(ajaxurl, data, function(response) { |
| 208 |
response_array=JSON.parse(response); |
| 209 |
if (response_array["code"]==200) { |
| 210 |
jQuery("#critcss_addedit_css").val(response_array["string"]); |
| 211 |
} else { |
| 212 |
jQuery("#critcss_addedit_css").attr("placeholder", "").focus(); |
| 213 |
} |
| 214 |
}); |
| 215 |
} else { |
| 216 |
dialogTitle="<?php _e( 'Add Critical CSS Rule', 'autotimize' ); ?>"; |
| 217 |
|
| 218 |
// default: paths, hide content type field |
| 219 |
jQuery("#critcss_addedit_type").val("paths"); |
| 220 |
jQuery("#critcss_addedit_pagetype_wrapper").hide(); |
| 221 |
|
| 222 |
// event handler on type to switch display |
| 223 |
jQuery("#critcss_addedit_type").on('change', function (e) { |
| 224 |
if(this.value==="types") { |
| 225 |
jQuery("#critcss_addedit_pagetype_wrapper").show(); |
| 226 |
jQuery("#critcss_addedit_path_wrapper").hide(); |
| 227 |
jQuery("#critcss_addedit_css").attr("placeholder", "<?php _e( 'For type based rules, paste your specific and minified critical CSS here and hit submit to save. If you want to create a rule to exclude from critical CSS injection, enter \"none\".', 'autoptimize' ); ?>"); |
| 228 |
} else { |
| 229 |
jQuery("#critcss_addedit_path_wrapper").show(); |
| 230 |
jQuery("#critcss_addedit_pagetype_wrapper").hide(); |
| 231 |
jQuery("#critcss_addedit_css").attr("placeholder", "<?php _e( 'For path based rules, paste your specific and minified critical CSS here or leave this empty to fetch it from criticalcss.com and hit submit to save. If you want to create a rule to exclude from critical CSS injection, enter \"none\"', 'autoptimize' ); ?>"); |
| 232 |
} |
| 233 |
}); |
| 234 |
} |
| 235 |
|
| 236 |
jQuery("#addEditCritCss").dialog({ |
| 237 |
autoOpen: true, |
| 238 |
height: 500, |
| 239 |
width: 700, |
| 240 |
title: dialogTitle, |
| 241 |
modal: true, |
| 242 |
buttons: { |
| 243 |
"<?php _e( 'Submit', 'autoptimize' ); ?>": function() { |
| 244 |
rpath = jQuery("#critcss_addedit_path").val(); |
| 245 |
rtype = jQuery("#critcss_addedit_pagetype option:selected").val(); |
| 246 |
rccss = jQuery("#critcss_addedit_css").val(); |
| 247 |
console.log('rpath: ' + rpath, 'rtype: ' + rtype, 'rccss: ' + rccss); |
| 248 |
if (rpath === '' && rtype === '') { |
| 249 |
alert('<?php _e( "RULE VALIDATION ERROR!\\n\\nBased on your rule type, you SHOULD set a path or conditional tag.", 'autoptimize' ); ?>'); |
| 250 |
} else if (rtype !== '' && rccss == '') { |
| 251 |
alert('<?php _e( "RULE VALIDATION ERROR!\\n\\nType based rules REQUIRES a minified critical CSS.", 'autoptimize' ); ?>'); |
| 252 |
} else { |
| 253 |
saveEditCritCss(); |
| 254 |
jQuery(this).dialog('close'); |
| 255 |
} |
| 256 |
}, |
| 257 |
"<?php _e( 'Cancel', 'autoptimize' ); ?>": function() { |
| 258 |
resetForm(); |
| 259 |
jQuery(this).dialog("close"); |
| 260 |
} |
| 261 |
} |
| 262 |
}); |
| 263 |
} |
| 264 |
|
| 265 |
function editDefaultCritCss(){ |
| 266 |
document.getElementById("dummyDefault").value=document.getElementById("autoptimize_css_defer_inline").value; |
| 267 |
jQuery("#default_critcss_wrapper").dialog({ |
| 268 |
autoOpen: true, |
| 269 |
height: 505, |
| 270 |
width: 700, |
| 271 |
title: "<?php _e( 'Default Critical CSS', 'autoptimize' ); ?>", |
| 272 |
modal: true, |
| 273 |
buttons: { |
| 274 |
"<?php _e( 'Submit', 'autoptimize' ); ?>": function() { |
| 275 |
document.getElementById("autoptimize_css_defer_inline").value=document.getElementById("dummyDefault").value; |
| 276 |
jQuery("#unSavedWarning").show(); |
| 277 |
jQuery("#default_critcss_wrapper").dialog( "close" ); |
| 278 |
}, |
| 279 |
"<?php _e( 'Cancel', 'autoptimize' ); ?>": function() { |
| 280 |
jQuery("#default_critcss_wrapper").dialog( "close" ); |
| 281 |
} |
| 282 |
} |
| 283 |
}); |
| 284 |
} |
| 285 |
|
| 286 |
function editAdditionalCritCss(){ |
| 287 |
document.getElementById("dummyAdditional").value=document.getElementById("autoptimize_ccss_additional").value; |
| 288 |
jQuery("#additional_critcss_wrapper").dialog({ |
| 289 |
autoOpen: true, |
| 290 |
height: 505, |
| 291 |
width: 700, |
| 292 |
title: "<?php _e( 'Additional Critical CSS', 'autoptimize' ); ?>", |
| 293 |
modal: true, |
| 294 |
buttons: { |
| 295 |
"<?php _e( 'Submit', 'autoptimize' ); ?>": function() { |
| 296 |
document.getElementById("autoptimize_ccss_additional").value=document.getElementById("dummyAdditional").value; |
| 297 |
jQuery("#unSavedWarning").show(); |
| 298 |
jQuery("#additional_critcss_wrapper").dialog( "close" ); |
| 299 |
}, |
| 300 |
"<?php _e( 'Cancel', 'autoptimize' ); ?>": function() { |
| 301 |
jQuery("#additional_critcss_wrapper").dialog( "close" ); |
| 302 |
} |
| 303 |
} |
| 304 |
}); |
| 305 |
} |
| 306 |
|
| 307 |
function saveEditCritCss(){ |
| 308 |
critcssfile=jQuery("#critcss_addedit_file").val(); |
| 309 |
critcsscontents=jQuery("#critcss_addedit_css").val(); |
| 310 |
critcsstype=jQuery("#critcss_addedit_type").val(); |
| 311 |
critcssid=jQuery("#critcss_addedit_id").val(); |
| 312 |
|
| 313 |
if (critcssid) { |
| 314 |
// this was an "edit" action, so remove original |
| 315 |
// will also remove the file, but that will get rewritten anyway |
| 316 |
removeRow(critcssid); |
| 317 |
} |
| 318 |
if (critcsstype==="types") { |
| 319 |
critcsstarget=jQuery("#critcss_addedit_pagetype").val(); |
| 320 |
} else { |
| 321 |
critcsstarget=jQuery("#critcss_addedit_path").val(); |
| 322 |
} |
| 323 |
|
| 324 |
if (!critcssfile && !critcsscontents) { |
| 325 |
critcssfile=0; |
| 326 |
} else if (!critcssfile && critcsscontents) { |
| 327 |
critcssfile="ccss_" + md5(critcsscontents+critcsstarget) + ".css"; |
| 328 |
} |
| 329 |
|
| 330 |
// Compose the rule object |
| 331 |
critCssArray[critcsstype][critcsstarget]={}; |
| 332 |
critCssArray[critcsstype][critcsstarget].hash=0; |
| 333 |
critCssArray[critcsstype][critcsstarget].file=critcssfile; |
| 334 |
|
| 335 |
<?php |
| 336 |
if ( $ao_ccss_debug ) { |
| 337 |
echo "console.log('[RULE PROPERTIES] Type:', critcsstype, ', Target:', critcsstarget, ', Hash:', 0, ', File:', critcssfile);"; |
| 338 |
} |
| 339 |
?> |
| 340 |
|
| 341 |
updateAfterChange(); |
| 342 |
|
| 343 |
var data = { |
| 344 |
'action': 'save_critcss', |
| 345 |
'critcss_save_nonce': '<?php echo wp_create_nonce( 'save_critcss_nonce' ); ?>', |
| 346 |
'critcssfile': critcssfile, |
| 347 |
'critcsscontents': critcsscontents |
| 348 |
}; |
| 349 |
|
| 350 |
jQuery.post(ajaxurl, data, function(response) { |
| 351 |
response_array=JSON.parse(response); |
| 352 |
if (response_array["code"]!=200) { |
| 353 |
displayNotice(response_array["string"]); |
| 354 |
} |
| 355 |
}); |
| 356 |
} |
| 357 |
|
| 358 |
function updateAfterChange() { |
| 359 |
document.getElementById("critCssOrigin").value=JSON.stringify(critCssArray); |
| 360 |
drawTable(critCssArray); |
| 361 |
jQuery("#unSavedWarning").show(); |
| 362 |
document.getElementById('ao_title_and_button').scrollIntoView(); |
| 363 |
} |
| 364 |
|
| 365 |
function displayNotice(textIn) { |
| 366 |
jQuery('<div class="error notice is-dismissable"><p>'+textIn+'</p></div>').insertBefore("#unSavedWarning"); |
| 367 |
} |
| 368 |
|
| 369 |
function resetForm() { |
| 370 |
jQuery("#critcss_addedit_css").attr("placeholder", "<?php _e( 'For path based rules, paste your specific and minified critical CSS here or leave this empty to fetch it from criticalcss.com and hit submit to save. If you want to create a rule to exclude from critical CSS injection, enter \"none\"', 'autoptimize' ); ?>"); |
| 371 |
jQuery("#critcss_addedit_type").attr("disabled",false); |
| 372 |
jQuery("#critcss_addedit_path_wrapper").show(); |
| 373 |
jQuery("#critcss_addedit_id").val(""); |
| 374 |
jQuery("#critcss_addedit_path").val(""); |
| 375 |
jQuery("#critcss_addedit_file").val(""); |
| 376 |
jQuery("#critcss_addedit_pagetype").val(""); |
| 377 |
jQuery("#critcss_addedit_css").val(""); |
| 378 |
} |
| 379 |
|
