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

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

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