hello-plus / modules / content / widgets / zig-zag.php

zig-zag.php in Hello Plus 1.4.0, at modules/content/widgets/zig-zag.php

873 lines 20.6 KB

Raw Download Zip

1	<?php
2
3	namespace HelloPlus\Modules\Content\Widgets;
4
5	if ( ! defined( 'ABSPATH' ) ) {
6	exit; // Exit if accessed directly.
7	}
8
9	use Elementor\Controls_Manager;
10	use Elementor\Group_Control_Background;
11	use Elementor\Group_Control_Typography;
12	use Elementor\Repeater;
13	use Elementor\Widget_Base;
14	use Elementor\Core\Kits\Documents\Tabs\{
15	Global_Typography,
16	Global_Colors
17	};
18	use Elementor\Utils as Elementor_Utils;
19
20	use HelloPlus\Modules\Content\Classes\{
21	Control_Zig_Zag_Animation,
22	Render\Widget_Zig_Zag_Render
23	};
24	use HelloPlus\Modules\Theme\Module as Theme_Module;
25	use HelloPlus\Classes\{
26	Ehp_Button,
27	Ehp_Image,
28	Ehp_Padding,
29	};
30	use HelloPlus\Includes\Utils;
31
32	class Zig_Zag extends Widget_Base {
33
34	public function get_name(): string {
35	return 'zigzag';
36	}
37
38	public function get_title(): string {
39	return esc_html__( 'Zigzag', 'hello-plus' );
40	}
41
42	public function get_categories(): array {
43	return [ Theme_Module::HELLOPLUS_EDITOR_CATEGORY_SLUG ];
44	}
45
46	public function get_keywords(): array {
47	return [ 'zigzag', 'content' ];
48	}
49
50	public function get_icon(): string {
51	return 'eicon-ehp-zigzag';
52	}
53
54	public function get_style_depends(): array {
55	return array_merge( [ 'helloplus-zigzag' ], Utils::get_widgets_depends() );
56	}
57
58	public function get_script_depends(): array {
59	return [ 'helloplus-zigzag-fe' ];
60	}
61
62	protected function render(): void {
63	$render_strategy = new Widget_Zig_Zag_Render( $this );
64
65	$render_strategy->render();
66	}
67
68	protected function register_controls() {
69	$this->add_content_section();
70	$this->add_style_section();
71	}
72
73	protected function add_content_section() {
74	$this->add_zigzags_content_section();
75	}
76
77	protected function add_style_section() {
78	$this->add_style_layout_section();
79	$this->add_style_text_section();
80	$this->add_style_cta_section();
81	$this->add_style_image_section();
82	$this->add_style_icon_section();
83	$this->add_style_box_section();
84	}
85
86	private function add_zigzags_content_section() {
87	$this->start_controls_section(
88	'zigzags_content_section',
89	[
90	'label' => esc_html__( 'Zigzags', 'hello-plus' ),
91	'tab' => Controls_Manager::TAB_CONTENT,
92	]
93	);
94
95	$this->add_control(
96	'graphic_element',
97	[
98	'label' => esc_html__( 'Graphic Element', 'hello-plus' ),
99	'type' => Controls_Manager::CHOOSE,
100	'options' => [
101	'image' => [
102	'title' => esc_html__( 'Image', 'hello-plus' ),
103	'icon' => 'eicon-image',
104	],
105	'icon' => [
106	'title' => esc_html__( 'Icon', 'hello-plus' ),
107	'icon' => 'eicon-star',
108	],
109	],
110	'default' => 'image',
111	'toggle' => false,
112	]
113	);
114
115	$this->add_graphic_element_repeater( 'image' );
116
117	$this->add_graphic_element_repeater( 'icon' );
118
119	$this->add_control(
120	'zigzag_title_tag',
121	[
122	'label' => esc_html__( 'Title HTML Tag', 'hello-plus' ),
123	'type' => Controls_Manager::SELECT,
124	'options' => [
125	'h2' => 'H2',
126	'h3' => 'H3',
127	'h4' => 'H4',
128	'h5' => 'H5',
129	'h6' => 'H6',
130	'div' => 'div',
131	'span' => 'span',
132	'p' => 'p',
133	],
134	'default' => 'h2',
135	]
136	);
137
138	$this->end_controls_section();
139	}
140
141	private function add_graphic_element_repeater( $type ) {
142	$repeater = new Repeater();
143
144	if ( 'icon' === $type ) {
145	$repeater->add_control(
146	$type . '_graphic_icon',
147	[
148	'label' => esc_html__( 'Icon', 'hello-plus' ),
149	'type' => Controls_Manager::ICONS,
150	'default' => [
151	'value' => 'fas fa-star',
152	'library' => 'fa-solid',
153	],
154	]
155	);
156	}
157
158	if ( 'image' === $type ) {
159	$repeater->add_control(
160	$type . '_graphic_image',
161	[
162	'label' => esc_html__( 'Image', 'hello-plus' ),
163	'type' => Controls_Manager::MEDIA,
164	'default' => [
165	'url' => Elementor_Utils::get_placeholder_image_src(),
166	],
167	]
168	);
169	}
170
171	$repeater->add_control(
172	$type . '_title',
173	[
174	'label' => esc_html__( 'Title', 'hello-plus' ),
175	'type' => Controls_Manager::TEXT,
176	'default' => esc_html__( 'Social media done right', 'hello-plus' ),
177	'label_block' => true,
178	'placeholder' => esc_html__( 'Type your title here', 'hello-plus' ),
179	'dynamic' => [
180	'active' => true,
181	],
182	]
183	);
184
185	$repeater->add_control(
186	$type . '_description',
187	[
188	'label' => esc_html__( 'Description', 'hello-plus' ),
189	'type' => Controls_Manager::TEXTAREA,
190	'rows' => 6,
191	'default' => esc_html__( 'Unlock the full potential of social media with our expert strategies and proven techniques. Let us guide you towards success in the online world and make your brand shine on every platform.', 'hello-plus' ),
192	'placeholder' => esc_html__( 'Type your description here', 'hello-plus' ),
193	'dynamic' => [
194	'active' => true,
195	],
196	]
197	);
198
199	$repeater->add_control(
200	$type . '_button_label',
201	[
202	'label' => esc_html__( 'CTA Button', 'hello-plus' ),
203	'type' => Controls_Manager::HEADING,
204	]
205	);
206
207	$repeater->add_control(
208	$type . '_button_text',
209	[
210	'label' => esc_html__( 'Text', 'hello-plus' ),
211	'type' => Controls_Manager::TEXT,
212	'default' => esc_html__( 'Learn More', 'hello-plus' ),
213	'dynamic' => [
214	'active' => true,
215	],
216	]
217	);
218
219	$repeater->add_control(
220	$type . '_button_link',
221	[
222	'label' => esc_html__( 'Link', 'hello-plus' ),
223	'type' => Controls_Manager::URL,
224	'dynamic' => [
225	'active' => true,
226	],
227	]
228	);
229
230	$repeater->add_control(
231	$type . '_button_icon',
232	[
233	'label' => esc_html__( 'Icon', 'hello-plus' ),
234	'type' => Controls_Manager::ICONS,
235	'label_block' => false,
236	'skin' => 'inline',
237	]
238	);
239
240	$this->add_control(
241	$type . '_zigzag_items',
242	[
243	'type' => Controls_Manager::REPEATER,
244	'fields' => $repeater->get_controls(),
245	'default' => [
246	[
247	$type . '_title' => esc_html__( 'Social media done right', 'hello-plus' ),
248	$type . '_description' => 'Unlock the full potential of social media with our expert strategies and proven techniques. Let us guide you towards success in the online world and make your brand shine on every platform.',
249	],
250	[
251	$type . '_title' => esc_html__( 'Award-winning studio', 'hello-plus' ),
252	$type . '_description' => 'Experience the unparalleled creativity and excellence of our award-winning studio. Our team of talented artists and industry professionals are dedicated to delivering innovative and impactful designs.',
253	],
254	[
255	$type . '_title' => esc_html__( 'Join Our Community', 'hello-plus' ),
256	$type . '_description' => 'Join our vibrant community and connect with like-minded individuals who share your passions and interests. Together, we can inspire, support, and empower each other to reach our goals.',
257	],
258	[
259	$type . '_title' => esc_html__( 'Your Perfect Match', 'hello-plus' ),
260	$type . '_description' => 'Discover a personalized shopping journey. Our recommendation engine curates items tailored to your tastes. Each suggestion feels hand-picked.',
261	],
262	],
263	'title_field' => '{{{ ' . $type . '_title }}}',
264	'condition' => [
265	'graphic_element' => $type,
266	],
267	]
268	);
269	}
270
271	private function add_style_layout_section() {
272	$this->start_controls_section(
273	'style_layout_section',
274	[
275	'label' => esc_html__( 'Layout', 'hello-plus' ),
276	'tab' => Controls_Manager::TAB_STYLE,
277	]
278	);
279
280	$this->add_control(
281	'first_zigzag_direction',
282	[
283	'label' => esc_html__( 'Align First Graphic', 'hello-plus' ),
284	'type' => Controls_Manager::CHOOSE,
285	'options' => [
286	'start' => [
287	'title' => esc_html__( 'Start', 'hello-plus' ),
288	'icon' => 'eicon-order-' . ( is_rtl() ? 'end' : 'start' ),
289	],
290	'end' => [
291	'title' => esc_html__( 'End', 'hello-plus' ),
292	'icon' => 'eicon-order-' . ( is_rtl() ? 'start' : 'end' ),
293	],
294	],
295	'default' => 'start',
296	'description' => esc_html__( 'Zigzag content will be stacked on smaller screens', 'hello-plus' ),
297	]
298	);
299
300	$this->add_responsive_control(
301	'content_alignment',
302	[
303	'label' => esc_html__( 'Content Position', 'hello-plus' ),
304	'type' => Controls_Manager::CHOOSE,
305	'options' => [
306	'flex-start' => [
307	'title' => esc_html__( 'Start', 'hello-plus' ),
308	'icon' => 'eicon-align-start-v',
309	],
310	'center' => [
311	'title' => esc_html__( 'Center', 'hello-plus' ),
312	'icon' => 'eicon-align-center-v',
313	],
314	'flex-end' => [
315	'title' => esc_html__( 'End', 'hello-plus' ),
316	'icon' => 'eicon-align-end-v',
317	],
318	],
319	'default' => 'center',
320	'selectors' => [
321	'{{WRAPPER}} .ehp-zigzag' => '--zigzag-content-position: {{VALUE}};',
322	],
323	]
324	);
325
326	$this->add_responsive_control(
327	'content_width',
328	[
329	'label' => esc_html__( 'Content Width', 'hello-plus' ),
330	'type' => Controls_Manager::SLIDER,
331	'size_units' => [ 'px', 'em', 'rem', '%', 'custom' ],
332	'range' => [
333	'px' => [
334	'max' => 1600,
335	],
336	'%' => [
337	'max' => 100,
338	],
339	],
340	'selectors' => [
341	'{{WRAPPER}} .ehp-zigzag' => '--zigzag-content-width: {{SIZE}}{{UNIT}};',
342	],
343	]
344	);
345
346	$this->end_controls_section();
347	}
348
349	private function add_style_image_section() {
350	$this->start_controls_section(
351	'style_image_section',
352	[
353	'label' => esc_html__( 'Image', 'hello-plus' ),
354	'tab' => Controls_Manager::TAB_STYLE,
355	'condition' => [
356	'graphic_element' => 'image',
357	],
358	]
359	);
360
361	$defaults = [
362	'has_image_width_slider' => false,
363	'has_image_width_dropdown' => true,
364	];
365
366	$image = new Ehp_Image( $this, [ 'widget_name' => $this->get_name() ], $defaults );
367	$image->add_style_controls();
368
369	$this->end_controls_section();
370	}
371
372	private function add_style_icon_section() {
373	$this->start_controls_section(
374	'icon_style_section',
375	[
376	'label' => esc_html__( 'Icon', 'hello-plus' ),
377	'tab' => Controls_Manager::TAB_STYLE,
378	'condition' => [
379	'graphic_element' => 'icon',
380	],
381	]
382	);
383
384	$this->add_responsive_control(
385	'icon_width',
386	[
387	'label' => esc_html__( 'Box Width', 'hello-plus' ),
388	'type' => Controls_Manager::SELECT,
389	'options' => [
390	'50%' => '50%',
391	'30%' => '30%',
392	],
393	'default' => '50%',
394	'devices' => [ 'desktop', 'tablet', 'mobile' ],
395	'selectors' => [
396	'{{WRAPPER}} .ehp-zigzag' => '--zigzag-icon-width: {{VALUE}};',
397	],
398	]
399	);
400
401	$this->add_control(
402	'icon_zigzag_color',
403	[
404	'label' => esc_html__( 'Color', 'hello-plus' ),
405	'type' => Controls_Manager::COLOR,
406	'global' => [
407	'default' => Global_Colors::COLOR_SECONDARY,
408	],
409	'selectors' => [
410	'{{WRAPPER}} .ehp-zigzag' => '--zigzag-icon-color: {{VALUE}}',
411	],
412	]
413	);
414
415	$this->add_control(
416	'has_alternate_icon_color',
417	[
418	'label' => esc_html__( 'Alternate Icon Color', 'hello-plus' ),
419	'type' => Controls_Manager::SWITCHER,
420	'label_on' => esc_html__( 'Yes', 'hello-plus' ),
421	'label_off' => esc_html__( 'No', 'hello-plus' ),
422	'return_value' => 'yes',
423	'default' => 'no',
424	'frontend_available' => true,
425	]
426	);
427
428	$this->add_control(
429	'icon_alternate_color',
430	[
431	'label' => esc_html__( 'Alternate Color', 'hello-plus' ),
432	'type' => Controls_Manager::COLOR,
433	'global' => [
434	'default' => Global_Colors::COLOR_ACCENT,
435	],
436	'selectors' => [
437	'{{WRAPPER}} .ehp-zigzag' => '--zigzag-icon-color-alternate: {{VALUE}}',
438	],
439	'condition' => [
440	'has_alternate_icon_color' => 'yes',
441	],
442	]
443	);
444
445	$this->add_responsive_control(
446	'icon_zigzag_size',
447	[
448	'label' => esc_html__( 'Icon Size', 'hello-plus' ),
449	'type' => Controls_Manager::SLIDER,
450	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
451	'range' => [
452	'px' => [
453	'max' => 300,
454	],
455	'%' => [
456	'max' => 100,
457	],
458	],
459	'selectors' => [
460	'{{WRAPPER}} .ehp-zigzag' => '--zigzag-icon-size: {{SIZE}}{{UNIT}};',
461	],
462	]
463	);
464
465	$this->end_controls_section();
466	}
467
468	private function add_style_text_section() {
469	$this->start_controls_section(
470	'style_text_section',
471	[
472	'label' => esc_html__( 'Text', 'hello-plus' ),
473	'tab' => Controls_Manager::TAB_STYLE,
474	]
475	);
476
477	$this->add_control(
478	'style_heading',
479	[
480	'label' => esc_html__( 'Heading', 'hello-plus' ),
481	'type' => Controls_Manager::HEADING,
482	]
483	);
484
485	$this->add_control(
486	'title_color',
487	[
488	'label' => esc_html__( 'Text Color', 'hello-plus' ),
489	'type' => Controls_Manager::COLOR,
490	'global' => [
491	'default' => Global_Colors::COLOR_SECONDARY,
492	],
493	'selectors' => [
494	'{{WRAPPER}} .ehp-zigzag' => '--zigzag-title-color: {{VALUE}}',
495	],
496	]
497	);
498
499	$this->add_group_control(
500	Group_Control_Typography::get_type(),
501	[
502	'name' => 'title_typography',
503	'selector' => '{{WRAPPER}} .ehp-zigzag__title',
504	'global' => [
505	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
506	],
507	]
508	);
509
510	$this->add_control(
511	'style_description',
512	[
513	'label' => esc_html__( 'Description', 'hello-plus' ),
514	'type' => Controls_Manager::HEADING,
515	'separator' => 'before',
516	]
517	);
518
519	$this->add_control(
520	'description_color',
521	[
522	'label' => esc_html__( 'Text Color', 'hello-plus' ),
523	'type' => Controls_Manager::COLOR,
524	'global' => [
525	'default' => Global_Colors::COLOR_TEXT,
526	],
527	'selectors' => [
528	'{{WRAPPER}} .ehp-zigzag' => '--zigzag-description-color: {{VALUE}}',
529	],
530	]
531	);
532
533	$this->add_group_control(
534	Group_Control_Typography::get_type(),
535	[
536	'name' => 'description_typography',
537	'selector' => '{{WRAPPER}} .ehp-zigzag__description',
538	'global' => [
539	'default' => Global_Typography::TYPOGRAPHY_TEXT,
540	],
541	]
542	);
543
544	$this->end_controls_section();
545	}
546
547	private function add_style_cta_section() {
548	$this->start_controls_section(
549	'style_cta_section',
550	[
551	'label' => esc_html__( 'CTA Button', 'hello-plus' ),
552	'tab' => Controls_Manager::TAB_STYLE,
553	]
554	);
555
556	$defaults = [
557	'has_secondary_cta' => false,
558	'button_default_type' => 'link',
559	];
560
561	$button = new Ehp_Button( $this, [ 'widget_name' => $this->get_name() ], $defaults );
562	$button->add_button_type_controls(
563	[
564	'type' => 'primary',
565	'ignore_icon_value_condition' => true,
566	]
567	);
568
569	$this->end_controls_section();
570	}
571
572	private function add_style_box_section() {
573	$this->start_controls_section(
574	'box_style_section',
575	[
576	'label' => esc_html__( 'Box', 'hello-plus' ),
577	'tab' => Controls_Manager::TAB_STYLE,
578	]
579	);
580
581	$this->add_control(
582	'box_background_label',
583	[
584	'label' => esc_html__( 'Background', 'hello-plus' ),
585	'type' => Controls_Manager::HEADING,
586	]
587	);
588
589	$this->add_group_control(
590	Group_Control_Background::get_type(),
591	[
592	'name' => 'background',
593	'types' => [ 'classic', 'gradient' ],
594	'exclude' => [ 'image' ],
595	'selector' => '{{WRAPPER}} .ehp-zigzag__item-wrapper',
596
597	]
598	);
599
600	$this->add_control(
601	'show_alternate_background',
602	[
603	'label' => esc_html__( 'Alternate Background', 'hello-plus' ),
604	'type' => Controls_Manager::SWITCHER,
605	'label_on' => esc_html__( 'Yes', 'hello-plus' ),
606	'label_off' => esc_html__( 'No', 'hello-plus' ),
607	'return_value' => 'yes',
608	'default' => 'no',
609	]
610	);
611
612	$this->add_group_control(
613	Group_Control_Background::get_type(),
614	[
615	'name' => 'alternate_background',
616	'types' => [ 'classic', 'gradient' ],
617	'exclude' => [ 'image' ],
618	'fields_options' => [
619	'background' => [
620	'default' => 'classic',
621	],
622	'color' => [
623	'default' => '#F6F7F8',
624	],
625	],
626	'condition' => [
627	'show_alternate_background' => 'yes',
628	],
629	'selector' => '{{WRAPPER}} .ehp-zigzag__item-wrapper:nth-child(even)',
630	]
631	);
632
633	$this->add_responsive_control(
634	'column_gap',
635	[
636	'label' => esc_html__( 'Column Gap', 'hello-plus' ),
637	'type' => Controls_Manager::SLIDER,
638	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
639	'range' => [
640	'px' => [
641	'min' => 0,
642	'max' => 200,
643	],
644	'%' => [
645	'min' => 0,
646	'max' => 100,
647	],
648	],
649	'default' => [
650	'size' => 100,
651	'unit' => 'px',
652	],
653	'tablet_default' => [
654	'size' => 60,
655	'unit' => 'px',
656	],
657	'mobile_default' => [
658	'size' => 60,
659	'unit' => 'px',
660	],
661	'selectors' => [
662	'{{WRAPPER}} .ehp-zigzag' => '--zigzag-column-gap: {{SIZE}}{{UNIT}};',
663	],
664	'separator' => 'before',
665	]
666	);
667
668	$this->add_responsive_control(
669	'row_gap',
670	[
671	'label' => esc_html__( 'Row Gap', 'hello-plus' ),
672	'type' => Controls_Manager::SLIDER,
673	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
674	'range' => [
675	'px' => [
676	'max' => 200,
677	],
678	'%' => [
679	'max' => 100,
680	],
681	],
682	'default' => [
683	'size' => 120,
684	'unit' => 'px',
685	],
686	'tablet_default' => [
687	'size' => 40,
688	'unit' => 'px',
689	],
690	'mobile_default' => [
691	'size' => 32,
692	'unit' => 'px',
693	],
694	'selectors' => [
695	'{{WRAPPER}} .ehp-zigzag' => '--zigzag-row-gap: {{SIZE}}{{UNIT}};',
696	],
697	]
698	);
699
700	$padding = new Ehp_Padding( $this, [
701	'widget_name' => $this->get_name(),
702	'container_prefix' => 'box',
703	'default_padding' => [
704	'top' => 60,
705	'right' => 0,
706	'bottom' => 60,
707	'left' => 0,
708	'unit' => 'px',
709	],
710	] );
711	$padding->add_style_controls();
712
713	$this->add_control(
714	'animation_label',
715	[
716	'label' => esc_html__( 'Motion Effects', 'hello-plus' ),
717	'type' => Controls_Manager::HEADING,
718	'separator' => 'before',
719	]
720	);
721
722	$this->add_responsive_control(
723	'zigzag_animation',
724	[
725	'label' => esc_html__( 'Sequenced Entrance Animation', 'hello-plus' ),
726	'type' => Control_Zig_Zag_Animation::CONTROL_TYPE,
727	'frontend_available' => true,
728	]
729	);
730
731	$this->add_control(
732	'zigzag_animation_duration',
733	[
734	'label' => esc_html__( 'Animation Duration', 'hello-plus' ),
735	'type' => Controls_Manager::SELECT,
736	'options' => [
737	'slow' => esc_html__( 'Slow', 'hello-plus' ),
738	'normal' => esc_html__( 'Normal', 'hello-plus' ),
739	'fast' => esc_html__( 'Fast', 'hello-plus' ),
740	],
741	'default' => 'normal',
742	'selectors' => [
743	'{{WRAPPER}} .ehp-zigzag' => '--zigzag-animation-duration: var(--zigzag-animation-duration-{{VALUE}});',
744	],
745	'condition' => [
746	'zigzag_animation!' => '',
747	],
748	]
749	);
750	$this->add_control(
751	'animation_delay',
752	[
753	'label' => esc_html__( 'Animation Delay', 'hello-plus' ) . ' (ms)',
754	'type' => Controls_Manager::NUMBER,
755	'default' => '',
756	'min' => 0,
757	'step' => 100,
758	'selectors' => [
759	'{{WRAPPER}} .ehp-zigzag' => '--zigzag-animation-delay: {{VALUE}}ms;',
760	],
761	'condition' => [
762	'zigzag_animation!' => '',
763	],
764	'render_type' => 'none',
765	'frontend_available' => true,
766	]
767	);
768
769	$this->add_control(
770	'animation_alternate',
771	[
772	'label' => esc_html__( 'Alternate Entrance Animation', 'hello-plus' ),
773	'type' => Controls_Manager::SWITCHER,
774	'label_on' => esc_html__( 'Yes', 'hello-plus' ),
775	'label_off' => esc_html__( 'No', 'hello-plus' ),
776	'return_value' => 'yes',
777	'default' => 'no',
778	'conditions' => [
779	'relation' => 'or',
780	'terms' => [
781	[
782	'name' => 'zigzag_animation',
783	'operator' => '===',
784	'value' => 'fadeInLeft',
785	],
786	[
787	'name' => 'zigzag_animation',
788	'operator' => '===',
789	'value' => 'fadeInRight',
790	],
791	[
792	'name' => 'zigzag_animation',
793	'operator' => '===',
794	'value' => 'bounceInLeft',
795	],
796	[
797	'name' => 'zigzag_animation',
798	'operator' => '===',
799	'value' => 'bounceInRight',
800	],
801	[
802	'name' => 'zigzag_animation',
803	'operator' => '===',
804	'value' => 'slideInLeft',
805	],
806	[
807	'name' => 'zigzag_animation',
808	'operator' => '===',
809	'value' => 'slideInRight',
810	],
811	],
812	],
813	]
814	);
815
816	$this->add_responsive_control(
817	'zigzag_animation_alternate',
818	[
819	'label' => esc_html__( 'Alternate Entrance Animation', 'hello-plus' ),
820	'type' => Control_Zig_Zag_Animation::CONTROL_TYPE,
821	'frontend_available' => true,
822	'conditions' => [
823	'relation' => 'and',
824	'terms' => [
825	[
826	'name' => 'animation_alternate',
827	'operator' => '===',
828	'value' => 'yes',
829	],
830	[
831	'relation' => 'or',
832	'terms' => [
833	[
834	'name' => 'zigzag_animation',
835	'operator' => '===',
836	'value' => 'fadeInLeft',
837	],
838	[
839	'name' => 'zigzag_animation',
840	'operator' => '===',
841	'value' => 'fadeInRight',
842	],
843	[
844	'name' => 'zigzag_animation',
845	'operator' => '===',
846	'value' => 'bounceInLeft',
847	],
848	[
849	'name' => 'zigzag_animation',
850	'operator' => '===',
851	'value' => 'bounceInRight',
852	],
853	[
854	'name' => 'zigzag_animation',
855	'operator' => '===',
856	'value' => 'slideInLeft',
857	],
858	[
859	'name' => 'zigzag_animation',
860	'operator' => '===',
861	'value' => 'slideInRight',
862	],
863	],
864	],
865	],
866	],
867	]
868	);
869
870	$this->end_controls_section();
871	}
872	}
873