hello-plus / modules / content / widgets / flex-hero.php

flex-hero.php in Hello Plus 1.7.3, at modules/content/widgets/flex-hero.php

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