PluginProbe
Hello Plus / 1.2.0
Hello Plus v1.2.0
trunk 1.0.0 1.0.1 1.0.2 1.0.3 1.1.0 1.1.1 1.1.2 1.1.3 1.2.0 1.2.1 1.3.0 1.4.0 1.4.1 1.5.0 1.5.1 1.5.2 1.5.3 1.6.0 1.6.1 1.6.2 1.7.0 1.7.1 1.7.2 1.7.3 All 30 releases
hello-plus / modules / content / widgets / hero.php

hero.php in Hello Plus 1.2.0, at modules/content/widgets/hero.php

601 lines 14.0 KB
No matching file
Up and down to move Enter to open Esc to close
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 Elementor\Utils as Elementor_Utils;
18
19 use HelloPlus\Modules\Content\Base\Traits\Shared_Content_Traits;
20 use HelloPlus\Modules\Content\Classes\Render\Widget_Hero_Render;
21 use HelloPlus\Modules\Theme\Module as Theme_Module;
22 use HelloPlus\Classes\Ehp_Button;
23
24 class Hero extends Widget_Base {
25
26 use Shared_Content_Traits;
27
28 public function get_name(): string {
29 return 'hero';
30 }
31
32 public function get_title(): string {
33 return esc_html__( 'Hero', 'hello-plus' );
34 }
35
36 public function get_categories(): array {
37 return [ Theme_Module::HELLOPLUS_EDITOR_CATEGORY_SLUG ];
38 }
39
40 public function get_keywords(): array {
41 return [ 'hero' ];
42 }
43
44 public function get_icon(): string {
45 return 'eicon-ehp-hero';
46 }
47
48 public function get_style_depends(): array {
49 return [ 'helloplus-hero', 'helloplus-button' ];
50 }
51
52 protected function render(): void {
53 $render_strategy = new Widget_Hero_Render( $this );
54
55 $render_strategy->render();
56 }
57
58 protected function register_controls() {
59 $this->add_content_section();
60 $this->add_style_section();
61 }
62
63 protected function add_content_section() {
64 $this->add_content_text_section();
65 $this->add_content_cta_section();
66 $this->add_content_image_section();
67 }
68
69 protected function add_style_section() {
70 $this->add_style_content_section();
71 $this->add_style_cta_section();
72 $this->add_style_image_section();
73 $this->add_style_box_section();
74 }
75
76 protected function add_content_text_section() {
77 $this->start_controls_section(
78 'content_text',
79 [
80 'label' => esc_html__( 'Text', 'hello-plus' ),
81 'tab' => Controls_Manager::TAB_CONTENT,
82 ]
83 );
84
85 $this->add_control(
86 'heading_text',
87 [
88 'label' => esc_html__( 'Heading', 'hello-plus' ),
89 'type' => Controls_Manager::TEXTAREA,
90 'rows' => 6,
91 'default' => esc_html__( '360 digital marketing agency that gets results', 'hello-plus' ),
92 'placeholder' => esc_html__( 'Type your description here', 'hello-plus' ),
93 'dynamic' => [
94 'active' => true,
95 ],
96 ]
97 );
98
99 $this->add_control(
100 'heading_tag',
101 [
102 'label' => esc_html__( 'HTML Tag', 'hello-plus' ),
103 'type' => Controls_Manager::SELECT,
104 'options' => [
105 'h1' => 'H1',
106 'h2' => 'H2',
107 'h3' => 'H3',
108 'h4' => 'H4',
109 'h5' => 'H5',
110 'h6' => 'H6',
111 'div' => 'div',
112 'span' => 'span',
113 'p' => 'p',
114 ],
115 'default' => 'h2',
116 ]
117 );
118
119 $this->add_control(
120 'subheading_text',
121 [
122 'label' => esc_html__( 'Subheading', 'hello-plus' ),
123 'type' => Controls_Manager::TEXTAREA,
124 'rows' => 6,
125 'default' => esc_html__( 'Schedule a free consultation with our team and let’s make things happen!', 'hello-plus' ),
126 'placeholder' => esc_html__( 'Type your description here', 'hello-plus' ),
127 'dynamic' => [
128 'active' => true,
129 ],
130 ]
131 );
132
133 $this->add_control(
134 'subheading_tag',
135 [
136 'label' => esc_html__( 'HTML Tag', 'hello-plus' ),
137 'type' => Controls_Manager::SELECT,
138 'options' => [
139 'h2' => 'H2',
140 'h3' => 'H3',
141 'h4' => 'H4',
142 'h5' => 'H5',
143 'h6' => 'H6',
144 'div' => 'div',
145 'span' => 'span',
146 'p' => 'p',
147 ],
148 'default' => 'h3',
149 ]
150 );
151
152 $this->end_controls_section();
153 }
154
155 protected function add_content_cta_section() {
156 $defaults = [
157 'has_secondary_cta' => false,
158 'primary_cta_button_text_placeholder' => esc_html__( 'Contact us', 'hello-plus' ),
159 ];
160
161 $button = new Ehp_Button( $this, [ 'widget_name' => 'hero' ], $defaults );
162 $button->add_content_section();
163 }
164
165 protected function add_content_image_section() {
166 $this->start_controls_section(
167 'content_image',
168 [
169 'label' => esc_html__( 'Image', 'hello-plus' ),
170 'tab' => Controls_Manager::TAB_CONTENT,
171 ]
172 );
173
174 $this->add_control(
175 'image',
176 [
177 'label' => esc_html__( 'Choose Image', 'hello-plus' ),
178 'type' => Controls_Manager::MEDIA,
179 'default' => [
180 'url' => Elementor_Utils::get_placeholder_image_src(),
181 ],
182 ]
183 );
184
185 $this->end_controls_section();
186 }
187
188 protected function add_style_content_section() {
189 $this->start_controls_section(
190 'style_content',
191 [
192 'label' => esc_html__( 'Content', 'hello-plus' ),
193 'tab' => Controls_Manager::TAB_STYLE,
194 ]
195 );
196
197 $this->add_responsive_control(
198 'content_position',
199 [
200 'label' => esc_html__( 'Content Position', 'hello-plus' ),
201 'type' => Controls_Manager::CHOOSE,
202 'options' => [
203 'start' => [
204 'title' => esc_html__( 'Start', 'hello-plus' ),
205 'icon' => 'eicon-align-start-h',
206 ],
207 'center' => [
208 'title' => esc_html__( 'Center', 'hello-plus' ),
209 'icon' => 'eicon-align-center-h',
210 ],
211 'end' => [
212 'title' => esc_html__( 'End', 'hello-plus' ),
213 'icon' => 'eicon-align-end-h',
214 ],
215 ],
216 'default' => 'center',
217 'tablet_default' => 'center',
218 'mobile_default' => 'center',
219 'selectors' => [
220 '{{WRAPPER}} .ehp-hero' => '--hero-content-position: {{VALUE}}; --hero-content-text-align: {{VALUE}};',
221 ],
222 ]
223 );
224
225 $this->add_control(
226 'heading_label',
227 [
228 'label' => esc_html__( 'Heading', 'hello-plus' ),
229 'type' => Controls_Manager::HEADING,
230 ]
231 );
232
233 $this->add_control(
234 'heading_color',
235 [
236 'label' => esc_html__( 'Text Color', 'hello-plus' ),
237 'type' => Controls_Manager::COLOR,
238 'global' => [
239 'default' => Global_Colors::COLOR_PRIMARY,
240 ],
241 'selectors' => [
242 '{{WRAPPER}} .ehp-hero' => '--hero-heading-color: {{VALUE}}',
243 ],
244 ]
245 );
246
247 $this->add_group_control(
248 Group_Control_Typography::get_type(),
249 [
250 'name' => 'heading_typography',
251 'selector' => '{{WRAPPER}} .ehp-hero__heading',
252 'global' => [
253 'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
254 ],
255 ]
256 );
257
258 $this->add_responsive_control(
259 'text_width_heading',
260 [
261 'label' => esc_html__( 'Text Width', 'hello-plus' ),
262 'type' => Controls_Manager::SLIDER,
263 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
264 'range' => [
265 'px' => [
266 'max' => 1200,
267 ],
268 '%' => [
269 'max' => 100,
270 ],
271 ],
272 'default' => [
273 'size' => 800,
274 'unit' => 'px',
275 ],
276 'tablet_default' => [
277 'size' => 800,
278 'unit' => 'px',
279 ],
280 'mobile_default' => [
281 'size' => 800,
282 'unit' => 'px',
283 ],
284 'selectors' => [
285 '{{WRAPPER}} .ehp-hero' => '--hero-text-width-heading: {{SIZE}}{{UNIT}};',
286 ],
287 ]
288 );
289
290 $this->add_control(
291 'subheading_label',
292 [
293 'label' => esc_html__( 'Subheading', 'hello-plus' ),
294 'type' => Controls_Manager::HEADING,
295 'separator' => 'before',
296 ]
297 );
298
299 $this->add_control(
300 'subheading_color',
301 [
302 'label' => esc_html__( 'Text Color', 'hello-plus' ),
303 'type' => Controls_Manager::COLOR,
304 'global' => [
305 'default' => Global_Colors::COLOR_SECONDARY,
306 ],
307 'selectors' => [
308 '{{WRAPPER}} .ehp-hero' => '--hero-subheading-color: {{VALUE}}',
309 ],
310 ]
311 );
312
313 $this->add_group_control(
314 Group_Control_Typography::get_type(),
315 [
316 'name' => 'subheading_typography',
317 'selector' => '{{WRAPPER}} .ehp-hero__subheading',
318 'global' => [
319 'default' => Global_Typography::TYPOGRAPHY_SECONDARY,
320 ],
321 ]
322 );
323
324 $this->add_responsive_control(
325 'text_width_subheading',
326 [
327 'label' => esc_html__( 'Text Width', 'hello-plus' ),
328 'type' => Controls_Manager::SLIDER,
329 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
330 'range' => [
331 'px' => [
332 'max' => 1200,
333 ],
334 '%' => [
335 'max' => 100,
336 ],
337 ],
338 'default' => [
339 'size' => 440,
340 'unit' => 'px',
341 ],
342 'tablet_default' => [
343 'size' => 440,
344 'unit' => 'px',
345 ],
346 'mobile_default' => [
347 'size' => 440,
348 'unit' => 'px',
349 ],
350 'selectors' => [
351 '{{WRAPPER}} .ehp-hero' => '--hero-text-width-subheading: {{SIZE}}{{UNIT}};',
352 ],
353 ]
354 );
355
356 $this->end_controls_section();
357 }
358
359 protected function add_style_cta_section() {
360 $this->start_controls_section(
361 'style_cta',
362 [
363 'label' => esc_html__( 'CTA Button', 'hello-plus' ),
364 'tab' => Controls_Manager::TAB_STYLE,
365 ]
366 );
367
368 $defaults = [
369 'has_secondary_cta' => false,
370 ];
371
372 $button = new Ehp_Button( $this, [ 'widget_name' => 'hero' ], $defaults );
373 $button->add_style_controls();
374
375 $this->end_controls_section();
376 }
377
378 protected function add_style_image_section() {
379 $this->start_controls_section(
380 'style_image_section',
381 [
382 'label' => esc_html__( 'Image', 'hello-plus' ),
383 'tab' => Controls_Manager::TAB_STYLE,
384 ]
385 );
386
387 $this->add_control(
388 'image_full_width',
389 [
390 'label' => esc_html__( 'Full Width', 'hello-plus' ),
391 'type' => Controls_Manager::SWITCHER,
392 'label_on' => esc_html__( 'Yes', 'hello-plus' ),
393 'label_off' => esc_html__( 'No', 'hello-plus' ),
394 'return_value' => 'yes',
395 'default' => 'no',
396 ]
397 );
398
399 $this->add_responsive_control(
400 'image_width',
401 [
402 'label' => esc_html__( 'Width', 'hello-plus' ),
403 'type' => Controls_Manager::SLIDER,
404 'size_units' => [ 'px', 'em', 'rem', '%', 'custom' ],
405 'range' => [
406 'px' => [
407 'max' => 1600,
408 ],
409 '%' => [
410 'max' => 100,
411 ],
412 ],
413 'default' => [
414 'size' => 1304,
415 'unit' => 'px',
416 ],
417 'selectors' => [
418 '{{WRAPPER}} .ehp-hero' => '--hero-image-width: {{SIZE}}{{UNIT}};',
419 ],
420 'condition' => [
421 'image_full_width!' => 'yes',
422 ],
423 ]
424 );
425
426 $this->add_responsive_control(
427 'image_height',
428 [
429 'label' => esc_html__( 'Height', 'hello-plus' ),
430 'type' => Controls_Manager::SLIDER,
431 'size_units' => [ 'px', 'em', 'rem', '%', 'custom' ],
432 'range' => [
433 'px' => [
434 'max' => 1600,
435 ],
436 '%' => [
437 'max' => 100,
438 ],
439 ],
440 'selectors' => [
441 '{{WRAPPER}} .ehp-hero' => '--hero-image-height: {{SIZE}}{{UNIT}};',
442 ],
443 ]
444 );
445
446 $this->add_responsive_control(
447 'image_position',
448 [
449 'label' => esc_html__( 'Position', 'hello-plus' ),
450 'type' => Controls_Manager::SELECT,
451 'desktop_default' => 'center center',
452 'tablet_default' => 'center center',
453 'mobile_default' => 'center center',
454 'options' => [
455 '' => esc_html__( 'Default', 'hello-plus' ),
456 'center center' => esc_html__( 'Center Center', 'hello-plus' ),
457 'center left' => esc_html__( 'Center Left', 'hello-plus' ),
458 'center right' => esc_html__( 'Center Right', 'hello-plus' ),
459 'top center' => esc_html__( 'Top Center', 'hello-plus' ),
460 'top left' => esc_html__( 'Top Left', 'hello-plus' ),
461 'top right' => esc_html__( 'Top Right', 'hello-plus' ),
462 'bottom center' => esc_html__( 'Bottom Center', 'hello-plus' ),
463 'bottom left' => esc_html__( 'Bottom Left', 'hello-plus' ),
464 'bottom right' => esc_html__( 'Bottom Right', 'hello-plus' ),
465 ],
466 'selectors' => [
467 '{{WRAPPER}} .ehp-hero' => '--hero-image-position: {{VALUE}}',
468 ],
469 ]
470 );
471
472 $this->end_controls_section();
473 }
474
475 protected function add_style_box_section() {
476 $this->start_controls_section(
477 'style_box_section',
478 [
479 'label' => esc_html__( 'Box', 'hello-plus' ),
480 'tab' => Controls_Manager::TAB_STYLE,
481 ]
482 );
483
484 $this->add_control(
485 'box_background_label',
486 [
487 'label' => esc_html__( 'Background', 'hello-plus' ),
488 'type' => Controls_Manager::HEADING,
489 ]
490 );
491
492 $this->add_group_control(
493 Group_Control_Background::get_type(),
494 [
495 'name' => 'background',
496 'types' => [ 'classic', 'gradient' ],
497 'exclude' => [ 'image' ],
498 'selector' => '{{WRAPPER}} .ehp-hero',
499 'fields_options' => [
500 'background' => [
501 'default' => 'classic',
502 ],
503 ],
504 ]
505 );
506
507 $this->add_responsive_control(
508 'content_gap',
509 [
510 'label' => esc_html__( 'Element Spacing', 'hello-plus' ),
511 'type' => Controls_Manager::SLIDER,
512 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
513 'range' => [
514 'px' => [
515 'max' => 100,
516 ],
517 'em' => [
518 'max' => 5,
519 ],
520 'rem' => [
521 'max' => 5,
522 ],
523 '%' => [
524 'max' => 100,
525 ],
526 ],
527 'default' => [
528 'size' => 40,
529 'unit' => 'px',
530 ],
531 'tablet_default' => [
532 'size' => 28,
533 'unit' => 'px',
534 ],
535 'mobile_default' => [
536 'size' => 20,
537 'unit' => 'px',
538 ],
539 'selectors' => [
540 '{{WRAPPER}} .ehp-hero' => '--hero-content-text-gap: {{SIZE}}{{UNIT}};',
541 ],
542 'separator' => 'before',
543 ]
544 );
545
546 $this->add_responsive_control(
547 'style_box_padding',
548 [
549 'label' => esc_html__( 'Padding', 'hello-plus' ),
550 'type' => Controls_Manager::DIMENSIONS,
551 'size_units' => [ 'px', '%', 'em', 'rem' ],
552 'selectors' => [
553 '{{WRAPPER}} .ehp-hero' => '--hero-box-padding-block-end: {{BOTTOM}}{{UNIT}}; --hero-box-padding-block-start: {{TOP}}{{UNIT}}; --hero-box-padding-inline-end: {{RIGHT}}{{UNIT}}; --hero-box-padding-inline-start: {{LEFT}}{{UNIT}};',
554 ],
555 'default' => [
556 'top' => 60,
557 'right' => 0,
558 'bottom' => 0,
559 'left' => 0,
560 'unit' => 'px',
561 ],
562 'separator' => 'before',
563 ]
564 );
565
566 $this->add_control(
567 'box_full_screen_height',
568 [
569 'label' => esc_html__( 'Full Screen Height', 'hello-plus' ),
570 'type' => Controls_Manager::SWITCHER,
571 'label_on' => esc_html__( 'Yes', 'hello-plus' ),
572 'label_off' => esc_html__( 'No', 'hello-plus' ),
573 'return_value' => 'yes',
574 'default' => '',
575 'tablet_default' => '',
576 'mobile_default' => '',
577 'separator' => 'before',
578 ]
579 );
580
581 $configured_breakpoints = $this->get_configured_breakpoints();
582
583 $this->add_control(
584 'box_full_screen_height_controls',
585 [
586 'label' => esc_html__( 'Apply Full Screen Height on', 'hello-plus' ),
587 'type' => Controls_Manager::SELECT2,
588 'label_block' => true,
589 'multiple' => true,
590 'options' => $configured_breakpoints['devices_options'],
591 'default' => $configured_breakpoints['active_devices'],
592 'condition' => [
593 'box_full_screen_height' => 'yes',
594 ],
595 ]
596 );
597
598 $this->end_controls_section();
599 }
600 }
601