CartFlows – Funnel Builder & Checkout Plugin for WooCommerce / 3.3.0

CartFlows – Funnel Builder & Checkout Plugin for WooCommerce v3.3.0

cartflows / modules / gutenberg / src / components / background / index.js

index.js in CartFlows – Funnel Builder & Checkout Plugin for WooCommerce 3.3.0, at modules/gutenberg/src/components/background/index.js

902 lines 22.5 KB

Raw Download Zip

1	import { __ } from '@wordpress/i18n';
2	import AdvancedPopColorControl from '@Components/color-control/advanced-pop-color-control.js';
3	import { SelectControl } from '@wordpress/components';
4	import styles from './editor.lazy.scss';
5	import GradientSettings from '@Components/gradient-settings';
6	import React, { useLayoutEffect } from 'react';
7	import UAGImage from '@Components/image';
8	import ResponsiveSlider from '@Components/responsive-slider';
9	import ResponsiveSelectControl from '@Components/responsive-select';
10	import { useDeviceType } from '@Controls/getPreviewType';
11	import ResponsiveUAGImage from '@Components/responsive-image';
12	import ResponsiveUAGFocalPointPicker from '@Components/responsive-focal-point-picker';
13	import MultiButtonsControl from '@Components/multi-buttons-control';
14	import UAGB_Block_Icons from '@Controls/block-icons';
15
16	const Background = ( props ) => {
17	// Add and remove the CSS on the drop and remove of the component.
18	useLayoutEffect( () => {
19	styles.use();
20	return () => {
21	styles.unuse();
22	};
23	}, [] );
24
25	const deviceType = useDeviceType().toLowerCase();
26
27	const {
28	setAttributes,
29	backgroundImageColor,
30	overlayType,
31	backgroundSize,
32	backgroundRepeat,
33	backgroundAttachment,
34	backgroundPosition,
35	backgroundImage,
36	backgroundColor,
37	backgroundVideoType,
38	backgroundType,
39	backgroundVideo,
40	backgroundVideoColor,
41	onOpacityChange,
42	backgroundCustomSize,
43	backgroundCustomSizeType,
44	imageResponsive,
45	gradientOverlay,
46	customPosition,
47	xPositionDesktop,
48	xPositionTablet,
49	xPositionMobile,
50	xPositionType,
51	xPositionTypeTablet,
52	xPositionTypeMobile,
53	yPositionDesktop,
54	yPositionTablet,
55	yPositionMobile,
56	yPositionType,
57	yPositionTypeTablet,
58	yPositionTypeMobile,
59	backgroundVideoOpacity
60	} = props;
61
62	const onRemoveImage = () => {
63	setAttributes( { [ backgroundImage.label ]: null } );
64	};
65
66	const onSelectImage = ( media ) => {
67	if ( ! media \|\| ! media.url ) {
68	setAttributes( { [ backgroundImage.label ]: null } );
69	return;
70	}
71
72	if ( ! media.type \|\| 'image' !== media.type ) {
73	return;
74	}
75
76	setAttributes( { [ backgroundImage.label ]: media } );
77	};
78
79	const onRemoveVideo = () => {
80	setAttributes( { [ backgroundVideo.label ]: null } );
81	};
82
83	const onSelectVideo = ( media ) => {
84	if ( ! media \|\| ! media.url ) {
85	setAttributes( { [ backgroundVideo.label ]: null } );
86	return;
87	}
88	if ( ! media.type \|\| 'video' !== media.type ) {
89	return;
90	}
91	setAttributes( { [ backgroundVideo.label ]: media } );
92	};
93
94	let overlayOptions = [];
95
96	overlayOptions = [
97	{
98	value: 'none',
99	label: __(
100	'None',
101	'ultimate-addons-for-gutenberg'
102	),
103	},
104	{
105	value: 'color',
106	label: __(
107	'Classic',
108	'ultimate-addons-for-gutenberg'
109	),
110	},
111	];
112	if ( gradientOverlay.value ) {
113	overlayOptions.push( {
114	value: 'gradient',
115	label: __(
116	'Gradient',
117	'ultimate-addons-for-gutenberg'
118	),
119	} );
120	}
121
122	const bgIconOptions = [
123	{
124	value: 'color',
125	icon: (
126	UAGB_Block_Icons.bg_color
127	),
128	tooltip: __(
129	'Color',
130	'ultimate-addons-for-gutenberg'
131	),
132	},
133	{
134	value: 'gradient',
135	icon: (
136	UAGB_Block_Icons.bg_gradient
137	),
138	tooltip: __(
139	'Gradient',
140	'ultimate-addons-for-gutenberg'
141	),
142	},
143	{
144	value: 'image',
145	icon: (
146	UAGB_Block_Icons.bg_image
147	),
148	tooltip: __(
149	'Image',
150	'ultimate-addons-for-gutenberg'
151	),
152	},
153	];
154
155	let bgSizeOptions = [
156	{
157	value: 'auto',
158	label: __(
159	'Auto',
160	'ultimate-addons-for-gutenberg'
161	),
162	},
163	{
164	value: 'cover',
165	label: __(
166	'Cover',
167	'ultimate-addons-for-gutenberg'
168	),
169	},
170	{
171	value: 'contain',
172	label: __(
173	'Contain',
174	'ultimate-addons-for-gutenberg'
175	),
176	},
177	{
178	value: 'custom',
179	label: __(
180	'Custom',
181	'ultimate-addons-for-gutenberg'
182	),
183	},
184	];
185
186	if ( ! backgroundCustomSize ) {
187	bgSizeOptions = [
188	{
189	value: 'auto',
190	label: __(
191	'Auto',
192	'ultimate-addons-for-gutenberg'
193	),
194	},
195	{
196	value: 'cover',
197	label: __(
198	'Cover',
199	'ultimate-addons-for-gutenberg'
200	),
201	},
202	{
203	value: 'contain',
204	label: __(
205	'Contain',
206	'ultimate-addons-for-gutenberg'
207	),
208	},
209	];
210	}
211
212	if ( backgroundVideoType.value ) {
213	bgIconOptions.push( {
214	value: 'video',
215	icon: (
216	UAGB_Block_Icons.bg_video
217	),
218	tooltip: __(
219	'Video',
220	'ultimate-addons-for-gutenberg'
221	),
222	} );
223	}
224
225	const advancedControls = (
226	<>
227	<MultiButtonsControl
228	setAttributes={ setAttributes }
229	label={ __(
230	'Type',
231	'ultimate-addons-for-gutenberg'
232	) }
233	data={ {
234	value: backgroundType.value,
235	label: backgroundType.label,
236	} }
237	options={ bgIconOptions }
238	showIcons={ true }
239	colorVariant="secondary"
240	layoutVariant="inline"
241	/>
242	{ 'color' === backgroundType.value && (
243	<div className="uag-background-color">
244	<AdvancedPopColorControl
245	label={ __( 'Color', 'ultimate-addons-for-gutenberg' ) }
246	colorValue={
247	backgroundColor.value ? backgroundColor.value : ''
248	}
249	data={ {
250	value: backgroundColor.value,
251	label: backgroundColor.label,
252	} }
253	setAttributes={ setAttributes }
254	/>
255	</div>
256	) }
257	{ 'image' === backgroundType.value && (
258	<div className="uag-background-image">
259	{ ! imageResponsive &&
260	<UAGImage
261	onSelectImage={ onSelectImage }
262	backgroundImage={ backgroundImage.value }
263	onRemoveImage={ onRemoveImage }
264	/>
265	}
266	{ ! imageResponsive && backgroundImage.value && (
267	<>
268	<div className="uag-background-image-position">
269	<SelectControl
270	label={ __(
271	'Image Position',
272	'ultimate-addons-for-gutenberg'
273	) }
274	value={ backgroundPosition.value }
275	onChange={ ( value ) =>
276	setAttributes( {
277	[ backgroundPosition.label ]: value,
278	} )
279	}
280	options={ [
281	{
282	value: 'left top',
283	label: __(
284	'Top Left',
285	'ultimate-addons-for-gutenberg'
286	),
287	},
288	{
289	value: 'center top',
290	label: __(
291	'Top Center',
292	'ultimate-addons-for-gutenberg'
293	),
294	},
295	{
296	value: 'right top',
297	label: __(
298	'Top Right',
299	'ultimate-addons-for-gutenberg'
300	),
301	},
302	{
303	value: 'center top',
304	label: __(
305	'Center Top',
306	'ultimate-addons-for-gutenberg'
307	),
308	},
309	{
310	value: 'center center',
311	label: __(
312	'Center Center',
313	'ultimate-addons-for-gutenberg'
314	),
315	},
316	{
317	value: 'center bottom',
318	label: __(
319	'Center Bottom',
320	'ultimate-addons-for-gutenberg'
321	),
322	},
323	{
324	value: 'left bottom',
325	label: __(
326	'Bottom Left',
327	'ultimate-addons-for-gutenberg'
328	),
329	},
330	{
331	value: 'center bottom',
332	label: __(
333	'Bottom Center',
334	'ultimate-addons-for-gutenberg'
335	),
336	},
337	{
338	value: 'right bottom',
339	label: __(
340	'Bottom Right',
341	'ultimate-addons-for-gutenberg'
342	),
343	},
344	] }
345	/>
346	</div>
347	<div className="uag-background-image-attachment">
348	<SelectControl
349	label={ __(
350	'Attachment',
351	'ultimate-addons-for-gutenberg'
352	) }
353	value={ backgroundAttachment.value }
354	onChange={ ( value ) =>
355	setAttributes( {
356	[ backgroundAttachment.label ]: value,
357	} )
358	}
359	options={ [
360	{
361	value: 'fixed',
362	label: __(
363	'Fixed',
364	'ultimate-addons-for-gutenberg'
365	),
366	},
367	{
368	value: 'scroll',
369	label: __(
370	'Scroll',
371	'ultimate-addons-for-gutenberg'
372	),
373	},
374	] }
375	/>
376	</div>
377	<div className="uag-background-image-repeat">
378	<SelectControl
379	label={ __(
380	'Repeat',
381	'ultimate-addons-for-gutenberg'
382	) }
383	value={ backgroundRepeat.value }
384	onChange={ ( value ) =>
385	setAttributes( {
386	[ backgroundRepeat.label ]: value,
387	} )
388	}
389	options={ [
390	{
391	value: 'no-repeat',
392	label: __(
393	'No Repeat',
394	'ultimate-addons-for-gutenberg'
395	),
396	},
397	{
398	value: 'repeat',
399	label: __(
400	'Repeat',
401	'ultimate-addons-for-gutenberg'
402	),
403	},
404	{
405	value: 'repeat-x',
406	label: __(
407	'Repeat-x',
408	'ultimate-addons-for-gutenberg'
409	),
410	},
411	{
412	value: 'repeat-y',
413	label: __(
414	'Repeat-y',
415	'ultimate-addons-for-gutenberg'
416	),
417	},
418	] }
419	/>
420	</div>
421	<div className="uag-background-image-size">
422	<SelectControl
423	label={ __(
424	'Size',
425	'ultimate-addons-for-gutenberg'
426	) }
427	value={ backgroundSize.value }
428	onChange={ ( value ) =>
429	setAttributes( {
430	[ backgroundSize.label ]: value,
431	} )
432	}
433	options={ bgSizeOptions }
434	/>
435	{ 'custom' === backgroundSize.value && backgroundCustomSize &&
436	<ResponsiveSlider
437	label={ __(
438	'Width',
439	'ultimate-addons-for-gutenberg'
440	) }
441	data={ {
442	desktop: {
443	value: backgroundCustomSize.desktop.value,
444	label: backgroundCustomSize.desktop.label,
445	},
446	tablet: {
447	value: backgroundCustomSize.tablet.value,
448	label: backgroundCustomSize.tablet.label,
449	},
450	mobile: {
451	value: backgroundCustomSize.mobile.value,
452	label: backgroundCustomSize.mobile.label,
453	},
454	} }
455	min={ 0 }
456	limitMax={ { 'px': 1600, '%': 100, 'em': 574 } }
457	unit={ {
458	value: backgroundCustomSizeType.value,
459	label: backgroundCustomSizeType.label,
460	} }
461	units={ [
462	{
463	name: __(
464	'PX',
465	'ultimate-addons-for-gutenberg'
466	),
467	unitValue: 'px',
468	},
469	{
470	name: __( '%', 'ultimate-addons-for-gutenberg' ),
471	unitValue: '%',
472	},
473	{
474	name: __( 'EM', 'ultimate-addons-for-gutenberg' ),
475	unitValue: 'em',
476	},
477	] }
478	setAttributes={ setAttributes }
479	/>
480	}
481	</div>
482	</>
483	) }
484	{ imageResponsive && backgroundImage &&
485	<ResponsiveUAGImage
486	backgroundImage={backgroundImage}
487	setAttributes={setAttributes}
488	/>
489	}
490	{ imageResponsive && backgroundImage[deviceType] && backgroundImage[deviceType]?.value && (
491	<>
492	<div className="uag-background-image-position">
493	<MultiButtonsControl
494	setAttributes={ setAttributes }
495	label={ __(
496	'Image Position',
497	'ultimate-addons-for-gutenberg'
498	) }
499	data={ {
500	value: customPosition.value,
501	label: customPosition.label,
502	} }
503	options={ [
504	{ value: 'default', label: __( 'Default' ) },
505	{ value: 'custom', label: __( 'Custom' ) },
506	] }
507	/>
508	</div>
509	{ 'custom' !== customPosition.value && (
510	<div className="uag-background-image-position">
511	<ResponsiveUAGFocalPointPicker
512	backgroundPosition={backgroundPosition}
513	setAttributes={ setAttributes }
514	backgroundImage={backgroundImage}
515	/>
516	</div>
517	) }
518	{ 'custom' === customPosition.value && (
519	<>
520	<div className="uag-background-image-position">
521	<ResponsiveSlider
522	label={ __( 'X Position', 'ultimate-addons-for-gutenberg' ) }
523	data={ {
524	desktop: {
525	value: xPositionDesktop.value,
526	label: 'xPositionDesktop',
527	unit: {
528	value: xPositionType.value,
529	label: 'xPositionType',
530	},
531	},
532	tablet: {
533	value: xPositionTablet.value,
534	label: 'xPositionTablet',
535	unit: {
536	value: xPositionTypeTablet.value,
537	label: 'xPositionTypeTablet',
538	},
539	},
540	mobile: {
541	value: xPositionMobile.value,
542	label: 'xPositionMobile',
543	unit: {
544	value: xPositionTypeMobile.value,
545	label: 'xPositionTypeMobile',
546	},
547	},
548	} }
549	limitMin={ { 'px': -800, '%': -100, 'em': -100, 'vw': -100 } }
550	limitMax={ { 'px': 800, '%': 100, 'em': 100, 'vw': 100 } }
551	units={ [
552	{
553	name: __(
554	'PX',
555	'ultimate-addons-for-gutenberg'
556	),
557	unitValue: 'px',
558	},
559	{
560	name: __( '%', 'ultimate-addons-for-gutenberg' ),
561	unitValue: '%',
562	},
563	{
564	name: __( 'EM', 'ultimate-addons-for-gutenberg' ),
565	unitValue: 'em',
566	},
567	{
568	name: __( 'VW', 'ultimate-addons-for-gutenberg' ),
569	unitValue: 'vw',
570	},
571	] }
572	setAttributes={ setAttributes }
573	/>
574	</div>
575	<div className="uag-background-image-position">
576	<ResponsiveSlider
577	label={ __( 'Y Position', 'ultimate-addons-for-gutenberg' ) }
578	data={ {
579	desktop: {
580	value: yPositionDesktop.value,
581	label: 'yPositionDesktop',
582	unit: {
583	value: yPositionType.value,
584	label: 'yPositionType',
585	},
586	},
587	tablet: {
588	value: yPositionTablet.value,
589	label: 'yPositionTablet',
590	unit: {
591	value: yPositionTypeTablet.value,
592	label: 'yPositionTypeTablet',
593	},
594	},
595	mobile: {
596	value: yPositionMobile.value,
597	label: 'yPositionMobile',
598	unit: {
599	value: yPositionTypeMobile.value,
600	label: 'yPositionTypeMobile',
601	},
602	},
603	} }
604	limitMin={ { 'px': -800, '%': -100, 'em': -100, 'vw': -100 } }
605	limitMax={ { 'px': 800, '%': 100, 'em': 100, 'vw': 100 } }
606	units={ [
607	{
608	name: __(
609	'PX',
610	'ultimate-addons-for-gutenberg'
611	),
612	unitValue: 'px',
613	},
614	{
615	name: __( '%', 'ultimate-addons-for-gutenberg' ),
616	unitValue: '%',
617	},
618	{
619	name: __( 'EM', 'ultimate-addons-for-gutenberg' ),
620	unitValue: 'em',
621	},
622	{
623	name: __( 'VW', 'ultimate-addons-for-gutenberg' ),
624	unitValue: 'vw',
625	},
626	] }
627	setAttributes={ setAttributes }
628	/>
629	</div>
630	</>
631	) }
632	<div className="uag-background-image-attachment">
633	<ResponsiveSelectControl
634	label={ __( 'Attachment', 'ultimate-addons-for-gutenberg' ) }
635	data={backgroundAttachment}
636	options={ { desktop: [
637	{
638	value: 'fixed',
639	label: __(
640	'Fixed',
641	'ultimate-addons-for-gutenberg'
642	),
643	},
644	{
645	value: 'scroll',
646	label: __(
647	'Scroll',
648	'ultimate-addons-for-gutenberg'
649	),
650	},
651	] } }
652	setAttributes={ setAttributes }
653	/>
654	</div>
655	<div className="uag-background-image-repeat">
656	<ResponsiveSelectControl
657	label={ __( 'Repeat', 'ultimate-addons-for-gutenberg' ) }
658	data={backgroundRepeat}
659	options={ { desktop: [
660	{
661	value: 'no-repeat',
662	label: __(
663	'No Repeat',
664	'ultimate-addons-for-gutenberg'
665	),
666	},
667	{
668	value: 'repeat',
669	label: __(
670	'Repeat',
671	'ultimate-addons-for-gutenberg'
672	),
673	},
674	{
675	value: 'repeat-x',
676	label: __(
677	'Repeat-x',
678	'ultimate-addons-for-gutenberg'
679	),
680	},
681	{
682	value: 'repeat-y',
683	label: __(
684	'Repeat-y',
685	'ultimate-addons-for-gutenberg'
686	),
687	},
688	] } }
689	setAttributes={ setAttributes }
690	/>
691	</div>
692	<div className="uag-background-image-size">
693	<ResponsiveSelectControl
694	label={ __( 'Size', 'ultimate-addons-for-gutenberg' ) }
695	data={backgroundSize}
696	options={ { desktop: [
697	{
698	value: 'auto',
699	label: __(
700	'Auto',
701	'ultimate-addons-for-gutenberg'
702	),
703	},
704	{
705	value: 'cover',
706	label: __(
707	'Cover',
708	'ultimate-addons-for-gutenberg'
709	),
710	},
711	{
712	value: 'contain',
713	label: __(
714	'Contain',
715	'ultimate-addons-for-gutenberg'
716	),
717	},
718	{
719	value: 'custom',
720	label: __(
721	'Custom',
722	'ultimate-addons-for-gutenberg'
723	),
724	},
725	] } }
726	setAttributes={ setAttributes }
727	/>
728	{ 'custom' === backgroundSize[deviceType].value && backgroundCustomSize &&
729	<ResponsiveSlider
730	label={ __(
731	'Width',
732	'ultimate-addons-for-gutenberg'
733	) }
734	data={ backgroundCustomSize }
735	min={ 0 }
736	limitMax={ { 'px': 1600, '%': 100, 'em': 574 } }
737	unit={ {
738	value: backgroundCustomSizeType.value,
739	label: backgroundCustomSizeType.label,
740	} }
741	units={ [
742	{
743	name: __(
744	'PX',
745	'ultimate-addons-for-gutenberg'
746	),
747	unitValue: 'px',
748	},
749	{
750	name: __( '%', 'ultimate-addons-for-gutenberg' ),
751	unitValue: '%',
752	},
753	{
754	name: __( 'EM', 'ultimate-addons-for-gutenberg' ),
755	unitValue: 'em',
756	},
757	] }
758	setAttributes={ setAttributes }
759	/>
760	}
761	</div>
762	</>
763	) }
764	{ overlayType && backgroundImage && ( ( imageResponsive && backgroundImage[deviceType]?.value ) \|\| ( ! imageResponsive && backgroundImage?.value ) ) &&
765	<>
766	<div className="uag-background-image-overlay-type">
767	<MultiButtonsControl
768	setAttributes={ setAttributes }
769	label={ __(
770	'Overlay Type',
771	'ultimate-addons-for-gutenberg'
772	) }
773	data={ {
774	value: overlayType.value,
775	label: overlayType.label,
776	} }
777	className="uagb-multi-button-alignment-control"
778	options={ overlayOptions }
779	showIcons={ false }
780	/>
781	</div>
782	{ 'color' === overlayType.value && (
783	<div className="uag-background-image-overlay-color">
784	<AdvancedPopColorControl
785	label={ __(
786	'Image Overlay Color',
787	'ultimate-addons-for-gutenberg'
788	) }
789	colorValue={
790	backgroundImageColor.value
791	}
792	data={ {
793	value: backgroundImageColor.value,
794	label: backgroundImageColor.label,
795	} }
796	setAttributes={ setAttributes }
797	/>
798	</div>
799	) }
800	{ 'gradient' === overlayType.value && (
801	<div className="uag-background-image-overlay-gradient">
802	<GradientSettings
803	backgroundGradient={
804	props.backgroundGradient
805	}
806	setAttributes={ setAttributes }
807	/>
808	</div>
809	) }
810	</>
811	}
812	</div>
813	) }
814	{ gradientOverlay.value && 'gradient' === backgroundType.value && (
815	<div className="uag-background-gradient">
816	<GradientSettings
817	backgroundGradient={ props.backgroundGradient }
818	setAttributes={ props.setAttributes }
819	/>
820	</div>
821	) }
822	{ 'video' === backgroundType.value && backgroundVideoType.value && (
823	<div className="uag-background-video">
824	<UAGImage
825	onSelectImage={ onSelectVideo }
826	backgroundImage={ backgroundVideo.value }
827	onRemoveImage={ onRemoveVideo }
828	showVideoInput={ true }
829	/>
830	</div>
831	) }
832	{ 'video' === backgroundType.value &&
833	backgroundVideo.value &&
834	backgroundVideoType.value && (
835	<div className="uag-background-video-overlay">
836	{ overlayType && backgroundVideo && backgroundVideo.value &&
837	<>
838	<div className="uag-background-image-overlay-type">
839	<MultiButtonsControl
840	setAttributes={ setAttributes }
841	label={ __(
842	'Overlay Type',
843	'ultimate-addons-for-gutenberg'
844	) }
845	data={ {
846	value: overlayType.value,
847	label: overlayType.label,
848	} }
849	className="uagb-multi-button-alignment-control"
850	options={ overlayOptions }
851	showIcons={ false }
852	/>
853	</div>
854	{ 'color' === overlayType.value && (
855	<div className="uag-background-image-overlay-color">
856	<AdvancedPopColorControl
857	label={ __(
858	'Image Overlay Color',
859	'ultimate-addons-for-gutenberg'
860	) }
861	colorValue={
862	backgroundVideoColor.value
863	}
864	data={ {
865	value: backgroundVideoColor.value,
866	label: backgroundVideoColor.label,
867	} }
868	setAttributes={ setAttributes }
869	onOpacityChange={onOpacityChange}
870	backgroundVideoOpacity={ {
871	value: backgroundVideoOpacity.value,
872	label: backgroundVideoOpacity.label,
873	} }
874	/>
875	</div>
876	) }
877	{ gradientOverlay.value && 'gradient' === overlayType.value && (
878	<div className="uag-background-image-overlay-gradient">
879	<GradientSettings
880	backgroundGradient={
881	props.backgroundGradient
882	}
883	setAttributes={ setAttributes }
884	/>
885	</div>
886	) }
887	</>
888	}
889	</div>
890	) }
891	</>
892	);
893
894	return (
895	<div className="uag-bg-select-control components-base-control">
896	{ advancedControls }
897	</div>
898	);
899	};
900
901	export default Background;
902