Automatic YouTube Gallery – Embed Auto-Updating YouTube Video Galleries, Feeds, Playlists & Channels / 2.3.2

Automatic YouTube Gallery – Embed Auto-Updating YouTube Video Galleries, Feeds, Playlists & Channels v2.3.2

automatic-youtube-gallery / block / src / edit.js

edit.js in Automatic YouTube Gallery – Embed Auto-Updating YouTube Video Galleries, Feeds, Playlists & Channels 2.3.2, at block/src/edit.js

295 lines 6.7 KB

Raw Download Zip

1	/**
2	* Import block dependencies
3	*/
4	import ServerSideRender from '@wordpress/server-side-render';
5
6	import classnames from 'classnames';
7
8	import { debounce } from '@wordpress/compose';
9
10	import {
11	InspectorControls,
12	PanelColorSettings,
13	useBlockProps
14	} from '@wordpress/block-editor';
15
16	import {
17	Disabled,
18	PanelBody,
19	PanelRow,
20	RangeControl,
21	SelectControl,
22	Spinner,
23	TextControl,
24	TextareaControl,
25	ToggleControl
26	} from '@wordpress/components';
27
28	import {
29	useCallback,
30	useEffect,
31	useRef,
32	useState
33	} from '@wordpress/element';
34
35	import { applyFilters } from '@wordpress/hooks';
36
37	/**
38	* Describes the structure of the block in the context of the editor.
39	* This represents what the editor will render when the block is used.
40	*
41	* @return {WPElement} Element to render.
42	*/
43	export default function Edit( { attributes, setAttributes, className, clientId } ) {
44
45	attributes.uid = clientId;
46
47	const [ isLoading, setIsLoading ] = useState( false );
48	const [ proxyAttributes, setProxyAttributes ] = useState( attributes );
49
50	const MyServerSideRender = () => (
51	<ServerSideRender
52	block="automatic-youtube-gallery/block"
53	attributes={ Object.assign( {}, proxyAttributes, { is_admin: true } ) }
54	/>
55	);
56
57	const MemoizedServerSideRender = useCallback( MyServerSideRender, [ proxyAttributes ] );
58
59	const debounceProxyAttributes = () => {
60	setIsLoading( false );
61	setProxyAttributes( { ...attributes } );
62	}
63
64	const debouncedProxyAttributes = debounce( debounceProxyAttributes, 1000 );
65
66	const getControl = ( field, index ) => {
67	if ( ! canShowControl( field.name ) ) {
68	return '';
69	}
70
71	const placeholder = field.placeholder ? field.placeholder : '';
72	const description = field.description ? field.description : '';
73
74	switch ( field.type ) {
75	case 'number':
76	return <PanelRow key={ index }>
77	<RangeControl
78	label={ field.label }
79	help={ description }
80	placeholder={ placeholder }
81	value={ attributes[ field.name ] }
82	min={ field.min }
83	max={ field.max }
84	onChange={ onChange( field.name ) }
85	/>
86	</PanelRow>
87	case 'textarea':
88	return <PanelRow key={ index }>
89	<TextareaControl
90	label={ field.label }
91	help={ description }
92	placeholder={ placeholder }
93	value={ attributes[ field.name ] }
94	onChange={ onChange( field.name ) }
95	/>
96	</PanelRow>
97	case 'select':
98	case 'radio':
99	let options = [];
100
101	for ( let key in field.options ) {
102	options.push({
103	label: field.options[ key ],
104	value: key
105	});
106	};
107
108	return <PanelRow key={ index }>
109	<SelectControl
110	label={ field.label }
111	help={ description }
112	options={ options }
113	value={ attributes[ field.name ] }
114	onChange={ onChange( field.name ) }
115	/>
116	</PanelRow>
117	case 'checkbox':
118	return <PanelRow key={ index }>
119	<ToggleControl
120	label={ field.label }
121	help={ description }
122	checked={ attributes[ field.name ] }
123	onChange={ toggleAttribute( field.name ) }
124	/>
125	</PanelRow>
126	case 'color':
127	return <PanelRow key={ index }>
128	<PanelColorSettings
129	title={ field.label }
130	colorSettings={ [
131	{
132	label: ayg_block.i18n.selected_color,
133	value: attributes[ field.name ],
134	onChange: onChange( field.name ),
135	}
136	] }
137	>
138	</PanelColorSettings>
139	</PanelRow>
140	default:
141	return <PanelRow key={ index }>
142	<TextControl
143	label={ field.label }
144	help={ description }
145	placeholder={ placeholder }
146	value={ attributes[ field.name ] }
147	onChange={ onChange( field.name ) }
148	/>
149	</PanelRow>
150	}
151	}
152
153	const canShowPanel = ( panel ) => {
154	let value = true;
155
156	switch ( panel ) {
157	case 'gallery':
158	if ( 'video' == attributes.type \|\| 'livestream' == attributes.type ) {
159	value = false;
160	}
161	break;
162	}
163
164	return applyFilters( 'ayg_block_toggle_panels', value, panel, attributes );
165	}
166
167	const canShowControl = ( control ) => {
168	let value = true;
169
170	switch ( control ) {
171	case 'playlist':
172	case 'username':
173	case 'search':
174	case 'video':
175	case 'videos':
176	if ( control != attributes.type ) {
177	value = false;
178	}
179	break;
180	case 'channel':
181	if ( 'channel' != attributes.type && 'livestream' != attributes.type ) {
182	value = false;
183	}
184	break;
185	case 'order':
186	case 'limit':
187	if ( 'search' != attributes.type ) {
188	value = false;
189	}
190	break;
191	case 'cache':
192	case 'player_title':
193	case 'player_description':
194	case 'loop':
195	if ( 'livestream' == attributes.type ) {
196	value = false;
197	}
198	break;
199	case 'autoadvance':
200	if ( 'video' == attributes.type \|\| 'livestream' == attributes.type ) {
201	value = false;
202	}
203	break;
204	case 'more_button_label':
205	if ( 'pager' == attributes.pagination_type ) {
206	value = false;
207	}
208	break;
209	case 'previous_button_label':
210	case 'next_button_label':
211	if ( 'more' == attributes.pagination_type ) {
212	value = false;
213	}
214	break;
215	case 'privacy_enhanced_mode':
216	case 'origin':
217	value = false;
218	break;
219	}
220
221	return applyFilters( 'ayg_block_toggle_controls', value, control, attributes );
222	}
223
224	const onChange = ( attribute ) => {
225	return ( newValue ) => {
226	setAttributes( { [ attribute ]: newValue } );
227	};
228	}
229
230	const toggleAttribute = ( attribute ) => {
231	return ( newValue ) => {
232	setAttributes( { [ attribute ]: newValue } );
233	};
234	}
235
236	useEffect(() => {
237	setIsLoading( true );
238	debouncedProxyAttributes();
239	}, [ attributes ] );
240
241	const mounted = useRef();
242	useEffect( () => {
243	if ( ! mounted.current ) {
244	// Do componentDidMount logic
245	mounted.current = true;
246	} else {
247	// Do componentDidUpdate logic
248	applyFilters( 'ayg_block_init', attributes );
249	}
250	} );
251
252	const classes = classnames( className, {
253	'is-loading': isLoading,
254	} );
255
256	const blockProps = useBlockProps( {
257	className: classes,
258	} );
259
260	return (
261	<>
262	<InspectorControls>
263	{Object.keys( ayg_block.options ).map(( key, index ) => {
264	return (
265	canShowPanel( key ) && <PanelBody
266	key={ 'automatic-youtube-gallery-block-panel-' + index }
267	title={ ayg_block.options[ key ].label }
268	initialOpen={ 0 == index ? true : false }
269	className="automatic-youtube-gallery-block-panel">
270
271	{Object.keys( ayg_block.options[ key ].fields ).map(( _key, _index ) => {
272	return getControl( ayg_block.options[ key ].fields[ _key ], 'automatic-youtube-gallery-block-control-' + _index );
273	})}
274
275	</PanelBody>
276	)
277	})}
278	</InspectorControls>
279
280	<div { ...blockProps }>
281	<Disabled>
282	<MemoizedServerSideRender />
283
284	{ isLoading && (
285	<div className="automatic-youtube-gallery-block-spinner">
286	<Spinner />
287	<span>{ ayg_block.i18n.is_loading }</span>
288	</div>
289	) }
290	</Disabled>
291	</div>
292	</>
293	);
294	}
295