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