← All changes | includes/utils/gallery-component.php +1177 -1054 1.2.2 → 1.3.17 View file →

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