VikBooking Hotel Booking Engine & PMS / 1.6.9

VikBooking Hotel Booking Engine & PMS v1.6.9

vikbooking / admin / resources / js / gutenberg-tools.js

gutenberg-tools.js in VikBooking Hotel Booking Engine & PMS 1.6.9, at admin/resources/js/gutenberg-tools.js

500 lines 11.5 KB

Raw Download Zip

1	(function(wp) {
2	'use strict';
3
4	/**
5	* Creates a control element according to the provided field data.
6	*
7	* @param object field The field structure.
8	* @param object props The block properties object.
9	*
10	* @return mixed A react control.
11	*/
12	window.vboCreateControlElement = (field, props) => {
13	let fieldControl;
14
15	switch (field.layout) {
16	case 'html.form.fields.list':
17	fieldControl = field.class === 'btn-group btn-group-yesno'
18	? new VBOWidgetBlockFieldCheckbox(field)
19	: new VBOWidgetBlockFieldList(field);
20	break;
21
22	case 'html.form.fields.groupedlist':
23	fieldControl = new VBOWidgetBlockFieldGroupedList(field);
24	break;
25
26	case 'html.form.fields.textarea':
27	fieldControl = new VBOWidgetBlockFieldTextarea(field);
28	break;
29
30	case 'html.form.fields.media':
31	fieldControl = new VBOWidgetBlockFieldMedia(field);
32	break;
33
34	case 'html.form.fields.number':
35	// Do not use NUMBER field yet because this control is experimental
36	// and might be subject to drastic and breaking changes
37	// fieldControl = new VBOWidgetBlockFieldNumber(field);
38	break;
39	}
40
41	if (!fieldControl) {
42	switch (field.type) {
43	case 'color':
44	fieldControl = new VBOWidgetBlockFieldColor(field);
45	break;
46
47	case 'editor':
48	fieldControl = new VBOWidgetBlockFieldTextarea(field);
49	break;
50
51	case 'html':
52	fieldControl = new VBOWidgetBlockFieldHtml(field);
53	break;
54
55	default:
56	// type not supported, use a text field
57	fieldControl = new VBOWidgetBlockFieldText(field);
58	}
59	}
60
61	return fieldControl.createElement(props);
62	}
63
64	/**
65	* Abstract field control.
66	*/
67	const VBOWidgetBlockField = class VBOWidgetBlockField {
68	constructor(data) {
69	for (let key in data) {
70	if (data.hasOwnProperty(key)) {
71	this[key] = data[key];
72	}
73	}
74	}
75
76	shouldDisplay(props) {
77	if (!this.showon) {
78	return true;
79	}
80
81	// detect the conditions glue
82	let glue = this.showon.match(/\[OR\]/i) ? 'or' : 'and';
83
84	// extract all the conditions
85	let conditions = this.showon.split(/\[AND\]\|\[OR\]/i);
86
87	let verified = false;
88
89	for (let condition of conditions) {
90	// extract the attribute [1], the comparator [2] and the comparison value [3]
91	let chunks = condition.match(/^([a-z0-9_\[\]]+)([!:]+)(.*$)$/i);
92
93	if (!chunks) {
94	// invalid condition
95	continue;
96	}
97
98	let fieldName = chunks[1];
99	let comparator = chunks[2];
100	let match = (chunks[3] === null \|\| chunks[3] === undefined ? '' : chunks[3]).split(/\s,\s/);
101
102	if (!props.attributes.hasOwnProperty(fieldName)) {
103	// field not found
104	continue;
105	}
106
107	// validate condition
108	switch (comparator) {
109	case ':':
110	verified = match.indexOf(props.attributes[fieldName].toString()) !== -1;
111	break;
112
113	case '!:':
114	verified = match.indexOf(props.attributes[fieldName].toString()) === -1;
115	break;
116	}
117
118	if (!verified && glue === 'and') {
119	// all the conditions must be verified
120	return false;
121	}
122
123	if (verified && glue === 'or') {
124	// at least a condition can be verified
125	return true;
126	}
127	}
128
129	return verified;
130	}
131
132	createElement(props) {
133	if (this.shouldDisplay(props)) {
134	return this.buildElement(props);
135	}
136
137	return null;
138	}
139
140	buildElement(props) {
141	return null;
142	}
143	}
144
145	/**
146	* Text control field renderer.
147	*
148	* @see wp.components.TextControl
149	* @link https://developer.wordpress.org/block-editor/reference-guides/components/text-control/
150	*/
151	const VBOWidgetBlockFieldText = class VBOWidgetBlockFieldText extends VBOWidgetBlockField {
152	buildElement(props) {
153	return wp.element.createElement(
154	wp.components.TextControl,
155	{
156	label: this.label,
157	help: this.description,
158	value: props.attributes[this.name],
159	onChange: (value) => {
160	let attrs = {};
161	attrs[this.name] = value;
162
163	props.setAttributes(attrs);
164	}
165	}
166	);
167	}
168	}
169
170	/**
171	* Textarea control field renderer.
172	*
173	* @see wp.components.TextareaControl
174	* @link https://developer.wordpress.org/block-editor/reference-guides/components/text-control/
175	*/
176	const VBOWidgetBlockFieldTextarea = class VBOWidgetBlockFieldTextarea extends VBOWidgetBlockField {
177	buildElement(props) {
178	return wp.element.createElement(
179	wp.components.TextareaControl,
180	{
181	label: this.label,
182	help: this.description,
183	value: props.attributes[this.name],
184	onChange: (value) => {
185	let attrs = {};
186	attrs[this.name] = value;
187
188	props.setAttributes(attrs);
189	}
190	}
191	);
192	}
193	}
194
195	/**
196	* Number control field renderer.
197	*
198	* @see wp.components.NumberControl
199	* @link https://developer.wordpress.org/block-editor/reference-guides/components/number-control/
200	*/
201	const VBOWidgetBlockFieldNumber = class VBOWidgetBlockFieldNumber extends VBOWidgetBlockField {
202	buildElement(props) {
203	return wp.element.createElement(
204	wp.components.__experimentalNumberControl,
205	{
206	label: this.label,
207	help: this.description,
208	value: props.attributes[this.name],
209	min: this.min !== 'undefined' ? this.min : Number.NEGATIVE_INFINITY,
210	max: this.max !== 'undefined' ? this.max : Number.POSITIVE_INFINITY,
211	step: this.step !== 'undefined' ? this.step : 'any',
212	onChange: (value) => {
213	let attrs = {};
214	attrs[this.name] = value;
215
216	props.setAttributes(attrs);
217	}
218	}
219	);
220	}
221	}
222
223	/**
224	* Color control field renderer.
225	*
226	* @see wp.components.ColorPicker
227	* @link https://developer.wordpress.org/block-editor/reference-guides/components/color-picker/
228	*/
229	const VBOWidgetBlockFieldColor = class VBOWidgetBlockFieldColor extends VBOWidgetBlockField {
230	buildElement(props) {
231	return wp.element.createElement(
232	wp.components.BaseControl,
233	{
234	label: this.label,
235	help: this.description,
236	children: wp.element.createElement(
237	wp.components.ColorPicker,
238	{
239	color: props.attributes[this.name],
240	enableAlpha: true,
241	copyFormat: 'hex',
242	onChange: (value) => {
243	let attrs = {};
244	attrs[this.name] = value;
245
246	props.setAttributes(attrs);
247	}
248	}
249	),
250	}
251	);
252	}
253	}
254
255	/**
256	* Checkbox control field renderer.
257	*
258	* @see wp.components.ToggleControl
259	* @link https://developer.wordpress.org/block-editor/reference-guides/components/toggle-control/
260	*/
261	const VBOWidgetBlockFieldCheckbox = class VBOWidgetBlockFieldCheckbox extends VBOWidgetBlockField {
262	buildElement(props) {
263	return wp.element.createElement(
264	wp.components.ToggleControl,
265	{
266	label: this.label,
267	help: this.description,
268	checked: parseInt(props.attributes[this.name]) ? true : false,
269	onChange: (value) => {
270	let attrs = {};
271	attrs[this.name] = value ? 1 : 0;
272
273	props.setAttributes(attrs);
274	}
275	}
276	);
277	}
278	}
279
280	/**
281	* List control field renderer.
282	*
283	* @see wp.components.SelectControl
284	* @link https://developer.wordpress.org/block-editor/reference-guides/components/select-control/
285	*/
286	const VBOWidgetBlockFieldList = class VBOWidgetBlockFieldList extends VBOWidgetBlockField {
287	buildElement(props) {
288	return wp.element.createElement(
289	wp.components.SelectControl,
290	{
291	label: this.label,
292	help: this.description,
293	value: props.attributes[this.name],
294	options: this.options,
295	multiple: this.multiple ? true : false,
296	onChange: (value) => {
297	let attrs = {};
298	attrs[this.name] = value;
299
300	props.setAttributes(attrs);
301	}
302	}
303	);
304	}
305	}
306
307	/**
308	* Grouped list control field renderer.
309	*
310	* @see wp.components.SelectControl
311	* @link https://developer.wordpress.org/block-editor/reference-guides/components/select-control/
312	*/
313	const VBOWidgetBlockFieldGroupedList = class VBOWidgetBlockFieldGroupedList extends VBOWidgetBlockField {
314	constructor(data) {
315	super(data);
316
317	this.children = [];
318
319	for (let groupLabel in this.groups) {
320	if (!this.groups.hasOwnProperty(groupLabel)) {
321	continue;
322	}
323
324	let options = [];
325
326	this.groups[groupLabel].forEach((option) => {
327	options.push(
328	wp.element.createElement(
329	'option',
330	{
331	value: option.value,
332	},
333	option.text
334	)
335	);
336	});
337
338	this.children.push(
339	wp.element.createElement(
340	'optgroup',
341	{
342	label: groupLabel,
343	},
344	options
345	)
346	);
347	}
348	}
349
350	buildElement(props) {
351	return wp.element.createElement(
352	wp.components.SelectControl,
353	{
354	label: this.label,
355	help: this.description,
356	value: props.attributes[this.name],
357	children: this.children,
358	multiple: this.multiple ? true : false,
359	onChange: (value) => {
360	let attrs = {};
361	attrs[this.name] = value;
362
363	props.setAttributes(attrs);
364	}
365	}
366	);
367	}
368	}
369
370	/**
371	* Media manager control field renderer.
372	*
373	* @see wp.editor.MediaPlaceholder
374	* @link https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/media-placeholder/README.md
375	*/
376	const VBOWidgetBlockFieldMedia = class VBOWidgetBlockFieldMedia extends VBOWidgetBlockField {
377	buildElement(props) {
378	let mediaPreview = null;
379
380	if (props.attributes[this.name]) {
381	let children = [];
382
383	// display image only in case the preview is not disabled
384	if (this.preview === undefined \|\| this.preview) {
385	children.push(
386	wp.element.createElement(
387	'img',
388	{
389	src: props.attributes[this.name],
390	style: {
391	marginBottom: '10px',
392	},
393	}
394	)
395	);
396	}
397
398	// add button to clear the selected image
399	children.push(
400	wp.element.createElement(
401	wp.components.Button,
402	{
403	text: wp.i18n.__('Clear'),
404	isDestructive: true,
405	isSecondary: true,
406	style: {
407	marginBottom: '10px',
408	},
409	onClick: () => {
410	let attrs = {};
411	attrs[this.name] = '';
412
413	props.setAttributes(attrs);
414	},
415	}
416	)
417	);
418
419	mediaPreview = wp.element.createElement(
420	'div',
421	{},
422	children
423	);
424	}
425
426	return wp.element.createElement(
427	wp.components.BaseControl,
428	{
429	label: this.label,
430	help: this.description,
431	children: wp.element.createElement(
432	wp.blockEditor.MediaPlaceholder,
433	{
434	labels: { title: '' },
435	multiple: this.multiple ? true : false,
436	// value: props.attributes[this.name],
437	allowedTypes: ['image'],
438	mediaPreview: mediaPreview,
439	onSelect: (value) => {
440	let attrs = {};
441	attrs[this.name] = value.url;
442
443	props.setAttributes(attrs);
444	}
445	}
446	),
447	}
448	);
449	}
450	}
451
452	/**
453	* Generic HTML control field renderer.
454	*/
455	const VBOWidgetBlockFieldHtml = class VBOWidgetBlockFieldHtml extends VBOWidgetBlockField {
456	buildElement(props) {
457	return wp.element.createElement(
458	wp.components.BaseControl,
459	{
460	label: this.label,
461	help: this.description,
462	children: this.createTree(this.layout),
463	}
464	);
465	}
466
467	createTree(nodes) {
468	let children = [];
469
470	nodes.forEach((node) => {
471	let content = [];
472
473	if (node.content) {
474	content.push(node.content);
475	}
476
477	if (node.children) {
478	content = content.concat(this.createTree(node.children));
479	}
480
481	if (node.attributes && node.attributes.class) {
482	// remove any class that might render an element as a notice
483	node.attributes.class = node.attributes.class.replace(/\bnotice(-[a-z]+)?\b/g, '').trim();
484	// convert button classes
485	node.attributes.class = node.attributes.class.replace(/\bbtn\b/g, 'button');
486	}
487
488	children.push(
489	wp.element.createElement(
490	node.tag,
491	node.attributes \|\| {},
492	content
493	)
494	);
495	});
496
497	return children;
498	}
499	}
500	})(window.wp);