hello-plus / modules / content / widgets / cta.php

cta.php in Hello Plus 1.4.0, at modules/content/widgets/cta.php

768 lines 18.0 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_Box_Shadow;
12	use Elementor\Group_Control_Typography;
13	use Elementor\Widget_Base;
14	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
15	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
16
17	use HelloPlus\Modules\Content\Base\Traits\Shared_Content_Traits;
18	use HelloPlus\Modules\Content\Classes\Choose_Img_Control;
19	use HelloPlus\Modules\Content\Classes\Render\Widget_CTA_Render;
20	use HelloPlus\Modules\Theme\Module as Theme_Module;
21	use HelloPlus\Classes\{
22	Ehp_Button,
23	Ehp_Image,
24	Ehp_Padding,
25	Ehp_Shapes,
26	};
27	use HelloPlus\Includes\Utils;
28
29	use Elementor\Utils as Elementor_Utils;
30
31	class CTA extends Widget_Base {
32
33	use Shared_Content_Traits;
34
35	public function get_name(): string {
36	return 'cta';
37	}
38
39	public function get_title(): string {
40	return esc_html__( 'CTA', 'hello-plus' );
41	}
42
43	public function get_categories(): array {
44	return [ Theme_Module::HELLOPLUS_EDITOR_CATEGORY_SLUG ];
45	}
46
47	public function get_keywords(): array {
48	return [ 'cta' ];
49	}
50
51	public function get_icon(): string {
52	return 'eicon-ehp-cta';
53	}
54
55	public function get_style_depends(): array {
56	return array_merge( [ 'helloplus-cta' ], Utils::get_widgets_depends() );
57	}
58
59	protected function render(): void {
60	$render_strategy = new Widget_CTA_Render( $this );
61
62	$render_strategy->render();
63	}
64
65	protected function register_controls() {
66	$this->add_content_section();
67	$this->add_style_section();
68	}
69
70	protected function add_content_section() {
71	$this->add_content_layout_section();
72	$this->add_content_image_section();
73	$this->add_content_text_section();
74	$this->add_content_cta_section();
75	}
76
77	protected function add_style_section() {
78	$this->add_style_section_layout();
79	$this->add_style_section_image();
80	$this->add_style_section_text();
81	$this->add_style_section_cta();
82	$this->add_style_box_section();
83	}
84
85	protected function add_content_layout_section() {
86	$this->start_controls_section(
87	'layout',
88	[
89	'label' => esc_html__( 'Layout', 'hello-plus' ),
90	'tab' => Controls_Manager::TAB_CONTENT,
91	]
92	);
93
94	$this->add_control(
95	'layout_preset',
96	[
97	'label' => esc_html__( 'Preset', 'hello-plus' ),
98	'type' => Choose_Img_Control::CONTROL_NAME,
99	'default' => 'focus',
100	'label_block' => true,
101	'columns' => 2,
102	'options' => [
103	'focus' => [
104	'title' => wp_kses_post( "Focus:\nHighlight a single, full-width\nCTA to maximize impact." ),
105	'image' => HELLOPLUS_IMAGES_URL . 'cta-focus.svg',
106	'hover_image' => true,
107	],
108	'streamline' => [
109	'title' => wp_kses_post( "Streamline:\nPair alongside other CTAs\nand elements for a seamless flow." ),
110	'image' => HELLOPLUS_IMAGES_URL . 'cta-streamline.svg',
111	'hover_image' => true,
112	],
113	'showcase' => [
114	'title' => wp_kses_post( "Showcase:\nHighlight key concepts\nwith a balanced layout." ),
115	'image' => HELLOPLUS_IMAGES_URL . 'cta-showcase.svg',
116	'hover_image' => true,
117	],
118	'storytelling' => [
119	'title' => wp_kses_post( "Storytelling:\nFocus on a narrative\nwith supporting visuals." ),
120	'image' => HELLOPLUS_IMAGES_URL . 'cta-storytelling.svg',
121	'hover_image' => true,
122	],
123	],
124	'frontend_available' => true,
125	]
126	);
127
128	$this->end_controls_section();
129	}
130
131	protected function add_content_image_section() {
132	$this->start_controls_section(
133	'content_image',
134	[
135	'label' => esc_html__( 'Image', 'hello-plus' ),
136	'tab' => Controls_Manager::TAB_CONTENT,
137	'condition' => [
138	'layout_preset' => [ 'showcase', 'storytelling' ],
139	],
140	]
141	);
142
143	$image = new Ehp_Image( $this, [ 'widget_name' => $this->get_name() ] );
144	$image->add_content_section();
145
146	$this->end_controls_section();
147	}
148
149	protected function add_content_text_section() {
150	$this->start_controls_section(
151	'content_text',
152	[
153	'label' => esc_html__( 'Text', 'hello-plus' ),
154	'tab' => Controls_Manager::TAB_CONTENT,
155	]
156	);
157
158	$this->add_control(
159	'heading_text',
160	[
161	'label' => esc_html__( 'Heading', 'hello-plus' ),
162	'type' => Controls_Manager::TEXTAREA,
163	'rows' => 6,
164	'default' => esc_html__( 'Ready to take your business to the next level?', 'hello-plus' ),
165	'placeholder' => esc_html__( 'Type your text here', 'hello-plus' ),
166	'dynamic' => [
167	'active' => true,
168	],
169	]
170	);
171
172	$this->add_control(
173	'heading_tag',
174	[
175	'label' => esc_html__( 'HTML Tag', 'hello-plus' ),
176	'type' => Controls_Manager::SELECT,
177	'options' => [
178	'h1' => 'H1',
179	'h2' => 'H2',
180	'h3' => 'H3',
181	'h4' => 'H4',
182	'h5' => 'H5',
183	'h6' => 'H6',
184	'div' => 'div',
185	'span' => 'span',
186	'p' => 'p',
187	],
188	'default' => 'h2',
189	]
190	);
191
192	$this->add_control(
193	'description_text',
194	[
195	'label' => esc_html__( 'Description', 'hello-plus' ),
196	'type' => Controls_Manager::TEXTAREA,
197	'rows' => 6,
198	'default' => htmlspecialchars_decode( __( 'Schedule a free consultation with our team and let\'s make things happen!', 'hello-plus' ) ),
199	'placeholder' => esc_html__( 'Type your text here', 'hello-plus' ),
200	'dynamic' => [
201	'active' => true,
202	],
203	]
204	);
205
206	$this->add_control(
207	'description_tag',
208	[
209	'label' => esc_html__( 'HTML Tag', 'hello-plus' ),
210	'type' => Controls_Manager::SELECT,
211	'options' => [
212	'h1' => 'H1',
213	'h2' => 'H2',
214	'h3' => 'H3',
215	'h4' => 'H4',
216	'h5' => 'H5',
217	'h6' => 'H6',
218	'div' => 'div',
219	'span' => 'span',
220	'p' => 'p',
221	],
222	'default' => 'p',
223	]
224	);
225
226	$this->end_controls_section();
227	}
228
229	protected function add_style_section_layout() {
230	$this->start_controls_section(
231	'style_layout',
232	[
233	'label' => esc_html__( 'Layout', 'hello-plus' ),
234	'tab' => Controls_Manager::TAB_STYLE,
235	]
236	);
237
238	$this->add_responsive_control(
239	'content_alignment',
240	[
241	'label' => esc_html__( 'Content Alignment', 'hello-plus' ),
242	'type' => Controls_Manager::CHOOSE,
243	'options' => [
244	'start' => [
245	'title' => esc_html__( 'Start', 'hello-plus' ),
246	'icon' => 'eicon-align-start-h',
247	],
248	'center' => [
249	'title' => esc_html__( 'Center', 'hello-plus' ),
250	'icon' => 'eicon-align-center-h',
251	],
252	],
253	'default' => 'center',
254	'tablet_default' => 'center',
255	'mobile_default' => 'center',
256	'frontend_available' => true,
257	'selectors' => [
258	'{{WRAPPER}} .ehp-cta' => '--cta-content-alignment: {{VALUE}};',
259	],
260	'condition' => [
261	'layout_preset' => [
262	'streamline',
263	'storytelling',
264	],
265	],
266	]
267	);
268
269	$this->add_control(
270	'cta_vertical_position',
271	[
272	'label' => esc_html__( 'Vertical Position', 'hello-plus' ),
273	'type' => Controls_Manager::CHOOSE,
274	'options' => [
275	'start' => [
276	'title' => esc_html__( 'Start', 'hello-plus' ),
277	'icon' => 'eicon-align-start-v',
278	],
279	'end' => [
280	'title' => esc_html__( 'End', 'hello-plus' ),
281	'icon' => 'eicon-align-end-v',
282	],
283	],
284	'default' => 'start',
285	'tablet_default' => 'start',
286	'mobile_default' => 'start',
287	'selectors' => [
288	'{{WRAPPER}} .ehp-cta' => '--cta-buttons-vertical-position: {{VALUE}};',
289	],
290	'frontend_available' => true,
291	'condition' => [
292	'layout_preset' => [
293	'focus',
294	],
295	],
296	]
297	);
298
299	$this->add_responsive_control(
300	'content_width',
301	[
302	'label' => esc_html__( 'Content Width', 'hello-plus' ),
303	'type' => Controls_Manager::SLIDER,
304	'size_units' => [ 'px', 'em', 'rem', '%', 'custom' ],
305	'range' => [
306	'px' => [
307	'max' => 1200,
308	],
309	'%' => [
310	'max' => 100,
311	],
312	],
313	'selectors' => [
314	'{{WRAPPER}} .ehp-cta' => '--cta-content-width: {{SIZE}}{{UNIT}};',
315	],
316	'condition' => [
317	'layout_preset' => [
318	'storytelling',
319	'focus',
320	'streamline',
321	],
322	],
323	]
324	);
325
326	$this->add_responsive_control(
327	'image_horizontal_position',
328	[
329	'label' => esc_html__( 'Image Position', 'hello-plus' ),
330	'type' => Controls_Manager::CHOOSE,
331	'toggle' => false,
332	'options' => [
333	'start' => [
334	'title' => esc_html__( 'Start', 'hello-plus' ),
335	'icon' => 'eicon-h-align-' . ( is_rtl() ? 'right' : 'left' ),
336	],
337	'end' => [
338	'title' => esc_html__( 'End', 'hello-plus' ),
339	'icon' => 'eicon-h-align-' . ( is_rtl() ? 'left' : 'right' ),
340	],
341	],
342	'frontend_available' => true,
343	'default' => 'start',
344	'tablet_default' => 'start',
345	'mobile_default' => 'start',
346	'condition' => [
347	'layout_preset' => 'showcase',
348	],
349	]
350	);
351
352	$this->add_responsive_control(
353	'content_position_vertical',
354	[
355	'label' => esc_html__( 'Content Position', 'hello-plus' ),
356	'type' => Controls_Manager::CHOOSE,
357	'options' => [
358	'start' => [
359	'title' => esc_html__( 'Start', 'hello-plus' ),
360	'icon' => 'eicon-align-start-v',
361	],
362	'center' => [
363	'title' => esc_html__( 'Center', 'hello-plus' ),
364	'icon' => 'eicon-align-center-v',
365	],
366	'end' => [
367	'title' => esc_html__( 'End', 'hello-plus' ),
368	'icon' => 'eicon-align-end-v',
369	],
370	],
371	'default' => 'start',
372	'tablet_default' => 'start',
373	'mobile_default' => 'start',
374	'selectors' => [
375	'{{WRAPPER}} .ehp-cta' => '--cta-content-position-vertical: {{VALUE}};',
376	],
377	'frontend_available' => true,
378	'condition' => [
379	'layout_preset' => 'showcase',
380	],
381	]
382	);
383
384	$this->end_controls_section();
385	}
386
387	protected function add_style_section_image() {
388	$this->start_controls_section(
389	'style_image',
390	[
391	'label' => esc_html__( 'Image', 'hello-plus' ),
392	'tab' => Controls_Manager::TAB_STYLE,
393	'condition' => [
394	'layout_preset' => [ 'showcase', 'storytelling' ],
395	],
396	]
397	);
398
399	$image = new Ehp_Image( $this, [ 'widget_name' => $this->get_name() ] );
400	$image->add_style_controls();
401
402	$this->end_controls_section();
403	}
404
405	protected function add_content_cta_section() {
406	$button = new Ehp_Button( $this, [ 'widget_name' => $this->get_name() ] );
407	$button->add_content_section();
408	}
409
410	protected function add_style_section_text() {
411	$this->start_controls_section(
412	'style_text',
413	[
414	'label' => esc_html__( 'Text', 'hello-plus' ),
415	'tab' => Controls_Manager::TAB_STYLE,
416	]
417	);
418
419	$this->add_control(
420	'heading_label',
421	[
422	'label' => esc_html__( 'Heading', 'hello-plus' ),
423	'type' => Controls_Manager::HEADING,
424	]
425	);
426
427	$this->add_control(
428	'heading_color',
429	[
430	'label' => esc_html__( 'Text Color', 'hello-plus' ),
431	'type' => Controls_Manager::COLOR,
432	'global' => [
433	'default' => Global_Colors::COLOR_PRIMARY,
434	],
435	'selectors' => [
436	'{{WRAPPER}} .ehp-cta' => '--cta-heading-color: {{VALUE}}',
437	],
438	]
439	);
440
441	$this->add_group_control(
442	Group_Control_Typography::get_type(),
443	[
444	'name' => 'heading_typography',
445	'selector' => '{{WRAPPER}} .ehp-cta__heading',
446	'global' => [
447	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
448	],
449	]
450	);
451
452	$this->add_control(
453	'description_label',
454	[
455	'label' => esc_html__( 'Description', 'hello-plus' ),
456	'type' => Controls_Manager::HEADING,
457	'separator' => 'before',
458	]
459	);
460
461	$this->add_control(
462	'description_color',
463	[
464	'label' => esc_html__( 'Text Color', 'hello-plus' ),
465	'type' => Controls_Manager::COLOR,
466	'global' => [
467	'default' => Global_Colors::COLOR_TEXT,
468	],
469	'selectors' => [
470	'{{WRAPPER}} .ehp-cta' => '--cta-description-color: {{VALUE}}',
471	],
472	]
473	);
474
475	$this->add_group_control(
476	Group_Control_Typography::get_type(),
477	[
478	'name' => 'description_typography',
479	'selector' => '{{WRAPPER}} .ehp-cta__description',
480	'global' => [
481	'default' => Global_Typography::TYPOGRAPHY_TEXT,
482	],
483	]
484	);
485
486	$this->end_controls_section();
487	}
488
489	protected function add_style_section_cta() {
490	$this->start_controls_section(
491	'style_cta',
492	[
493	'label' => esc_html__( 'CTA Button', 'hello-plus' ),
494	'tab' => Controls_Manager::TAB_STYLE,
495	]
496	);
497
498	$button = new Ehp_Button( $this, [ 'widget_name' => $this->get_name() ] );
499	$button->add_style_controls();
500
501	$this->add_responsive_control(
502	'cta_width',
503	[
504	'label' => esc_html__( 'Width', 'hello-plus' ),
505	'type' => Controls_Manager::SELECT,
506	'options' => [
507	'default' => esc_html__( 'Default', 'hello-plus' ),
508	'stretch' => esc_html__( 'Stretch', 'hello-plus' ),
509	],
510	'default' => 'default',
511	'default_tablet' => 'default',
512	'default_mobile' => 'default',
513	'frontend_available' => true,
514	'condition' => [
515	'layout_preset' => [
516	'streamline',
517	'storytelling',
518	],
519	],
520	]
521	);
522
523	$this->add_responsive_control(
524	'cta_position',
525	[
526	'label' => esc_html__( 'Position', 'hello-plus' ),
527	'type' => Controls_Manager::SELECT,
528	'options' => [
529	'default' => esc_html__( 'Default', 'hello-plus' ),
530	'end' => esc_html__( 'End', 'hello-plus' ),
531	],
532	'default' => 'default',
533	'default_tablet' => 'default',
534	'default_mobile' => 'default',
535	'frontend_available' => true,
536	'selectors' => [
537	'{{WRAPPER}} .ehp-cta' => '--cta-text-container-flex-grow: var(--cta-text-container-flex-grow-{{VALUE}});',
538	],
539	'condition' => [
540	'layout_preset' => [
541	'streamline',
542	'storytelling',
543	],
544	],
545	]
546	);
547
548	$this->end_controls_section();
549	}
550
551	protected function add_style_box_section() {
552	$this->start_controls_section(
553	'style_box_section',
554	[
555	'label' => esc_html__( 'Box', 'hello-plus' ),
556	'tab' => Controls_Manager::TAB_STYLE,
557	]
558	);
559
560	$this->add_control(
561	'box_background_label',
562	[
563	'label' => esc_html__( 'Background', 'hello-plus' ),
564	'type' => Controls_Manager::HEADING,
565	]
566	);
567
568	$this->add_group_control(
569	Group_Control_Background::get_type(),
570	[
571	'name' => 'background',
572	'types' => [ 'classic', 'gradient' ],
573	'exclude' => [ 'image' ],
574	'selector' => '{{WRAPPER}} .ehp-cta',
575	'fields_options' => [
576	'background' => [
577	'default' => 'classic',
578	],
579	'color' => [
580	'default' => '#F6F7F8',
581	],
582	],
583	]
584	);
585
586	$this->add_control(
587	'box_background_overlay_label',
588	[
589	'label' => esc_html__( 'Background Overlay', 'hello-plus' ),
590	'type' => Controls_Manager::HEADING,
591	'separator' => 'before',
592	]
593	);
594
595	$this->add_group_control(
596	Group_Control_Background::get_type(),
597	[
598	'name' => 'background_overlay',
599	'types' => [ 'classic', 'gradient' ],
600	'selector' => '{{WRAPPER}} .ehp-cta__overlay',
601	'fields_options' => [
602	'background' => [
603	'default' => 'classic',
604	],
605	],
606	'frontend_available' => true,
607	]
608	);
609
610	$this->add_responsive_control(
611	'background_overlay_opacity',
612	[
613	'label' => esc_html__( 'Opacity', 'hello-plus' ),
614	'type' => Controls_Manager::SLIDER,
615	'range' => [
616	'%' => [
617	'max' => 1,
618	'min' => 0.10,
619	'step' => 0.01,
620	],
621	],
622	'default' => [
623	'unit' => '%',
624	'size' => 0.5,
625	],
626	'selectors' => [
627	'{{WRAPPER}} .ehp-cta' => '--cta-overlay-opacity: {{SIZE}};',
628	],
629	]
630	);
631
632	$this->add_responsive_control(
633	'box_element_spacing',
634	[
635	'label' => esc_html__( 'Element Spacing', 'hello-plus' ),
636	'type' => Controls_Manager::SLIDER,
637	'size_units' => [ 'px', 'em', 'rem', '%', 'custom' ],
638	'range' => [
639	'px' => [
640	'max' => 150,
641	],
642	'%' => [
643	'max' => 100,
644	],
645	],
646	'default' => [
647	'size' => 40,
648	'unit' => 'px',
649	],
650	'selectors' => [
651	'{{WRAPPER}} .ehp-cta' => '--cta-elements-spacing: {{SIZE}}{{UNIT}};',
652	],
653	'separator' => 'before',
654	]
655	);
656
657	$padding = new Ehp_Padding( $this, [
658	'widget_name' => $this->get_name(),
659	'container_prefix' => 'box',
660	] );
661	$padding->add_style_controls();
662
663	$this->add_control(
664	'show_box_border',
665	[
666	'label' => esc_html__( 'Border', 'hello-plus' ),
667	'type' => Controls_Manager::SWITCHER,
668	'label_on' => esc_html__( 'Yes', 'hello-plus' ),
669	'label_off' => esc_html__( 'No', 'hello-plus' ),
670	'return_value' => 'yes',
671	'default' => 'no',
672	'separator' => 'before',
673	]
674	);
675
676	$this->add_control(
677	'box_border_width',
678	[
679	'label' => __( 'Border Width', 'hello-plus' ),
680	'type' => Controls_Manager::SLIDER,
681	'size_units' => [ 'px' ],
682	'range' => [
683	'px' => [
684	'min' => 0,
685	'max' => 10,
686	'step' => 1,
687	],
688	],
689	'default' => [
690	'size' => 1,
691	'unit' => 'px',
692	],
693	'selectors' => [
694	'{{WRAPPER}} .ehp-cta' => '--cta-box-border-width: {{SIZE}}{{UNIT}};',
695	],
696	'condition' => [
697	'show_box_border' => 'yes',
698	],
699	]
700	);
701
702	$this->add_control(
703	'box_border_color',
704	[
705	'label' => esc_html__( 'Color', 'hello-plus' ),
706	'type' => Controls_Manager::COLOR,
707	'global' => [
708	'default' => Global_Colors::COLOR_TEXT,
709	],
710	'selectors' => [
711	'{{WRAPPER}} .ehp-cta' => '--cta-box-border-color: {{VALUE}}',
712	],
713	'condition' => [
714	'show_box_border' => 'yes',
715	],
716	]
717	);
718
719	$shapes = new Ehp_Shapes( $this, [
720	'widget_name' => $this->get_name(),
721	'container_prefix' => 'box',
722	] );
723	$shapes->add_style_controls();
724
725	$this->add_group_control(
726	Group_Control_Box_Shadow::get_type(),
727	[
728	'name' => 'box_box_shadow',
729	'selector' => '{{WRAPPER}} .ehp-cta',
730	]
731	);
732
733	$this->add_control(
734	'box_full_screen_height',
735	[
736	'label' => esc_html__( 'Full Screen Height', 'hello-plus' ),
737	'type' => Controls_Manager::SWITCHER,
738	'label_on' => esc_html__( 'Yes', 'hello-plus' ),
739	'label_off' => esc_html__( 'No', 'hello-plus' ),
740	'return_value' => 'yes',
741	'default' => '',
742	'tablet_default' => '',
743	'mobile_default' => '',
744	'separator' => 'before',
745	]
746	);
747
748	$configured_breakpoints = $this->get_configured_breakpoints();
749
750	$this->add_control(
751	'box_full_screen_height_controls',
752	[
753	'label' => esc_html__( 'Apply Full Screen Height on', 'hello-plus' ),
754	'type' => Controls_Manager::SELECT2,
755	'label_block' => true,
756	'multiple' => true,
757	'options' => $configured_breakpoints['devices_options'],
758	'default' => $configured_breakpoints['active_devices'],
759	'condition' => [
760	'box_full_screen_height' => 'yes',
761	],
762	]
763	);
764
765	$this->end_controls_section();
766	}
767	}
768