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

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

1,144 lines 27.4 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\{
10	Controls_Manager,
11	Group_Control_Background,
12	Group_Control_Box_Shadow,
13	Group_Control_Typography,
14	Repeater,
15	Widget_Base,
16	Utils as Elementor_Utils,
17	};
18	use Elementor\Core\Kits\Documents\Tabs\{
19	Global_Typography,
20	Global_Colors
21	};
22
23	use HelloPlus\Modules\Content\Classes\{
24	Control_Zig_Zag_Animation,
25	Render\Widget_Zig_Zag_Render
26	};
27	use HelloPlus\Modules\Content\Traits\Widget_Repeater_Editable;
28	use HelloPlus\Modules\Theme\Module as Theme_Module;
29	use HelloPlus\Classes\{
30	Ehp_Button,
31	Ehp_Image,
32	Ehp_Padding,
33	};
34	use HelloPlus\Includes\Utils;
35
36	class Zig_Zag extends Widget_Base {
37
38	use Widget_Repeater_Editable;
39
40	public function get_name(): string {
41	return 'zigzag';
42	}
43
44	public function get_title(): string {
45	return esc_html__( 'Zigzag', 'hello-plus' );
46	}
47
48	public function get_categories(): array {
49	return [ Theme_Module::HELLOPLUS_EDITOR_CATEGORY_SLUG ];
50	}
51
52	public function get_keywords(): array {
53	return [ 'zigzag', 'content' ];
54	}
55
56	public function get_icon(): string {
57	return 'eicon-ehp-zigzag';
58	}
59
60	public function get_style_depends(): array {
61	return array_merge( [ 'helloplus-zigzag' ], Utils::get_widgets_depends() );
62	}
63
64	public function get_script_depends(): array {
65	return [ 'helloplus-zigzag-fe' ];
66	}
67
68	public function get_custom_help_url(): string {
69	return 'https://go.elementor.com/zigzag-help';
70	}
71
72	protected function render(): void {
73	$render_strategy = new Widget_Zig_Zag_Render( $this );
74
75	$render_strategy->render();
76	}
77
78	protected function register_controls() {
79	$this->add_content_section();
80	$this->add_style_section();
81	}
82
83	protected function add_content_section() {
84	$this->add_zigzags_content_section();
85	}
86
87	protected function add_style_section() {
88	$this->add_style_layout_section();
89	$this->add_style_text_section();
90	$this->add_style_cta_section();
91	$this->add_style_image_section();
92	$this->add_style_icon_section();
93	$this->add_style_box_section();
94	$this->add_style_alternate_section();
95	}
96
97	private function add_zigzags_content_section() {
98	$this->start_controls_section(
99	'zigzags_content_section',
100	[
101	'label' => esc_html__( 'Zigzags', 'hello-plus' ),
102	'tab' => Controls_Manager::TAB_CONTENT,
103	]
104	);
105
106	$this->add_control(
107	'graphic_element',
108	[
109	'label' => esc_html__( 'Graphic Element', 'hello-plus' ),
110	'type' => Controls_Manager::CHOOSE,
111	'options' => [
112	'image' => [
113	'title' => esc_html__( 'Image', 'hello-plus' ),
114	'icon' => 'eicon-image',
115	],
116	'icon' => [
117	'title' => esc_html__( 'Icon', 'hello-plus' ),
118	'icon' => 'eicon-star',
119	],
120	],
121	'default' => 'image',
122	'toggle' => false,
123	]
124	);
125
126	$this->add_graphic_element_repeater( 'image' );
127
128	$this->add_graphic_element_repeater( 'icon' );
129
130	$this->add_control(
131	'zigzag_title_tag',
132	[
133	'label' => esc_html__( 'Title HTML Tag', 'hello-plus' ),
134	'type' => Controls_Manager::SELECT,
135	'options' => [
136	'h2' => 'H2',
137	'h3' => 'H3',
138	'h4' => 'H4',
139	'h5' => 'H5',
140	'h6' => 'H6',
141	'div' => 'div',
142	'span' => 'span',
143	'p' => 'p',
144	],
145	'default' => 'h2',
146	]
147	);
148
149	$this->end_controls_section();
150	}
151
152	private function add_graphic_element_repeater( $type ) {
153	$repeater = new Repeater();
154
155	if ( 'icon' === $type ) {
156	$repeater->add_control(
157	$type . '_graphic_icon',
158	[
159	'label' => esc_html__( 'Icon', 'hello-plus' ),
160	'type' => Controls_Manager::ICONS,
161	'default' => [
162	'value' => 'fas fa-star',
163	'library' => 'fa-solid',
164	],
165	]
166	);
167	}
168
169	if ( 'image' === $type ) {
170	$repeater->add_control(
171	$type . '_graphic_image',
172	[
173	'label' => esc_html__( 'Image', 'hello-plus' ),
174	'type' => Controls_Manager::MEDIA,
175	'default' => [
176	'url' => Elementor_Utils::get_placeholder_image_src(),
177	],
178	]
179	);
180	}
181
182	$repeater->add_control(
183	$type . '_title',
184	[
185	'label' => esc_html__( 'Title', 'hello-plus' ),
186	'type' => Controls_Manager::TEXT,
187	'default' => esc_html__( 'Social media done right', 'hello-plus' ),
188	'label_block' => true,
189	'placeholder' => esc_html__( 'Type your title here', 'hello-plus' ),
190	'dynamic' => [
191	'active' => true,
192	],
193	]
194	);
195
196	$repeater->add_control(
197	$type . '_description',
198	[
199	'label' => esc_html__( 'Description', 'hello-plus' ),
200	'type' => Controls_Manager::TEXTAREA,
201	'rows' => 6,
202	'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' ),
203	'placeholder' => esc_html__( 'Type your description here', 'hello-plus' ),
204	'dynamic' => [
205	'active' => true,
206	],
207	]
208	);
209
210	$repeater->add_control(
211	$type . '_button_label',
212	[
213	'label' => esc_html__( 'CTA Button', 'hello-plus' ),
214	'type' => Controls_Manager::HEADING,
215	]
216	);
217
218	$repeater->add_control(
219	$type . '_button_text',
220	[
221	'label' => esc_html__( 'Text', 'hello-plus' ),
222	'type' => Controls_Manager::TEXT,
223	'default' => esc_html__( 'Learn More', 'hello-plus' ),
224	'dynamic' => [
225	'active' => true,
226	],
227	]
228	);
229
230	$repeater->add_control(
231	$type . '_button_link',
232	[
233	'label' => esc_html__( 'Link', 'hello-plus' ),
234	'type' => Controls_Manager::URL,
235	'dynamic' => [
236	'active' => true,
237	],
238	]
239	);
240
241	$repeater->add_control(
242	$type . '_button_icon',
243	[
244	'label' => esc_html__( 'Icon', 'hello-plus' ),
245	'type' => Controls_Manager::ICONS,
246	'label_block' => false,
247	'skin' => 'inline',
248	]
249	);
250
251	$this->add_control(
252	$type . '_zigzag_items',
253	[
254	'type' => Controls_Manager::REPEATER,
255	'fields' => $repeater->get_controls(),
256	'default' => [
257	[
258	$type . '_title' => esc_html__( 'Social media done right', 'hello-plus' ),
259	$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.',
260	],
261	[
262	$type . '_title' => esc_html__( 'Award-winning studio', 'hello-plus' ),
263	$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.',
264	],
265	[
266	$type . '_title' => esc_html__( 'Join Our Community', 'hello-plus' ),
267	$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.',
268	],
269	[
270	$type . '_title' => esc_html__( 'Your Perfect Match', 'hello-plus' ),
271	$type . '_description' => 'Discover a personalized shopping journey. Our recommendation engine curates items tailored to your tastes. Each suggestion feels hand-picked.',
272	],
273	],
274	'title_field' => '{{{ ' . $type . '_title }}}',
275	'condition' => [
276	'graphic_element' => $type,
277	],
278	]
279	);
280	}
281
282	private function add_style_layout_section() {
283	$this->start_controls_section(
284	'style_layout_section',
285	[
286	'label' => esc_html__( 'Layout', 'hello-plus' ),
287	'tab' => Controls_Manager::TAB_STYLE,
288	]
289	);
290
291	$this->add_control(
292	'first_zigzag_direction',
293	[
294	'label' => esc_html__( 'Align First Graphic', 'hello-plus' ),
295	'type' => Controls_Manager::CHOOSE,
296	'options' => [
297	'start' => [
298	'title' => esc_html__( 'Start', 'hello-plus' ),
299	'icon' => 'eicon-order-' . ( is_rtl() ? 'end' : 'start' ),
300	],
301	'end' => [
302	'title' => esc_html__( 'End', 'hello-plus' ),
303	'icon' => 'eicon-order-' . ( is_rtl() ? 'start' : 'end' ),
304	],
305	],
306	'default' => 'start',
307	'description' => esc_html__( 'Zigzag content will be stacked on smaller screens', 'hello-plus' ),
308	]
309	);
310
311	$this->add_responsive_control(
312	'content_alignment',
313	[
314	'label' => esc_html__( 'Content Position', 'hello-plus' ),
315	'type' => Controls_Manager::CHOOSE,
316	'options' => [
317	'flex-start' => [
318	'title' => esc_html__( 'Start', 'hello-plus' ),
319	'icon' => 'eicon-align-start-v',
320	],
321	'center' => [
322	'title' => esc_html__( 'Center', 'hello-plus' ),
323	'icon' => 'eicon-align-center-v',
324	],
325	'flex-end' => [
326	'title' => esc_html__( 'End', 'hello-plus' ),
327	'icon' => 'eicon-align-end-v',
328	],
329	],
330	'default' => 'center',
331	'selectors' => [
332	'{{WRAPPER}} .ehp-zigzag' => '--zigzag-content-position: {{VALUE}};',
333	],
334	]
335	);
336
337	$this->add_responsive_control(
338	'content_width',
339	[
340	'label' => esc_html__( 'Content Width', 'hello-plus' ),
341	'type' => Controls_Manager::SLIDER,
342	'size_units' => [ 'px', 'em', 'rem', '%', 'custom' ],
343	'range' => [
344	'px' => [
345	'max' => 1600,
346	],
347	'%' => [
348	'max' => 100,
349	],
350	],
351	'selectors' => [
352	'{{WRAPPER}} .ehp-zigzag' => '--zigzag-content-width: {{SIZE}}{{UNIT}};',
353	],
354	]
355	);
356
357	$this->end_controls_section();
358	}
359
360	private function add_style_image_section() {
361	$this->start_controls_section(
362	'style_image_section',
363	[
364	'label' => esc_html__( 'Image', 'hello-plus' ),
365	'tab' => Controls_Manager::TAB_STYLE,
366	'condition' => [
367	'graphic_element' => 'image',
368	],
369	]
370	);
371
372	$defaults = [
373	'has_image_width_slider' => false,
374	'has_image_width_dropdown' => true,
375	];
376
377	$image = new Ehp_Image( $this, [ 'widget_name' => $this->get_name() ], $defaults );
378	$image->add_style_controls();
379
380	$this->end_controls_section();
381	}
382
383	private function add_style_icon_section() {
384	$this->start_controls_section(
385	'icon_style_section',
386	[
387	'label' => esc_html__( 'Icon', 'hello-plus' ),
388	'tab' => Controls_Manager::TAB_STYLE,
389	'condition' => [
390	'graphic_element' => 'icon',
391	],
392	]
393	);
394
395	$this->add_responsive_control(
396	'icon_width',
397	[
398	'label' => esc_html__( 'Box Width', 'hello-plus' ),
399	'type' => Controls_Manager::SELECT,
400	'options' => [
401	'50%' => '50%',
402	'30%' => '30%',
403	],
404	'default' => '50%',
405	'devices' => [ 'desktop', 'tablet', 'mobile' ],
406	'selectors' => [
407	'{{WRAPPER}} .ehp-zigzag' => '--zigzag-icon-width: {{VALUE}};',
408	],
409	]
410	);
411
412	$this->add_control(
413	'icon_zigzag_color',
414	[
415	'label' => esc_html__( 'Color', 'hello-plus' ),
416	'type' => Controls_Manager::COLOR,
417	'global' => [
418	'default' => Global_Colors::COLOR_SECONDARY,
419	],
420	'selectors' => [
421	'{{WRAPPER}} .ehp-zigzag' => '--zigzag-icon-color: {{VALUE}}',
422	],
423	]
424	);
425
426	$this->add_responsive_control(
427	'icon_zigzag_size',
428	[
429	'label' => esc_html__( 'Icon Size', 'hello-plus' ),
430	'type' => Controls_Manager::SLIDER,
431	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
432	'range' => [
433	'px' => [
434	'max' => 300,
435	],
436	'%' => [
437	'max' => 100,
438	],
439	],
440	'selectors' => [
441	'{{WRAPPER}} .ehp-zigzag' => '--zigzag-icon-size: {{SIZE}}{{UNIT}};',
442	],
443	]
444	);
445
446	$this->end_controls_section();
447	}
448
449	private function add_style_text_section() {
450	$this->start_controls_section(
451	'style_text_section',
452	[
453	'label' => esc_html__( 'Text', 'hello-plus' ),
454	'tab' => Controls_Manager::TAB_STYLE,
455	]
456	);
457
458	$this->add_control(
459	'style_heading',
460	[
461	'label' => esc_html__( 'Heading', 'hello-plus' ),
462	'type' => Controls_Manager::HEADING,
463	]
464	);
465
466	$this->add_control(
467	'title_color',
468	[
469	'label' => esc_html__( 'Text Color', 'hello-plus' ),
470	'type' => Controls_Manager::COLOR,
471	'global' => [
472	'default' => Global_Colors::COLOR_SECONDARY,
473	],
474	'selectors' => [
475	'{{WRAPPER}} .ehp-zigzag .ehp-zigzag__title' => 'color: {{VALUE}};',
476	],
477	]
478	);
479
480	$this->add_group_control(
481	Group_Control_Typography::get_type(),
482	[
483	'name' => 'title_typography',
484	'selector' => '{{WRAPPER}} .ehp-zigzag__title',
485	'global' => [
486	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
487	],
488	]
489	);
490
491	$this->add_control(
492	'style_description',
493	[
494	'label' => esc_html__( 'Description', 'hello-plus' ),
495	'type' => Controls_Manager::HEADING,
496	'separator' => 'before',
497	]
498	);
499
500	$this->add_control(
501	'description_color',
502	[
503	'label' => esc_html__( 'Text Color', 'hello-plus' ),
504	'type' => Controls_Manager::COLOR,
505	'global' => [
506	'default' => Global_Colors::COLOR_TEXT,
507	],
508	'selectors' => [
509	'{{WRAPPER}} .ehp-zigzag' => '--zigzag-description-color: {{VALUE}}',
510	],
511	]
512	);
513
514	$this->add_group_control(
515	Group_Control_Typography::get_type(),
516	[
517	'name' => 'description_typography',
518	'selector' => '{{WRAPPER}} .ehp-zigzag__description',
519	'global' => [
520	'default' => Global_Typography::TYPOGRAPHY_TEXT,
521	],
522	]
523	);
524
525	$this->end_controls_section();
526	}
527
528	private function add_style_cta_section() {
529	$this->start_controls_section(
530	'style_cta_section',
531	[
532	'label' => esc_html__( 'CTA Button', 'hello-plus' ),
533	'tab' => Controls_Manager::TAB_STYLE,
534	]
535	);
536
537	$defaults = [
538	'has_secondary_cta' => false,
539	'button_default_type' => 'link',
540	];
541
542	$button = new Ehp_Button( $this, [ 'widget_name' => $this->get_name() ], $defaults );
543	$button->add_button_type_controls(
544	[
545	'type' => 'primary',
546	'ignore_icon_value_condition' => true,
547	]
548	);
549
550	$this->end_controls_section();
551	}
552
553	private function add_style_box_section() {
554	$this->start_controls_section(
555	'box_style_section',
556	[
557	'label' => esc_html__( 'Box', 'hello-plus' ),
558	'tab' => Controls_Manager::TAB_STYLE,
559	]
560	);
561
562	$this->add_control(
563	'box_background_label',
564	[
565	'label' => esc_html__( 'Background', 'hello-plus' ),
566	'type' => Controls_Manager::HEADING,
567	]
568	);
569
570	$this->add_group_control(
571	Group_Control_Background::get_type(),
572	[
573	'name' => 'background',
574	'types' => [ 'classic', 'gradient' ],
575	'selector' => '{{WRAPPER}} .ehp-zigzag__item-wrapper',
576	'fields_options' => [
577	'background' => [
578	'default' => 'classic',
579	],
580	],
581	]
582	);
583
584	$this->add_responsive_control(
585	'column_gap',
586	[
587	'label' => esc_html__( 'Column Gap', 'hello-plus' ),
588	'type' => Controls_Manager::SLIDER,
589	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
590	'range' => [
591	'px' => [
592	'min' => 0,
593	'max' => 200,
594	],
595	'%' => [
596	'min' => 0,
597	'max' => 100,
598	],
599	],
600	'default' => [
601	'size' => 100,
602	'unit' => 'px',
603	],
604	'tablet_default' => [
605	'size' => 60,
606	'unit' => 'px',
607	],
608	'mobile_default' => [
609	'size' => 60,
610	'unit' => 'px',
611	],
612	'selectors' => [
613	'{{WRAPPER}} .ehp-zigzag' => '--zigzag-column-gap: {{SIZE}}{{UNIT}};',
614	],
615	'separator' => 'before',
616	]
617	);
618
619	$this->add_responsive_control(
620	'row_gap',
621	[
622	'label' => esc_html__( 'Row Gap', 'hello-plus' ),
623	'type' => Controls_Manager::SLIDER,
624	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
625	'range' => [
626	'px' => [
627	'max' => 200,
628	],
629	'%' => [
630	'max' => 100,
631	],
632	],
633	'default' => [
634	'size' => 120,
635	'unit' => 'px',
636	],
637	'tablet_default' => [
638	'size' => 40,
639	'unit' => 'px',
640	],
641	'mobile_default' => [
642	'size' => 32,
643	'unit' => 'px',
644	],
645	'selectors' => [
646	'{{WRAPPER}} .ehp-zigzag' => '--zigzag-row-gap: {{SIZE}}{{UNIT}};',
647	],
648	]
649	);
650
651	$padding = new Ehp_Padding( $this, [
652	'widget_name' => $this->get_name(),
653	'container_prefix' => 'box',
654	'default_padding' => [
655	'top' => 60,
656	'right' => 0,
657	'bottom' => 60,
658	'left' => 0,
659	'unit' => 'px',
660	],
661	] );
662	$padding->add_style_controls();
663
664	$this->add_control(
665	'animation_label',
666	[
667	'label' => esc_html__( 'Motion Effects', 'hello-plus' ),
668	'type' => Controls_Manager::HEADING,
669	'separator' => 'before',
670	]
671	);
672
673	$this->add_responsive_control(
674	'zigzag_animation',
675	[
676	'label' => esc_html__( 'Sequenced Entrance Animation', 'hello-plus' ),
677	'type' => Control_Zig_Zag_Animation::CONTROL_TYPE,
678	'frontend_available' => true,
679	]
680	);
681
682	$this->add_control(
683	'zigzag_animation_duration',
684	[
685	'label' => esc_html__( 'Animation Duration', 'hello-plus' ),
686	'type' => Controls_Manager::SELECT,
687	'options' => [
688	'slow' => esc_html__( 'Slow', 'hello-plus' ),
689	'normal' => esc_html__( 'Normal', 'hello-plus' ),
690	'fast' => esc_html__( 'Fast', 'hello-plus' ),
691	],
692	'default' => 'normal',
693	'selectors' => [
694	'{{WRAPPER}} .ehp-zigzag' => '--zigzag-animation-duration: var(--zigzag-animation-duration-{{VALUE}});',
695	],
696	'condition' => [
697	'zigzag_animation!' => '',
698	],
699	]
700	);
701	$this->add_control(
702	'animation_delay',
703	[
704	'label' => esc_html__( 'Animation Delay', 'hello-plus' ) . ' (ms)',
705	'type' => Controls_Manager::NUMBER,
706	'default' => '',
707	'min' => 0,
708	'step' => 100,
709	'selectors' => [
710	'{{WRAPPER}} .ehp-zigzag' => '--zigzag-animation-delay: {{VALUE}}ms;',
711	],
712	'condition' => [
713	'zigzag_animation!' => '',
714	],
715	'render_type' => 'none',
716	'frontend_available' => true,
717	]
718	);
719
720	$this->end_controls_section();
721	}
722
723	protected function add_style_alternate_section() {
724	$this->start_controls_section(
725	'style_alternate_section',
726	[
727	'label' => esc_html__( 'Alternate Row Style', 'hello-plus' ),
728	'tab' => Controls_Manager::TAB_STYLE,
729	]
730	);
731
732	$this->add_control(
733	'has_alternate_text_styles',
734	[
735	'label' => esc_html__( 'Text Color', 'hello-plus' ),
736	'type' => Controls_Manager::SWITCHER,
737	'label_on' => esc_html__( 'Yes', 'hello-plus' ),
738	'label_off' => esc_html__( 'No', 'hello-plus' ),
739	'return_value' => 'yes',
740	'default' => 'no',
741	]
742	);
743
744	$this->add_control(
745	'alternate_title_color',
746	[
747	'label' => esc_html__( 'Heading Color', 'hello-plus' ),
748	'type' => Controls_Manager::COLOR,
749	'selectors' => [
750	'{{WRAPPER}} .ehp-zigzag__item-wrapper:nth-child(even) .ehp-zigzag__title' => 'color: {{VALUE}}',
751	],
752	'condition' => [
753	'has_alternate_text_styles' => 'yes',
754	],
755	]
756	);
757
758	$this->add_control(
759	'alternate_description_color',
760	[
761	'label' => esc_html__( 'Description Color', 'hello-plus' ),
762	'type' => Controls_Manager::COLOR,
763	'selectors' => [
764	'{{WRAPPER}} .ehp-zigzag__item-wrapper:nth-child(even) .ehp-zigzag__description' => 'color: {{VALUE}}',
765	],
766	'condition' => [
767	'has_alternate_text_styles' => 'yes',
768	],
769	]
770	);
771
772	$this->add_control(
773	'has_alternate_button_styles',
774	[
775	'label' => esc_html__( 'CTA Button', 'hello-plus' ),
776	'type' => Controls_Manager::SWITCHER,
777	'label_on' => esc_html__( 'Yes', 'hello-plus' ),
778	'label_off' => esc_html__( 'No', 'hello-plus' ),
779	'return_value' => 'yes',
780	'default' => 'no',
781	'separator' => 'before',
782	]
783	);
784
785	$this->start_controls_tabs(
786	'alternate_button_tabs',
787	[
788	'condition' => [
789	'has_alternate_button_styles' => 'yes',
790	],
791	]
792	);
793
794	$this->start_controls_tab(
795	'alternate_button_normal_tab',
796	[
797	'label' => esc_html__( 'Normal', 'hello-plus' ),
798	]
799	);
800
801	$this->add_control(
802	'alternate_button_color',
803	[
804	'label' => esc_html__( 'Text Color', 'hello-plus' ),
805	'type' => Controls_Manager::COLOR,
806	'selectors' => [
807	'{{WRAPPER}} .ehp-zigzag' => '--zigzag-button-primary-text-color-alternate: {{VALUE}}',
808	],
809	]
810	);
811
812	$this->add_group_control(
813	Group_Control_Background::get_type(),
814	[
815	'name' => 'zigzag_button_alternate_background',
816	'types' => [ 'classic', 'gradient' ],
817	'exclude' => [ 'image' ],
818	'condition' => [
819	'primary_button_type' => 'button',
820	'has_alternate_button_styles' => 'yes',
821	],
822	'selector' => '{{WRAPPER}} .ehp-zigzag__item-wrapper:nth-child(even) .is-type-button.ehp-zigzag__button--primary',
823	]
824	);
825
826	$this->end_controls_tab();
827
828	$this->start_controls_tab(
829	'alternate_button_hover_tab',
830	[
831	'label' => esc_html__( 'Hover', 'hello-plus' ),
832	]
833	);
834
835	$this->add_control(
836	'alternate_button_hover_color',
837	[
838	'label' => esc_html__( 'Text Color', 'hello-plus' ),
839	'type' => Controls_Manager::COLOR,
840	'selectors' => [
841	'{{WRAPPER}} .ehp-zigzag' => '--zigzag-button-primary-text-color-hover-alternate: {{VALUE}}',
842	],
843	]
844	);
845
846	$this->add_group_control(
847	Group_Control_Background::get_type(),
848	[
849	'name' => 'zigzag_button_alternate_background_hover',
850	'types' => [ 'classic', 'gradient' ],
851	'exclude' => [ 'image' ],
852	'condition' => [
853	'primary_button_type' => 'button',
854	'has_alternate_button_styles' => 'yes',
855	],
856	'selector' => '{{WRAPPER}} .ehp-zigzag__item-wrapper:nth-child(even) .is-type-button.ehp-zigzag__button--primary:hover, {{WRAPPER}} .ehp-zigzag__item-wrapper:nth-child(even) .is-type-button.ehp-zigzag__button--primary:focus',
857	]
858	);
859
860	$this->end_controls_tab();
861
862	$this->end_controls_tabs();
863
864	$this->add_control(
865	'has_alternate_button_border',
866	[
867	'label' => esc_html__( 'Border', 'hello-plus' ),
868	'type' => Controls_Manager::SWITCHER,
869	'label_on' => esc_html__( 'Yes', 'hello-plus' ),
870	'label_off' => esc_html__( 'No', 'hello-plus' ),
871	'return_value' => 'yes',
872	'separator' => 'before',
873	'condition' => [
874	'primary_button_type' => 'button',
875	'has_alternate_button_styles' => 'yes',
876	],
877	]
878	);
879
880	$this->add_control(
881	'alternate_button_border_width',
882	[
883	'label' => __( 'Border Width', 'hello-plus' ),
884	'type' => Controls_Manager::SLIDER,
885	'size_units' => [ 'px' ],
886	'range' => [
887	'px' => [
888	'min' => 0,
889	'max' => 10,
890	'step' => 1,
891	],
892	],
893	'default' => [
894	'size' => 1,
895	'unit' => 'px',
896	],
897	'selectors' => [
898	'{{WRAPPER}} .ehp-zigzag' => '--zigzag-button-primary-border-width-alternate: {{SIZE}}{{UNIT}}',
899	],
900	'condition' => [
901	'primary_button_type' => 'button',
902	'has_alternate_button_styles' => 'yes',
903	'has_alternate_button_border' => 'yes',
904	],
905	]
906	);
907
908	$this->add_control(
909	'alternate_button_border_color',
910	[
911	'label' => esc_html__( 'Color', 'hello-plus' ),
912	'type' => Controls_Manager::COLOR,
913	'global' => [
914	'default' => Global_Colors::COLOR_TEXT,
915	],
916	'selectors' => [
917	'{{WRAPPER}} .ehp-zigzag' => '--zigzag-button-primary-border-color-alternate: {{VALUE}}',
918	],
919	'condition' => [
920	'primary_button_type' => 'button',
921	'has_alternate_button_styles' => 'yes',
922	'has_alternate_button_border' => 'yes',
923	],
924	]
925	);
926
927	$this->add_group_control(
928	Group_Control_Box_Shadow::get_type(),
929	[
930	'name' => 'alternate_box_shadow',
931	'selector' => '{{WRAPPER}} .ehp-zigzag__item-wrapper:nth-child(even) .is-type-button.ehp-zigzag__button--primary',
932	'condition' => [
933	'primary_button_type' => 'button',
934	'has_alternate_button_styles' => 'yes',
935	],
936	]
937	);
938
939	$this->add_control(
940	'has_alternate_icon_color',
941	[
942	'label' => esc_html__( 'Icon Color', 'hello-plus' ),
943	'type' => Controls_Manager::SWITCHER,
944	'label_on' => esc_html__( 'Yes', 'hello-plus' ),
945	'label_off' => esc_html__( 'No', 'hello-plus' ),
946	'return_value' => 'yes',
947	'default' => 'no',
948	'separator' => 'before',
949	'condition' => [
950	'graphic_element' => 'icon',
951	],
952	]
953	);
954
955	$this->add_control(
956	'icon_alternate_color',
957	[
958	'label' => esc_html__( 'Color', 'hello-plus' ),
959	'type' => Controls_Manager::COLOR,
960	'selectors' => [
961	'{{WRAPPER}} .ehp-zigzag' => '--zigzag-icon-color-alternate: {{VALUE}}',
962	],
963	'global' => [
964	'default' => Global_Colors::COLOR_ACCENT,
965	],
966	'condition' => [
967	'has_alternate_icon_color' => 'yes',
968	],
969	]
970	);
971
972	$this->add_control(
973	'show_alternate_background',
974	[
975	'label' => esc_html__( 'Background', 'hello-plus' ),
976	'type' => Controls_Manager::SWITCHER,
977	'label_on' => esc_html__( 'Yes', 'hello-plus' ),
978	'label_off' => esc_html__( 'No', 'hello-plus' ),
979	'return_value' => 'yes',
980	'default' => 'no',
981	'separator' => 'before',
982	]
983	);
984
985	$this->add_group_control(
986	Group_Control_Background::get_type(),
987	[
988	'name' => 'alternate_background',
989	'types' => [ 'classic', 'gradient' ],
990	'fields_options' => [
991	'background' => [
992	'default' => 'classic',
993	],
994	'color' => [
995	'default' => '#F6F7F8',
996	],
997	],
998	'condition' => [
999	'show_alternate_background' => 'yes',
1000	],
1001	'selector' => '{{WRAPPER}} .ehp-zigzag__item-wrapper:nth-child(even)',
1002	]
1003	);
1004
1005	$this->add_control(
1006	'has_alternate_padding',
1007	[
1008	'label' => esc_html__( 'Padding', 'hello-plus' ),
1009	'type' => Controls_Manager::SWITCHER,
1010	'label_on' => esc_html__( 'Yes', 'hello-plus' ),
1011	'label_off' => esc_html__( 'No', 'hello-plus' ),
1012	'return_value' => 'yes',
1013	'default' => 'no',
1014	'separator' => 'before',
1015	]
1016	);
1017
1018	$this->add_responsive_control(
1019	'alternate_padding_horizontal',
1020	[
1021	'label' => esc_html__( 'Horizontal Padding', 'hello-plus' ),
1022	'type' => Controls_Manager::SLIDER,
1023	'size_units' => [ 'px' ],
1024	'range' => [
1025	'px' => [
1026	'min' => 0,
1027	'max' => 100,
1028	],
1029	],
1030	'selectors' => [
1031	'{{WRAPPER}} .ehp-zigzag__item-wrapper:nth-child(even)' => '--zigzag-box-padding-inline-start: {{SIZE}}{{UNIT}}; --zigzag-box-padding-inline-end: {{SIZE}}{{UNIT}};',
1032	],
1033	'condition' => [
1034	'has_alternate_padding' => 'yes',
1035	],
1036	]
1037	);
1038
1039	$this->add_control(
1040	'animation_alternate',
1041	[
1042	'label' => esc_html__( 'Motion Effects', 'hello-plus' ),
1043	'type' => Controls_Manager::SWITCHER,
1044	'label_on' => esc_html__( 'Yes', 'hello-plus' ),
1045	'label_off' => esc_html__( 'No', 'hello-plus' ),
1046	'return_value' => 'yes',
1047	'default' => 'no',
1048	'separator' => 'before',
1049	'conditions' => [
1050	'relation' => 'or',
1051	'terms' => [
1052	[
1053	'name' => 'zigzag_animation',
1054	'operator' => '===',
1055	'value' => 'fadeInLeft',
1056	],
1057	[
1058	'name' => 'zigzag_animation',
1059	'operator' => '===',
1060	'value' => 'fadeInRight',
1061	],
1062	[
1063	'name' => 'zigzag_animation',
1064	'operator' => '===',
1065	'value' => 'bounceInLeft',
1066	],
1067	[
1068	'name' => 'zigzag_animation',
1069	'operator' => '===',
1070	'value' => 'bounceInRight',
1071	],
1072	[
1073	'name' => 'zigzag_animation',
1074	'operator' => '===',
1075	'value' => 'slideInLeft',
1076	],
1077	[
1078	'name' => 'zigzag_animation',
1079	'operator' => '===',
1080	'value' => 'slideInRight',
1081	],
1082	],
1083	],
1084	]
1085	);
1086
1087	$this->add_responsive_control(
1088	'zigzag_animation_alternate',
1089	[
1090	'label' => esc_html__( 'Sequenced Entrance Animation', 'hello-plus' ),
1091	'type' => Control_Zig_Zag_Animation::CONTROL_TYPE,
1092	'frontend_available' => true,
1093	'conditions' => [
1094	'relation' => 'and',
1095	'terms' => [
1096	[
1097	'name' => 'animation_alternate',
1098	'operator' => '===',
1099	'value' => 'yes',
1100	],
1101	[
1102	'relation' => 'or',
1103	'terms' => [
1104	[
1105	'name' => 'zigzag_animation',
1106	'operator' => '===',
1107	'value' => 'fadeInLeft',
1108	],
1109	[
1110	'name' => 'zigzag_animation',
1111	'operator' => '===',
1112	'value' => 'fadeInRight',
1113	],
1114	[
1115	'name' => 'zigzag_animation',
1116	'operator' => '===',
1117	'value' => 'bounceInLeft',
1118	],
1119	[
1120	'name' => 'zigzag_animation',
1121	'operator' => '===',
1122	'value' => 'bounceInRight',
1123	],
1124	[
1125	'name' => 'zigzag_animation',
1126	'operator' => '===',
1127	'value' => 'slideInLeft',
1128	],
1129	[
1130	'name' => 'zigzag_animation',
1131	'operator' => '===',
1132	'value' => 'slideInRight',
1133	],
1134	],
1135	],
1136	],
1137	],
1138	]
1139	);
1140
1141	$this->end_controls_section();
1142	}
1143	}
1144