← All changes | resources/backend/js/refresh-resources.js +201 -114 2.2.3 → 3.4.3 View file →

		@@ -1,118 +1,215 @@
1	1	/**
2	2	* Refresh Resources
3	3	*
4		- * @package ConvertKit
5	4	* @author ConvertKit
6	5	*/
7	6
	7	+document.addEventListener(
	8	+ 'DOMContentLoaded',
	9	+ convertKitRefreshResourcesInitEventListeners
	10	+);
	11	+
8	12	/**
9		- * Refreshes resources when the Refresh button is clicked.
	13	+ * Binds click event listeners to refresh resource buttons.
10	14	*
11		- * @since 1.9.8.0
	15	+ * @since 2.4.4
12	16	*/
13		-jQuery( document ).ready(
14		- function( $ ) {
	17	+function convertKitRefreshResourcesInitEventListeners() {
	18	+ // Refreshes resources when the Refresh button is clicked.
	19	+ document
	20	+ .querySelectorAll('button.wp-convertkit-refresh-resources')
	21	+ .forEach(function (element) {
	22	+ element.addEventListener(
	23	+ 'click',
	24	+ function (e) {
	25	+ e.preventDefault();
	26	+ convertKitRefreshResources(element);
	27	+ },
	28	+ false
	29	+ );
	30	+ });
	31	+}
15	32
16		- $( 'button.wp-convertkit-refresh-resources' ).on(
17		- 'click',
18		- function( e ) {
	33	+/**
	34	+ * Refresh resources when a button is clicked.
	35	+ *
	36	+ * @since 2.4.4
	37	+ *
	38	+ * @param {Object} button Button element.
	39	+ */
	40	+function convertKitRefreshResources(button) {
	41	+ // Remove any existing error notices that might be displayed.
	42	+ convertKitRefreshResourcesRemoveNotices();
19	43
20		- // Prevent default button behaviour.
21		- e.preventDefault();
	44	+ const resource = button.dataset.resource,
	45	+ field = button.dataset.field;
22	46
23		- // Remove any existing error notices that might be displayed.
24		- convertKitRefreshResourcesRemoveNotices();
	47	+ // Disable button and set is-refreshing class.
	48	+ button.disabled = true;
	49	+ button.classList.add('is-refreshing');
25	50
26		- // Fetch some DOM elements.
27		- var button = this,
28		- resource = $( button ).data( 'resource' ),
29		- field = $( button ).data( 'field' );
	51	+ // Perform AJAX request to refresh resource.
	52	+ fetch(convertkit_admin_refresh_resources.ajaxurl + resource, {
	53	+ method: 'POST',
	54	+ headers: {
	55	+ 'Content-Type': 'application/json',
	56	+ 'X-WP-Nonce': convertkit_admin_refresh_resources.nonce,
	57	+ },
	58	+ })
	59	+ .then(function (response) {
	60	+ // Convert response JSON string to object.
	61	+ return response.json();
	62	+ })
	63	+ .then(function (response) {
	64	+ if (convertkit_admin_refresh_resources.debug) {
	65	+ console.log(response);
	66	+ }
30	67
31		- // Disable button.
32		- $( button ).prop( 'disabled', true );
	68	+ // Show an error if the request wasn't successful.
	69	+ if (typeof response.code !== 'undefined') {
	70	+ // Show error notice.
	71	+ convertKitRefreshResourcesOutputErrorNotice(response.message);
33	72
34		- // Perform AJAX request to refresh resource.
35		- $.ajax(
36		- {
37		- type: 'POST',
38		- data: {
39		- action: 'convertkit_admin_refresh_resources',
40		- nonce: convertkit_admin_refresh_resources.nonce,
41		- resource: resource // e.g. forms, landing_pages, tags.
42		- },
43		- url: convertkit_admin_refresh_resources.ajaxurl,
44		- success: function ( response ) {
	73	+ // Enable button and remove is-refreshing class.
	74	+ button.disabled = false;
	75	+ button.classList.remove('is-refreshing');
45	76
46		- if ( convertkit_admin_refresh_resources.debug ) {
47		- console.log( response );
48		- }
	77	+ return;
	78	+ }
49	79
50		- // Show an error if the request wasn't successful.
51		- if ( ! response.success ) {
52		- // Show error notice.
53		- convertKitRefreshResourcesOutputErrorNotice( response.data );
	80	+ const selectedOption = document.querySelector(field).value;
54	81
55		- // Enable button.
56		- $( button ).prop( 'disabled', false );
	82	+ // Remove existing select options.
	83	+ document
	84	+ .querySelectorAll(field + ' option')
	85	+ .forEach(function (option) {
	86	+ // Skip if data-preserve-on-refresh is specified, as this means we want to keep this specific option.
	87	+ // This will be present on the 'None' and 'Default' options.
	88	+ if (option.dataset.preserveOnRefresh !== undefined) {
	89	+ return;
	90	+ }
57	91
58		- return;
59		- }
	92	+ // Remove this option.
	93	+ option.remove();
	94	+ });
60	95
61		- // Get currently selected option.
62		- var selectedOption = $( field ).val();
	96	+ // Depending on the resource we're refreshing, populate the <select> options.
	97	+ switch (resource) {
	98	+ case 'restrict_content':
	99	+ // Populate select `optgroup` from response data, which comprises of Forms, Tags and Products.
	100	+ // Forms.
	101	+ response.forms.forEach(function (item) {
	102	+ document
	103	+ .querySelector(
	104	+ field + ' optgroup[data-resource=forms]'
	105	+ )
	106	+ .appendChild(
	107	+ new Option(
	108	+ item.name +
	109	+ ' [' +
	110	+ (item.format ? item.format : 'inline') +
	111	+ ']',
	112	+ 'form_' + item.id,
	113	+ false,
	114	+ selectedOption === 'form_' + item.id
	115	+ )
	116	+ );
	117	+ });
63	118
64		- // Remove existing select options.
65		- $( 'option', $( field ) ).each(
66		- function() {
67		- // Skip if data-preserve-on-refresh is specified, as this means we want to keep this specific option.
68		- // This will be present on the 'None' and 'Default' options.
69		- if ( typeof $( this ).data( 'preserve-on-refresh' ) !== 'undefined' ) {
70		- return;
71		- }
72		-
73		- // Remove this option.
74		- $( this ).remove();
75		- }
	119	+ // Tags.
	120	+ response.tags.forEach(function (item) {
	121	+ document
	122	+ .querySelector(
	123	+ field + ' optgroup[data-resource=tags]'
	124	+ )
	125	+ .appendChild(
	126	+ new Option(
	127	+ item.name,
	128	+ 'tag_' + item.id,
	129	+ false,
	130	+ selectedOption === 'tag_' + item.id
	131	+ )
76	132	);
	133	+ });
77	134
78		- // Populate select options from response data.
79		- response.data.forEach(
80		- function( item ) {
81		- $( field ).append( new Option( item.name, item.id, false, ( selectedOption == item.id ? true : false ) ) );
82		- }
	135	+ // Products.
	136	+ response.products.forEach(function (item) {
	137	+ document
	138	+ .querySelector(
	139	+ field + ' optgroup[data-resource=products]'
	140	+ )
	141	+ .appendChild(
	142	+ new Option(
	143	+ item.name,
	144	+ 'product_' + item.id,
	145	+ false,
	146	+ selectedOption === 'product_' + item.id
	147	+ )
83	148	);
	149	+ });
	150	+ break;
84	151
85		- // Trigger a change event on the select field, to allow Select2 instances to repopulate their options.
86		- $( field ).trigger( 'change' );
	152	+ default:
	153	+ // Populate select options from response data.
	154	+ response.forEach(function (item) {
	155	+ // Define label.
	156	+ let label = '';
	157	+ switch (resource) {
	158	+ case 'forms':
	159	+ label =
	160	+ item.name +
	161	+ ' [' +
	162	+ (item.format !== ''
	163	+ ? item.format
	164	+ : 'inline') +
	165	+ ']';
	166	+ break;
87	167
88		- // Enable button.
89		- $( button ).prop( 'disabled', false );
	168	+ default:
	169	+ label = item.name;
	170	+ break;
90	171	}
91		- }
92		- ).fail(
93		- function ( response ) {
94		- if ( convertkit_admin_refresh_resources.debug ) {
95		- console.log( response );
96		- }
97	172
98		- // Remove any existing error notices that might be displayed.
99		- convertKitRefreshResourcesRemoveNotices();
	173	+ // Add option.
	174	+ document
	175	+ .querySelector(field)
	176	+ .add(
	177	+ new Option(
	178	+ label,
	179	+ item.id,
	180	+ false,
	181	+ selectedOption === item.id ? true : false
	182	+ )
	183	+ );
	184	+ });
	185	+ break;
	186	+ }
100	187
101		- // Show error notice.
102		- convertKitRefreshResourcesOutputErrorNotice( 'ConvertKit: ' + response.status + ' ' + response.statusText );
	188	+ // Trigger a change event on the select field, to allow Select2 instances to repopulate their options.
	189	+ document.querySelector(field).dispatchEvent(new Event('change'));
103	190
104		- // Enable button.
105		- $( button ).prop( 'disabled', false );
106		- }
107		- );
	191	+ // Enable button and remove is-refreshing class.
	192	+ button.disabled = false;
	193	+ button.classList.remove('is-refreshing');
	194	+ })
	195	+ .catch(function (error) {
	196	+ if (convertkit_admin_refresh_resources.debug) {
	197	+ console.error(error);
	198	+ }
108	199
109		- }
110		- );
	200	+ // Remove any existing error notices that might be displayed.
	201	+ convertKitRefreshResourcesRemoveNotices();
111	202
112		- }
113		-);
	203	+ // Show error notice.
	204	+ convertKitRefreshResourcesOutputErrorNotice(error);
114	205
	206	+ // Enable button and remove is-refreshing class.
	207	+ button.disabled = false;
	208	+ button.classList.remove('is-refreshing');
	209	+ });
	210	+}
	211	+
115	212	/**
116	213	* Removes any existing ConvertKit WordPress style error notices.
117	214	*
118	215	* @since 1.9.8.3
		@@ -117,23 +214,19 @@
117	214	*
118	215	* @since 1.9.8.3
119	216	*/
120	217	function convertKitRefreshResourcesRemoveNotices() {
121		-
122	218	// If we're editing a Page, Post or Custom Post Type in Gutenberg, use wp.data.dispatch to remove the error.
123		- if ( typeof wp !== 'undefined' && typeof wp.blocks !== 'undefined' ) {
	219	+ if (convertKitEditingPostInGutenberg()) {
124	220	// Gutenberg Editor.
125		- wp.data.dispatch( 'core/notices' ).removeNotice( 'convertkit-error' );
	221	+ wp.data.dispatch('core/notices').removeNotice('convertkit-error');
126	222	return;
127	223	}
128	224
129	225	// Classic Editor, WP_List_Table (Bulk/Quick edit) or Edit Term.
130		- ( function( $ ) {
131		-
132		- $( 'div.convertkit-error' ).remove();
133		-
134		- } )( jQuery );
135		-
	226	+ document.querySelectorAll('div.convertkit-error').forEach(function (div) {
	227	+ div.remove();
	228	+ });
136	229	}
137	230
138	231	/**
139	232	* Removes any existing ConvertKit WordPress style error notices, before outputting
		@@ -140,44 +233,38 @@
140	233	* an error notice.
141	234	*
142	235	* @since 1.9.8.3
143	236	*
144		- * @param string message Error message to display.
	237	+ * @param {string} message Error message to display.
145	238	*/
146		-function convertKitRefreshResourcesOutputErrorNotice( message ) {
147		-
	239	+function convertKitRefreshResourcesOutputErrorNotice(message) {
148	240	// Prefix the message with the Plugin name.
149	241	message = 'ConvertKit: ' + message;
150	242
151	243	// If we're editing a Page, Post or Custom Post Type in Gutenberg, use wp.data.dispatch to show the error.
152		- if ( typeof wp !== 'undefined' && typeof wp.blocks !== 'undefined' ) {
	244	+ if (convertKitEditingPostInGutenberg()) {
153	245	// Gutenberg Editor.
154		- wp.data.dispatch( 'core/notices' ).createErrorNotice(
155		- message,
156		- {
157		- id: 'convertkit-error'
158		- }
159		- );
160		-
	246	+ wp.data
	247	+ .dispatch('core/notices')
	248	+ .createErrorNotice(message, { id: 'convertkit-error' });
161	249	return;
162	250	}
163	251
164	252	// Classic Editor, WP_List_Table (Bulk/Quick edit) or Edit Term.
165		- ( function( $ ) {
	253	+ const notice =
	254	+ '<div id="message" class="error convertkit-error notice is-dismissible"><p>' +
	255	+ message +
	256	+ '</p></div>';
166	257
167		- var notice = '<div id="message" class="error convertkit-error notice is-dismissible"><p>' + message + '</p></div>';
	258	+ // Append the WordPress style error notice, depending on the screen.
	259	+ const insertLocation =
	260	+ document.querySelector('hr.wp-header-end') ||
	261	+ document.querySelector('#ajax-response');
	262	+ if (insertLocation) {
	263	+ insertLocation.insertAdjacentHTML('afterend', notice);
168	264
169		- // Append the WordPress style error notice, depending on the screen.
170		- if ( $( 'hr.wp-header-end' ).length > 0 ) {
171		- $( 'hr.wp-header-end' ).after( notice );
172		- } else if ( $( '#ajax-response' ).length > 0 ) {
173		- $( '#ajax-response' ).after( notice );
174		- }
175		-
176	265	// Notify WordPress that a new dismissible notification exists, triggering WordPress' makeNoticesDismissible() function,
177	266	// which adds a dismiss button and binds necessary events to hide the notification.
178	267	// We can't directly call makeNoticesDismissible(), as its minified function name will be different.
179		- $( document ).trigger( 'wp-updates-notice-added' );
180		-
181		- } )( jQuery );
182		-
	268	+ document.dispatchEvent(new Event('wp-updates-notice-added'));
	269	+ }
183	270	}