PluginProbe
UiCore Elements – Free widgets and templates for Elementor / 1.0.15
UiCore Elements – Free widgets and templates for Elementor v1.0.15
1.3.17 1.3.16 trunk 1.0.0 1.0.1 1.0.10 1.0.11 1.0.12 1.0.13 1.0.14 1.0.15 1.0.16 1.0.2 1.0.3 1.0.4 1.0.5 1.0.6 1.0.7 1.0.8 1.0.9 1.2.0 1.2.1 1.2.2 1.2.3 1.2.4 All 41 releases
uicore-elements / includes / utils / gallery-component.php

gallery-component.php in UiCore Elements – Free widgets and templates for Elementor 1.0.15, at includes/utils/gallery-component.php

1,167 lines 47.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 namespace UiCoreElements\Utils;
3
4 use Elementor\Controls_Manager;
5 use Elementor\Utils;
6 use Elementor\Repeater;
7 use Elementor\Control_Media;
8 use Elementor\Group_Control_Image_Size;
9 use Elementor\Group_Control_Box_Shadow;
10 use Elementor\Group_Control_Border;
11 use Elementor\Group_Control_Typography;
12 use Elementor\Group_Control_Background;
13 use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
14 use UiCoreElements\Helper;
15
16
17 defined('ABSPATH') || exit();
18
19 /**
20 * Gallery Component
21 *
22 * @since 1.0.14
23 */
24
25
26 trait Gallery_Trait {
27
28 // Controls Registration
29 function TRAIT_register_gallery_repeater_controls($title)
30 {
31 $this->start_controls_section(
32 'content_section',
33 [
34 'label' => __($title, 'uicore-elements'),
35 'tab' => Controls_Manager::TAB_CONTENT,
36 ]
37 );
38
39 $repeater = new Repeater();
40 $repeater->add_control(
41 'item_image',
42 [
43 'label' => esc_html__('Image', 'uicore-elements'),
44 'type' => Controls_Manager::MEDIA,
45 'default' => [
46 'url' => Utils::get_placeholder_image_src(),
47 ],
48 ]
49 );
50 $repeater->add_control(
51 'item_url',
52 [
53 'label' => esc_html__('Link', 'uicore-elements'),
54 'type' => Controls_Manager::URL,
55 'placeholder' => 'https://your-link.com',
56 ]
57 );
58 $repeater->add_control(
59 'item_title',
60 [
61 'label' => esc_html__('Title', 'uicore-elements'),
62 'type' => Controls_Manager::TEXT,
63 'default' => esc_html__('Title', 'uicore-elements'),
64 'label_block' => true,
65 ]
66 );
67 $repeater->add_control(
68 'item_description',
69 [
70 'label' => esc_html__('Description', 'uicore-elements'),
71 'type' => Controls_Manager::TEXTAREA,
72 'label_block' => true,
73 ]
74 );
75 $repeater->add_control(
76 'item_badge',
77 [
78 'label' => esc_html__('Badge', 'uicore-elements'),
79 'type' => Controls_Manager::TEXT,
80 'label_block' => true,
81 ]
82 );
83 $repeater->add_control(
84 'item_tags',
85 [
86 'label' => esc_html__('Tags', 'uicore-elements'),
87 'type' => Controls_Manager::TEXT,
88 'description' => esc_html__('Separate tags with commas', 'uicore-elements'),
89 'label_block' => true,
90 ]
91 );
92
93 $this->add_control(
94 'gallery_items',
95 [
96 'label' => esc_html__('Items', 'uicore-elements'),
97 'type' => Controls_Manager::REPEATER,
98 'fields' => $repeater->get_controls(),
99 'default' => [
100 [
101 'item_title' => esc_html__('Item #1', 'uicore-elements'),
102 ],
103 [
104 'item_title' => esc_html__('Item #2', 'uicore-elements'),
105 ],
106 [
107 'item_title' => esc_html__('Item #3', 'uicore-elements'),
108 ],
109 ],
110 'title_field' => '{{{ item_title }}}',
111 ]
112 );
113
114 $this->end_controls_section();
115 }
116 function TRAIT_register_additional_controls($carousel = false)
117 {
118 $this->start_controls_section(
119 'additional_section',
120 [
121 'label' => esc_html__('Additional', 'uicore-elements'),
122 'tab' => Controls_Manager::TAB_CONTENT,
123 ]
124 );
125 $this->add_control(
126 'layout',
127 [
128 'label' => esc_html__('Layout', 'uicore-elements'),
129 'type' => Controls_Manager::SELECT,
130 'default' => '',
131 'prefix_class' => '',
132 'render_type' => 'template',
133 'options' => [
134 '' => esc_html__('Default', 'uicore-elements'),
135 'ui-e-overlay' => esc_html__('Overlay', 'uicore-elements'),
136 ],
137 ]
138 );
139
140 $this->add_control(
141 'item_overflow',
142 [
143 'label' => esc_html__('Hide overflow', 'uicore-elements'),
144 'type' => Controls_Manager::SWITCHER,
145 'default' => 'no',
146 'prefix_class' => 'ui-e-overflow-',
147 'description' => __('Useful if you have an animation, on an image, for example, that surpasses the item area and you want to hide it.', 'uicore-elements'),
148 'condition' => [
149 'layout' => '',
150 ]
151 ]
152 );
153
154 $this->add_control(
155 'hide_tags',
156 [
157 'label' => __('Hide item tags', 'uicore-elements'),
158 'type' => Controls_Manager::SWITCHER,
159 'separator' => 'before',
160 'default' => 'no',
161 ]
162 );
163
164 if( ! $carousel ){
165 $this->add_control(
166 'filters',
167 [
168 'label' => __('Use filters', 'uicore-elements'),
169 'type' => Controls_Manager::SWITCHER,
170 'default' => 'no',
171 ]
172 );
173 $this->add_control(
174 'clear_text',
175 [
176 'label' => __('Clear Text', 'uicore-elements'),
177 'type' => Controls_Manager::TEXT,
178 'default' => __('All', 'uicore-elements'),
179 'placeholder' => __('Clear filter text', 'uicore-elements'),
180 'condition' => [
181 'filters' => 'yes'
182 ]
183 ]
184 );
185 }
186
187 $this->add_control(
188 'title_tag',
189 [
190 'label' => esc_html__('Title Tag', 'uicore-elements'),
191 'type' => Controls_Manager::SELECT,
192 'default' => 'h4',
193 'options' => Helper::get_title_tags(),
194 'separator' => 'before'
195 ]
196 );
197 $this->add_control(
198 'image_size',
199 [
200 'label' => esc_html__('Image Size', 'uicore-elements'),
201 'type' => Controls_Manager::SELECT,
202 'default' => 'uicore-medium',
203 'options' => Helper::get_images_sizes(),
204 ]
205 );
206 $this->add_control(
207 'badge_position',
208 [
209 'label' => esc_html__('Badge Position', 'uicore-elements'),
210 'type' => Controls_Manager::SELECT,
211 'default' => 'ui-e-badge-start-left',
212 'prefix_class' => '',
213 'render_type' => 'template', // without it, loading a page with image and changing to title won't work
214 'options' => [
215 '' => __('After title', 'uicore-elements'),
216 'ui-e-badge-start-left' => __('Image top left', 'uicore-elements'),
217 'ui-e-badge-start-right' => __('Image top right', 'uicore-elements'),
218 'ui-e-badge-end-left' => __('Image bottom left', 'uicore-elements'),
219 'ui-e-badge-end-right' => __('Image bottom right', 'uicore-elements'),
220 ],
221 ]
222 );
223
224 $this->end_controls_section();
225 }
226
227 function TRAIT_register_filters_style_controls()
228 {
229 $this->start_controls_section(
230 'style_filters_section',
231 [
232 'label' => __('Filters', 'uicore-elements'),
233 'tab' => Controls_Manager::TAB_STYLE,
234 'condition' => [
235 'filters' => 'yes',
236 ],
237 ]
238 );
239
240 $this->add_responsive_control(
241 'filters_align',
242 [
243 'label' => esc_html__( 'Alignment', 'uicore-elements' ),
244 'type' => Controls_Manager::CHOOSE,
245 'options' => [
246 'start' => [
247 'title' => esc_html__( 'Left', 'uicore-elements' ),
248 'icon' => 'eicon-h-align-left',
249 ],
250 'center' => [
251 'title' => esc_html__( 'Center', 'uicore-elements' ),
252 'icon' => 'eicon-h-align-center',
253 ],
254 'end' => [
255 'title' => esc_html__( 'Right', 'uicore-elements' ),
256 'icon' => 'eicon-h-align-right',
257 ],
258 ],
259 'default' => 'center',
260 'selectors' => [
261 '(desktop){{WRAPPER}} .ui-e-filters' => 'justify-content: {{VALUE}}',
262 '(mobile){{WRAPPER}} .ui-e-filters' => 'align-items: {{VALUE}}' // mobile version sets flex-direction as column
263 ]
264 ]
265 );
266 $this->add_control(
267 'filters_bottom_space',
268 [
269 'label' => __('Spacing', 'uicore-elements'),
270 'type' => Controls_Manager::SLIDER,
271 'range' => [
272 'px' => [
273 'min' => 0,
274 'max' => 50,
275 ],
276 ],
277 'default' => [
278 'size' => 10,
279 'unit' => 'px'
280 ],
281 'selectors' => [
282 '{{WRAPPER}} .ui-e-filters' => 'margin-bottom: {{SIZE}}{{UNIT}};',
283 ],
284 ]
285 );
286
287 $this->start_controls_tabs(
288 'filters_tabs',
289 [
290 'condition' => [
291 'filters' => 'yes',
292 ],
293 ]
294 );
295
296 $this->start_controls_tab(
297 'filters_normal_tab',
298 [
299 'label' => esc_html__( 'Normal', 'uicore-elements' ),
300 ]
301 );
302
303 $this->add_group_control(
304 Group_Control_Typography::get_type(),
305 [
306 'name' => 'filters_typography',
307 'selector' => '{{WRAPPER}} .ui-e-filters button',
308 ]
309 );
310 $this->add_control(
311 'filters_color',
312 [
313 'label' => __('Color', 'uicore-elements'),
314 'type' => Controls_Manager::COLOR,
315 'selectors' => [
316 '{{WRAPPER}} .ui-e-filters button' => 'color: {{VALUE}};',
317 ],
318 ]
319 );
320 $this->add_group_control(
321 Group_Control_Background::get_type(),
322 [
323 'name' => 'filters_background',
324 'selector' => '{{WRAPPER}} .ui-e-filters button',
325 ]
326 );
327 $this->add_group_control(
328 Group_Control_Border::get_type(),
329 [
330 'name' => 'filters_border',
331 'label' => esc_html__( 'Border', 'uicore-elements' ),
332 'selector' => '{{WRAPPER}} .ui-e-filters button',
333 ]
334 );
335 $this->add_group_control(
336 Group_Control_Box_Shadow::get_type(),
337 [
338 'name' => 'filters_box_shadow',
339 'selector' => '{{WRAPPER}} .ui-e-filters button',
340 ]
341 );
342
343 $this->end_controls_tab();
344
345 $this->start_controls_tab(
346 'filters_hover_tab',
347 [
348 'label' => esc_html__( 'Hover', 'uicore-elements' ),
349 ]
350 );
351
352 $this->add_control(
353 'filters_hover_color',
354 [
355 'label' => __('Color', 'uicore-elements'),
356 'type' => Controls_Manager::COLOR,
357 'selectors' => [
358 '{{WRAPPER}} .ui-e-filters button:hover' => 'color: {{VALUE}};',
359 ],
360 ]
361 );
362 $this->add_group_control(
363 Group_Control_Background::get_type(),
364 [
365 'name' => 'filters_hover_background',
366 'selector' => '{{WRAPPER}} .ui-e-filters button:hover',
367 ]
368 );
369 $this->add_group_control(
370 Group_Control_Border::get_type(),
371 [
372 'name' => 'filters_hover_border',
373 'label' => esc_html__( 'Border', 'uicore-elements' ),
374 'selector' => '{{WRAPPER}} .ui-e-filters button:hover',
375 ]
376 );
377 $this->add_group_control(
378 Group_Control_Box_Shadow::get_type(),
379 [
380 'name' => 'filters_hover_box_shadow',
381 'selector' => '{{WRAPPER}} .ui-e-filters button:hover',
382 ]
383 );
384
385 $this->end_controls_tab();
386
387 $this->start_controls_tab(
388 'filters_active_tab',
389 [
390 'label' => esc_html__( 'Active', 'uicore-elements' ),
391 ]
392 );
393
394 $this->add_control(
395 'filters_active_color',
396 [
397 'label' => __('Color', 'uicore-elements'),
398 'type' => Controls_Manager::COLOR,
399 'selectors' => [
400 '{{WRAPPER}} .ui-e-filters button.ui-e-active' => 'color: {{VALUE}};',
401 ],
402 ]
403 );
404 $this->add_group_control(
405 Group_Control_Background::get_type(),
406 [
407 'name' => 'filters_active_background',
408 'selector' => '{{WRAPPER}} .ui-e-filters button.ui-e-active',
409 ]
410 );
411 $this->add_group_control(
412 Group_Control_Border::get_type(),
413 [
414 'name' => 'filters_active_border',
415 'label' => esc_html__( 'Border', 'uicore-elements' ),
416 'selector' => '{{WRAPPER}} .ui-e-filters button.ui-e-active',
417 ]
418 );
419 $this->add_group_control(
420 Group_Control_Box_Shadow::get_type(),
421 [
422 'name' => 'filters_active_box_shadow',
423 'selector' => '{{WRAPPER}} .ui-e-filters button.ui-e-active',
424 ]
425 );
426
427 $this->end_controls_tab();
428
429 $this->end_controls_tabs();
430
431 $this->add_control(
432 'filters_separator',
433 [
434 'type' => Controls_Manager::DIVIDER,
435 ]
436 );
437
438 $this->add_control(
439 'filters_border_radius',
440 [
441 'label' => esc_html__( 'Border Radius', 'uicore-elements' ),
442 'type' => Controls_Manager::DIMENSIONS,
443 'size_units' => [ 'px', '%' ],
444 'selectors' => [
445 '{{WRAPPER}} .ui-e-filters button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
446 ],
447 ]
448 );
449 $this->add_control(
450 'filters_padding',
451 [
452 'label' => esc_html__( 'Padding', 'uicore-elements' ),
453 'type' => Controls_Manager::DIMENSIONS,
454 'size_units' => [ 'px', 'em', '%' ],
455 'selectors' => [
456 '{{WRAPPER}} .ui-e-filters button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
457 ],
458 ]
459 );
460
461 $this->end_controls_section();
462 }
463 function TRAIT_register_image_style_controls($is_carousel = false)
464 {
465
466 // Carousel and grid use different match height controls and logic
467 $height_slug = $is_carousel ? 'match_height' : 'masonry';
468 $height_operator = $is_carousel ? '==' : '!==';
469
470 $this->start_controls_section(
471 'style_image_section',
472 [
473 'label' => __('Image', 'uicore-elements'),
474 'tab' => Controls_Manager::TAB_STYLE,
475 ]
476 );
477
478 $this->add_responsive_control(
479 'image_height',
480 [
481 'label' => esc_html__('Image Height', 'uicore-elements'),
482 'type' => Controls_Manager::SLIDER,
483 'size_units' => ['px', 'em', 'vh'],
484 'range' => [
485 'px' => [
486 'min' => 50,
487 'max' => 500,
488 'step' => 5,
489 ],
490 'em' => [
491 'min' => 5,
492 'max' => 30,
493 'step' => 1,
494 ],
495 'vh' => [
496 'min' => 5,
497 'max' => 50,
498 ],
499 ],
500 'default' => [
501 'unit' => 'px',
502 'size' => 400,
503 ],
504 'selectors' => [
505 '{{WRAPPER}} .ui-e-media-wrp' => 'height: {{SIZE}}{{UNIT}};',
506 ],
507 'conditions' => [
508 'relation' => 'or',
509 'terms' => [
510 [
511 'name' => 'layout',
512 'operator' => '==',
513 'value' => '',
514 ],
515 [
516 'relation' => 'and',
517 'terms' => [
518 [
519 'name' => 'layout',
520 'operator' => '==',
521 'value' => 'ui-e-overlay',
522 ],
523 [
524 'name' => $height_slug,
525 'operator' => $height_operator,
526 'value' => 'yes',
527 ]
528 ],
529 ],
530 ],
531 ],
532 ]
533 );
534 $this->add_control(
535 'image_position',
536 [
537 'label' => esc_html__('Image Position', 'uicore-elements'),
538 'type' => Controls_Manager::SELECT,
539 'default' => 'center',
540 'options' => [
541 'top' => __('Top', 'uicore-elements'),
542 'center' => __('Center', 'uicore-elements'),
543 'bottom' => __('Bottom', 'uicore-elements'),
544 ],
545 'selectors' => [
546 '{{WRAPPER}} .ui-e-media-wrp' => 'background-position: {{VALUE}};',
547 ],
548 'condition' => [
549 'layout' => 'ui-e-overlay',
550 ],
551 ]
552 );
553 $this->add_control(
554 'image_bottom_space',
555 [
556 'label' => __('Spacing', 'uicore-elements'),
557 'type' => Controls_Manager::SLIDER,
558 'range' => [
559 'px' => [
560 'min' => 0,
561 'max' => 50,
562 ],
563 ],
564 'default' => [
565 'size' => 10,
566 'unit' => 'px'
567 ],
568 'condition' => [
569 'layout' => ''
570 ],
571 'selectors' => [
572 '{{WRAPPER}}' => '--ui-e-image-spacing: {{SIZE}}{{UNIT}};',
573 ],
574 ]
575 );
576 $this->add_control(
577 'image_radius',
578 [
579 'label' => esc_html__( 'Border Radius', 'uicore-elements' ),
580 'type' => Controls_Manager::DIMENSIONS,
581 'size_units' => [ 'px', '%' ],
582 'condition' => [
583 'layout' => ''
584 ],
585 'selectors' => [
586 '{{WRAPPER}} .ui-e-item img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
587 ],
588 ]
589 );
590 $this->add_group_control(
591 Group_Control_Box_Shadow::get_type(),
592 [
593 'name' => 'image_box_shadow',
594 'selector' => '{{WRAPPER}} .ui-e-item img',
595 'condition' => [
596 'layout' => ''
597 ]
598 ]
599 );
600
601 $this->end_controls_section();
602 }
603 function TRAIT_register_title_style_controls()
604 {
605 $this->start_controls_section(
606 'style_title_section',
607 [
608 'label' => __('Title', 'uicore-elements'),
609 'tab' => Controls_Manager::TAB_STYLE,
610 ]
611 );
612
613 $this->add_group_control(
614 Group_Control_Typography::get_type(),
615 [
616 'name' => 'title_typography',
617 'selector' => '{{WRAPPER}} .ui-e-title',
618 ]
619 );
620 $this->add_control(
621 'title_color',
622 [
623 'label' => __('Color', 'uicore-elements'),
624 'type' => Controls_Manager::COLOR,
625 'selectors' => [
626 '{{WRAPPER}} .ui-e-title' => 'color: {{VALUE}};',
627 ],
628 ]
629 );
630 $this->add_control(
631 'title_hover_color',
632 [
633 'label' => __('Hover Color', 'uicore-elements'),
634 'type' => Controls_Manager::COLOR,
635 'selectors' => [
636 '{{WRAPPER}} .ui-e-item:hover .ui-e-title' => 'color: {{VALUE}};',
637 ],
638 ]
639 );
640 $this->add_control(
641 'title_bottom_space',
642 [
643 'label' => __('Spacing', 'uicore-elements'),
644 'type' => Controls_Manager::SLIDER,
645 'range' => [
646 'px' => [
647 'min' => 0,
648 'max' => 50,
649 ],
650 ],
651 'default' => [
652 'size' => 10,
653 'unit' => 'px'
654 ],
655 'selectors' => [
656 '{{WRAPPER}}' => '--ui-e-title-spacing: {{SIZE}}{{UNIT}};',
657 ],
658 ]
659 );
660
661 $this->end_controls_section();
662 }
663 function TRAIT_register_description_style_controls()
664 {
665 $this->start_controls_section(
666 'style_description_section',
667 [
668 'label' => __('Description', 'uicore-elements'),
669 'tab' => Controls_Manager::TAB_STYLE,
670 ]
671 );
672
673 $this->add_group_control(
674 Group_Control_Typography::get_type(),
675 [
676 'name' => 'description_typography',
677 'selector' => '{{WRAPPER}} .ui-e-description',
678 ]
679 );
680 $this->add_control(
681 'description_color',
682 [
683 'label' => __('Color', 'uicore-elements'),
684 'type' => Controls_Manager::COLOR,
685 'selectors' => [
686 '{{WRAPPER}} .ui-e-description' => 'color: {{VALUE}};',
687 ],
688 ]
689 );
690 $this->add_control(
691 'description_bottom_space',
692 [
693 'label' => __('Spacing', 'uicore-elements'),
694 'type' => Controls_Manager::SLIDER,
695 'range' => [
696 'px' => [
697 'min' => 0,
698 'max' => 50,
699 ],
700 ],
701 'default' => [
702 'size' => 10,
703 'unit' => 'px'
704 ],
705 'condition' => [
706 'hide_tags!' => 'yes',
707 ],
708 'selectors' => [
709 '{{WRAPPER}} .ui-e-description' => 'padding-bottom: {{SIZE}}{{UNIT}};',
710 ],
711 ]
712 );
713
714 $this->end_controls_section();
715 }
716 function TRAIT_register_tags_style_controls()
717 {
718 $this->start_controls_section(
719 'style_tags_section',
720 [
721 'label' => __('Tags', 'uicore-elements'),
722 'tab' => Controls_Manager::TAB_STYLE,
723 'condition' => [
724 'hide_tags!' => 'yes',
725 ]
726 ]
727 );
728
729 $this->add_group_control(
730 Group_Control_Typography::get_type(),
731 [
732 'name' => 'tags_typography',
733 'selector' => '{{WRAPPER}} .ui-e-tags',
734 ]
735 );
736 $this->add_control(
737 'tags_color',
738 [
739 'label' => __('Color', 'uicore-elements'),
740 'type' => Controls_Manager::COLOR,
741 'selectors' => [
742 '{{WRAPPER}} .ui-e-tags' => 'color: {{VALUE}};',
743 ],
744 ]
745 );
746
747 $this->end_controls_section();
748 }
749 function TRAIT_register_badge_style_controls()
750 {
751 $this->start_controls_section(
752 'style_badge_section',
753 [
754 'label' => __('Badge', 'uicore-elements'),
755 'tab' => Controls_Manager::TAB_STYLE,
756 ]
757 );
758
759 $this->add_group_control(
760 Group_Control_Typography::get_type(),
761 [
762 'name' => 'badge_typography',
763 'selector' => '{{WRAPPER}} .ui-e-badge',
764 ]
765 );
766 $this->add_control(
767 'badge_color',
768 [
769 'label' => __('Color', 'uicore-elements'),
770 'type' => Controls_Manager::COLOR,
771 'selectors' => [
772 '{{WRAPPER}} .ui-e-badge' => 'color: {{VALUE}};',
773 ],
774 ]
775 );
776 $this->add_control(
777 'badge_background_color',
778 [
779 'label' => __('Background Color', 'uicore-elements'),
780 'type' => Controls_Manager::COLOR,
781 'global' => [
782 'default' => Global_Colors::COLOR_PRIMARY,
783 ],
784 'selectors' => [
785 '{{WRAPPER}} .ui-e-badge' => 'background-color: {{VALUE}};',
786 ],
787 ]
788 );
789 $this->add_group_control(
790 Group_Control_Border::get_type(),
791 [
792 'name' => 'badge_border',
793 'label' => esc_html__( 'Border', 'uicore-elements' ),
794 'selector' => '{{WRAPPER}} .ui-e-badge',
795 ]
796 );
797 $this->add_control(
798 'badge_border_radius',
799 [
800 'label' => esc_html__( 'Border Radius', 'uicore-elements' ),
801 'type' => Controls_Manager::DIMENSIONS,
802 'size_units' => [ 'px', '%' ],
803 'default' => [
804 'top' => 4,
805 'right' => 4,
806 'bottom' => 4,
807 'left' => 4,
808 ],
809 'selectors' => [
810 '{{WRAPPER}} .ui-e-badge' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
811 ],
812 ]
813 );
814 $this->add_control(
815 'badge_padding',
816 [
817 'label' => esc_html__( 'Padding', 'uicore-elements' ),
818 'type' => Controls_Manager::DIMENSIONS,
819 'size_units' => [ 'px', 'em', '%' ],
820 'size_units' => [ 'px', '%' ],
821 'default' => [
822 'top' => 3,
823 'right' => 10,
824 'bottom' => 3,
825 'left' => 10,
826 'unit' => 'px',
827 'isLinked' => false,
828 ],
829 'selectors' => [
830 '{{WRAPPER}} .ui-e-badge' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
831 ],
832 ]
833 );
834 $this->add_group_control(
835 Group_Control_Box_Shadow::get_type(),
836 [
837 'name' => 'badge_box_shadow',
838 'selector' => '{{WRAPPER}} .ui-e-badge',
839 ]
840 );
841
842 $this->end_controls_section();
843 }
844 function TRAIT_register_gallery_animations()
845 {
846 $this->start_controls_section(
847 'items_animation',
848 [
849 'label' => esc_html__('Animation', 'uicore-elements'),
850 'tab' => Controls_Manager::TAB_STYLE,
851 ]
852 );
853 $this->TRAIT_register_entrance_animations_controls(); // animate each item
854 $this->TRAIT_register_hover_animation_control(
855 'Item Hover Animation',
856 [],
857 ['underline']
858 );
859 $this->TRAIT_register_hover_animation_control(
860 'Image Animation',
861 ['layout' => ''],
862 ['underline']
863 );
864 // TODO: update all controls below after 'show' is globally implemented
865 $this->TRAIT_register_hover_animation_control(
866 'Title Animation',
867 [],
868 ['zoom']
869 );
870 $this->TRAIT_register_hover_animation_control(
871 'Description Animation',
872 [],
873 ['zoom', 'underline'],
874 null,
875 true
876 );
877 $this->TRAIT_register_hover_animation_control(
878 'Badge Animation',
879 [],
880 ['underline'],
881 null,
882 true
883 );
884 $this->TRAIT_register_hover_animation_control(
885 'Tags Animation',
886 ['hide_tags!' => 'yes'],
887 ['zoom'],
888 null,
889 true
890 );
891
892 $this->end_controls_section();
893 }
894
895 // Elements rendering
896 protected function TRAIT_render_gallery($settings, $is_carousel = false)
897 {
898 // Get entrance and item hover animation classes
899 $entrance = (isset($settings['animate_items']) && $settings['animate_items'] == 'ui-e-grid-animate') ? 'elementor-invisible' : '';
900 $hover = isset($settings['item_hover_animation']) ? $settings['item_hover_animation'] : null;
901 $animations = sprintf('%s %s', $entrance, $hover);
902
903 // Get all elements animation control options (triggered by .ui-e-animations-wrp:hover)
904 $animation_options = [
905 $settings['title_animation'],
906 $settings['description_animation'],
907 $settings['image_animation'],
908 $settings['badge_animation'],
909 $settings['tags_animation'],
910 ];
911
912 // get item animation only if is not slider,
913 if (!str_contains($this->get_name(), 'slider')) {
914 $animation_options[] = $settings['item_hover_animation'];
915 }
916
917 // check if any of the animation are set
918 $has_animation = array_filter($animation_options, function($value) {
919 return $value !== '';
920 });
921
922 // and also check if entrance is set
923 $has_animation = $entrance !== '' ? true : $has_animation;
924
925 //
926 $item_classes = $is_carousel ? 'ui-e-wrp swiper-slide' : 'ui-e-wrp';
927 $this->add_render_attribute('item_wrapper', 'class', $item_classes );
928
929 // Render items
930 foreach ( $settings['gallery_items'] as $index => $item ) {
931
932 // Params
933 $key = 'item_'.$index;
934 $tag = 'div ';
935
936 $this->add_render_attribute($key, 'class', 'ui-e-item' );
937
938 // Build URL
939 if ( !empty($item['item_url']['url']) ) {
940 $tag = 'a ';
941 $this->add_link_attributes($key, $item['item_url'] );
942 }
943
944 ?>
945 <div <?php $this->print_render_attribute_string('item_wrapper'); ?> data-ui-e-tags="<?php echo sanitize_title( $item['item_tags'] ); ?>">
946
947 <?php if($has_animation) : ?>
948 <div class='ui-e-animations-wrp <?php echo esc_attr($animations);?>'>
949 <?php endif; ?>
950
951 <<?php echo esc_html($tag);?> <?php $this->print_render_attribute_string($key); ?>>
952 <?php $this->render_item($index, $item, $settings); ?>
953 </<?php echo esc_html($tag);?>>
954
955 <?php if($has_animation) : ?>
956 </div>
957 <?php endif; ?>
958
959 </div>
960 <?php
961 }
962 }
963 protected function render_item($index, $instance, $settings)
964 {
965
966 switch( $settings['layout'] ){
967 case 'ui-e-overlay':
968 ?>
969 <?php $this->render_image($index, $instance, $settings); ?>
970
971 <div class="ui-e-content">
972 <div class="ui-e-title-wrapper">
973 <?php $this->render_title($instance, $settings); ?>
974 <?php
975 if( empty($settings['badge_position']) ) {
976 $this->render_badge($instance, $settings['badge_animation']);
977 }
978 ?>
979 </div>
980
981 <?php $this->render_description($instance, $settings['description_animation']); ?>
982 <?php $this->render_tags($instance, $settings); ?>
983 </div>
984
985 </div> <?php // close `ui-e-media-wrp` div opened by render_image()
986 break;
987
988 default:
989 ?>
990 <?php $this->render_image($index, $instance, $settings); ?>
991
992 <div class="ui-e-content">
993 <div class="ui-e-title-wrapper">
994 <?php $this->render_title($instance, $settings); ?>
995 <?php
996 if( empty($settings['badge_position']) ) {
997 $this->render_badge($instance, $settings['badge_animation']);
998 }
999 ?>
1000 </div>
1001
1002 <?php $this->render_description($instance, $settings['description_animation']); ?>
1003 <?php $this->render_tags($instance, $settings); ?>
1004 </div>
1005 <?php
1006 break;
1007 }
1008 }
1009 protected function render_image($index, $instance, $settings){
1010
1011 if( empty($instance['item_image']['url']) ){
1012 return;
1013 }
1014
1015 // `get_attachment_image_` functions get the image size on the key passed as second argument with '_size' suffix
1016 $instance['item_image_size'] = $settings['image_size'];
1017 $key = 'image_' . $index;
1018
1019 // Overlay layout
1020 if( $settings['layout'] === 'ui-e-overlay' ){
1021
1022 // get the image url with the proper size
1023 $image = Group_Control_Image_Size::get_attachment_image_src( $instance['item_image']['id'], 'item_image', $instance );
1024
1025 $this->add_render_attribute(
1026 $key,
1027 [
1028 'style' => 'background-image: url(' . $image . '); background-size: cover;',
1029 'class' => [
1030 'ui-e-media-wrp',
1031 esc_attr($settings['image_animation'])
1032 ],
1033 ]
1034 );
1035
1036 ?>
1037 <div <?php $this->print_render_attribute_string($key); ?>>
1038 <?php
1039 if( ! empty($settings['badge_position']) ) {
1040 $this->render_badge($instance, $settings['badge_animation']);
1041 }
1042 // We don't close the </div> div here because on overlay all the content goes
1043 // inside this wrapper. The div should be closed by the parent function.
1044
1045 // Default layout
1046 } else {
1047
1048 $this->add_render_attribute(
1049 'image',
1050 [
1051 'src' => $instance['item_image']['url'],
1052 'alt' => Control_Media::get_image_alt( $instance['item_image'] ),
1053 'title' => Control_Media::get_image_title( $instance['item_image'] ),
1054 'class' => 'ui-e-img',
1055 ]
1056 );
1057
1058 ?>
1059 <div class="ui-e-media-wrp <?php echo esc_attr($settings['image_animation']);?>">
1060 <?php
1061 if( ! empty($settings['badge_position']) ) {
1062 $this->render_badge($instance, $settings['badge_animation']);
1063 }
1064 ?>
1065 <?php echo Group_Control_Image_Size::get_attachment_image_html( $instance, 'item_image', ); ?>
1066 </div>
1067 <?php
1068 }
1069 }
1070 protected function render_title($instance, $settings)
1071 {
1072 if( empty($instance['item_title']) ){
1073 return;
1074 }
1075
1076 ?>
1077 <<?php echo esc_html($settings['title_tag']);?> class="ui-e-title <?php echo esc_attr($settings['title_animation'])?>">
1078 <span> <?php echo Helper::esc_string( $instance['item_title'] ); ?> </span>
1079 </<?php echo esc_html($settings['title_tag']);?>>
1080 <?php
1081 }
1082 protected function render_description($instance, $animation = '')
1083 {
1084 if( empty( $instance['item_description'] ) ){
1085 return;
1086 }
1087
1088 ?>
1089 <p class="ui-e-description <?php echo esc_attr($animation);?>">
1090 <?php echo Helper::esc_string( $instance['item_description'] ) ;?>
1091 </p>
1092 <?php
1093 }
1094 protected function render_badge($instance, $animation)
1095 {
1096 if( empty( $instance['item_badge']) ){
1097 return;
1098 }
1099
1100 ?>
1101 <span class="ui-e-badge <?php echo esc_attr($animation) ;?>">
1102 <?php echo esc_html( $instance['item_badge'] ); ?>
1103 </span>
1104 <?php
1105 }
1106 protected function render_tags($instance, $settings)
1107 {
1108 if( empty( $instance['item_tags'] ) || $settings['hide_tags'] === 'yes' ){
1109 return;
1110 }
1111
1112 $tags = explode(',', $instance['item_tags']);
1113
1114 ?>
1115 <div class="ui-e-tags <?php echo esc_attr($settings['tags_animation']);?>">
1116 <?php foreach($tags as $tag) : ?>
1117 <span class="ui-e-tag">
1118 <?php
1119 echo esc_html($tag);
1120 echo end($tags) !== $tag ? ', ': ''; // print separator if is not last item
1121 ?>
1122 </span>
1123 <?php endforeach; ?>
1124 </div>
1125 <?php
1126 }
1127 protected function TRAIT_render_gallery_filters($settings)
1128 {
1129 if( $settings['filters'] !== 'yes' ){
1130 return;
1131 }
1132
1133 $filters = [];
1134
1135 foreach( $settings['gallery_items'] as $item ) {
1136
1137 // tags are comma separated strings
1138 $tags = explode(',', $item['item_tags']);
1139 $tags = array_map('trim', $tags);
1140
1141 foreach ( $tags as $tag ) {
1142 // skip duplicates or empty tags
1143 if( in_array($tag, $filters) || empty($tag) ){
1144 continue;
1145 }
1146
1147 $filters[] = $tag;
1148 }
1149 }
1150
1151 ?>
1152 <div class="ui-e-filters">
1153
1154 <button class="ui-e-filter-item" data-filter="all">
1155 <?php echo esc_html( $settings['clear_text'] ); ?>
1156 </button>
1157
1158 <?php foreach($filters as $filter) : ?>
1159 <button class="ui-e-filter-item" data-filter="<?php echo sanitize_title($filter); ?>">
1160 <?php echo esc_html($filter); ?>
1161 </button>
1162 <?php endforeach; ?>
1163
1164 </div>
1165 <?php
1166 }
1167 }