GiveWP – Donation Plugin and Fundraising Platform / 4.17.0

GiveWP – Donation Plugin and Fundraising Platform v4.17.0

give / blocks / donor-wall / edit / inspector.js

inspector.js in GiveWP – Donation Plugin and Fundraising Platform 4.17.0, at blocks/donor-wall/edit/inspector.js

285 lines 14.5 KB

Raw Download Zip

1	/**
2	* WordPress dependencies
3	*/
4	import { __ } from '@wordpress/i18n'
5
6	import {InspectorControls, ColorPalette,} from '@wordpress/block-editor';
7	import {PanelBody, Panel, SelectControl, ToggleControl, TextControl, FormTokenField } from '@wordpress/components';
8
9	/**
10	* Internal dependencies
11	*/
12	import giveDonorWallOptions from '../data/options';
13
14	import ColumnSelector from '../../components/column-selector';
15	import ToggleOptions from '../../components/toggle';
16
17	import './style.scss'
18	import Toggle from "../../components/toggle";
19
20	/**
21	* Render Inspector Controls
22	*/
23
24	const Inspector = ( { attributes, setAttributes } ) => {
25
26	const { donorsPerPage,
27	ids,
28	formID,
29	categories,
30	tags, orderBy,
31	order,
32	columns,
33	avatarSize,
34	showAvatar,
35	showName,
36	showCompanyName,
37	onlyComments,
38	showForm,
39	showTotal,
40	showComments,
41	showAnonymous,
42	commentLength, readMoreText,
43	loadMoreText,
44	toggleOptions,
45	filterOptions,
46	color,
47	showTimestamp,
48	showTributes } = attributes;
49
50	const saveSetting = ( name, value ) => {
51	setAttributes( {
52	[ name ]: value,
53	} );
54	};
55
56	const getAsArray = value => {
57	if (Array.isArray(value)) {
58	return value;
59	}
60
61	// Backward compatibility
62	if (formIDs.indexOf(',')) {
63	return value.split(',');
64	}
65
66	return [value];
67	};
68
69	const filterValue = () => {
70	if(filterOptions === 'categories'){
71	return <> <FormTokenField
72	className="give-donor-wall-inspector"
73	onChange ={(value) => saveSetting('categories', value)}
74	value={getAsArray(categories)}/>
75	<p className="components-form-token-field__help">
76	{__('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')}
77	</p>
78	</>
79
80	} else if (filterOptions === 'tags'){
81	return <> <FormTokenField
82	className="give-donor-wall-inspector"
83	name="tags"
84	value={getAsArray(tags)}
85	onChange ={(value) => saveSetting('tags', value)}/>
86	<p className="components-form-token-field__help">
87	{__('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')}
88	</p>
89	</>
90
91	} else if (filterOptions === 'ids'){
92	return <> <FormTokenField
93	className="give-donor-wall-inspector"
94	name="ids"
95	value={getAsArray(ids)}
96	onChange ={(value) => saveSetting('ids', value)}/>
97	<p className="components-form-token-field__help">
98	{__('By default, all donors will display. Use this setting to restrict the donor wall to only display certain donors. Use a comma-separated list of donor IDs.', 'give')}
99	</p>
100	</>
101
102	} else if (filterOptions === 'formID' ){
103	return <> <FormTokenField
104	className="give-donor-wall-inspector"
105	help={__('By Default, donations to all forms will display. Use this setting to restrict the donor to display only donations to certains forms. Use a comma-separated list of form IDs.', 'give')}
106	name="formID"
107	value={getAsArray(formID)}
108	onChange ={(value) => saveSetting('formID', value)}/>
109	<p className="components-form-token-field__help">
110	{__('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')}
111	</p>
112	</>
113	}
114	};
115	return (
116	<InspectorControls key="inspector">
117	<Panel>
118	<PanelBody title= {__('Layout', 'give')} initialOpen={ true }>
119	<ColumnSelector
120	selected={columns}
121	onClick={(value) => saveSetting('columns', value)}
122	help={__('Controls how many columns of the Form Grid appear. All sizes will adjust responsively to the space available. The maximum number allowed per row is 4', 'give')}
123	/>
124	<SelectControl
125	className="give-donor-wall-inspector"
126	name="columns"
127	label={ __( 'Columns', 'give' ) }
128	value={ columns }
129	options={ giveDonorWallOptions.columns }
130	onChange={ ( value ) => saveSetting( 'columns', value ) } />
131	</PanelBody>
132	</Panel>
133	<Panel>
134	<PanelBody title= {__('Display Elements', 'give')} initialOpen={ false }>
135	<ToggleOptions
136	options={giveDonorWallOptions.toggleOptions}
137	onClick={( value ) => saveSetting( 'toggleOptions', value ) }
138	selected={toggleOptions}/>
139	{toggleOptions === 'donorInfo' ?
140	<>
141	<ToggleControl
142	className="give-donor-wall-inspector"
143	name="showName"
144	label={ __( 'Show Name', 'give' ) }
145	checked={ !! showName }
146	onChange={ ( value ) => saveSetting( 'showName', value ) } />
147	<ToggleControl
148	className="give-donor-wall-inspector"
149	name="showName"
150	label={ __( 'Show Company Name', 'give' ) }
151	checked={ !! showCompanyName }
152	onChange={ ( value ) => saveSetting( 'showCompanyName', value ) } />
153	<ToggleControl
154	className="give-donor-wall-inspector"
155	name="showAnonymous"
156	label={ __( 'Show Anonymous', 'give' ) }
157	checked={ !! showAnonymous }
158	onChange={ ( value ) => saveSetting( 'showAnonymous', value ) } />
159	<ToggleControl
160	className="give-donor-wall-inspector"
161	name="showAvatar"
162	label={ __( 'Show Avatar', 'give' ) }
163	checked={ !! showAvatar }
164	onChange={ ( value ) => saveSetting( 'showAvatar', value ) } />
165	<TextControl
166	className="give-donor-wall-inspector"
167	name="avatarSize"
168	label={ __( 'Avatar Size', 'give' ) }
169	help={__('Avatar size. Default height is 75. Accepts valid heights in px.', 'give')}
170	value={ avatarSize }
171	onChange={ ( value ) => saveSetting( 'avatarSize', value ) } />
172	</> :
173	<>
174	<ToggleControl
175	className="give-donor-wall-inspector"
176	name="showForm"
177	label={ __( 'Show Donation Form', 'give' ) }
178	checked={ !! showForm }
179	onChange={ ( value ) => saveSetting( 'showForm', value ) } />
180	<ToggleControl
181	className="give-donor-wall-inspector"
182	name="showTotal"
183	label={ __( 'Show Total', 'give' ) }
184	checked={ !! showTotal }
185	onChange={ ( value ) => saveSetting( 'showTotal', value ) } />
186	<ToggleControl
187	className="give-donor-wall-inspector"
188	name="showTimestamp"
189	label={ __( 'Show Time', 'give' ) }
190	checked={ !! showTimestamp }
191	onChange={ ( value ) => saveSetting( 'showTimestamp', value ) } />
192	{ !!window.Give_Tribute && <ToggleControl
193	className="give-donor-wall-inspector"
194	name="showTributes"
195	label={ __( 'Show Tributes', 'give' ) }
196	checked={ !! showTributes }
197	onChange={ ( value ) => saveSetting( 'showTributes', value ) } />}
198	<ToggleControl
199	className="give-donor-wall-inspector"
200	name="showComments"
201	label={ __( 'Show Comments', 'give' ) }
202	checked={ !! showComments }
203	onChange={ ( value ) => saveSetting( 'showComments', value ) } />
204	<ToggleControl
205	className="give-donor-wall-inspector"
206	name="onlyComments"
207	label={ __( 'Only Comments', 'give' ) }
208	checked={ !! onlyComments }
209	onChange={ ( value ) => saveSetting( 'onlyComments', value ) } />
210	<TextControl
211	className="give-donor-wall-inspector"
212	name="commentLength"
213	label={ __( 'Comment Length', 'give' ) }
214	help={__('Limits the amount of characters to be displayed on donations with comments.', 'give')}
215	value={ commentLength }
216	onChange={ ( value ) => saveSetting( 'commentLength', value ) } />
217	<TextControl
218	className="give-donor-wall-inspector"
219	name="readMoreText"
220	label={ __( 'Read More Text', 'give' ) }
221	value={ readMoreText }
222	onChange={ ( value ) => saveSetting( 'readMoreText', value ) } />
223	</>
224	}
225	</PanelBody>
226	</Panel>
227	<Panel>
228	<PanelBody className="give-wall--wall-settings" title= {__('Wall Settings', 'give')} initialOpen={ false }>
229	<SelectControl
230	className="give-donor-wall-inspector"
231	label={ __( 'Sort By', 'give' ) }
232	name="orderBy"
233	value={ orderBy }
234	options={ giveDonorWallOptions.orderBy }
235	onChange={ ( value ) => saveSetting( 'orderBy', value ) } />
236	<SelectControl
237	className="give-donor-wall-inspector"
238	label={ __( 'Order', 'give' ) }
239	name="order"
240	value={ order }
241	options={ giveDonorWallOptions.order }
242	onChange={ ( value ) => saveSetting( 'order', value ) } />
243	<SelectControl
244	className="give-donor-wall-inspector"
245	label={ __( 'Filter', 'give' ) }
246	name="filter"
247	value={ filterOptions }
248	options={ giveDonorWallOptions.filter }
249	onChange={ ( value ) => saveSetting( 'filterOptions', value ) } />
250
251	{filterValue(filterOptions)}
252	</PanelBody>
253	</Panel>
254	<Panel>
255	<PanelBody title= {__('Wall Interaction', 'give')} initialOpen={ true }>
256	<TextControl
257	className="give-donor-wall-inspector"
258	name="donorsPerPage"
259	label={ __( 'Donors Per Page', 'give' ) }
260	value={ donorsPerPage }
261	onChange={ ( value ) => saveSetting( 'donorsPerPage', value ) }
262	help={ __('How many donors should show up on the initial page load?', 'give' ) }
263	/>
264	<TextControl
265	className="give-donor-wall-inspector"
266	name="loadMoreText"
267	label={ __( 'Load More Text', 'give' ) }
268	value={ loadMoreText }
269	onChange={ ( value ) => saveSetting( 'loadMoreText', value ) } />
270	</PanelBody>
271	</Panel>
272	<Panel>
273	<PanelBody title= {__('Color', 'give')} initialOpen={ false }>
274	<ColorPalette
275	value={color}
276	onChange={( value ) => setAttributes( { color: value } )}
277	/>
278	</PanelBody>
279	</Panel>
280	</InspectorControls>
281	);
282	};
283
284	export default Inspector;
285