GiveWP – Donation Plugin and Fundraising Platform / 4.17.0

GiveWP – Donation Plugin and Fundraising Platform v4.17.0

give / blocks / donation-form-grid / edit / inspector.js

inspector.js in GiveWP – Donation Plugin and Fundraising Platform 4.17.0, at blocks/donation-form-grid/edit/inspector.js

337 lines 13.5 KB

Raw Download Zip

1	/**
2	* WordPress dependencies
3	*/
4	import {__} from '@wordpress/i18n'
5	import { select } from '@wordpress/data';
6	import {InspectorControls, PanelColorSettings, store } from '@wordpress/block-editor';
7	import {
8	ColorPalette,
9	FormTokenField, Panel,
10	PanelBody,
11	SelectControl,
12	TextControl,
13	ToggleControl,
14	} from '@wordpress/components';
15
16
17	/**
18	* Internal dependencies
19	*/
20	import giveFormOptions from '../data/options';
21
22	import ColumnSelector from '../../components/column-selector';
23
24	import './style.scss'
25
26	/**
27	* Render Inspector Controls
28	*/
29
30	const Inspector = ({attributes, setAttributes}) => {
31	const {
32	formsPerPage,
33	paged,
34	imageSize,
35	imageHeight,
36	formIDs,
37	excludeForms,
38	excludedFormIDs,
39	orderBy,
40	order,
41	categories,
42	tags,
43	columns,
44	showTitle,
45	showExcerpt,
46	excerptLength,
47	showGoal,
48	showFeaturedImage,
49	showDonateButton,
50	tagBackgroundColor,
51	donateButtonTextColor,
52	displayType,
53	filterOptions,
54	tagTextColor,
55	imageHeightOptions,
56	progressBarColor
57	} = attributes;
58
59	const saveSetting = (name, value) => {
60	setAttributes({
61	[name]: value,
62	});
63	};
64
65	const getAsArray = value => {
66	if (Array.isArray(value)) {
67	return value;
68	}
69
70	// Backward compatibility
71	if (formIDs.indexOf(',')) {
72	return value.split(',');
73	}
74
75	return [value];
76	};
77
78	const getImageSizes = () => select(store).getSettings().imageSizes.map(({slug, name}) => {
79	return {
80	value: slug,
81	label: name
82	};
83	});
84
85	const handleImageOptions = (value) => {
86	saveSetting('imageHeightOptions', value)
87	saveSetting('imageHeight', value)
88	}
89
90	const filterValue = () => {
91	if (filterOptions === 'categories') {
92	return <>
93	<FormTokenField
94	className="give-form-grid-inspector__filter"
95	name="categories"
96	value={getAsArray(categories)}
97	onChange={(value) => saveSetting('categories', value)}
98	/>
99
100	<p className="components-form-token-field__help">
101	{__('Type the name of your category to add it to the list. Only forms within the categories you choose will be displayed in this grid.', 'give')}
102	</p>
103	</>
104	} else if (filterOptions === 'tags') {
105	return <>
106	<FormTokenField
107	className="give-form-grid-inspector__filter"
108	name="tags"
109	value={getAsArray(tags)}
110	onChange={(value) => saveSetting('tags', value)}
111	/>
112
113	<p className="components-form-token-field__help">
114	{__('Type the name of your tag to add it to the list. Only forms with these tags you choose will be displayed in this grid.', 'give')}
115	</p></>
116	} else if (filterOptions === 'formIDs'){
117	return <>
118	<FormTokenField
119	className="give-form-grid-inspector__filter"
120	name="formIDs"
121	value={getAsArray(formIDs)}
122	onChange={(value) => saveSetting('formIDs', value)}
123	/>
124
125	<p className="components-form-token-field__help">
126	{__('Type the ID of your form to add it to the list. Only forms with these IDs you choose will be displayed in this grid.', 'give')}
127	</p></>
128	}
129	}
130
131	return (
132	<InspectorControls key="inspector">
133	<Panel>
134	<PanelBody title= {__('Layout', 'give')} initialOpen={ true }>
135	<ColumnSelector
136	label={__('Columns', 'give')}
137	selected={columns}
138	onClick={(value) => saveSetting('columns', value)}
139	help={__('Controls how many columns of the Form Grid appear. "Best Fit" will adjust responsively to the space available.', 'give')}
140	/>
141	<SelectControl
142	label={ __( 'Columns', 'give' ) }
143	name="columns"
144	value={ columns }
145	options={ giveFormOptions.columns }
146	onChange={ ( value ) => saveSetting( 'columns', value ) } />
147	</PanelBody>
148	</Panel>
149	<Panel>
150	<PanelBody title= {__('Display Elements', 'give')} initialOpen={ true }>
151	<ToggleControl
152	className="give-form-grid-inspector"
153	name="showTitle"
154	label={__('Show Title', 'give')}
155	checked={!!showTitle}
156	onChange={(value) => saveSetting('showTitle', value)}/>
157	<ToggleControl
158	className="give-form-grid-inspector"
159	name="showGoal"
160	label={__('Show Goal', 'give')}
161	checked={!!showGoal}
162	onChange={(value) => saveSetting('showGoal', value)}
163	/>
164	<ToggleControl
165	className="give-form-grid-inspector"
166	name="showExcerpt"
167	label={__('Show Excerpt', 'give')}
168	checked={!!showExcerpt}
169	onChange={(value) => saveSetting('showExcerpt', value)}
170	/>
171	<ToggleControl
172	className="give-form-grid-inspector"
173	name="showDonateButton"
174	label={__('Show Donate Button', 'give')}
175	checked={!!showDonateButton}
176	onChange={(value) => saveSetting('showDonateButton', value)}
177	/>
178	<ToggleControl
179	className="give-form-grid-inspector"
180	align="right"
181	name="showFeaturedImage"
182	label={__('Show Featured Image', 'give')}
183	checked={!!showFeaturedImage}
184	onChange={(value) => saveSetting('showFeaturedImage', value)}
185	/>
186	{showFeaturedImage && (
187	<>
188	<SelectControl
189	className="give-form-grid-inspector"
190	name="imageSize"
191	label={__('Image Size', 'give')}
192	value={imageSize}
193	options={getImageSizes()}
194	onChange={(value) => saveSetting('imageSize', value)}
195	/>
196	<SelectControl
197	className="give-form-grid-inspector"
198	name="imageHeightOptions"
199	label={__('Image Height', 'give')}
200	value={imageHeightOptions}
201	options={giveFormOptions.imageHeight}
202	onChange={(value) => handleImageOptions(value)}
203	/>
204
205	{imageHeightOptions === 'custom' && <TextControl
206	className="give-form-grid-inspector__filter" name="imageHeight"
207	value={imageHeight}
208	onChange={(value) => saveSetting('imageHeight', value)}
209	help={__('Featured image height. Default "auto". Accepts valid heights in px, em, or rem.', 'give')}/>
210	}
211	</>
212	)}
213	</PanelBody>
214	</Panel>
215	<Panel>
216	<PanelBody className="give-donation-form-grid--grid-settings" title= {__('Grid Settings', 'give')} initialOpen={ true }>
217	<SelectControl
218	className="give-form-grid-inspector"
219	label={__('Order By', 'give')}
220	name="orderBy"
221	value={orderBy}
222	options={giveFormOptions.orderBy}
223	onChange={(value) => saveSetting('orderBy', value)}
224	help={__('The order forms are displayed in.', 'give')}
225	/>
226
227	<SelectControl
228	className="give-form-grid-inspector"
229	label={__('Order', 'give')}
230	name="order"
231	value={order}
232	options={giveFormOptions.order}
233	onChange={(value) => saveSetting('order', value)}
234	help={__('Whether the order ascends or descends.', 'give')}
235	/>
236	<SelectControl
237	className="give-form-grid-inspector"
238	label={ __( 'Filter', 'give' ) }
239	name="filter" value={filterOptions}
240	options={ giveFormOptions.filter }
241	onChange={ ( value ) => saveSetting( 'filterOptions', value ) } />
242
243	{filterValue(filterOptions)}
244
245	<ToggleControl
246	className="give-form-grid-inspector exclude__form"
247	name="excludeForms"
248	label={__('Exclude specific forms?', 'give')}
249	checked={!!excludeForms}
250	onChange={(value) => saveSetting('excludeForms', value)}
251	/>
252
253	{excludeForms && (
254	<>
255	<FormTokenField
256	name="excludedFormIDs"
257	label={__('Excluded Form IDs', 'give')}
258	value={getAsArray(excludedFormIDs)}
259	onChange={(value) => saveSetting('excludedFormIDs', value)}
260	/>
261	<p className="components-form-token-field__help">
262	{__('Type the ID of your form to exclude it from the list. Forms with these IDs you choose will not be displayed in this grid.', 'give')}
263	</p>
264	</>
265	)}
266	</PanelBody>
267	</Panel>
268	<Panel>
269	<PanelBody title= {__('Grid Interaction', 'give')} initialOpen={ true }>
270	<SelectControl
271	className="give-form-grid-inspector"
272	label={__('Display Type', 'give')}
273	name="displayType"
274	value={displayType}
275	options={giveFormOptions.displayType}
276	onChange={(value) => saveSetting('displayType', value)}
277	/>
278	{displayType === 'redirect' ?
279	<p className="give-form-grid-inspector__help">
280	{__('Users will be redirected to the donation form page.', 'give')}
281	</p> :
282	<p className="give-form-grid-inspector__help">
283	{__('Modal with the donation form will be displayed on the same page.', 'give')}
284	</p>
285	}
286	<TextControl
287	className="give-form-grid-inspector"
288	name="formsPerPage"
289	label={__('Forms Per Page', 'give')}
290	value={formsPerPage}
291	onChange={(value) => saveSetting('formsPerPage', value)}
292	help={__('Sets the number of forms to be displayed on the first page load.', 'give')}
293	/>
294	<ToggleControl
295	className="give-form-grid-inspector"
296	name="paged"
297	label={__('Show Pagination', 'give')}
298	checked={!!paged}
299	onChange={(value) => saveSetting('paged', value)}
300	help={__('Enable form display to multiple pages.', 'give')}
301	/>
302	</PanelBody>
303	</Panel>
304	<PanelColorSettings
305	title={ __( 'Color Settings', 'give' ) }
306	colorSettings={ [
307	{
308	value: tagBackgroundColor
309	, onChange: (value) => saveSetting('tagBackgroundColor', value),
310	label: __('Tag Background Color', 'give')
311
312	},
313	{
314	value: tagTextColor,
315	onChange: (value) => saveSetting('tagTextColor', value),
316	label: __('Tag Text Color', 'give')
317	},
318	{
319	value: donateButtonTextColor,
320	onChange: (value) => saveSetting('donateButtonTextColor', value),
321	label: __('Donate Button Text Color', 'give')
322	},
323	{
324	value: progressBarColor,
325	onChange: (value) => saveSetting('progressBarColor', value),
326	label: __('Progress Bar Color', 'give')
327	},
328
329	] }
330	/>
331
332	</InspectorControls>
333	);
334	};
335
336	export default Inspector;
337