PluginProbe
Autoptimize / 3.0.3
Autoptimize v3.0.3
2.2.2 2.3.0 2.3.1 2.3.2 2.3.3 2.3.4 2.4.0 2.4.1 2.4.2 2.4.3 2.4.4 2.5.0 2.5.1 2.6.0 2.6.1 2.6.2 2.7.0 2.7.1 2.7.2 2.7.3 2.7.4 2.7.5 2.7.6 2.7.7 2.7.8 All 107 releases
autoptimize / classes / critcss-inc / admin_settings_rules.js.php

admin_settings_rules.js.php in Autoptimize 3.0.3, at classes/critcss-inc/admin_settings_rules.js.php

438 lines 17.9 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
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 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 rnotice = 0;
41 jQuery.each(critCssArray,function(k,v) {
42 if (k=="paths") {
43 kstring="<?php _e( 'Path Based Rules', 'autoptimize' ); ?>";
44 } else {
45 kstring="<?php _e( 'Conditional Tags, Custom Post Types and Page Templates Rules', 'autoptimize' ); ?>";
46 }
47 if (!(jQuery.isEmptyObject(v))) {
48 jQuery("#rules-list").append("<tr><td colspan='5'><h4>" + kstring + "</h4></td></tr>");
49 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>");
50 }
51 nodeNumber=0;
52 jQuery.each(v,function(i,nv){
53 nodeNumber++;
54 nodeId=k + "_" + nodeNumber;
55 hash=nv.hash;
56 file=nv.file;
57 filest=nv.file;
58 auto_style = '';
59 <?php
60 $criticalcss = new autoptimizeCriticalCSSBase();
61 if ( $criticalcss->is_api_active() ){
62 ?>api_active = 1;<?php
63 } else {
64 ?>api_active = 0;<?php
65 }
66 ?>
67 if (file == 0) {
68 file='<?php _e( 'To be fetched from criticalcss.com in the next queue run...', 'autoptimize' ); ?>';
69 }
70 if (nv.hash === 0 && filest != 0) {
71 type='<?php _e( 'MANUAL', 'autoptimize' ); ?>';
72 typeClass = 'manual';
73 } else {
74 type='<?php _e( 'AUTO', 'autoptimize' ); ?>';
75 typeClass = 'auto';
76 if ( api_active != 1 ) {
77 auto_style = ' style="opacity:.5;" '
78 }
79 }
80 if (file && typeof file == 'string') {
81 rmark_find=file.split('_');
82 if (rmark_find[2] || rmark_find[2] == 'R.css') {
83 rnotice = rnotice + 1;
84 }
85 }
86 if ( k == "paths" ) {
87 target = '<a href="<?php echo AUTOPTIMIZE_WP_SITE_URL; ?>' + i + '" target="_blank">' + i + '</a>';
88 } else {
89 target = i.replace(/(woo_|template_|custom_post_|edd_|bp_|bbp_)/,'');
90 }
91
92 jQuery("#rules-list").append("<tr " + auto_style + "class='rule "+k+"Rule'><td class='type'><span class='badge " + typeClass + "'>" + type + "</span></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>");
93 if ( typeClass == 'manual' || api_active == 1 ) {
94 jQuery("#" + nodeId + "_edit").click(function(){addEditRow(this.id);});
95 }
96 jQuery("#" + nodeId + "_remove").click(function(){confirmRemove(this.id);});
97 })
98 });
99 if ( rnotice && rnotice != 0 ) {
100 // R rules were found, show a notice!
101 // and add some JS magic to ensure the notice works as a notice, but is shown inline
102 // in the rules panel instead of in the notice area where it would be too prominent.
103 <?php
104 $_ao_ccss_review_notice_id = 'autoptimize-ccss-review-rules-notice-30';
105 // Translators: before the 1st word a number + a space will be displayed, as in e.g. "2 of above rules".
106 $_ao_ccss_review_notice_copy = __('of the above rules got flagged by criticalcss.com as to be reviewed. This is often due to font-related issues which can be safely ignored, but you can log in to your account at https://criticalcss.com and compare screenshots for rules by clicking the red exclamation mark to confirm if all is OK.', 'autoptimize');
107 if ( PAnD::is_admin_notice_active( $_ao_ccss_review_notice_id ) ) {
108 ?>
109 jQuery("#rules-notices").append( "&nbsp;<div class='rnotice notice notice-info is-dismissible hidden' data-dismissible='<?php echo $_ao_ccss_review_notice_id; ?>'><p>" + rnotice + " <?php echo $_ao_ccss_review_notice_copy; ?>" + "</p></div>");
110 jQuery( document ).ready(function() {
111 jQuery("div.rnotice").detach().appendTo('#rules-notices');
112 jQuery("div.rnotice").show();
113 });
114 <?php
115 } else {
116 ?>
117 console.log( "Autoptimize: " + rnotice + " <?php echo $_ao_ccss_review_notice_copy; ?>" );
118 <?php
119 }
120 ?>
121 }
122 }
123
124 function confirmRemove(idToRemove) {
125 jQuery( "#confirm-rm" ).dialog({
126 resizable: false,
127 height:235,
128 modal: true,
129 buttons: {
130 "<?php _e( 'Delete', 'autoptimize' ); ?>": function() {
131 removeRow(idToRemove);
132 updateAfterChange();
133 jQuery( this ).dialog( "close" );
134 },
135 "<?php _e( 'Cancel', 'autoptimize' ); ?>": function() {
136 jQuery( this ).dialog( "close" );
137 }
138 }
139 });
140 }
141
142 function removeAllRules() {
143 jQuery( "#confirm-rm-all" ).dialog({
144 resizable: false,
145 height:235,
146 modal: true,
147 buttons: {
148 "<?php _e( 'Delete All', 'autoptimize' ); ?>": function() {
149 critCssArray={'paths':[],'types':[]};
150 drawTable(critCssArray);
151 updateAfterChange();
152 removeAllCcssFilesOnServer();
153 jQuery( this ).dialog( "close" );
154 },
155 "<?php _e( 'Cancel', 'autoptimize' ); ?>": function() {
156 jQuery( this ).dialog( "close" );
157 }
158 }
159 });
160 }
161
162 function removeRow(idToRemove) {
163 splits=idToRemove.split(/_/);
164 crit_type=splits[0];
165 crit_item=splits[1];
166 crit_key=Object.keys(critCssArray[crit_type])[crit_item-1];
167 crit_file=critCssArray[crit_type][crit_key].file;
168 delete critCssArray[crit_type][crit_key];
169
170 var data = {
171 'action': 'rm_critcss',
172 'critcss_rm_nonce': '<?php echo wp_create_nonce( 'rm_critcss_nonce' ); ?>',
173 'cachebustingtimestamp': new Date().getTime(),
174 'critcssfile': crit_file
175 };
176
177 jQuery.ajaxSetup({
178 async: false
179 });
180
181 jQuery.post(ajaxurl, data, function(response) {
182 response_array=JSON.parse(response);
183 if (response_array["code"]!=200) {
184 // not displaying notice, as the end result is OK; the file isn't there
185 // displayNotice(response_array["string"]);
186 }
187 });
188 }
189
190 function removeAllCcssFilesOnServer() {
191 var data = {
192 'action': 'rm_critcss_all',
193 'critcss_rm_all_nonce': '<?php echo wp_create_nonce( 'rm_critcss_all_nonce' ); ?>',
194 'cachebustingtimestamp': new Date().getTime()
195 };
196
197 jQuery.ajaxSetup({
198 async: false
199 });
200
201 jQuery.post(ajaxurl, data, function(response) {
202 response_array=JSON.parse(response);
203 if (response_array["code"]!=200) {
204 // not displaying notice, as the end result is OK; the file isn't there
205 // displayNotice(response_array["string"]);
206 }
207 });
208 }
209
210 function addEditRow(idToEdit) {
211 resetForm();
212 if (idToEdit) {
213 dialogTitle="<?php _e( 'Edit Critical CSS Rule', 'autoptimize' ); ?>";
214
215 splits=idToEdit.split(/_/);
216 crit_type=splits[0];
217 crit_item=splits[1];
218 crit_key=Object.keys(critCssArray[crit_type])[crit_item-1];
219 crit_file=critCssArray[crit_type][crit_key].file;
220
221 jQuery("#critcss_addedit_id").val(idToEdit);
222 jQuery("#critcss_addedit_type").val(crit_type);
223 jQuery("#critcss_addedit_file").val(crit_file);
224 jQuery("#critcss_addedit_css").attr("placeholder", "<?php _e( 'Loading critical CSS...', 'autoptimize' ); ?>");
225 jQuery("#critcss_addedit_type").attr("disabled",true);
226
227 if (crit_type==="paths") {
228 jQuery("#critcss_addedit_path").val(crit_key);
229 jQuery("#critcss_addedit_path_wrapper").show();
230 jQuery("#critcss_addedit_pagetype_wrapper").hide();
231 } else {
232 jQuery("#critcss_addedit_pagetype").val(crit_key);
233 jQuery("#critcss_addedit_pagetype_wrapper").show();
234 jQuery("#critcss_addedit_path_wrapper").hide();
235 }
236
237 var data = {
238 'action': 'fetch_critcss',
239 'critcss_fetch_nonce': '<?php echo wp_create_nonce( 'fetch_critcss_nonce' ); ?>',
240 'cachebustingtimestamp': new Date().getTime(),
241 'critcssfile': crit_file
242 };
243
244 jQuery.post(ajaxurl, data, function(response) {
245 response_array=JSON.parse(response);
246 if (response_array["code"]==200) {
247 jQuery("#critcss_addedit_css").val(response_array["string"]);
248 } else {
249 jQuery("#critcss_addedit_css").attr("placeholder", "").focus();
250 }
251 });
252 } else {
253 dialogTitle="<?php _e( 'Add Critical CSS Rule', 'autotimize' ); ?>";
254
255 // default: paths, hide content type field
256 jQuery("#critcss_addedit_type").val("paths");
257 jQuery("#critcss_addedit_pagetype_wrapper").hide();
258
259 // event handler on type to switch display
260 jQuery("#critcss_addedit_type").on('change', function (e) {
261 if(this.value==="types") {
262 jQuery("#critcss_addedit_pagetype_wrapper").show();
263 jQuery("#critcss_addedit_path_wrapper").hide();
264 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' ); ?>");
265 } else {
266 jQuery("#critcss_addedit_path_wrapper").show();
267 jQuery("#critcss_addedit_pagetype_wrapper").hide();
268 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' ); ?>");
269 }
270 });
271 }
272
273 jQuery("#addEditCritCss").dialog({
274 autoOpen: true,
275 height: 500,
276 width: 700,
277 title: dialogTitle,
278 modal: true,
279 buttons: {
280 "<?php _e( 'Submit', 'autoptimize' ); ?>": function() {
281 rpath = jQuery("#critcss_addedit_path").val();
282 rtype = jQuery("#critcss_addedit_pagetype option:selected").val();
283 rccss = jQuery("#critcss_addedit_css").val();
284 console.log('rpath: ' + rpath, 'rtype: ' + rtype, 'rccss: ' + rccss);
285 if (rpath === '' && rtype === '') {
286 alert('<?php _e( "RULE VALIDATION ERROR!\\n\\nBased on your rule type, you SHOULD set a path or conditional tag.", 'autoptimize' ); ?>');
287 } else if (rtype !== '' && rccss == '') {
288 alert('<?php _e( "RULE VALIDATION ERROR!\\n\\nType based rules REQUIRES a minified critical CSS.", 'autoptimize' ); ?>');
289 } else {
290 saveEditCritCss();
291 jQuery(this).dialog('close');
292 }
293 },
294 "<?php _e( 'Cancel', 'autoptimize' ); ?>": function() {
295 resetForm();
296 jQuery(this).dialog("close");
297 }
298 }
299 });
300 }
301
302 function editDefaultCritCss(){
303 document.getElementById("dummyDefault").value=document.getElementById("autoptimize_css_defer_inline").value;
304 jQuery("#default_critcss_wrapper").dialog({
305 autoOpen: true,
306 height: 505,
307 width: 700,
308 title: "<?php _e( 'Default Critical CSS', 'autoptimize' ); ?>",
309 modal: true,
310 buttons: {
311 "<?php _e( 'Submit', 'autoptimize' ); ?>": function() {
312 document.getElementById("autoptimize_css_defer_inline").value=document.getElementById("dummyDefault").value;
313 jQuery("#unSavedWarning").show();
314 jQuery("#default_critcss_wrapper").dialog( "close" );
315 },
316 "<?php _e( 'Cancel', 'autoptimize' ); ?>": function() {
317 jQuery("#default_critcss_wrapper").dialog( "close" );
318 }
319 }
320 });
321 }
322
323 function editAdditionalCritCss(){
324 document.getElementById("dummyAdditional").value=document.getElementById("autoptimize_ccss_additional").value;
325 jQuery("#additional_critcss_wrapper").dialog({
326 autoOpen: true,
327 height: 505,
328 width: 700,
329 title: "<?php _e( 'Additional Critical CSS', 'autoptimize' ); ?>",
330 modal: true,
331 buttons: {
332 "<?php _e( 'Submit', 'autoptimize' ); ?>": function() {
333 document.getElementById("autoptimize_ccss_additional").value=document.getElementById("dummyAdditional").value;
334 jQuery("#unSavedWarning").show();
335 jQuery("#additional_critcss_wrapper").dialog( "close" );
336 },
337 "<?php _e( 'Cancel', 'autoptimize' ); ?>": function() {
338 jQuery("#additional_critcss_wrapper").dialog( "close" );
339 }
340 }
341 });
342 }
343
344 function saveEditCritCss(){
345 critcssfile=jQuery("#critcss_addedit_file").val();
346 critcsscontents=jQuery("#critcss_addedit_css").val();
347 critcsstype=jQuery("#critcss_addedit_type").val();
348 critcssid=jQuery("#critcss_addedit_id").val();
349
350 if (critcssid) {
351 // this was an "edit" action, so remove original
352 // will also remove the file, but that will get rewritten anyway
353 removeRow(critcssid);
354 }
355 if (critcsstype==="types") {
356 critcsstarget=jQuery("#critcss_addedit_pagetype").val();
357 } else {
358 critcsstarget=jQuery("#critcss_addedit_path").val();
359 }
360
361 if (!critcssfile && !critcsscontents) {
362 critcssfile=0;
363 } else if (!critcssfile && critcsscontents) {
364 critcssfile="ccss_" + md5(critcsscontents+critcsstarget) + ".css";
365 }
366
367 // Compose the rule object
368 critCssArray[critcsstype][critcsstarget]={};
369 critCssArray[critcsstype][critcsstarget].hash=0;
370 critCssArray[critcsstype][critcsstarget].file=critcssfile;
371
372 <?php
373 if ( $ao_ccss_debug ) {
374 echo "console.log('[RULE PROPERTIES] Type:', critcsstype, ', Target:', critcsstarget, ', Hash:', 0, ', File:', critcssfile);";
375 }
376 ?>
377
378 updateAfterChange();
379
380 var data = {
381 'action': 'save_critcss',
382 'critcss_save_nonce': '<?php echo wp_create_nonce( 'save_critcss_nonce' ); ?>',
383 'critcssfile': critcssfile,
384 'critcsscontents': critcsscontents
385 };
386
387 jQuery.post(ajaxurl, data, function(response) {
388 response_array=JSON.parse(response);
389 if (response_array["code"]!=200) {
390 displayNotice(response_array["string"]);
391 }
392 });
393 }
394
395 function updateAfterChange() {
396 document.getElementById("critCssOrigin").value=JSON.stringify(critCssArray);
397 drawTable(critCssArray);
398
399 <?php
400 // autosave rules is on by default, but can be disabled with a filter.
401 if ( apply_filters( 'autoptimize_filter_ccss_settings_rules_autosave', true ) ) {
402 ?>
403 var data = {
404 'action': 'ao_ccss_saverules',
405 'ao_ccss_saverules_nonce': '<?php echo wp_create_nonce( 'ao_ccss_saverules_nonce' ); ?>',
406 'critcssrules': document.getElementById("critCssOrigin").value
407 };
408
409 jQuery.post(ajaxurl, data, function(response) {
410 response_array=JSON.parse(response);
411 if (response_array["code"]!=200) {
412 displayNotice(response_array["msg"]);
413 jQuery("#unSavedWarning").show();
414 }
415 });
416 <?php } else { ?>
417 jQuery("#unSavedWarning").show();
418 <?php } ?>
419
420 document.getElementById('ao_title_and_button').scrollIntoView();
421 }
422
423 function displayNotice(textIn, level = 'error') {
424 jQuery('<div class="notice notice-' + level + ' notice is-dismissible"><p>'+textIn+'</p></div>').insertBefore("#unSavedWarning");
425 document.getElementById('ao_title_and_button').scrollIntoView();
426 }
427
428 function resetForm() {
429 jQuery("#critcss_addedit_css").attr("placeholder", "<?php _e( 'For path based rules, paste your specific and minified critical CSS. If you want to create a rule to exclude from critical CSS injection, enter \"none\"', 'autoptimize' ); ?>");
430 jQuery("#critcss_addedit_type").attr("disabled",false);
431 jQuery("#critcss_addedit_path_wrapper").show();
432 jQuery("#critcss_addedit_id").val("");
433 jQuery("#critcss_addedit_path").val("");
434 jQuery("#critcss_addedit_file").val("");
435 jQuery("#critcss_addedit_pagetype").val("");
436 jQuery("#critcss_addedit_css").val("");
437 }
438