uicore-elements / includes / utils / gallery-component.php

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

1,323 lines 42.9 KB

Raw Download Zip

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