← All changes | classes/critcss-inc/admin_settings_rules.js.php +117 -35 2.7.0 → 3.1.16 View file →

		@@ -3,9 +3,9 @@
3	3	* Outputs JS code for the rules panel.
4	4	*/
5	5
6	6	if ( $ao_ccss_debug ) {
7		- echo "console.log('[WARN] Autoptimize CriticalCSS Power-Up is in DEBUG MODE!');\n";
	7	+ echo "console.log('[WARN] Autoptimize CriticalCSS is in debug mode!');\n";
8	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	9	}
10	10	?>
11	11
		@@ -36,17 +36,18 @@
36	36	}
37	37
38	38	function drawTable(critCssArray) {
39	39	jQuery("#rules-list").empty();
	40	+ rnotice = 0;
40	41	jQuery.each(critCssArray,function(k,v) {
41	42	if (k=="paths") {
42		- kstring="<?php _e( 'Path Based Rules', 'autoptimize' ); ?>";
	43	+ kstring="<?php esc_html_e( 'Path Based Rules', 'autoptimize' ); ?>";
43	44	} else {
44		- kstring="<?php _e( 'Conditional Tags, Custom Post Types and Page Templates Rules', 'autoptimize' ); ?>";
	45	+ kstring="<?php esc_html_e( 'Conditional Tags, Custom Post Types and Page Templates Rules', 'autoptimize' ); ?>";
45	46	}
46	47	if (!(jQuery.isEmptyObject(v))) {
47	48	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	+ jQuery("#rules-list").append("<tr class='header "+k+"Rule'><th><?php esc_html_e( 'Type', 'autoptimize' ); ?></th><th><?php esc_html_e( 'Target', 'autoptimize' ); ?></th><th><?php esc_html_e( 'Critical CSS File', 'autoptimize' ); ?></th><th colspan='2'><?php esc_html_e( 'Actions', 'autoptimize' ); ?></th></tr>");
49	50	}
50	51	nodeNumber=0;
51	52	jQuery.each(v,function(i,nv){
52	53	nodeNumber++;
		@@ -53,31 +54,82 @@
53	54	nodeId=k + "_" + nodeNumber;
54	55	hash=nv.hash;
55	56	file=nv.file;
56	57	filest=nv.file;
	58	+ auto_style = '';
	59	+ <?php
	60	+ $criticalcss = new autoptimizeCriticalCSSBase();
	61	+ if ( $criticalcss->is_api_active() ) {
	62	+ echo 'api_active = 1;' . "\n";
	63	+ } else {
	64	+ echo 'api_active = 0;' . "\n";
	65	+ }
	66	+ ?>
57	67	if (file == 0) {
58		- file='<?php _e( 'To be fetched from criticalcss.com in the next queue run...', 'autoptimize' ); ?>';
	68	+ file='<?php esc_html_e( 'To be fetched from criticalcss.com in the next queue run...', 'autoptimize' ); ?>';
59	69	}
60	70	if (nv.hash === 0 && filest != 0) {
61		- type='<?php _e( 'MANUAL', 'autoptimize' ); ?>';
	71	+ type='<?php esc_html_e( 'MANUAL', 'autoptimize' ); ?>';
62	72	typeClass = 'manual';
63	73	} else {
64		- type='<?php _e( 'AUTO', 'autoptimize' ); ?>';
	74	+ type='<?php esc_html_e( 'AUTO', 'autoptimize' ); ?>';
65	75	typeClass = 'auto';
	76	+ if ( api_active != 1 ) {
	77	+ auto_style = ' style="opacity:.5;" '
	78	+ }
66	79	}
67	80	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>'
	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	+ <?php
	88	+ if ( apply_filters( 'autoptimize_filter_ccss_paths_clickable', true ) ) {
	89	+ ?>
	90	+ target = '<a href="<?php echo AUTOPTIMIZE_WP_SITE_URL; ?>' + i + '" target="_blank">' + i + '</a>';
	91	+ <?php
71	92	} else {
72		- rmark = '';
	93	+ ?>
	94	+ target = i;
	95	+ <?php
73	96	}
	97	+ ?>
	98	+ } else {
	99	+ target = i.replace(/(woo_|template_|custom_post_|edd_|bp_|bbp_)/,'');
74	100	}
75		- jQuery("#rules-list").append("<tr class='rule "+k+"Rule'><td class='type'><span class='badge " + typeClass + "'>" + type + "</span>" + rmark + "</td><td class='target'>" + i.replace(/(woo_|template_|custom_post_|edd_|bp_|bbp_)/,'') + "</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>");
76		- jQuery("#" + nodeId + "_edit").click(function(){addEditRow(this.id);});
	101	+
	102	+ 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 esc_html_e( 'Edit', 'autoptimize' ); ?></span></td><td class='btn delete'><span class=\"button-secondary\" id=\"" + nodeId + "_remove\"><?php esc_html_e( 'Remove', 'autoptimize' ); ?></span></td></tr>");
	103	+ if ( typeClass == 'manual' || api_active == 1 ) {
	104	+ jQuery("#" + nodeId + "_edit").click(function(){addEditRow(this.id);});
	105	+ }
77	106	jQuery("#" + nodeId + "_remove").click(function(){confirmRemove(this.id);});
78	107	})
79	108	});
	109	+ if ( rnotice && rnotice != 0 ) {
	110	+ // R rules were found, show a notice!
	111	+ // and add some JS magic to ensure the notice works as a notice, but is shown inline
	112	+ // in the rules panel instead of in the notice area where it would be too prominent.
	113	+ <?php
	114	+ $_ao_ccss_review_notice_id = 'autoptimize-ccss-review-rules-notice-30';
	115	+ // Translators: before the 1st word a number + a space will be displayed, as in e.g. "2 of above rules".
	116	+ $_ao_ccss_review_notice_copy = esc_html__( 'of the above rules got flagged by criticalcss.com as possibly needing review. This is often due to font-related issues which can be safely ignored, but in case of doubt do a visual test or check for Cumulative Layout Shift issues in e.g. Pagespeed Insights.', 'autoptimize' );
	117	+ if ( PAnD::is_admin_notice_active( $_ao_ccss_review_notice_id ) ) {
	118	+ ?>
	119	+ 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>");
	120	+ jQuery( document ).ready(function() {
	121	+ jQuery("div.rnotice").detach().appendTo('#rules-notices');
	122	+ jQuery("div.rnotice").show();
	123	+ });
	124	+ <?php
	125	+ } else if ( $ao_ccss_debug ) {
	126	+ ?>
	127	+ console.log( "Autoptimize: " + rnotice + " <?php echo $_ao_ccss_review_notice_copy; ?>" );
	128	+ <?php
	129	+ }
	130	+ ?>
	131	+ }
80	132	}
81	133
82	134	function confirmRemove(idToRemove) {
83	135	jQuery( "#confirm-rm" ).dialog({
		@@ -84,14 +136,14 @@
84	136	resizable: false,
85	137	height:235,
86	138	modal: true,
87	139	buttons: {
88		- "<?php _e( 'Delete', 'autoptimize' ); ?>": function() {
	140	+ "<?php esc_html_e( 'Delete', 'autoptimize' ); ?>": function() {
89	141	removeRow(idToRemove);
90	142	updateAfterChange();
91	143	jQuery( this ).dialog( "close" );
92	144	},
93		- "<?php _e( 'Cancel', 'autoptimize' ); ?>": function() {
	145	+ "<?php esc_html_e( 'Cancel', 'autoptimize' ); ?>": function() {
94	146	jQuery( this ).dialog( "close" );
95	147	}
96	148	}
97	149	});
		@@ -102,9 +154,9 @@
102	154	resizable: false,
103	155	height:235,
104	156	modal: true,
105	157	buttons: {
106		- "<?php _e( 'Delete All', 'autoptimize' ); ?>": function() {
	158	+ "<?php esc_html_e( 'Delete All', 'autoptimize' ); ?>": function() {
107	159	critCssArray={'paths':[],'types':[]};
108	160	drawTable(critCssArray);
109	161	updateAfterChange();
110	162	removeAllCcssFilesOnServer();
		@@ -109,9 +161,9 @@
109	161	updateAfterChange();
110	162	removeAllCcssFilesOnServer();
111	163	jQuery( this ).dialog( "close" );
112	164	},
113		- "<?php _e( 'Cancel', 'autoptimize' ); ?>": function() {
	165	+ "<?php esc_html_e( 'Cancel', 'autoptimize' ); ?>": function() {
114	166	jQuery( this ).dialog( "close" );
115	167	}
116	168	}
117	169	});
		@@ -167,9 +219,9 @@
167	219
168	220	function addEditRow(idToEdit) {
169	221	resetForm();
170	222	if (idToEdit) {
171		- dialogTitle="<?php _e( 'Edit Critical CSS Rule', 'autoptimize' ); ?>";
	223	+ dialogTitle="<?php esc_html_e( 'Edit Critical CSS Rule', 'autoptimize' ); ?>";
172	224
173	225	splits=idToEdit.split(/_/);
174	226	crit_type=splits[0];
175	227	crit_item=splits[1];
		@@ -178,9 +230,10 @@
178	230
179	231	jQuery("#critcss_addedit_id").val(idToEdit);
180	232	jQuery("#critcss_addedit_type").val(crit_type);
181	233	jQuery("#critcss_addedit_file").val(crit_file);
182		- jQuery("#critcss_addedit_css").attr("placeholder", "<?php _e( 'Loading critical CSS...', 'autoptimize' ); ?>");
	234	+ jQuery("#critcss_addedit_css").attr("placeholder", "<?php esc_html_e( 'Loading critical CSS...', 'autoptimize' ); ?>");
	235	+ jQuery("#critcss_addedit_css").attr("spellcheck",false);
183	236	jQuery("#critcss_addedit_type").attr("disabled",true);
184	237
185	238	if (crit_type==="paths") {
186	239	jQuery("#critcss_addedit_path").val(crit_key);
		@@ -207,12 +260,13 @@
207	260	jQuery("#critcss_addedit_css").attr("placeholder", "").focus();
208	261	}
209	262	});
210	263	} else {
211		- dialogTitle="<?php _e( 'Add Critical CSS Rule', 'autotimize' ); ?>";
	264	+ dialogTitle="<?php esc_html_e( 'Add Critical CSS Rule', 'autoptimize' ); ?>";
212	265
213	266	// default: paths, hide content type field
214	267	jQuery("#critcss_addedit_type").val("paths");
	268	+ jQuery("#critcss_addedit_css").attr("spellcheck",false);
215	269	jQuery("#critcss_addedit_pagetype_wrapper").hide();
216	270
217	271	// event handler on type to switch display
218	272	jQuery("#critcss_addedit_type").on('change', function (e) {
		@@ -218,13 +272,13 @@
218	272	jQuery("#critcss_addedit_type").on('change', function (e) {
219	273	if(this.value==="types") {
220	274	jQuery("#critcss_addedit_pagetype_wrapper").show();
221	275	jQuery("#critcss_addedit_path_wrapper").hide();
222		- 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' ); ?>");
	276	+ jQuery("#critcss_addedit_css").attr("placeholder", "<?php esc_html_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' ); ?>");
223	277	} else {
224	278	jQuery("#critcss_addedit_path_wrapper").show();
225	279	jQuery("#critcss_addedit_pagetype_wrapper").hide();
226		- 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' ); ?>");
	280	+ jQuery("#critcss_addedit_css").attr("placeholder", "<?php esc_html_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' ); ?>");
227	281	}
228	282	});
229	283	}
230	284
		@@ -234,23 +288,27 @@
234	288	width: 700,
235	289	title: dialogTitle,
236	290	modal: true,
237	291	buttons: {
238		- "<?php _e( 'Submit', 'autoptimize' ); ?>": function() {
	292	+ "<?php esc_html_e( 'Submit', 'autoptimize' ); ?>": function() {
239	293	rpath = jQuery("#critcss_addedit_path").val();
240	294	rtype = jQuery("#critcss_addedit_pagetype option:selected").val();
241	295	rccss = jQuery("#critcss_addedit_css").val();
	296	+ <?php if ( $ao_ccss_debug ) { ?>
242	297	console.log('rpath: ' + rpath, 'rtype: ' + rtype, 'rccss: ' + rccss);
	298	+ <?php } ?>
243	299	if (rpath === '' && rtype === '') {
244		- alert('<?php _e( "RULE VALIDATION ERROR!\\n\\nBased on your rule type, you SHOULD set a path or conditional tag.", 'autoptimize' ); ?>');
	300	+ alert('<?php esc_html_e( "Rule validation error:\\n\\nBased on your rule type, you should set a path or conditional tag.", 'autoptimize' ); ?>');
245	301	} else if (rtype !== '' && rccss == '') {
246		- alert('<?php _e( "RULE VALIDATION ERROR!\\n\\nType based rules REQUIRES a minified critical CSS.", 'autoptimize' ); ?>');
	302	+ alert('<?php esc_html_e( "Rule validation error:\\n\\nType based rules requires a minified critical CSS.", 'autoptimize' ); ?>');
	303	+ } else if (rpath !== rpath.replace(/("|\'|<|>|\[|\]|{|}|\|)/,'')) {
	304	+ alert('<?php esc_html_e( "Path validation error:\\n\\nThe path contains characters that are not permitted, remove or encode the unsafe characters.", 'autoptimize' ); ?>');
247	305	} else {
248	306	saveEditCritCss();
249	307	jQuery(this).dialog('close');
250	308	}
251	309	},
252		- "<?php _e( 'Cancel', 'autoptimize' ); ?>": function() {
	310	+ "<?php esc_html_e( 'Cancel', 'autoptimize' ); ?>": function() {
253	311	resetForm();
254	312	jQuery(this).dialog("close");
255	313	}
256	314	}
		@@ -258,21 +316,22 @@
258	316	}
259	317
260	318	function editDefaultCritCss(){
261	319	document.getElementById("dummyDefault").value=document.getElementById("autoptimize_css_defer_inline").value;
	320	+ jQuery("#dummyDefault").attr("spellcheck",false);
262	321	jQuery("#default_critcss_wrapper").dialog({
263	322	autoOpen: true,
264	323	height: 505,
265	324	width: 700,
266		- title: "<?php _e( 'Default Critical CSS', 'autoptimize' ); ?>",
	325	+ title: "<?php esc_html_e( 'Default Critical CSS', 'autoptimize' ); ?>",
267	326	modal: true,
268	327	buttons: {
269		- "<?php _e( 'Submit', 'autoptimize' ); ?>": function() {
	328	+ "<?php esc_html_e( 'Submit', 'autoptimize' ); ?>": function() {
270	329	document.getElementById("autoptimize_css_defer_inline").value=document.getElementById("dummyDefault").value;
271	330	jQuery("#unSavedWarning").show();
272	331	jQuery("#default_critcss_wrapper").dialog( "close" );
273	332	},
274		- "<?php _e( 'Cancel', 'autoptimize' ); ?>": function() {
	333	+ "<?php esc_html_e( 'Cancel', 'autoptimize' ); ?>": function() {
275	334	jQuery("#default_critcss_wrapper").dialog( "close" );
276	335	}
277	336	}
278	337	});
		@@ -279,21 +338,22 @@
279	338	}
280	339
281	340	function editAdditionalCritCss(){
282	341	document.getElementById("dummyAdditional").value=document.getElementById("autoptimize_ccss_additional").value;
	342	+ jQuery("#dummyAdditional").attr("spellcheck",false);
283	343	jQuery("#additional_critcss_wrapper").dialog({
284	344	autoOpen: true,
285	345	height: 505,
286	346	width: 700,
287		- title: "<?php _e( 'Additional Critical CSS', 'autoptimize' ); ?>",
	347	+ title: "<?php esc_html_e( 'Additional Critical CSS', 'autoptimize' ); ?>",
288	348	modal: true,
289	349	buttons: {
290		- "<?php _e( 'Submit', 'autoptimize' ); ?>": function() {
	350	+ "<?php esc_html_e( 'Submit', 'autoptimize' ); ?>": function() {
291	351	document.getElementById("autoptimize_ccss_additional").value=document.getElementById("dummyAdditional").value;
292	352	jQuery("#unSavedWarning").show();
293	353	jQuery("#additional_critcss_wrapper").dialog( "close" );
294	354	},
295		- "<?php _e( 'Cancel', 'autoptimize' ); ?>": function() {
	355	+ "<?php esc_html_e( 'Cancel', 'autoptimize' ); ?>": function() {
296	356	jQuery("#additional_critcss_wrapper").dialog( "close" );
297	357	}
298	358	}
299	359	});
		@@ -352,18 +412,40 @@
352	412
353	413	function updateAfterChange() {
354	414	document.getElementById("critCssOrigin").value=JSON.stringify(critCssArray);
355	415	drawTable(critCssArray);
	416	+
	417	+ <?php
	418	+ // autosave rules is on by default, but can be disabled with a filter.
	419	+ if ( apply_filters( 'autoptimize_filter_ccss_settings_rules_autosave', true ) ) {
	420	+ ?>
	421	+ var data = {
	422	+ 'action': 'ao_ccss_saverules',
	423	+ 'ao_ccss_saverules_nonce': '<?php echo wp_create_nonce( 'ao_ccss_saverules_nonce' ); ?>',
	424	+ 'critcssrules': document.getElementById("critCssOrigin").value
	425	+ };
	426	+
	427	+ jQuery.post(ajaxurl, data, function(response) {
	428	+ response_array=JSON.parse(response);
	429	+ if (response_array["code"]!=200) {
	430	+ displayNotice(response_array["msg"]);
	431	+ jQuery("#unSavedWarning").show();
	432	+ }
	433	+ });
	434	+ <?php } else { ?>
356	435	jQuery("#unSavedWarning").show();
	436	+ <?php } ?>
	437	+
357	438	document.getElementById('ao_title_and_button').scrollIntoView();
358	439	}
359	440
360		-function displayNotice(textIn) {
361		- jQuery('<div class="error notice is-dismissable"><p>'+textIn+'</p></div>').insertBefore("#unSavedWarning");
	441	+function displayNotice(textIn, level = 'error') {
	442	+ jQuery('<div class="notice notice-' + level + ' notice is-dismissible"><p>'+textIn+'</p></div>').insertBefore("#unSavedWarning");
	443	+ document.getElementById('ao_title_and_button').scrollIntoView();
362	444	}
363	445
364	446	function resetForm() {
365		- 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' ); ?>");
	447	+ jQuery("#critcss_addedit_css").attr("placeholder", "<?php esc_html_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' ); ?>");
366	448	jQuery("#critcss_addedit_type").attr("disabled",false);
367	449	jQuery("#critcss_addedit_path_wrapper").show();
368	450	jQuery("#critcss_addedit_id").val("");
369	451	jQuery("#critcss_addedit_path").val("");