← All changes | classes/critcss-inc/admin_settings_rules.js.php +114 -37 2.7.2 → trunk 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,36 +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>'
71		- } else {
72		- rmark = '';
	81	+ rmark_find=file.split('_');
	82	+ if (rmark_find[2] || rmark_find[2] == 'R.css') {
	83	+ rnotice = rnotice + 1;
73	84	}
74	85	}
75	86	if ( k == "paths" ) {
76		- target = '<a href="<?php echo AUTOPTIMIZE_WP_SITE_URL; ?>' + i + '" target="_blank">' + i + '</a>';
	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
	92	+ } else {
	93	+ ?>
	94	+ target = i;
	95	+ <?php
	96	+ }
	97	+ ?>
77	98	} else {
78	99	target = i.replace(/(woo_|template_|custom_post_|edd_|bp_|bbp_)/,'');
79	100	}
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);});
	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	+ }
82	106	jQuery("#" + nodeId + "_remove").click(function(){confirmRemove(this.id);});
83	107	})
84	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	+ }
85	132	}
86	133
87	134	function confirmRemove(idToRemove) {
88	135	jQuery( "#confirm-rm" ).dialog({
		@@ -89,14 +136,14 @@
89	136	resizable: false,
90	137	height:235,
91	138	modal: true,
92	139	buttons: {
93		- "<?php _e( 'Delete', 'autoptimize' ); ?>": function() {
	140	+ "<?php esc_html_e( 'Delete', 'autoptimize' ); ?>": function() {
94	141	removeRow(idToRemove);
95	142	updateAfterChange();
96	143	jQuery( this ).dialog( "close" );
97	144	},
98		- "<?php _e( 'Cancel', 'autoptimize' ); ?>": function() {
	145	+ "<?php esc_html_e( 'Cancel', 'autoptimize' ); ?>": function() {
99	146	jQuery( this ).dialog( "close" );
100	147	}
101	148	}
102	149	});
		@@ -107,9 +154,9 @@
107	154	resizable: false,
108	155	height:235,
109	156	modal: true,
110	157	buttons: {
111		- "<?php _e( 'Delete All', 'autoptimize' ); ?>": function() {
	158	+ "<?php esc_html_e( 'Delete All', 'autoptimize' ); ?>": function() {
112	159	critCssArray={'paths':[],'types':[]};
113	160	drawTable(critCssArray);
114	161	updateAfterChange();
115	162	removeAllCcssFilesOnServer();
		@@ -114,9 +161,9 @@
114	161	updateAfterChange();
115	162	removeAllCcssFilesOnServer();
116	163	jQuery( this ).dialog( "close" );
117	164	},
118		- "<?php _e( 'Cancel', 'autoptimize' ); ?>": function() {
	165	+ "<?php esc_html_e( 'Cancel', 'autoptimize' ); ?>": function() {
119	166	jQuery( this ).dialog( "close" );
120	167	}
121	168	}
122	169	});
		@@ -172,9 +219,9 @@
172	219
173	220	function addEditRow(idToEdit) {
174	221	resetForm();
175	222	if (idToEdit) {
176		- dialogTitle="<?php _e( 'Edit Critical CSS Rule', 'autoptimize' ); ?>";
	223	+ dialogTitle="<?php esc_html_e( 'Edit Critical CSS Rule', 'autoptimize' ); ?>";
177	224
178	225	splits=idToEdit.split(/_/);
179	226	crit_type=splits[0];
180	227	crit_item=splits[1];
		@@ -183,9 +230,10 @@
183	230
184	231	jQuery("#critcss_addedit_id").val(idToEdit);
185	232	jQuery("#critcss_addedit_type").val(crit_type);
186	233	jQuery("#critcss_addedit_file").val(crit_file);
187		- 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);
188	236	jQuery("#critcss_addedit_type").attr("disabled",true);
189	237
190	238	if (crit_type==="paths") {
191	239	jQuery("#critcss_addedit_path").val(crit_key);
		@@ -212,12 +260,13 @@
212	260	jQuery("#critcss_addedit_css").attr("placeholder", "").focus();
213	261	}
214	262	});
215	263	} else {
216		- dialogTitle="<?php _e( 'Add Critical CSS Rule', 'autotimize' ); ?>";
	264	+ dialogTitle="<?php esc_html_e( 'Add Critical CSS Rule', 'autoptimize' ); ?>";
217	265
218	266	// default: paths, hide content type field
219	267	jQuery("#critcss_addedit_type").val("paths");
	268	+ jQuery("#critcss_addedit_css").attr("spellcheck",false);
220	269	jQuery("#critcss_addedit_pagetype_wrapper").hide();
221	270
222	271	// event handler on type to switch display
223	272	jQuery("#critcss_addedit_type").on('change', function (e) {
		@@ -223,13 +272,13 @@
223	272	jQuery("#critcss_addedit_type").on('change', function (e) {
224	273	if(this.value==="types") {
225	274	jQuery("#critcss_addedit_pagetype_wrapper").show();
226	275	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' ); ?>");
	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' ); ?>");
228	277	} else {
229	278	jQuery("#critcss_addedit_path_wrapper").show();
230	279	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' ); ?>");
	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' ); ?>");
232	281	}
233	282	});
234	283	}
235	284
		@@ -239,23 +288,27 @@
239	288	width: 700,
240	289	title: dialogTitle,
241	290	modal: true,
242	291	buttons: {
243		- "<?php _e( 'Submit', 'autoptimize' ); ?>": function() {
	292	+ "<?php esc_html_e( 'Submit', 'autoptimize' ); ?>": function() {
244	293	rpath = jQuery("#critcss_addedit_path").val();
245	294	rtype = jQuery("#critcss_addedit_pagetype option:selected").val();
246	295	rccss = jQuery("#critcss_addedit_css").val();
	296	+ <?php if ( $ao_ccss_debug ) { ?>
247	297	console.log('rpath: ' + rpath, 'rtype: ' + rtype, 'rccss: ' + rccss);
	298	+ <?php } ?>
248	299	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' ); ?>');
	300	+ alert('<?php esc_html_e( "Rule validation error:\\n\\nBased on your rule type, you should set a path or conditional tag.", 'autoptimize' ); ?>');
250	301	} else if (rtype !== '' && rccss == '') {
251		- 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' ); ?>');
252	305	} else {
253	306	saveEditCritCss();
254	307	jQuery(this).dialog('close');
255	308	}
256	309	},
257		- "<?php _e( 'Cancel', 'autoptimize' ); ?>": function() {
	310	+ "<?php esc_html_e( 'Cancel', 'autoptimize' ); ?>": function() {
258	311	resetForm();
259	312	jQuery(this).dialog("close");
260	313	}
261	314	}
		@@ -263,21 +316,22 @@
263	316	}
264	317
265	318	function editDefaultCritCss(){
266	319	document.getElementById("dummyDefault").value=document.getElementById("autoptimize_css_defer_inline").value;
	320	+ jQuery("#dummyDefault").attr("spellcheck",false);
267	321	jQuery("#default_critcss_wrapper").dialog({
268	322	autoOpen: true,
269	323	height: 505,
270	324	width: 700,
271		- title: "<?php _e( 'Default Critical CSS', 'autoptimize' ); ?>",
	325	+ title: "<?php esc_html_e( 'Default Critical CSS', 'autoptimize' ); ?>",
272	326	modal: true,
273	327	buttons: {
274		- "<?php _e( 'Submit', 'autoptimize' ); ?>": function() {
	328	+ "<?php esc_html_e( 'Submit', 'autoptimize' ); ?>": function() {
275	329	document.getElementById("autoptimize_css_defer_inline").value=document.getElementById("dummyDefault").value;
276	330	jQuery("#unSavedWarning").show();
277	331	jQuery("#default_critcss_wrapper").dialog( "close" );
278	332	},
279		- "<?php _e( 'Cancel', 'autoptimize' ); ?>": function() {
	333	+ "<?php esc_html_e( 'Cancel', 'autoptimize' ); ?>": function() {
280	334	jQuery("#default_critcss_wrapper").dialog( "close" );
281	335	}
282	336	}
283	337	});
		@@ -284,21 +338,22 @@
284	338	}
285	339
286	340	function editAdditionalCritCss(){
287	341	document.getElementById("dummyAdditional").value=document.getElementById("autoptimize_ccss_additional").value;
	342	+ jQuery("#dummyAdditional").attr("spellcheck",false);
288	343	jQuery("#additional_critcss_wrapper").dialog({
289	344	autoOpen: true,
290	345	height: 505,
291	346	width: 700,
292		- title: "<?php _e( 'Additional Critical CSS', 'autoptimize' ); ?>",
	347	+ title: "<?php esc_html_e( 'Additional Critical CSS', 'autoptimize' ); ?>",
293	348	modal: true,
294	349	buttons: {
295		- "<?php _e( 'Submit', 'autoptimize' ); ?>": function() {
	350	+ "<?php esc_html_e( 'Submit', 'autoptimize' ); ?>": function() {
296	351	document.getElementById("autoptimize_ccss_additional").value=document.getElementById("dummyAdditional").value;
297	352	jQuery("#unSavedWarning").show();
298	353	jQuery("#additional_critcss_wrapper").dialog( "close" );
299	354	},
300		- "<?php _e( 'Cancel', 'autoptimize' ); ?>": function() {
	355	+ "<?php esc_html_e( 'Cancel', 'autoptimize' ); ?>": function() {
301	356	jQuery("#additional_critcss_wrapper").dialog( "close" );
302	357	}
303	358	}
304	359	});
		@@ -357,18 +412,40 @@
357	412
358	413	function updateAfterChange() {
359	414	document.getElementById("critCssOrigin").value=JSON.stringify(critCssArray);
360	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 { ?>
361	435	jQuery("#unSavedWarning").show();
	436	+ <?php } ?>
	437	+
362	438	document.getElementById('ao_title_and_button').scrollIntoView();
363	439	}
364	440
365		-function displayNotice(textIn) {
366		- 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();
367	444	}
368	445
369	446	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' ); ?>");
	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' ); ?>");
371	448	jQuery("#critcss_addedit_type").attr("disabled",false);
372	449	jQuery("#critcss_addedit_path_wrapper").show();
373	450	jQuery("#critcss_addedit_id").val("");
374	451	jQuery("#critcss_addedit_path").val("");