class-responsive-portfolio-tabs.php — Responsive Tabs For Elementor trunk

responsive-tabs-for-elementor / widgets / class-responsive-portfolio-tabs.php

responsive-tabs-for-elementor / widgets Last commit date

class-responsive-portfolio-tabs.php

859 lines

1	<?php
2	/**
3	* Responsive_Portfolio_Tabs class.
4	*
5	* @category Class
6	* @package ResponsiveTabsForElementor
7	* @subpackage WordPress
8	* @author UAPP GROUP
9	* @copyright 2026 UAPP GROUP
10	* @license https://opensource.org/licenses/GPL-3.0 GPL-3.0-only
11	* @link
12	* @since 11.0.1
13	* php version 7.4.1
14	*/
15
16	namespace ResponsiveTabsForElementor\Widgets;
17
18	use ResponsiveTabsForElementor\Responsive_Tabs_Assets;
19	use Elementor\Utils;
20	use Elementor\Repeater;
21	use Elementor\Widget_Base;
22	use Elementor\Controls_Manager;
23	use Elementor\Group_Control_Typography;
24
25	// Security Note: Blocks direct access to the plugin PHP files.
26	defined('ABSPATH') \|\| die();
27
28	/**
29	* Responsive Portfolio Tabs widget class.
30	*
31	* @since 11.0.1
32	*/
33	class Responsive_Portfolio_Tabs extends Widget_Base
34	{
35	/**
36	* Responsive_Portfolio_Tabs constructor.
37	*
38	* @param array $data
39	* @param null $args
40	*
41	* @throws \Exception
42	*/
43	public function __construct($data = [], $args = null)
44	{
45	parent::__construct($data, $args);
46
47	wp_register_style('responsive-portfolio-tabs', plugins_url('/assets/css/responsive-portfolio-tabs.min.css', RESPONSIVE_TABS_FOR_ELEMENTOR), [], RESPONSIVE_TABS_VERSION);
48
49	Responsive_Tabs_Assets::register_portfolio_handler();
50	}
51
52	/**
53	* Retrieve the widget name.
54	*
55	* @return string Widget name.
56	*/
57	public function get_name()
58	{
59	return 'responsive-portfolio-tabs';
60	}
61
62	/**
63	* Retrieve the widget title.
64	*
65	* @return string Widget title.
66	*/
67	public function get_title()
68	{
69	return __('Portfolio Tabs', 'responsive-tabs-for-elementor');
70	}
71
72	/**
73	* Retrieve the widget icon.
74	*
75	* @return string Widget icon.
76	*/
77	public function get_icon()
78	{
79	return 'icon-portfolio-tabs';
80	}
81
82	/**
83	* Retrieve the list of categories the widget belongs to.
84	*
85	* @return array Widget categories.
86	*/
87	public function get_categories()
88	{
89	return ['responsive_tabs'];
90	}
91
92	/**
93	* Enqueue styles.
94	*
95	* @return array
96	*/
97	public function get_style_depends()
98	{
99	return ['responsive-portfolio-tabs'];
100	}
101
102	/**
103	* Enqueue scripts.
104	*
105	* @return array
106	*/
107	public function get_script_depends()
108	{
109	return ['responsive-portfolio-tabs'];
110	}
111
112	/**
113	* Get default item.
114	*
115	* @return array
116	*/
117	protected function get_default_items()
118	{
119	return [
120	[
121	'portfolio_item_title' => __('Sample 1', 'responsive-tabs-for-elementor'),
122	'portfolio_item_category' => __('Website Design', 'responsive-tabs-for-elementor'),
123	'portfolio_item_image' => [
124	'url' => Utils::get_placeholder_image_src(),
125	],
126	],
127	[
128	'portfolio_item_title' => __('Sample 2', 'responsive-tabs-for-elementor'),
129	'portfolio_item_category' => __('App Development', 'responsive-tabs-for-elementor'),
130	'portfolio_item_image' => [
131	'url' => Utils::get_placeholder_image_src(),
132	],
133	],
134	[
135	'portfolio_item_title' => __('Sample 3', 'responsive-tabs-for-elementor'),
136	'portfolio_item_category' => __('Marketing', 'responsive-tabs-for-elementor'),
137	'portfolio_item_image' => [
138	'url' => Utils::get_placeholder_image_src(),
139	],
140	],
141	];
142	}
143
144	/**
145	* Normalize category slug.
146	*
147	* @param string $value Category name.
148	*
149	* @return string
150	*/
151	protected function normalize_category_slug($value)
152	{
153	$value = wp_strip_all_tags($value);
154	$value = strtolower($value);
155	$value = sanitize_title($value);
156
157	return !empty($value) ? $value : 'uncategorized';
158	}
159
160	/**
161	* Register the widget controls.
162	*/
163	protected function register_controls()
164	{
165	$this->start_controls_section(
166	'section_content',
167	[
168	'label' => __('Content', 'responsive-tabs-for-elementor'),
169	]
170	);
171
172	$repeater = new Repeater();
173
174	$repeater->add_control(
175	'portfolio_item_title',
176	[
177	'label' => esc_html__('Title', 'responsive-tabs-for-elementor'),
178	'type' => Controls_Manager::TEXT,
179	'dynamic' => [
180	'active' => true,
181	],
182	'default' => esc_html__('Sample', 'responsive-tabs-for-elementor'),
183	'label_block' => true,
184	]
185	);
186
187	$repeater->add_control(
188	'portfolio_item_category',
189	[
190	'label' => esc_html__('Category', 'responsive-tabs-for-elementor'),
191	'type' => Controls_Manager::TEXT,
192	'dynamic' => [
193	'active' => true,
194	],
195	'default' => esc_html__('Website Design', 'responsive-tabs-for-elementor'),
196	'label_block' => true,
197	'description' => esc_html__('Items with the same category name will be grouped into one tab.', 'responsive-tabs-for-elementor'),
198	]
199	);
200
201	$repeater->add_control(
202	'portfolio_item_image',
203	[
204	'label' => __('Choose Image', 'responsive-tabs-for-elementor'),
205	'type' => Controls_Manager::MEDIA,
206	'default' => [
207	'url' => Utils::get_placeholder_image_src(),
208	],
209	'ai' => [
210	'active' => false,
211	],
212	]
213	);
214
215	$this->add_control(
216	'portfolio_items',
217	[
218	'label' => __('Portfolio Items', 'responsive-tabs-for-elementor'),
219	'type' => Controls_Manager::REPEATER,
220	'fields' => $repeater->get_controls(),
221	'title_field' => '{{{ portfolio_item_title }}} - {{{ portfolio_item_category }}}',
222	'default' => $this->get_default_items(),
223	]
224	);
225
226	$this->end_controls_section();
227
228	// Additional Options Section
229	$this->start_controls_section(
230	'section_additional_options',
231	[
232	'label' => esc_html__('Additional Options', 'responsive-tabs-for-elementor'),
233	]
234	);
235
236	$this->add_control(
237	'show_all_tab',
238	[
239	'label' => esc_html__('Show "All" Tab', 'responsive-tabs-for-elementor'),
240	'type' => Controls_Manager::SWITCHER,
241	'label_on' => __('Yes', 'responsive-tabs-for-elementor'),
242	'label_off' => __('No', 'responsive-tabs-for-elementor'),
243	'return_value' => 'yes',
244	'default' => 'yes',
245	'frontend_available' => true,
246	]
247	);
248
249	$this->add_control(
250	'all_tab_label',
251	[
252	'label' => esc_html__('All Tab Label', 'responsive-tabs-for-elementor'),
253	'type' => Controls_Manager::TEXT,
254	'default' => esc_html__('All', 'responsive-tabs-for-elementor'),
255	'condition' => [
256	'show_all_tab' => 'yes',
257	],
258	]
259	);
260
261	$this->add_control(
262	'overlay_category_click',
263	[
264	'label' => esc_html__('Enable Category Click In Overlay', 'responsive-tabs-for-elementor'),
265	'type' => Controls_Manager::SWITCHER,
266	'label_on' => __('Yes', 'responsive-tabs-for-elementor'),
267	'label_off' => __('No', 'responsive-tabs-for-elementor'),
268	'return_value' => 'yes',
269	'default' => 'yes',
270	'frontend_available' => true,
271	]
272	);
273
274	$this->add_control(
275	'scroll_on_overlay_click',
276	[
277	'label' => esc_html__('Scroll To Widget On Overlay Click', 'responsive-tabs-for-elementor'),
278	'type' => Controls_Manager::SWITCHER,
279	'label_on' => __('Yes', 'responsive-tabs-for-elementor'),
280	'label_off' => __('No', 'responsive-tabs-for-elementor'),
281	'return_value' => 'yes',
282	'default' => '',
283	'frontend_available' => true,
284	'condition' => [
285	'overlay_category_click' => 'yes',
286	],
287	]
288	);
289
290	$this->add_control(
291	'mobile_overlay_visible',
292	[
293	'label' => esc_html__('Overlay Always Visible On Mobile', 'responsive-tabs-for-elementor'),
294	'type' => Controls_Manager::SWITCHER,
295	'label_on' => __('Yes', 'responsive-tabs-for-elementor'),
296	'label_off' => __('No', 'responsive-tabs-for-elementor'),
297	'return_value' => 'yes',
298	'default' => '',
299	'frontend_available' => true,
300	]
301	);
302
303	$this->end_controls_section();
304
305	$this->start_controls_section(
306	'section_style_general',
307	[
308	'label' => esc_html__('General Styles', 'responsive-tabs-for-elementor'),
309	'tab' => Controls_Manager::TAB_STYLE,
310	]
311	);
312
313	$this->add_responsive_control(
314	'columns',
315	[
316	'label' => esc_html__('Columns', 'responsive-tabs-for-elementor'),
317	'type' => Controls_Manager::SELECT,
318	'default' => '4',
319	'tablet_default' => '3',
320	'mobile_default' => '1',
321	'options' => [
322	'1' => '1',
323	'2' => '2',
324	'3' => '3',
325	'4' => '4',
326	'5' => '5',
327	'6' => '6',
328	],
329	'selectors' => [
330	'{{WRAPPER}} .responsive-portfolio-tabs__grid' => 'grid-template-columns: repeat({{VALUE}}, minmax(0, 1fr));',
331	],
332	]
333	);
334
335	$this->add_responsive_control(
336	'grid_gap',
337	[
338	'label' => esc_html__('Grid Gap', 'responsive-tabs-for-elementor'),
339	'type' => Controls_Manager::SLIDER,
340	'size_units' => ['px', 'em', 'rem'],
341	'default' => [
342	'unit' => 'px',
343	'size' => 16,
344	],
345	'selectors' => [
346	'{{WRAPPER}} .responsive-portfolio-tabs__grid' => 'gap: {{SIZE}}{{UNIT}};',
347	],
348	]
349	);
350
351	$this->add_responsive_control(
352	'image_width',
353	[
354	'label' => esc_html__('Image Width', 'responsive-tabs-for-elementor'),
355	'type' => Controls_Manager::SLIDER,
356	'size_units' => ['px', 'vh', '%'],
357	'default' => [
358	'unit' => 'px',
359	'size' => 250,
360	],
361	'range' => [
362	'px' => [
363	'min' => 0,
364	'max' => 300,
365	],
366	],
367	'selectors' => [
368	'{{WRAPPER}} .responsive-portfolio-tabs__item' => 'width: {{SIZE}}{{UNIT}};',
369	],
370	]
371	);
372
373	$this->add_control(
374	'image_height',
375	[
376	'label' => esc_html__('Image Height', 'responsive-tabs-for-elementor'),
377	'type' => Controls_Manager::SLIDER,
378	'size_units' => ['px', 'vh'],
379	'default' => [
380	'unit' => 'px',
381	'size' => 250,
382	],
383	'range' => [
384	'px' => [
385	'min' => 0,
386	'max' => 500,
387	],
388	],
389	'selectors' => [
390	'{{WRAPPER}} .responsive-portfolio-tabs__image' => 'height: {{SIZE}}{{UNIT}};',
391	],
392	]
393	);
394
395	$this->add_responsive_control(
396	'item_border_radius',
397	[
398	'label' => esc_html__('Item Border Radius', 'responsive-tabs-for-elementor'),
399	'type' => Controls_Manager::DIMENSIONS,
400	'size_units' => ['px', '%'],
401	'selectors' => [
402	'{{WRAPPER}} .responsive-portfolio-tabs__item-inner' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
403	],
404	]
405	);
406
407	$this->end_controls_section();
408
409	$this->start_controls_section(
410	'section_style_tabs',
411	[
412	'label' => esc_html__('Tabs Styles', 'responsive-tabs-for-elementor'),
413	'tab' => Controls_Manager::TAB_STYLE,
414	]
415	);
416
417	$this->add_responsive_control(
418	'tabs_gap',
419	[
420	'label' => esc_html__('Gap', 'responsive-tabs-for-elementor'),
421	'type' => Controls_Manager::SLIDER,
422	'size_units' => ['px', 'em', 'rem'],
423	'default' => [
424	'unit' => 'px',
425	'size' => 12,
426	],
427	'selectors' => [
428	'{{WRAPPER}} .responsive-portfolio-tabs__nav' => 'gap: {{SIZE}}{{UNIT}};',
429	],
430	]
431	);
432
433	$this->add_responsive_control(
434	'tabs_margin_bottom',
435	[
436	'label' => esc_html__('Bottom Spacing', 'responsive-tabs-for-elementor'),
437	'type' => Controls_Manager::SLIDER,
438	'size_units' => ['px', 'em', 'rem'],
439	'default' => [
440	'unit' => 'px',
441	'size' => 24,
442	],
443	'selectors' => [
444	'{{WRAPPER}} .responsive-portfolio-tabs__nav' => 'margin-bottom: {{SIZE}}{{UNIT}};',
445	],
446	]
447	);
448
449	$this->add_responsive_control(
450	'tab_padding',
451	[
452	'label' => esc_html__('Padding', 'responsive-tabs-for-elementor'),
453	'type' => Controls_Manager::DIMENSIONS,
454	'size_units' => ['px', 'em', 'rem'],
455	'selectors' => [
456	'{{WRAPPER}} .responsive-portfolio-tabs__tab' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
457	],
458	]
459	);
460
461	$this->add_group_control(
462	Group_Control_Typography::get_type(),
463	[
464	'name' => 'tab_typography',
465	'selector' => '{{WRAPPER}} .responsive-portfolio-tabs__tab',
466	]
467	);
468
469	$this->start_controls_tabs('tabs_style_status');
470
471	$this->start_controls_tab(
472	'normal_tabs_style_status',
473	[
474	'label' => esc_html__('Normal', 'responsive-tabs-for-elementor'),
475	]
476	);
477
478	$this->add_control(
479	'tab_color',
480	[
481	'label' => esc_html__('Text Color', 'responsive-tabs-for-elementor'),
482	'type' => Controls_Manager::COLOR,
483	'selectors' => [
484	'{{WRAPPER}} .responsive-portfolio-tabs__tab' => 'color: {{VALUE}};',
485	],
486	]
487	);
488
489	$this->add_control(
490	'tab_border_color',
491	[
492	'label' => esc_html__('Border Color', 'responsive-tabs-for-elementor'),
493	'type' => Controls_Manager::COLOR,
494	'selectors' => [
495	'{{WRAPPER}} .responsive-portfolio-tabs__tab' => 'border-color: {{VALUE}};',
496	],
497	]
498	);
499
500	$this->add_control(
501	'tab_background',
502	[
503	'label' => esc_html__('Background', 'responsive-tabs-for-elementor'),
504	'type' => Controls_Manager::COLOR,
505	'selectors' => [
506	'{{WRAPPER}} .responsive-portfolio-tabs__tab' => 'background: {{VALUE}};',
507	],
508	]
509	);
510
511	$this->end_controls_tab();
512
513	$this->start_controls_tab(
514	'active_and_hover_tabs_style_status',
515	[
516	'label' => esc_html__('Active/Hover', 'responsive-tabs-for-elementor'),
517	]
518	);
519
520	$this->add_control(
521	'tab_active_color',
522	[
523	'label' => esc_html__('Text Color', 'responsive-tabs-for-elementor'),
524	'type' => Controls_Manager::COLOR,
525	'default' => '#00e1ff',
526	'selectors' => [
527	'{{WRAPPER}} .responsive-portfolio-tabs__tab:hover, {{WRAPPER}} .responsive-portfolio-tabs__tab.is-active' => 'color: {{VALUE}};',
528	],
529	]
530	);
531
532	$this->add_control(
533	'tab_active_border_color',
534	[
535	'label' => esc_html__('Border Color', 'responsive-tabs-for-elementor'),
536	'type' => Controls_Manager::COLOR,
537	'default' => '#00e1ff',
538	'selectors' => [
539	'{{WRAPPER}} .responsive-portfolio-tabs__tab:hover, {{WRAPPER}} .responsive-portfolio-tabs__tab.is-active' => 'border-color: {{VALUE}};',
540	],
541	]
542	);
543
544	$this->add_control(
545	'tab_active_background',
546	[
547	'label' => esc_html__('Background', 'responsive-tabs-for-elementor'),
548	'type' => Controls_Manager::COLOR,
549	'selectors' => [
550	'{{WRAPPER}} .responsive-portfolio-tabs__tab:hover, {{WRAPPER}} .responsive-portfolio-tabs__tab.is-active' => 'background: {{VALUE}};',
551	],
552	]
553	);
554
555	$this->add_control(
556	'tab_border_width',
557	[
558	'label' => esc_html__('Border Width', 'responsive-tabs-for-elementor'),
559	'type' => Controls_Manager::DIMENSIONS,
560	'size_units' => ['px'],
561	'selectors' => [
562	'{{WRAPPER}} .responsive-portfolio-tabs__tab' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; border-style: solid;',
563	],
564	]
565	);
566
567	$this->add_control(
568	'tab_border_radius',
569	[
570	'label' => esc_html__('Border Radius', 'responsive-tabs-for-elementor'),
571	'type' => Controls_Manager::DIMENSIONS,
572	'size_units' => ['px', '%'],
573	'selectors' => [
574	'{{WRAPPER}} .responsive-portfolio-tabs__tab' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
575	],
576	]
577	);
578
579	$this->end_controls_tab();
580	$this->end_controls_tabs();
581
582	$this->end_controls_section();
583
584	$this->start_controls_section(
585	'section_style_overlay',
586	[
587	'label' => esc_html__('Overlay Styles', 'responsive-tabs-for-elementor'),
588	'tab' => Controls_Manager::TAB_STYLE,
589	]
590	);
591
592	$this->add_control(
593	'overlay_background',
594	[
595	'label' => esc_html__('Background', 'responsive-tabs-for-elementor'),
596	'type' => Controls_Manager::COLOR,
597	'default' => 'rgba(0,0,0,0.5)',
598	'selectors' => [
599	'{{WRAPPER}} .responsive-portfolio-tabs__overlay' => 'background: {{VALUE}};',
600	],
601	]
602	);
603
604	$this->add_responsive_control(
605	'overlay_padding',
606	[
607	'label' => esc_html__('Padding', 'responsive-tabs-for-elementor'),
608	'type' => Controls_Manager::DIMENSIONS,
609	'size_units' => ['px', 'em', 'rem'],
610	'selectors' => [
611	'{{WRAPPER}} .responsive-portfolio-tabs__overlay' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
612	],
613	]
614	);
615
616	$this->add_responsive_control(
617	'overlay_gap',
618	[
619	'label' => esc_html__('Gap', 'responsive-tabs-for-elementor'),
620	'type' => Controls_Manager::SLIDER,
621	'size_units' => ['px', 'em', 'rem'],
622	'default' => [
623	'unit' => 'px',
624	'size' => 12,
625	],
626	'selectors' => [
627	'{{WRAPPER}} .responsive-portfolio-tabs__overlay' => 'gap: {{SIZE}}{{UNIT}};',
628	],
629	]
630	);
631
632	$this->add_control(
633	'overlay_transition_duration',
634	[
635	'label' => esc_html__('Transition Duration (ms)', 'responsive-tabs-for-elementor'),
636	'type' => Controls_Manager::NUMBER,
637	'default' => 400,
638	'min' => 0,
639	'max' => 5000,
640	'step' => 50,
641	'render_type' => 'template',
642	'selectors' => [
643	'{{WRAPPER}} .responsive-portfolio-tabs__overlay' => 'transition-duration: {{VALUE}}ms;',
644	],
645	]
646	);
647
648	$this->end_controls_section();
649
650	$this->start_controls_section(
651	'section_style_title',
652	[
653	'label' => esc_html__('Title Styles', 'responsive-tabs-for-elementor'),
654	'tab' => Controls_Manager::TAB_STYLE,
655	]
656	);
657
658	$this->add_control(
659	'title_color',
660	[
661	'label' => esc_html__('Color', 'responsive-tabs-for-elementor'),
662	'type' => Controls_Manager::COLOR,
663	'default' => '#ffffff',
664	'selectors' => [
665	'{{WRAPPER}} .responsive-portfolio-tabs__title' => 'color: {{VALUE}};',
666	],
667	]
668	);
669
670	$this->add_group_control(
671	Group_Control_Typography::get_type(),
672	[
673	'name' => 'title_typography',
674	'selector' => '{{WRAPPER}} .responsive-portfolio-tabs__title',
675	]
676	);
677
678	$this->end_controls_section();
679
680	$this->start_controls_section(
681	'section_style_category',
682	[
683	'label' => esc_html__('Overlay Category Styles', 'responsive-tabs-for-elementor'),
684	'tab' => Controls_Manager::TAB_STYLE,
685	]
686	);
687
688	$this->add_control(
689	'category_color',
690	[
691	'label' => esc_html__('Category Color', 'responsive-tabs-for-elementor'),
692	'type' => Controls_Manager::COLOR,
693	'default' => '#ffffff',
694	'selectors' => [
695	'{{WRAPPER}} .responsive-portfolio-tabs__overlay-link' => 'color: {{VALUE}};',
696	],
697	]
698	);
699
700	$this->add_control(
701	'category_hover_color',
702	[
703	'label' => esc_html__('Category Hover Color', 'responsive-tabs-for-elementor'),
704	'type' => Controls_Manager::COLOR,
705	'default' => '#00e1ff',
706	'selectors' => [
707	'{{WRAPPER}} .responsive-portfolio-tabs__overlay-link:hover, {{WRAPPER}} .responsive-portfolio-tabs__overlay-link:focus-visible' => 'color: {{VALUE}};',
708	],
709	]
710	);
711
712	$this->add_group_control(
713	Group_Control_Typography::get_type(),
714	[
715	'name' => 'category_typography',
716	'selector' => '{{WRAPPER}} .responsive-portfolio-tabs__overlay-link',
717	]
718	);
719
720	$this->end_controls_section();
721	}
722
723	/**
724	* Render the widget output on the frontend.
725	*/
726	protected function render()
727	{
728	$settings = $this->get_settings_for_display();
729
730	if (empty($settings['portfolio_items']) \|\| !is_array($settings['portfolio_items'])) {
731	return;
732	}
733
734	$show_all_tab = !empty($settings['show_all_tab']) && 'yes' === $settings['show_all_tab'];
735	$all_tab_label = !empty($settings['all_tab_label']) ? $settings['all_tab_label'] : esc_html__('All', 'responsive-tabs-for-elementor');
736	$overlay_category_click = !empty($settings['overlay_category_click']) && 'yes' === $settings['overlay_category_click'];
737	$scroll_on_overlay = !empty($settings['scroll_on_overlay_click']) && 'yes' === $settings['scroll_on_overlay_click'];
738	$mobile_overlay_visible = !empty($settings['mobile_overlay_visible']) && 'yes' === $settings['mobile_overlay_visible'];
739
740	$tabs = [];
741	$items = [];
742
743	foreach ($settings['portfolio_items'] as $item) {
744	$title = !empty($item['portfolio_item_title']) ? $item['portfolio_item_title'] : esc_html__('Sample', 'responsive-tabs-for-elementor');
745	$category = !empty($item['portfolio_item_category']) ? $item['portfolio_item_category'] : esc_html__('Uncategorized', 'responsive-tabs-for-elementor');
746	$image = !empty($item['portfolio_item_image']['url']) ? $item['portfolio_item_image']['url'] : '';
747	$slug = $this->normalize_category_slug($category);
748
749	if (!isset($tabs[$slug])) {
750	$tabs[$slug] = $category;
751	}
752
753	$items[] = [
754	'title' => $title,
755	'category' => $category,
756	'category_slug' => $slug,
757	'image' => $image,
758	];
759	}
760
761	if (empty($items)) {
762	return;
763	}
764
765	$default_tab = $show_all_tab ? 'all' : array_key_first($tabs);
766
767	if (Responsive_Tabs_Assets::is_legacy_elementor()) {
768	$this->add_render_attribute(
769	'responsive_portfolio_tabs_params',
770	[
771	'class' => ['responsive-portfolio-tabs-params'],
772	'data-default-category' => esc_attr($default_tab),
773	'data-overlay-click' => esc_attr($overlay_category_click ? 'yes' : 'no'),
774	'data-scroll-on-overlay-click' => esc_attr($scroll_on_overlay ? 'yes' : 'no'),
775	]
776	);
777	}
778
779	$this->add_render_attribute(
780	'responsive_portfolio_tabs',
781	[
782	'class' => [
783	'responsive-portfolio-tabs',
784	$mobile_overlay_visible ? 'responsive-portfolio-tabs--mobile-overlay-visible' : '',
785	],
786	'data-default-category' => esc_attr($default_tab),
787	'data-overlay-click' => esc_attr($overlay_category_click ? 'yes' : 'no'),
788	'data-scroll-on-overlay-click' => esc_attr($scroll_on_overlay ? 'yes' : 'no'),
789	]
790	);
791	?>
792
793	<?php if (Responsive_Tabs_Assets::is_legacy_elementor()) { ?>
794	<div <?php echo $this->get_render_attribute_string('responsive_portfolio_tabs_params'); ?>></div>
795	<?php } ?>
796
797	<section <?php echo $this->get_render_attribute_string('responsive_portfolio_tabs'); ?>>
798	<div class="responsive-portfolio-tabs__nav" role="tablist">
799	<?php if ($show_all_tab) { ?>
800	<div class="responsive-portfolio-tabs__tab is-active"
801	data-category="all"
802	role="tab"
803	aria-selected="true"
804	>
805	<?php echo esc_html($all_tab_label); ?>
806	</div>
807	<?php } ?>
808
809	<?php foreach ($tabs as $slug => $label) {
810	$is_active = !$show_all_tab && $slug === $default_tab;
811	?>
812	<div class="responsive-portfolio-tabs__tab<?php echo $is_active ? ' is-active' : ''; ?>"
813	data-category="<?php echo esc_attr($slug); ?>"
814	role="tab"
815	aria-selected="<?php echo $is_active ? 'true' : 'false'; ?>"
816	>
817	<?php echo esc_html($label); ?>
818	</div>
819	<?php } ?>
820	</div>
821
822	<div class="responsive-portfolio-tabs__grid">
823	<?php foreach ($items as $item) { ?>
824	<div class="responsive-portfolio-tabs__item"
825	data-category="<?php echo esc_attr($item['category_slug']); ?>"
826	>
827	<div class="responsive-portfolio-tabs__item-inner">
828	<?php if (!empty($item['image'])) { ?>
829	<img class="responsive-portfolio-tabs__image"
830	src="<?php echo esc_url($item['image']); ?>"
831	alt="<?php echo esc_attr($item['title']); ?>"
832	>
833	<?php } ?>
834
835	<div class="responsive-portfolio-tabs__overlay">
836	<h3 class="responsive-portfolio-tabs__title">
837	<?php echo esc_html($item['title']); ?>
838	</h3>
839
840	<?php if ($overlay_category_click) { ?>
841	<div class="responsive-portfolio-tabs__overlay-link"
842	data-category-trigger="<?php echo esc_attr($item['category_slug']); ?>"
843	>
844	<?php echo esc_html($item['category']); ?>
845	</div>
846	<?php } else { ?>
847	<span class="responsive-portfolio-tabs__overlay-link is-static">
848	<?php echo esc_html($item['category']); ?>
849	</span>
850	<?php } ?>
851	</div>
852	</div>
853	</div>
854	<?php } ?>
855	</div>
856	</section>
857	<?php
858	}
859	}