Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) / 1.8.13

Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) v1.8.13

charitable / assets / js / campaign-builder / choicesjs.js

choicesjs.js in Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) 1.8.13, at assets/js/campaign-builder/choicesjs.js

157 lines 3.9 KB

Raw Download Zip

1	/* global charitable_builder, Choices */
2
3	/**
4	* Charitable ChoicesJS utility methods for the Admin Builder.
5	*
6	* @since 1.7.9
7	*/
8
9	'use strict';
10
11	var Charitable = window.Charitable \|\| {};
12
13	Charitable.Admin = Charitable.Admin \|\| {};
14	Charitable.Admin.Builder = Charitable.Admin.Builder \|\| {};
15
16	Charitable.Admin.Builder.CharitableChoicesJS = Charitable.Admin.Builder.CharitableChoicesJS \|\| ( function( document, window, $ ) {
17
18	/**
19	* Public functions and properties.
20	*
21	* @since 1.7.9
22	*
23	* @type {object}
24	*/
25	const app = {
26
27	/**
28	* Setup the Select Page ChoicesJS instance.
29	*
30	* @since 1.7.9
31	*
32	* @param {object} element DOM Element where to init ChoicesJS.
33	* @param {object} choicesJSArgs ChoicesJS init options.
34	* @param {object} ajaxArgs Object containing `action` and `nonce` to perform AJAX search.
35	*
36	* @returns {Choices} ChoicesJS instance.
37	*/
38	setup: function( element, choicesJSArgs, ajaxArgs ) {
39
40	choicesJSArgs.searchEnabled = true;
41	choicesJSArgs.searchChoices = ajaxArgs.nonce === null; // Enable searchChoices when not using AJAX.
42	choicesJSArgs.renderChoiceLimit = -1;
43	choicesJSArgs.noChoicesText = charitable_builder.no_pages_found;
44	choicesJSArgs.noResultsText = charitable_builder.no_pages_found;
45
46	const choicesJS = new Choices( element, choicesJSArgs );
47
48	if ( ajaxArgs.nonce === null ) {
49	return choicesJS;
50	}
51
52	/*
53	* ChoicesJS doesn't handle empty string search with it's `search` event handler,
54	* so we work around it by detecting empty string search with `keyup` event.
55	*/
56	choicesJS.input.element.addEventListener( 'keyup', function( ev ) {
57
58	// Only capture backspace and delete keypress that results to empty string.
59	if (
60	( ev.which !== 8 && ev.which !== 46 ) \|\|
61	ev.target.value.length > 0
62	) {
63	return;
64	}
65
66	app.performSearch( choicesJS, '', ajaxArgs );
67	} );
68
69	choicesJS.passedElement.element.addEventListener( 'search', _.debounce( function( ev ) {
70
71	// Make sure that the search term is actually changed.
72	if ( choicesJS.input.element.value.length === 0 ) {
73	return;
74	}
75
76	app.performSearch( choicesJS, ev.detail.value, ajaxArgs );
77	}, 800 ) );
78
79	return choicesJS;
80	},
81
82	/**
83	* Perform search in ChoicesJS instance.
84	*
85	* @since 1.7.9
86	*
87	* @param {Choices} choicesJS ChoicesJS instance.
88	* @param {string} searchTerm Search term.
89	* @param {object} ajaxArgs Object containing `action` and `nonce` to perform AJAX search.
90	*/
91	performSearch: function( choicesJS, searchTerm, ajaxArgs ) {
92
93	if ( ! ajaxArgs.action \|\| ! ajaxArgs.nonce ) {
94	return;
95	}
96
97	app.displayLoading( choicesJS );
98
99	const requestSearchPages = app.ajaxSearchPages( ajaxArgs.action, searchTerm, ajaxArgs.nonce );
100
101	requestSearchPages.done( function( response ) {
102	choicesJS.setChoices( response.data, 'value', 'label', true );
103	} );
104	},
105
106	/**
107	* Display "Loading" in ChoicesJS instance.
108	*
109	* @since 1.7.9
110	*
111	* @param {Choices} choicesJS ChoicesJS instance.
112	*/
113	displayLoading: function( choicesJS ) {
114
115	choicesJS.setChoices(
116	[
117	{ value: '', label: `${charitable_builder.loading}...`, disabled: true },
118	],
119	'value',
120	'label',
121	true
122	);
123	},
124
125	/**
126	* Perform AJAX search request.
127	*
128	* @since 1.7.9
129	*
130	* @param {string} action Action to be used when doing ajax request for search.
131	* @param {string} searchTerm Search term.
132	* @param {string} nonce Nonce to be used when doing ajax request.
133	*
134	* @returns {Promise} jQuery ajax call promise.
135	*/
136	ajaxSearchPages: function( action, searchTerm, nonce ) {
137
138	return $.get(
139	charitable_builder.ajax_url,
140	{
141	action: action,
142	search: searchTerm,
143	_wpnonce: nonce,
144	}
145	).fail(
146	function( err ) {
147	console.error( err );
148	}
149	);
150	},
151	};
152
153	// Provide access to public functions/properties.
154	return app;
155
156	}( document, window, jQuery ) );
157