PluginProbe
Easy Elements for Elementor – Addons & Website Templates / 1.4.4
Easy Elements for Elementor – Addons & Website Templates v1.4.4
1.5.3 1.5.2 1.5.1 1.5.0 1.4.9 1.4.6 1.4.7 1.4.8 1.4.5 1.4.4 1.4.3 1.2.7 1.2.8 1.2.9 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 1.3.7 1.3.8 1.3.9 1.4.0 All 47 releases
easy-elements / widgets / team-grid / team-grid.php

team-grid.php in Easy Elements for Elementor – Addons & Website Templates 1.4.4, at widgets/team-grid/team-grid.php

1,552 lines 68.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 namespace Easyel\EasyElements\Widgets;
3 use Elementor\Repeater;
4 use Elementor\Utils;
5 use Elementor\Controls_Manager;
6 use Elementor\Responsive_Control;
7 use Elementor\Group_Control_Image_Size;
8 use Elementor\Group_Control_Background;
9 use Elementor\Group_Control_Box_Shadow;
10
11 defined( 'ABSPATH' ) || die();
12 class Easyel_Team_Grid__Widget extends \Elementor\Widget_Base {
13
14 public function get_name() {
15 return 'eel-team-grid';
16 }
17
18 public function get_title() {
19 return esc_html__( 'Team Grid', 'easy-elements' );
20 }
21
22 public function get_icon() {
23 return 'easyicon easyelIcon-team-grid';
24 }
25
26 public function get_categories() {
27 return [ 'easyelements_category' ];
28 }
29
30 public function get_keywords() {
31 return [ 'member', 'team', 'brand', 'partner', 'image', 'text' ];
32 }
33
34 public function get_style_depends() {
35 return [
36 'eel-team-grid',
37 ];
38 }
39
40 public function get_script_depends() {
41 return [
42 'eel-team-grid',
43 ];
44 }
45
46 protected function register_controls() {
47
48 $this->start_controls_section(
49 '_section_team',
50 [
51 'label' => esc_html__( 'Team Settings', 'easy-elements' ),
52 'tab' => Controls_Manager::TAB_CONTENT,
53 ]
54 );
55 $this->add_control(
56 'team_skin',
57 [
58 'label' => esc_html__('Skin Type', 'easy-elements'),
59 'type' => \Elementor\Controls_Manager::SELECT,
60 'default' => 'default',
61 'options' => [
62 'default' => esc_html__('Default', 'easy-elements'),
63 'skin1' => esc_html__('Skin 01', 'easy-elements'),
64 'skin2' => esc_html__('Skin 02', 'easy-elements'),
65 'skin3' => esc_html__('Skin 03', 'easy-elements'),
66 'skin4' => esc_html__('Skin 04 (Hover Overlay)', 'easy-elements'),
67 ],
68 ]
69 );
70
71 $this->add_control(
72 'image',
73 [
74 'label' => esc_html__('Image', 'easy-elements'),
75 'type' => Controls_Manager::MEDIA,
76 'default' => [
77 'url' => Utils::get_placeholder_image_src(),
78 ],
79 ]
80 );
81
82 $this->add_control(
83 '_name',
84 [
85 'label' => esc_html__( 'Name', 'easy-elements' ),
86 'type' => \Elementor\Controls_Manager::TEXT,
87 'default' => esc_html__( 'Harry Nelson', 'easy-elements' ),
88 'label_block' => true,
89 ]
90 );
91
92 $this->add_control(
93 'title_tag',
94 [
95 'label' => esc_html__( 'Title HTML Tag', 'easy-elements' ),
96 'type' => \Elementor\Controls_Manager::SELECT,
97 'default' => 'h4',
98 'options' => [
99 'h1' => 'H1',
100 'h2' => 'H2',
101 'h3' => 'H3',
102 'h4' => 'H4',
103 'h5' => 'H5',
104 'h6' => 'H6',
105 'div' => 'div',
106 'span' => 'span',
107 'p' => 'p',
108 ],
109 ]
110 );
111
112 $this->add_control(
113 'designation',
114 [
115 'label' => esc_html__('Designation', 'easy-elements'),
116 'type' => Controls_Manager::TEXT,
117 'default' => esc_html__( 'Head of Operations', 'easy-elements' ),
118 'label_block' => true,
119 ]
120 );
121
122 $this->add_control(
123 'details',
124 [
125 'label' => esc_html__('Description', 'easy-elements'),
126 'type' => \Elementor\Controls_Manager::TEXTAREA,
127 'default' => '',
128 'rows' => 4,
129 'placeholder' => esc_html__('Enter description here...', 'easy-elements'),
130 'label_block' => true,
131 'description' => esc_html__('Shown below designation on the card (default, Skin 01, Skin 02), as the hover overlay text on Skin 03, and inside the popup when Action Type is set to Popup.', 'easy-elements'),
132 ]
133 );
134
135 $this->add_control(
136 'action_type',
137 [
138 'label' => esc_html__('Action Type', 'easy-elements'),
139 'type' => \Elementor\Controls_Manager::SELECT,
140 'options' => [
141 'link' => esc_html__('Link', 'easy-elements'),
142 'popup' => esc_html__('Popup', 'easy-elements'),
143 ],
144 'default' => 'link',
145 'description' => esc_html__('Choose between link or popup action.', 'easy-elements'),
146 ]
147 );
148 $this->add_control(
149 'link',
150 [
151 'label' => esc_html__('Link', 'easy-elements'),
152 'type' => Controls_Manager::URL,
153 'placeholder' => 'https://example.com',
154 'description' => esc_html__('You can add a page link here, such as the team member\'s profile page.', 'easy-elements'),
155 'condition' => [
156 'action_type' => 'link',
157 ],
158 ]
159 );
160 $this->add_control(
161 'content_show',
162 [
163 'label' => esc_html__('Content Show', 'easy-elements'),
164 'type' => \Elementor\Controls_Manager::SELECT,
165 'default' => 'inside',
166 'options' => [
167 'inside' => esc_html__('Inside Image', 'easy-elements'),
168 'normal' => esc_html__('Normal', 'easy-elements'),
169 ],
170 'condition' => [
171 'team_skin' => ['default','skin2'],
172 ],
173 ]
174 );
175
176 $this->add_group_control(
177 Group_Control_Image_Size::get_type(),
178 [
179 'name' => 'image',
180 'default' => 'full',
181 ]
182 );
183
184 $this->add_control(
185 'fetchpriority',
186 [
187 'label' => __('Image Fetch Priority', 'easy-elements'),
188 'type' => \Elementor\Controls_Manager::SELECT,
189 'options' => [
190 '' => __('Default', 'easy-elements'),
191 'high' => __('High', 'easy-elements'),
192 'low' => __('Low', 'easy-elements'),
193 ],
194 'default' => 'low',
195 ]
196 );
197
198 $this->add_control(
199 'image_overlay_note',
200 [
201 'type' => \Elementor\Controls_Manager::RAW_HTML,
202 'raw' => '<div class="eel-popup-note">' . esc_html__('Note: The Image Overlay supports both classic (solid color) and gradient backgrounds.', 'easy-elements') . '</div>',
203 'separator' => 'before',
204 ]
205 );
206 $this->add_group_control(
207 \Elementor\Group_Control_Background::get_type(),
208 [
209 'name' => 'image_overlay',
210 'label' => esc_html__('Image Overlay', 'easy-elements'),
211 'types' => [ 'classic', 'gradient' ],
212 'selector' => '{{WRAPPER}} .eel-team-grid .ee--team-img .eel-image-overlay',
213 ]
214 );
215 $this->add_control(
216 'disable_image_scale',
217 [
218 'label' => esc_html__( 'Disable Image Scale on Hover', 'easy-elements' ),
219 'type' => \Elementor\Controls_Manager::SWITCHER,
220 'label_on' => esc_html__( 'Yes', 'easy-elements' ),
221 'label_off' => esc_html__( 'No', 'easy-elements' ),
222 'return_value' => 'yes',
223 'default' => '',
224 'selectors' => [
225 '{{WRAPPER}} .eel-team-grid .grid-item .ee--team-img:hover img' => 'transform: none;',
226 ],
227 'separator' => 'before',
228 ]
229 );
230
231 $this->add_control(
232 'disable_social_icon_lift',
233 [
234 'label' => esc_html__( 'Disable Social Icon Lift on Hover', 'easy-elements' ),
235 'type' => \Elementor\Controls_Manager::SWITCHER,
236 'label_on' => esc_html__( 'Yes', 'easy-elements' ),
237 'label_off' => esc_html__( 'No', 'easy-elements' ),
238 'return_value' => 'yes',
239 'default' => '',
240 'selectors' => [
241 '{{WRAPPER}} .eel-team-grid-social .eel-team-social-hover a:hover' => 'transform: none;',
242 '{{WRAPPER}} .eel-team-grid-social ul li a:not(.eel-popup-trigger):hover' => 'transform: none;',
243 ],
244 ]
245 );
246
247 $this->add_control(
248 'show_social_icon',
249 [
250 'label' => esc_html__( 'Show Social Icon', 'easy-elements' ),
251 'type' => \Elementor\Controls_Manager::SWITCHER,
252 'label_on' => esc_html__( 'Show', 'easy-elements' ),
253 'label_off' => esc_html__( 'Hide', 'easy-elements' ),
254 'return_value' => 'yes',
255 'default' => 'no',
256 'separator' => 'before',
257 ]
258 );
259
260 $this->end_controls_section();
261
262 // Social Item
263 $this->start_controls_section(
264 'social_icon_section',
265 [
266 'label' => esc_html__( 'Social Settings', 'easy-elements' ),
267 'tab' => Controls_Manager::TAB_CONTENT,
268 'condition' => [
269 'show_social_icon' => 'yes',
270 ],
271 ]
272 );
273
274 $this->add_control(
275 'social_icon_position',
276 [
277 'label' => esc_html__('Icon Position', 'easy-elements'),
278 'type' => \Elementor\Controls_Manager::SELECT,
279 'default' => 'default',
280 'options' => [
281 'default' => esc_html__('Default', 'easy-elements'),
282 'posi_left' => esc_html__('Top Left', 'easy-elements'),
283 'posi_right' => esc_html__('Top Right', 'easy-elements'),
284 'posi_botttom_left' => esc_html__('Bottom Left', 'easy-elements'),
285 'posi_botttom_right' => esc_html__('Bottom Right', 'easy-elements'),
286 ],
287 ]
288 );
289 $this->add_control(
290 'social_icon_show',
291 [
292 'label' => esc_html__('Icon Show', 'easy-elements'),
293 'type' => \Elementor\Controls_Manager::SELECT,
294 'default' => 'dafault_show',
295 'options' => [
296 'dafault_show' => esc_html__('Dafault Show', 'easy-elements'),
297 'hover_show' => esc_html__('Icon Hover Show', 'easy-elements'),
298 ],
299 'condition' => [
300 'social_icon_position!' => 'default',
301 ],
302 ]
303 );
304 $this->add_control(
305 'social_hover_icon',
306 [
307 'label' => esc_html__( 'Hover Icon', 'easy-elements' ),
308 'type' => \Elementor\Controls_Manager::ICONS,
309 'label_block' => true,
310 'default' => [
311 'value' => 'fas fa-plus',
312 'library' => 'fa-solid',
313 ],
314 'condition' => [
315 'social_icon_show' => 'hover_show',
316 'social_icon_position!' => 'default',
317 ],
318 ]
319 );
320 $this->add_responsive_control(
321 's_icon_posi_top',
322 [
323 'label' => esc_html__( 'Top Position', 'easy-elements' ),
324 'type' => \Elementor\Controls_Manager::SLIDER,
325 'size_units' => [ 'px', 'em','%'],
326 'range' => [
327 'px' => [
328 'min' => 0,
329 'max' => 500,
330 ],
331 ],
332 'selectors' => [
333 '{{WRAPPER}} .eel-team-grid-social.posi_left, {{WRAPPER}} .eel-team-grid-social.posi_right' => 'top: {{SIZE}}{{UNIT}};',
334 ],
335 'condition' => [
336 'social_icon_position' => ['posi_left','posi_right'],
337 ],
338 ]
339 );
340 $this->add_responsive_control(
341 's_icon_posi_bottom',
342 [
343 'label' => esc_html__( 'Bottom Position', 'easy-elements' ),
344 'type' => \Elementor\Controls_Manager::SLIDER,
345 'size_units' => [ 'px', 'em','%'],
346 'range' => [
347 'px' => [
348 'min' => 0,
349 'max' => 500,
350 ],
351 ],
352 'selectors' => [
353 '{{WRAPPER}} .eel-team-grid-social.posi_botttom_left, {{WRAPPER}} .eel-team-grid-social.posi_botttom_right' => 'bottom: {{SIZE}}{{UNIT}};',
354 ],
355 'condition' => [
356 'social_icon_position' => ['posi_botttom_left','posi_botttom_right'],
357 ],
358 ]
359 );
360 $this->add_responsive_control(
361 's_icon_posi_left',
362 [
363 'label' => esc_html__( 'Left Position', 'easy-elements' ),
364 'type' => \Elementor\Controls_Manager::SLIDER,
365 'size_units' => [ 'px', 'em','%'],
366 'range' => [
367 'px' => [
368 'min' => 0,
369 'max' => 500,
370 ],
371 ],
372 'selectors' => [
373 '{{WRAPPER}} .eel-team-grid-social.posi_left' => 'left: {{SIZE}}{{UNIT}};',
374 '{{WRAPPER}} .eel-team-grid-social.posi_botttom_left' => 'left: {{SIZE}}{{UNIT}};',
375 ],
376 'condition' => [
377 'social_icon_position' => ['posi_left','posi_botttom_left'],
378 ],
379 ]
380 );
381 $this->add_responsive_control(
382 's_icon_posi_right',
383 [
384 'label' => esc_html__( 'Right Position', 'easy-elements' ),
385 'type' => \Elementor\Controls_Manager::SLIDER,
386 'size_units' => [ 'px', 'em','%'],
387 'range' => [
388 'px' => [
389 'min' => 0,
390 'max' => 500,
391 ],
392 ],
393 'selectors' => [
394 '{{WRAPPER}} .eel-team-grid-social.posi_right' => 'right: {{SIZE}}{{UNIT}};',
395 '{{WRAPPER}} .eel-team-grid-social.posi_botttom_right' => 'right: {{SIZE}}{{UNIT}};',
396 ],
397 'condition' => [
398 'social_icon_position' => ['posi_right','posi_botttom_right'],
399 ],
400 ]
401 );
402
403 $this->add_control(
404 'social_links',
405 [
406 'label' => esc_html__( 'Social Links', 'easy-elements' ),
407 'type' => Controls_Manager::REPEATER,
408 'fields' => [
409 [
410 'name' => 'link_url',
411 'label' => esc_html__( 'Link URL', 'easy-elements' ),
412 'type' => Controls_Manager::URL,
413 'default' => [
414 'url' => '#',
415 'is_external' => true,
416 'nofollow' => false,
417 ],
418 ],
419 [
420 'name' => 'icon',
421 'label' => esc_html__( 'Icon', 'easy-elements' ),
422 'type' => Controls_Manager::ICONS,
423 'default' => [
424 'value' => 'fab fa-facebook-f',
425 'library' => 'fa-brands',
426 ],
427 ],
428 ],
429 'default' => [
430 [
431 'link_url' => [ 'url' => '#' ],
432 'icon' => [ 'value' => 'fab fa-facebook-f' ],
433 ],
434 ],
435 'title_field' => '<i class="{{ icon.value }}"></i> {{{ icon.value.replace(/^(fab fa-|fas fa-|far fa-|fa fa-)/, "") }}}',
436 ]
437 );
438
439 $this->end_controls_section();
440
441 // Tab STYLE
442 $this->start_controls_section(
443 'section_item_per',
444 [
445 'label' => esc_html__( 'Team Item', 'easy-elements' ),
446 'tab' => Controls_Manager::TAB_STYLE,
447 ]
448 );
449
450 $this->add_group_control(
451 \Elementor\Group_Control_Background::get_type(),
452 [
453 'name' => 'team_wrap_background',
454 'label' => __( 'Background', 'easy-elements' ),
455 'types' => [ 'classic', 'gradient' ],
456 'selector' => '{{WRAPPER}} .eel-team-grid .ee--team-img',
457 ]
458 );
459
460 $this->add_responsive_control(
461 'item_padding',
462 [
463 'label' => esc_html__( 'Padding', 'easy-elements' ),
464 'type' => \Elementor\Controls_Manager::DIMENSIONS,
465 'size_units' => [ 'px', '%' ],
466 'selectors' => [
467 '{{WRAPPER}} .eel-team-grid .ee--team-img' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
468 ],
469 ]
470 );
471 $this->add_responsive_control(
472 'item_bdr_radius',
473 [
474 'label' => esc_html__( 'Border Radius', 'easy-elements' ),
475 'type' => \Elementor\Controls_Manager::DIMENSIONS,
476 'size_units' => [ 'px', '%' ],
477 'selectors' => [
478 '{{WRAPPER}} .eel-team-grid .ee--team-img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
479 ],
480 ]
481 );
482 $this->add_group_control(
483 \Elementor\Group_Control_Border::get_type(),
484 [
485 'name' => 'team_border',
486 'selector' => '{{WRAPPER}} .eel-team-grid .ee--team-img',
487 ]
488 );
489 $this->add_control(
490 'team_hover_border_color',
491 [
492 'label' => esc_html__( 'Item Hover Border Color', 'easy-elements' ),
493 'type' => \Elementor\Controls_Manager::COLOR,
494 'selectors' => [
495 '{{WRAPPER}} .eel-team-grid .ee--team-img:hover' => 'border-color: {{VALUE}}',
496 ],
497 ]
498 );
499 $this->add_group_control(
500 \Elementor\Group_Control_Box_Shadow::get_type(),
501 [
502 'name' => 'team_box_shadow',
503 'label' => esc_html__('Box Shadow', 'easy-elements'),
504 'selector' => '{{WRAPPER}} .eel-team-grid .ee--team-img',
505 ]
506 );
507 $this->add_responsive_control(
508 'team_content_alignment',
509 [
510 'label' => esc_html__( 'Alignment', 'easy-elements' ),
511 'type' => \Elementor\Controls_Manager::CHOOSE,
512 'options' => [
513 'left' => [
514 'title' => esc_html__( 'Left', 'easy-elements' ),
515 'icon' => 'eicon-text-align-left',
516 ],
517 'center' => [
518 'title' => esc_html__( 'Center', 'easy-elements' ),
519 'icon' => 'eicon-text-align-center',
520 ],
521 'right' => [
522 'title' => esc_html__( 'Right', 'easy-elements' ),
523 'icon' => 'eicon-text-align-right',
524 ],
525 ],
526 'selectors' => [
527 '{{WRAPPER}} .eel-team-grid .ee--team-img .eel-name-deg-wrap' => 'text-align: {{VALUE}};',
528 ],
529 ]
530 );
531
532 $this->end_controls_section();
533
534 // Image
535 $this->start_controls_section(
536 'section_image',
537 [
538 'label' => esc_html__( 'Image', 'easy-elements' ),
539 'tab' => Controls_Manager::TAB_STYLE,
540 ]
541 );
542 $this->add_responsive_control(
543 'image_width',
544 [
545 'label' => esc_html__( 'Image Width', 'easy-elements' ),
546 'type' => \Elementor\Controls_Manager::SLIDER,
547 'size_units' => [ 'px', 'em', '%' ],
548 'range' => [
549 'px' => [
550 'max' => 500,
551 ],
552 ],
553 'selectors' => [
554 '{{WRAPPER}} .eel-team-grid .ee--team-img .eel-team-img-box' => 'max-width: {{SIZE}}{{UNIT}};',
555 ],
556 ]
557 );
558 $this->add_responsive_control(
559 'image_height',
560 [
561 'label' => esc_html__( 'Image Height', 'easy-elements' ),
562 'type' => \Elementor\Controls_Manager::SLIDER,
563 'size_units' => [ 'px', 'em', '%' ],
564 'range' => [
565 'px' => [
566 'max' => 500,
567 ],
568 ],
569 'selectors' => [
570 '{{WRAPPER}} .eel-team-grid .ee--team-img .eel-team-img-box img' => 'height: {{SIZE}}{{UNIT}};',
571 ],
572 ]
573 );
574 $this->add_responsive_control(
575 'image_padding',
576 [
577 'label' => esc_html__( 'Padding', 'easy-elements' ),
578 'type' => \Elementor\Controls_Manager::DIMENSIONS,
579 'size_units' => [ 'px', 'em', '%' ],
580 'selectors' => [
581 '{{WRAPPER}} .eel-team-grid .ee--team-img .eel-team-img-area' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
582 ],
583 ]
584 );
585 $this->add_responsive_control(
586 'image_border_radius',
587 [
588 'label' => esc_html__( 'Border Radius', 'easy-elements' ),
589 'type' => \Elementor\Controls_Manager::DIMENSIONS,
590 'size_units' => [ 'px', '%' ],
591 'selectors' => [
592 '{{WRAPPER}} .eel-team-grid .ee--team-img .eel-team-img-box' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
593 ],
594 ]
595 );
596 $this->add_control(
597 'image_below_bg',
598 [
599 'label' => esc_html__( 'Below Background Color', 'easy-elements' ),
600 'type' => \Elementor\Controls_Manager::COLOR,
601 'selectors' => [
602 '{{WRAPPER}} .eel-team-grid .ee--team-img .eel-team-img-area .eel-image-below-bg' => 'background-color: {{VALUE}}',
603 ],
604 ]
605 );
606 $this->add_responsive_control(
607 'image_below_height',
608 [
609 'label' => esc_html__( 'Image BG Height', 'easy-elements' ),
610 'type' => \Elementor\Controls_Manager::SLIDER,
611 'selectors' => [
612 '{{WRAPPER}} .eel-team-grid .ee--team-img .eel-team-img-area .eel-image-below-bg' => 'height: {{SIZE}}%;',
613 ],
614 ]
615 );
616
617 $this->add_control(
618 'image_below_position',
619 [
620 'label' => esc_html__( 'Image BG Position', 'easy-elements' ),
621 'type' => \Elementor\Controls_Manager::SELECT,
622 'default' => 'top',
623 'options' => [
624 'top' => esc_html__( 'Top', 'easy-elements' ),
625 'bottom' => esc_html__( 'Bottom', 'easy-elements' ),
626 ],
627 'selectors_dictionary' => [
628 'top' => 'top: 0; bottom: auto;',
629 'bottom' => 'top: auto; bottom: 0;',
630 ],
631 'selectors' => [
632 '{{WRAPPER}} .eel-team-grid .ee--team-img .eel-team-img-area .eel-image-below-bg' => '{{VALUE}}',
633 ],
634 ]
635 );
636 $this->add_responsive_control(
637 'image_below_border_radius',
638 [
639 'label' => esc_html__( 'Below BG Border Radius', 'easy-elements' ),
640 'type' => \Elementor\Controls_Manager::DIMENSIONS,
641 'size_units' => [ 'px', '%' ],
642 'selectors' => [
643 '{{WRAPPER}} .eel-team-grid .ee--team-img .eel-team-img-area .eel-image-below-bg' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
644 ],
645 ]
646 );
647
648 $this->end_controls_section();
649
650 // Name & Designation
651 $this->start_controls_section(
652 'section_item',
653 [
654 'label' => esc_html__( 'Name & Designation Area', 'easy-elements' ),
655 'tab' => Controls_Manager::TAB_STYLE,
656 ]
657 );
658
659 $this->add_control(
660 '_bg_color',
661 [
662 'label' => esc_html__( 'Background Color', 'easy-elements' ),
663 'type' => \Elementor\Controls_Manager::COLOR,
664 'selectors' => [
665 '{{WRAPPER}} .eel-team-grid .ee--team-img .eel-name-deg-wrap' => 'background-color: {{VALUE}}',
666 ],
667 'condition' => [
668 'team_skin!' => ['skin1']
669 ],
670 ]
671 );
672
673 $this->add_responsive_control(
674 'wrap_padding',
675 [
676 'label' => esc_html__( 'Padding', 'easy-elements' ),
677 'type' => \Elementor\Controls_Manager::DIMENSIONS,
678 'size_units' => [ 'px', 'em', '%' ],
679 'selectors' => [
680 '{{WRAPPER}} .eel-team-grid .ee--team-img .eel-name-deg-wrap' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
681 ],
682 ]
683 );
684 $this->add_responsive_control(
685 'wrap_margin',
686 [
687 'label' => esc_html__( 'Margin', 'easy-elements' ),
688 'type' => \Elementor\Controls_Manager::DIMENSIONS,
689 'size_units' => [ 'px', 'em', '%' ],
690 'selectors' => [
691 '{{WRAPPER}} .eel-team-grid .ee--team-img .eel-name-deg-wrap' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
692 ],
693 ]
694 );
695
696 $this->add_responsive_control(
697 '_bdr_radius',
698 [
699 'label' => esc_html__( 'Border Radius', 'easy-elements' ),
700 'type' => \Elementor\Controls_Manager::DIMENSIONS,
701 'size_units' => [ 'px', '%' ],
702 'selectors' => [
703 '{{WRAPPER}} .eel-team-grid .ee--team-img .eel-name-deg-wrap' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
704 ],
705 'condition' => [
706 'team_skin!' => ['skin1']
707 ],
708 ]
709 );
710
711 $this->end_controls_section();
712
713 // Skin 04 Hover Overlay
714 $this->start_controls_section(
715 'section_skin4_hover_overlay',
716 [
717 'label' => esc_html__( 'Hover Overlay', 'easy-elements' ),
718 'tab' => Controls_Manager::TAB_STYLE,
719 'condition' => [
720 'team_skin' => 'skin4',
721 ],
722 ]
723 );
724
725 $this->add_group_control(
726 \Elementor\Group_Control_Background::get_type(),
727 [
728 'name' => 'skin4_overlay_bg',
729 'label' => esc_html__( 'Background', 'easy-elements' ),
730 'types' => [ 'classic', 'gradient' ],
731 'selector' => '{{WRAPPER}} .eel-team-grid.skin4 .eel-team-hover-content',
732 ]
733 );
734
735 $this->add_responsive_control(
736 'skin4_overlay_blur',
737 [
738 'label' => esc_html__( 'Backdrop Blur', 'easy-elements' ),
739 'type' => \Elementor\Controls_Manager::SLIDER,
740 'size_units' => [ 'px' ],
741 'range' => [
742 'px' => [ 'min' => 0, 'max' => 50, 'step' => 1 ],
743 ],
744 'selectors' => [
745 '{{WRAPPER}} .eel-team-grid.skin4 .eel-team-hover-content' => 'backdrop-filter: blur({{SIZE}}{{UNIT}}); -webkit-backdrop-filter: blur({{SIZE}}{{UNIT}});',
746 ],
747 ]
748 );
749
750 $this->add_control(
751 'skin4_overlay_text_color',
752 [
753 'label' => esc_html__( 'Text Color', 'easy-elements' ),
754 'type' => \Elementor\Controls_Manager::COLOR,
755 'selectors' => [
756 '{{WRAPPER}} .eel-team-grid.skin4 .eel-team-hover-content' => 'color: {{VALUE}};',
757 ],
758 ]
759 );
760
761 $this->add_responsive_control(
762 'skin4_overlay_padding',
763 [
764 'label' => esc_html__( 'Padding', 'easy-elements' ),
765 'type' => \Elementor\Controls_Manager::DIMENSIONS,
766 'size_units' => [ 'px', 'em', '%' ],
767 'selectors' => [
768 '{{WRAPPER}} .eel-team-grid.skin4 .eel-team-hover-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
769 ],
770 ]
771 );
772
773 $this->add_responsive_control(
774 'skin4_overlay_border_radius',
775 [
776 'label' => esc_html__( 'Border Radius', 'easy-elements' ),
777 'type' => \Elementor\Controls_Manager::DIMENSIONS,
778 'size_units' => [ 'px', '%' ],
779 'selectors' => [
780 '{{WRAPPER}} .eel-team-grid.skin4 .eel-team-hover-content' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
781 ],
782 ]
783 );
784
785 $this->add_control(
786 'skin4_overlay_transition',
787 [
788 'label' => esc_html__( 'Transition Duration (s)', 'easy-elements' ),
789 'type' => \Elementor\Controls_Manager::SLIDER,
790 'range' => [
791 'px' => [ 'min' => 0, 'max' => 2, 'step' => 0.1 ],
792 ],
793 'selectors' => [
794 '{{WRAPPER}} .eel-team-grid.skin4 .eel-team-hover-content' => 'transition: opacity {{SIZE}}s ease;',
795 ],
796 ]
797 );
798
799 $this->end_controls_section();
800
801 // Name
802 $this->start_controls_section(
803 'section_name',
804 [
805 'label' => esc_html__( 'Name', 'easy-elements' ),
806 'tab' => Controls_Manager::TAB_STYLE,
807 ]
808 );
809
810 $this->add_control(
811 'name_color',
812 [
813 'label' => esc_html__( 'Color', 'easy-elements' ),
814 'type' => Controls_Manager::COLOR,
815 'selectors' => [
816 '{{WRAPPER}} .eel-name' => 'color: {{VALUE}};',
817 ],
818 ]
819 );
820
821 $this->add_group_control(
822 \Elementor\Group_Control_Typography::get_type(),
823 [
824 'name' => 'name_typography',
825 'label' => esc_html__( 'Typography', 'easy-elements' ),
826 'selector' => '{{WRAPPER}} .eel-name',
827 ]
828 );
829
830 $this->add_responsive_control(
831 'name_padding',
832 [
833 'label' => esc_html__( 'Padding', 'easy-elements' ),
834 'type' => \Elementor\Controls_Manager::DIMENSIONS,
835 'size_units' => [ 'px', 'em', '%' ],
836 'selectors' => [
837 '{{WRAPPER}} .eel-name' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
838 ],
839 ]
840 );
841
842 $this->end_controls_section();
843
844 // Designation
845 $this->start_controls_section(
846 'section_designation',
847 [
848 'label' => esc_html__( 'Designation', 'easy-elements' ),
849 'tab' => Controls_Manager::TAB_STYLE,
850 ]
851 );
852
853 $this->add_control(
854 'designation_color',
855 [
856 'label' => esc_html__( 'Color', 'easy-elements' ),
857 'type' => Controls_Manager::COLOR,
858 'selectors' => [
859 '{{WRAPPER}} .eel-designation' => 'color: {{VALUE}};',
860 ],
861 ]
862 );
863
864 $this->add_group_control(
865 \Elementor\Group_Control_Typography::get_type(),
866 [
867 'name' => 'designation_typography',
868 'label' => esc_html__( 'Typography', 'easy-elements' ),
869 'selector' => '{{WRAPPER}} .eel-designation',
870 ]
871 );
872
873 $this->end_controls_section();
874
875 // Description (default, skin1, skin2)
876 $this->start_controls_section(
877 'section_team_description',
878 [
879 'label' => esc_html__( 'Description', 'easy-elements' ),
880 'tab' => Controls_Manager::TAB_STYLE,
881 'condition' => [
882 'team_skin' => [ 'default', 'skin1', 'skin2' ],
883 ],
884 ]
885 );
886
887 $this->add_control(
888 'team_description_color',
889 [
890 'label' => esc_html__( 'Color', 'easy-elements' ),
891 'type' => Controls_Manager::COLOR,
892 'selectors' => [
893 '{{WRAPPER}} .eel-team-description' => 'color: {{VALUE}};',
894 ],
895 ]
896 );
897
898 $this->add_group_control(
899 \Elementor\Group_Control_Typography::get_type(),
900 [
901 'name' => 'team_description_typography',
902 'label' => esc_html__( 'Typography', 'easy-elements' ),
903 'selector' => '{{WRAPPER}} .eel-team-description',
904 ]
905 );
906
907 $this->add_responsive_control(
908 'team_description_margin',
909 [
910 'label' => esc_html__( 'Margin', 'easy-elements' ),
911 'type' => \Elementor\Controls_Manager::DIMENSIONS,
912 'size_units' => [ 'px', 'em', '%' ],
913 'selectors' => [
914 '{{WRAPPER}} .eel-team-description' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
915 ],
916 ]
917 );
918
919 $this->add_responsive_control(
920 'team_description_padding',
921 [
922 'label' => esc_html__( 'Padding', 'easy-elements' ),
923 'type' => \Elementor\Controls_Manager::DIMENSIONS,
924 'size_units' => [ 'px', 'em', '%' ],
925 'selectors' => [
926 '{{WRAPPER}} .eel-team-description' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
927 ],
928 ]
929 );
930
931 $this->end_controls_section();
932
933 $this->start_controls_section(
934 'section_description',
935 [
936 'label' => esc_html__( 'Description', 'easy-elements' ),
937 'tab' => Controls_Manager::TAB_STYLE,
938 'condition' => [
939 'team_skin' => 'skin3',
940 ],
941 ]
942 );
943
944
945 $this->start_controls_tabs( 'description_colors' );
946
947 // Normal Tab
948 $this->start_controls_tab(
949 'description_colors_normal',
950 [
951 'label' => esc_html__( 'Normal', 'easy-elements' ),
952 ]
953 );
954
955 $this->add_control(
956 'description_color',
957 [
958 'label' => esc_html__( 'Color', 'easy-elements' ),
959 'type' => Controls_Manager::COLOR,
960 'selectors' => [
961 '{{WRAPPER}} .eel-image-content .eel-description' => 'color: {{VALUE}};',
962 ],
963 ]
964 );
965
966 $this->add_group_control(
967 \Elementor\Group_Control_Background::get_type(),
968 [
969 'name' => 'description_background',
970 'label' => esc_html__( 'Background Color', 'easy-elements' ),
971 'types' => [ 'classic', 'gradient' ],
972 'selector' => '{{WRAPPER}} .eel-image-content',
973 ]
974 );
975
976 $this->end_controls_tab();
977
978 // Hover Tab
979 $this->start_controls_tab(
980 'description_colors_hover',
981 [
982 'label' => esc_html__( 'Hover', 'easy-elements' ),
983 ]
984 );
985
986 $this->add_control(
987 'description_color_hover',
988 [
989 'label' => esc_html__( 'Color', 'easy-elements' ),
990 'type' => Controls_Manager::COLOR,
991 'selectors' => [
992 '{{WRAPPER}} .eel-image-content:hover .eel-description' => 'color: {{VALUE}};',
993 ],
994 ]
995 );
996
997 $this->add_group_control(
998 \Elementor\Group_Control_Background::get_type(),
999 [
1000 'name' => 'description_background_hover',
1001 'label' => esc_html__( 'Background Color', 'easy-elements' ),
1002 'types' => [ 'classic', 'gradient' ],
1003 'selector' => '{{WRAPPER}} .eel-image-content:hover:before',
1004 ]
1005 );
1006
1007 $this->add_control(
1008 'description_background_hover_opacity',
1009 [
1010 'label' => esc_html__( 'Opacity', 'easy-elements' ),
1011 'type' => \Elementor\Controls_Manager::SLIDER,
1012 'range' => [
1013 '' => [
1014 'min' => 0,
1015 'max' => 1,
1016 'step' => 0.1,
1017 ],
1018 ],
1019 'default' => [
1020 'size' => 0.5,
1021 ],
1022 'selectors' => [
1023 '{{WRAPPER}} .eel-image-content:hover::before' => 'opacity: {{SIZE}};',
1024 ],
1025 ]
1026 );
1027
1028
1029 $this->end_controls_tab();
1030
1031 $this->end_controls_tabs();
1032
1033 // Typography control (applies to both normal and hover states)
1034 $this->add_group_control(
1035 \Elementor\Group_Control_Typography::get_type(),
1036 [
1037 'name' => 'description_typography',
1038 'label' => esc_html__( 'Typography', 'easy-elements' ),
1039 'selector' => '{{WRAPPER}} .eel-image-content .eel-description',
1040 ]
1041 );
1042
1043 $this->add_control(
1044 'description_hover_transition',
1045 [
1046 'label' => esc_html__( 'Transition Duration', 'easy-elements' ),
1047 'type' => Controls_Manager::SLIDER,
1048 'size_units' => [ 's', 'ms' ],
1049 'range' => [
1050 's' => [
1051 'min' => 0,
1052 'max' => 3,
1053 'step' => 0.1,
1054 ],
1055 'ms' => [
1056 'min' => 0,
1057 'max' => 3000,
1058 'step' => 100,
1059 ],
1060 ],
1061 'default' => [
1062 'unit' => 's',
1063 'size' => 0.3,
1064 ],
1065 'selectors' => [
1066 '{{WRAPPER}} .eel-image-content' => 'transition-duration: {{SIZE}}{{UNIT}};',
1067 ],
1068 ]
1069 );
1070
1071 $this->add_responsive_control(
1072 'description_padding',
1073 [
1074 'label' => esc_html__( 'Padding', 'easy-elements' ),
1075 'type' => Controls_Manager::DIMENSIONS,
1076 'size_units' => [ 'px', '%', 'em' ],
1077 'selectors' => [
1078 '{{WRAPPER}} .eel-image-content' => 'padding: {{TOP}}{{UNIT}}} {{RIGHT}}{{UNIT}}} {{BOTTOM}}{{UNIT}}} {{LEFT}}{{UNIT}};',
1079 ],
1080 ]
1081 );
1082
1083 $this->add_control(
1084 'image_descripiton_overlay_note',
1085 [
1086 'type' => \Elementor\Controls_Manager::RAW_HTML,
1087 'raw' => '<div class="eel-popup-note">' . esc_html__('Note: This style only workable when description added for style 3.', 'easy-elements') . '</div>',
1088 'separator' => 'before',
1089 ]
1090 );
1091
1092 $this->end_controls_section();
1093
1094 // Social Item
1095 $this->start_controls_section(
1096 'section_social',
1097 [
1098 'label' => esc_html__( 'Social Icon', 'easy-elements' ),
1099 'tab' => Controls_Manager::TAB_STYLE,
1100 'condition' => [
1101 'show_social_icon' => 'yes',
1102 ]
1103 ]
1104 );
1105
1106 $this->start_controls_tabs( 's_icon_color_tabs' );
1107
1108 $this->start_controls_tab(
1109 's_icon_tab_normal',
1110 [ 'label' => esc_html__( 'Normal', 'easy-elements' ) ]
1111 );
1112
1113 $this->add_control(
1114 's_icon_color',
1115 [
1116 'label' => esc_html__( 'Color', 'easy-elements' ),
1117 'type' => Controls_Manager::COLOR,
1118 'selectors' => [
1119 '{{WRAPPER}} .eel-team-grid-social ul li a' => 'color: {{VALUE}};',
1120 '{{WRAPPER}} .eel-team-grid-social .eel-team-social-hover a' => 'color: {{VALUE}};',
1121 ],
1122 ]
1123 );
1124
1125 $this->add_control(
1126 's_icon_bg_color',
1127 [
1128 'label' => esc_html__( 'Background Color', 'easy-elements' ),
1129 'type' => Controls_Manager::COLOR,
1130 'selectors' => [
1131 '{{WRAPPER}} .eel-team-grid-social ul li a' => 'background: {{VALUE}};',
1132 '{{WRAPPER}} .eel-team-grid-social .eel-team-social-hover a' => 'background: {{VALUE}};',
1133 ],
1134 ]
1135 );
1136
1137 $this->end_controls_tab();
1138
1139 $this->start_controls_tab(
1140 's_icon_tab_hover',
1141 [ 'label' => esc_html__( 'Hover', 'easy-elements' ) ]
1142 );
1143
1144 $this->add_control(
1145 's_icon_hover_color',
1146 [
1147 'label' => esc_html__( 'Color', 'easy-elements' ),
1148 'type' => Controls_Manager::COLOR,
1149 'selectors' => [
1150 '{{WRAPPER}} .eel-team-grid-social ul li a:hover' => 'color: {{VALUE}};',
1151 '{{WRAPPER}} .eel-team-grid-social .eel-team-social-hover a:hover' => 'color: {{VALUE}};',
1152 ],
1153 ]
1154 );
1155
1156 $this->add_control(
1157 's_icon_hover_bg_color',
1158 [
1159 'label' => esc_html__( 'Background Color', 'easy-elements' ),
1160 'type' => Controls_Manager::COLOR,
1161 'selectors' => [
1162 '{{WRAPPER}} .eel-team-grid-social ul li a:hover' => 'background: {{VALUE}};',
1163 '{{WRAPPER}} .eel-team-grid-social .eel-team-social-hover a:hover' => 'background: {{VALUE}};',
1164 ],
1165 ]
1166 );
1167
1168 $this->end_controls_tab();
1169
1170 $this->end_controls_tabs();
1171
1172 $this->add_group_control(
1173 \Elementor\Group_Control_Typography::get_type(),
1174 [
1175 'name' => 's_icon_typography',
1176 'label' => esc_html__( 'Typography', 'easy-elements' ),
1177 'selector' => '{{WRAPPER}} .eel-team-grid-social ul li a, {{WRAPPER}} .eel-team-grid-social .eel-team-social-hover a',
1178 ]
1179 );
1180 $this->add_responsive_control(
1181 's_icon_gap',
1182 [
1183 'label' => esc_html__( 'Icon Gap', 'easy-elements' ),
1184 'type' => \Elementor\Controls_Manager::SLIDER,
1185 'size_units' => [ 'px', 'em'],
1186 'selectors' => [
1187 '{{WRAPPER}} .eel-team-grid-social ul' => 'gap: {{SIZE}}{{UNIT}};',
1188 ],
1189 ]
1190 );
1191 $this->add_responsive_control(
1192 's_icon_width-height',
1193 [
1194 'label' => esc_html__( 'Button Size', 'easy-elements' ),
1195 'type' => \Elementor\Controls_Manager::SLIDER,
1196 'size_units' => [ 'px', 'em'],
1197 'selectors' => [
1198 '{{WRAPPER}} .eel-team-grid-social ul li a' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
1199 '{{WRAPPER}} .eel-team-grid-social .eel-team-social-hover a' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
1200 ],
1201 ]
1202 );
1203 $this->add_responsive_control(
1204 's_icon_radius',
1205 [
1206 'label' => esc_html__( 'Border Radius', 'easy-elements' ),
1207 'type' => \Elementor\Controls_Manager::DIMENSIONS,
1208 'size_units' => [ 'px', '%' ],
1209 'selectors' => [
1210 '{{WRAPPER}} .eel-team-grid-social ul li a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1211 '{{WRAPPER}} .eel-team-grid-social .eel-team-social-hover a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1212 ],
1213 ]
1214 );
1215 $this->add_responsive_control(
1216 's_icon_area_padding',
1217 [
1218 'label' => esc_html__( 'Area Padding', 'easy-elements' ),
1219 'type' => \Elementor\Controls_Manager::DIMENSIONS,
1220 'size_units' => [ 'px', '%' ],
1221 'selectors' => [
1222 '{{WRAPPER}} .eel-team-grid-social' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1223 ],
1224 ]
1225 );
1226 $this->add_group_control(
1227 \Elementor\Group_Control_Border::get_type(),
1228 [
1229 'name' => 'social_item_border',
1230 'label' => esc_html__( 'Area Border', 'easy-elements' ),
1231 'selector' => '{{WRAPPER}} .eel-team-grid .eel-team-grid-social.default',
1232 'condition' => [
1233 'social_icon_position' => 'default',
1234 ]
1235 ]
1236 );
1237 $this->add_control(
1238 'social_item_border_note',
1239 [
1240 'type' => \Elementor\Controls_Manager::RAW_HTML,
1241 'raw' => '<strong>Note:</strong>Social Area Border',
1242 'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
1243 'condition' => [
1244 'social_icon_position' => 'default',
1245 ]
1246 ]
1247 );
1248 $this->add_responsive_control(
1249 'team_social_icon_alignment',
1250 [
1251 'label' => esc_html__( 'Alignment', 'easy-elements' ),
1252 'type' => \Elementor\Controls_Manager::CHOOSE,
1253 'options' => [
1254 'flex-start' => [
1255 'title' => esc_html__( 'Left', 'easy-elements' ),
1256 'icon' => 'eicon-justify-start-h',
1257 ],
1258 'center' => [
1259 'title' => esc_html__( 'Center', 'easy-elements' ),
1260 'icon' => 'eicon-justify-center-h',
1261 ],
1262 'right' => [
1263 'title' => esc_html__( 'Right', 'easy-elements' ),
1264 'icon' => 'eicon-justify-end-h',
1265 ],
1266 ],
1267 'selectors' => [
1268 '{{WRAPPER}} .eel-team-grid .ee--team-img .eel-team-grid-social.default ul' => 'justify-content: {{VALUE}};',
1269 ],
1270 'condition' => [
1271 'social_icon_position' => 'default',
1272 ]
1273 ]
1274 );
1275
1276 $this->end_controls_section();
1277
1278 // Popup
1279 $this->start_controls_section(
1280 'section_popup_style',
1281 [
1282 'label' => esc_html__( 'Popup Style', 'easy-elements' ),
1283 'tab' => Controls_Manager::TAB_STYLE,
1284 'condition' => [
1285 'action_type' => 'popup',
1286 ],
1287 ]
1288 );
1289
1290 $this->add_control(
1291 'popup_bg_color',
1292 [
1293 'label' => esc_html__( 'Background Color', 'easy-elements' ),
1294 'type' => Controls_Manager::COLOR,
1295 'selectors' => [
1296 '{{WRAPPER}} .eel-popup-content' => 'background-color: {{VALUE}};',
1297 ],
1298 ]
1299 );
1300
1301 $this->add_control(
1302 'popup_name_color',
1303 [
1304 'label' => esc_html__( 'Name Color', 'easy-elements' ),
1305 'type' => Controls_Manager::COLOR,
1306 'selectors' => [
1307 '{{WRAPPER}} .eel-popup-name .eel-name' => 'color: {{VALUE}};',
1308 ],
1309 ]
1310 );
1311 $this->add_group_control(
1312 \Elementor\Group_Control_Typography::get_type(),
1313 [
1314 'name' => 'popup_name_typography',
1315 'label' => esc_html__( 'Name Typography', 'easy-elements' ),
1316 'selector' => '{{WRAPPER}} .eel-popup-name .eel-name',
1317 ]
1318 );
1319
1320 $this->add_control(
1321 'popup_designation_color',
1322 [
1323 'label' => esc_html__( 'Designation Color', 'easy-elements' ),
1324 'type' => Controls_Manager::COLOR,
1325 'selectors' => [
1326 '{{WRAPPER}} .eel-popup-designation' => 'color: {{VALUE}};',
1327 ],
1328 ]
1329 );
1330 $this->add_group_control(
1331 \Elementor\Group_Control_Typography::get_type(),
1332 [
1333 'name' => 'popup_designation_typography',
1334 'label' => esc_html__( 'Designation Typography', 'easy-elements' ),
1335 'selector' => '{{WRAPPER}} .eel-popup-designation',
1336 ]
1337 );
1338
1339 $this->add_control(
1340 'popup_details_color',
1341 [
1342 'label' => esc_html__( 'Details Color', 'easy-elements' ),
1343 'type' => Controls_Manager::COLOR,
1344 'selectors' => [
1345 '{{WRAPPER}} .eel-popup-details' => 'color: {{VALUE}};',
1346 ],
1347 ]
1348 );
1349 $this->add_group_control(
1350 \Elementor\Group_Control_Typography::get_type(),
1351 [
1352 'name' => 'popup_details_typography',
1353 'label' => esc_html__( 'Details Typography', 'easy-elements' ),
1354 'selector' => '{{WRAPPER}} .eel-popup-details',
1355 ]
1356 );
1357 $this->add_control(
1358 'popup_close_color',
1359 [
1360 'label' => esc_html__( 'Close Icon Color', 'easy-elements' ),
1361 'type' => Controls_Manager::COLOR,
1362 'selectors' => [
1363 '{{WRAPPER}} .eel-popup-close' => 'color: {{VALUE}};',
1364 ],
1365 ]
1366 );
1367
1368 $this->end_controls_section();
1369 }
1370
1371 protected function render() {
1372 $settings = $this->get_settings_for_display();
1373 $team_skin = $settings['team_skin'];
1374 ?>
1375
1376 <div class="eel-team-wraps eel-team-grid grid-layout <?php echo esc_attr( $team_skin )?>">
1377 <div class="grid-wrap">
1378 <?php
1379 $image_id = $settings['image']['id'] ?? '';
1380 $image_size = $settings['image_size'] ?? 'full';
1381 if ( $image_id ) {
1382 $image_data = wp_get_attachment_image_src( $image_id, $image_size );
1383 $alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true );
1384 $title = get_the_title( $image_id );
1385 } else {
1386 $fallback_url = Utils::get_placeholder_image_src();
1387 $image_data = [ $fallback_url, 600, 400 ];
1388 $alt = esc_attr__( 'Team Image', 'easy-elements' );
1389 $title = esc_attr__( 'Team Image', 'easy-elements' );
1390 }
1391
1392 $action_type = $settings['action_type'] ?? 'link';
1393 $link = $settings['link']['url'] ?? '';
1394 $target = ! empty( $settings['link']['is_external'] ) ? '_blank' : '';
1395 $nofollow = ! empty( $settings['link']['nofollow'] ) ? 'nofollow' : '';
1396 $fetchpriority = $settings['fetchpriority'] ?? '';
1397 $unique_id = uniqid('eel_team_');
1398
1399 $title_tag = isset( $settings['title_tag'] ) ? $settings['title_tag'] : 'h4';
1400 $name = sprintf( '<%1$s class="eel-name">%2$s</%1$s>', esc_attr( $title_tag ), esc_html( $settings['_name'] ));
1401 $designation = $settings['designation'] ?? '';
1402 $details = $settings['details'] ?? '';
1403 ?>
1404 <?php if ($team_skin == 'default'): ?>
1405 <div class="grid-item">
1406 <div class="ee--team-img">
1407 <?php if ( $image_data ) : ?>
1408 <div class="eel-team-img-area">
1409 <?php if ( $action_type === 'link' && $link ) : ?>
1410 <a href="<?php echo esc_url( $link ); ?>"
1411 <?php if ( $target ) : ?>target="<?php echo esc_attr( $target ); ?>"<?php endif; ?>
1412 <?php if ( $nofollow ) : ?>rel="<?php echo esc_attr( $nofollow ); ?>"<?php endif; ?>>
1413 <?php elseif ( $action_type === 'popup' ) : ?>
1414 <a href="#<?php echo esc_attr($unique_id); ?>" class="eel-popup-trigger" data-popup-id="<?php echo esc_attr($unique_id); ?>">
1415 <?php endif; ?>
1416 <div class="eel-team-img-box">
1417 <img class="eel-team-img"
1418 src="<?php echo esc_url( $image_data[0] ); ?>"
1419 width="<?php echo esc_attr( $image_data[1] ); ?>"
1420 height="<?php echo esc_attr( $image_data[2] ); ?>"
1421 alt="<?php echo esc_attr( $alt ); ?>"
1422 title="<?php echo esc_attr( $title ); ?>"
1423 loading="lazy"
1424 decoding="async" fetchpriority="<?php echo esc_attr( $fetchpriority ); ?>">
1425 <div class="eel-image-below-bg"></div>
1426 <div class="eel-image-overlay"></div>
1427 </div>
1428 <?php if ( ($action_type === 'link' && $link) || $action_type === 'popup' ) : ?>
1429 </a>
1430 <?php endif; ?>
1431 <?php if($settings['content_show'] == 'inside'):?>
1432 <div class="eel-name-deg-wrap <?php echo esc_attr( $settings['content_show'] )?>">
1433 <?php if ( ! empty( $name ) ) :
1434 echo wp_kses_post( $name );
1435 endif; ?>
1436 <?php if ( ! empty( $designation ) ) : ?>
1437 <div class="eel-designation"><?php echo esc_html( $designation ); ?></div>
1438 <?php if ( ! empty( $details ) ) : ?>
1439 <div class="eel-team-description"><?php echo nl2br( esc_html( $details ) ); ?></div>
1440 <?php endif; ?>
1441 <?php if ( $settings['social_links'] && $settings['show_social_icon'] == 'yes' && $settings['social_icon_position'] == 'default'): ?>
1442 <div class="eel-team-grid-social <?php echo esc_attr( $settings['social_icon_position'].' '.$settings['social_icon_show'] )?>">
1443 <?php if( $settings['social_icon_show'] =='hover_show' && !empty( $settings['social_hover_icon']['value']) ): ?>
1444 <div class="eel-team-social-hover">
1445 <a href="#">
1446 <?php \Elementor\Icons_Manager::render_icon( $settings['social_hover_icon'], [ 'aria-hidden' => 'true' ] ); ?>
1447 </a>
1448 </div>
1449 <?php endif;?>
1450 <ul>
1451 <?php foreach ( $settings['social_links'] as $item ):?>
1452 <li>
1453 <a href="<?php echo esc_attr( $item['link_url']['url'] )?>">
1454 <?php \Elementor\Icons_Manager::render_icon( $item['icon'], [ 'aria-hidden' => 'true' ] ); ?>
1455 </a>
1456 </li>
1457 <?php endforeach; ?>
1458 </ul>
1459 </div>
1460 <?php endif; ?>
1461 <?php endif; ?>
1462 </div>
1463 <?php endif; ?>
1464 </div>
1465 <?php endif; ?>
1466 <?php if($settings['content_show'] != 'inside'):?>
1467 <div class="eel-name-deg-wrap">
1468 <?php if ( ! empty( $name ) ) :
1469 echo wp_kses_post( $name );
1470 endif; ?>
1471 <?php if ( ! empty( $designation ) ) : ?>
1472 <div class="eel-designation"><?php echo esc_html( $designation ); ?></div>
1473 <?php endif; ?>
1474 <?php if ( ! empty( $details ) ) : ?>
1475 <div class="eel-team-description"><?php echo nl2br( esc_html( $details ) ); ?></div>
1476 <?php endif; ?>
1477 <?php if ( $settings['social_links'] && $settings['show_social_icon'] == 'yes' && $settings['social_icon_position'] == 'default'): ?>
1478 <div class="eel-team-grid-social <?php echo esc_attr( $settings['social_icon_position'].' '.$settings['social_icon_show'] )?>">
1479 <?php if( $settings['social_icon_show'] =='hover_show' && !empty( $settings['social_hover_icon']['value']) ): ?>
1480 <div class="eel-team-social-hover">
1481 <a href="#">
1482 <?php \Elementor\Icons_Manager::render_icon( $settings['social_hover_icon'], [ 'aria-hidden' => 'true' ] ); ?>
1483 </a>
1484 </div>
1485 <?php endif;?>
1486 <ul>
1487 <?php foreach ( $settings['social_links'] as $item ):?>
1488 <li>
1489 <a href="<?php echo esc_attr( $item['link_url']['url'] )?>">
1490 <?php \Elementor\Icons_Manager::render_icon( $item['icon'], [ 'aria-hidden' => 'true' ] ); ?>
1491 </a>
1492 </li>
1493 <?php endforeach; ?>
1494 </ul>
1495 </div>
1496 <?php endif; ?>
1497 </div>
1498 <?php endif; ?>
1499 <?php if ( $settings['social_links'] && $settings['show_social_icon'] == 'yes' && $settings['social_icon_position'] != 'default'): ?>
1500 <div class="eel-team-grid-social <?php echo esc_attr( $settings['social_icon_position'].' '.$settings['social_icon_show'] )?>">
1501 <?php if( $settings['social_icon_show'] =='hover_show' && !empty( $settings['social_hover_icon']['value']) ): ?>
1502 <div class="eel-team-social-hover">
1503 <a href="#">
1504 <?php \Elementor\Icons_Manager::render_icon( $settings['social_hover_icon'], [ 'aria-hidden' => 'true' ] ); ?>
1505 </a>
1506 </div>
1507 <?php endif;?>
1508 <ul>
1509 <?php foreach ( $settings['social_links'] as $item ):?>
1510 <li>
1511 <a href="<?php echo esc_attr( $item['link_url']['url'] )?>">
1512 <?php \Elementor\Icons_Manager::render_icon( $item['icon'], [ 'aria-hidden' => 'true' ] ); ?>
1513 </a>
1514 </li>
1515 <?php endforeach; ?>
1516 </ul>
1517 </div>
1518 <?php endif; ?>
1519 </div>
1520 </div>
1521 <!-- Others Skins -->
1522 <?php else:
1523 include plugin_dir_path(__FILE__) . 'skins/' . $team_skin . '.php';
1524 endif;
1525 ?>
1526 <?php if ( $action_type === 'popup' ) : ?>
1527 <div id="<?php echo esc_attr($unique_id); ?>" class="eel-popup-modal" style="display:none;">
1528 <div class="eel-popup-content">
1529 <span class="eel-popup-close">&times;</span>
1530 <div class="eel-popup-header">
1531 <?php if ( ! empty( $name ) ) : ?>
1532 <div class="eel-popup-name"><?php echo wp_kses_post( $name ); ?></div>
1533 <?php endif; ?>
1534 <?php if ( ! empty( $designation ) ) : ?>
1535 <div class="eel-popup-designation"><?php echo esc_html( $designation ); ?></div>
1536 <?php endif; ?>
1537 </div>
1538 <div class="eel-popup-details">
1539 <?php if ( ! empty( $details ) ) : ?>
1540 <?php echo nl2br( esc_html( $details ) ); ?>
1541 <?php else : ?>
1542 <p><?php esc_html_e( 'No additional details available.', 'easy-elements' ); ?></p>
1543 <?php endif; ?>
1544 </div>
1545 </div>
1546 </div>
1547 <?php endif; ?>
1548 </div>
1549 </div>
1550 <?php
1551 }
1552 }