Adv_Tabs.php — Essential Addons for Elementor – Popular Elementor Templates & Widgets 5.1.4

essential-addons-for-elementor-lite / includes / Elements / Adv_Tabs.php

essential-addons-for-elementor-lite / includes / Elements Last commit date

Adv_Accordion.php 4 years ago Adv_Tabs.php 4 years ago Advanced_Data_Table.php 4 years ago Better_Payment.php 4 years ago Betterdocs_Category_Box.php 4 years ago Betterdocs_Category_Grid.php 4 years ago Betterdocs_Search_Form.php 4 years ago Caldera_Forms.php 4 years ago Career_Page.php 4 years ago Contact_Form_7.php 4 years ago Content_Ticker.php 4 years ago Countdown.php 4 years ago Creative_Button.php 4 years ago Crowdfundly_All_Campaign.php 4 years ago Crowdfundly_Organization.php 4 years ago Crowdfundly_Single_Campaign.php 4 years ago Cta_Box.php 4 years ago Data_Table.php 4 years ago Dual_Color_Header.php 4 years ago EmbedPress.php 4 years ago Event_Calendar.php 4 years ago Facebook_Feed.php 4 years ago Fancy_Text.php 4 years ago Feature_List.php 4 years ago Filterable_Gallery.php 4 years ago Flip_Box.php 4 years ago FluentForm.php 4 years ago Formstack.php 4 years ago GravityForms.php 4 years ago Image_Accordion.php 4 years ago Info_Box.php 4 years ago Interactive_Circle.php 4 years ago Login_Register.php 4 years ago NinjaForms.php 4 years ago Post_Grid.php 4 years ago Post_Timeline.php 4 years ago Pricing_Table.php 4 years ago Product_Grid.php 4 years ago Progress_Bar.php 4 years ago Simple_Menu.php 4 years ago Sticky_Video.php 4 years ago Team_Member.php 4 years ago Testimonial.php 4 years ago Tooltip.php 4 years ago Twitter_Feed.php 4 years ago TypeForm.php 4 years ago WeForms.php 4 years ago Woo_Cart.php 4 years ago Woo_Checkout.php 4 years ago Woo_Product_Carousel.php 4 years ago Woo_Product_Compare.php 4 years ago Woo_Product_Gallery.php 4 years ago Woocommerce_Review.php 4 years ago WpForms.php 4 years ago

Adv_Tabs.php

995 lines

1	<?php
2
3	namespace Essential_Addons_Elementor\Elements;
4
5	// If this file is called directly, abort.
6	if (!defined('ABSPATH')) {
7	exit;
8	}
9
10	use \Elementor\Controls_Manager;
11	use \Elementor\Group_Control_Background;
12	use \Elementor\Group_Control_Border;
13	use \Elementor\Group_Control_Box_Shadow;
14	use \Elementor\Group_Control_Typography;
15	use Elementor\Icons_Manager;
16	use \Elementor\Plugin;
17	use Elementor\Repeater;
18	use \Elementor\Utils;
19	use \Elementor\Widget_Base;
20	use \Essential_Addons_Elementor\Classes\Helper;
21
22	class Adv_Tabs extends Widget_Base
23	{
24	public function get_name()
25	{
26	return 'eael-adv-tabs';
27	}
28
29	public function get_title()
30	{
31	return esc_html__('Advanced Tabs', 'essential-addons-for-elementor-lite');
32	}
33
34	public function get_icon()
35	{
36	return 'eaicon-advanced-tabs';
37	}
38
39	public function get_categories()
40	{
41	return ['essential-addons-elementor'];
42	}
43
44	public function get_keywords()
45	{
46	return [
47	'tab',
48	'tabs',
49	'ea tabs',
50	'ea advanced tabs',
51	'panel',
52	'navigation',
53	'group',
54	'tabs content',
55	'product tabs',
56	'ea',
57	'essential addons',
58	];
59	}
60
61	public function get_custom_help_url()
62	{
63	return 'https://essential-addons.com/elementor/docs/advanced-tabs/';
64	}
65
66	protected function register_controls()
67	{
68	/**
69	* Advance Tabs Settings
70	*/
71	$this->start_controls_section(
72	'eael_section_adv_tabs_settings',
73	[
74	'label' => esc_html__('General Settings', 'essential-addons-for-elementor-lite'),
75	]
76	);
77	$this->add_control(
78	'eael_adv_tab_layout',
79	[
80	'label' => esc_html__('Layout', 'essential-addons-for-elementor-lite'),
81	'type' => Controls_Manager::SELECT,
82	'default' => 'eael-tabs-horizontal',
83	'label_block' => false,
84	'options' => [
85	'eael-tabs-horizontal' => esc_html__('Horizontal', 'essential-addons-for-elementor-lite'),
86	'eael-tabs-vertical' => esc_html__('Vertical', 'essential-addons-for-elementor-lite'),
87	],
88	]
89	);
90	$this->add_control(
91	'eael_adv_tabs_icon_show',
92	[
93	'label' => esc_html__('Enable Icon', 'essential-addons-for-elementor-lite'),
94	'type' => Controls_Manager::SWITCHER,
95	'default' => 'yes',
96	'return_value' => 'yes',
97	]
98	);
99	$this->add_control(
100	'eael_adv_tab_icon_position',
101	[
102	'label' => esc_html__('Icon Position', 'essential-addons-for-elementor-lite'),
103	'type' => Controls_Manager::SELECT,
104	'default' => 'eael-tab-inline-icon',
105	'label_block' => false,
106	'options' => [
107	'eael-tab-top-icon' => esc_html__('Stacked', 'essential-addons-for-elementor-lite'),
108	'eael-tab-inline-icon' => esc_html__('Inline', 'essential-addons-for-elementor-lite'),
109	],
110	'condition' => [
111	'eael_adv_tabs_icon_show' => 'yes',
112	],
113	]
114	);
115
116	$this->add_control(
117	'eael_adv_tabs_tab_icon_alignment',
118	[
119	'label' => esc_html__( 'Icon Alignment', 'essential-addons-for-elementor-lite' ),
120	'description' => sprintf( __( 'Set icon position before/after the tab title.', 'essential-addons-for-elementor-lite' ) ),
121	'type' => Controls_Manager::CHOOSE,
122	'default' => 'before',
123	'options' => [
124	'before' => [
125	'title' => esc_html__( 'Before', 'essential-addons-for-elementor-lite' ),
126	'icon' => 'eicon-h-align-left',
127	],
128	'after' => [
129	'title' => esc_html__( 'After', 'essential-addons-for-elementor-lite' ),
130	'icon' => 'eicon-h-align-right',
131	],
132	],
133	'condition' => [
134	'eael_adv_tab_icon_position' => 'eael-tab-inline-icon',
135	],
136	]
137	);
138
139	$this->end_controls_section();
140
141	/**
142	* Advance Tabs Content Settings
143	*/
144	$this->start_controls_section(
145	'eael_section_adv_tabs_content_settings',
146	[
147	'label' => esc_html__('Content', 'essential-addons-for-elementor-lite'),
148	]
149	);
150
151	$repeater = new Repeater();
152
153	$repeater->add_control(
154	'eael_adv_tabs_tab_show_as_default',
155	[
156	'label' => __('Active as Default', 'essential-addons-for-elementor-lite'),
157	'type' => Controls_Manager::SWITCHER,
158	'default' => 'inactive',
159	'return_value' => 'active-default',
160	]
161	);
162
163	$repeater->add_control(
164	'eael_adv_tabs_icon_type',
165	[
166	'label' => esc_html__('Icon Type', 'essential-addons-for-elementor-lite'),
167	'type' => Controls_Manager::CHOOSE,
168	'label_block' => false,
169	'options' => [
170	'none' => [
171	'title' => esc_html__('None', 'essential-addons-for-elementor-lite'),
172	'icon' => 'fa fa-ban',
173	],
174	'icon' => [
175	'title' => esc_html__('Icon', 'essential-addons-for-elementor-lite'),
176	'icon' => 'eicon-icon-box',
177	],
178	'image' => [
179	'title' => esc_html__('Image', 'essential-addons-for-elementor-lite'),
180	'icon' => 'eicon-image-bold',
181	],
182	],
183	'default' => 'icon',
184	]
185	);
186
187	$repeater->add_control(
188	'eael_adv_tabs_tab_title_icon_new',
189	[
190	'label' => esc_html__('Icon', 'essential-addons-for-elementor-lite'),
191	'type' => Controls_Manager::ICONS,
192	'fa4compatibility' => 'eael_adv_tabs_tab_title_icon',
193	'default' => [
194	'value' => 'fas fa-home',
195	'library' => 'fa-solid',
196	],
197	'condition' => [
198	'eael_adv_tabs_icon_type' => 'icon',
199	],
200	]
201	);
202
203	$repeater->add_control(
204	'eael_adv_tabs_tab_title_image',
205	[
206	'label' => esc_html__('Image', 'essential-addons-for-elementor-lite'),
207	'type' => Controls_Manager::MEDIA,
208	'default' => [
209	'url' => Utils::get_placeholder_image_src(),
210	],
211	'condition' => [
212	'eael_adv_tabs_icon_type' => 'image',
213	],
214	]
215	);
216
217	$repeater->add_control(
218	'eael_adv_tabs_tab_title',
219	[
220	'name' => 'eael_adv_tabs_tab_title',
221	'label' => esc_html__('Tab Title', 'essential-addons-for-elementor-lite'),
222	'type' => Controls_Manager::TEXT,
223	'default' => esc_html__('Tab Title', 'essential-addons-for-elementor-lite'),
224	'dynamic' => ['active' => true],
225	]
226	);
227
228	$repeater->add_control(
229	'eael_adv_tabs_text_type',
230	[
231	'label' => __('Content Type', 'essential-addons-for-elementor-lite'),
232	'type' => Controls_Manager::SELECT,
233	'options' => [
234	'content' => __('Content', 'essential-addons-for-elementor-lite'),
235	'template' => __('Saved Templates', 'essential-addons-for-elementor-lite'),
236	],
237	'default' => 'content',
238	]
239	);
240
241	$repeater->add_control(
242	'eael_primary_templates',
243	[
244	'label' => __('Choose Template', 'essential-addons-for-elementor-lite'),
245	'type' => 'eael-select2',
246	'source_name' => 'post_type',
247	'source_type' => 'elementor_library',
248	'label_block' => true,
249	'condition' => [
250	'eael_adv_tabs_text_type' => 'template',
251	],
252	]
253	);
254
255	$repeater->add_control(
256	'eael_adv_tabs_tab_content',
257	[
258	'label' => esc_html__('Tab Content', 'essential-addons-for-elementor-lite'),
259	'type' => Controls_Manager::WYSIWYG,
260	'default' => esc_html__('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, neque qui velit. Magni dolorum quidem ipsam eligendi, totam, facilis laudantium cum accusamus ullam voluptatibus commodi numquam, error, est. Ea, consequatur.', 'essential-addons-for-elementor-lite'),
261	'dynamic' => ['active' => true],
262	'condition' => [
263	'eael_adv_tabs_text_type' => 'content',
264	],
265	]
266	);
267
268	$repeater->add_control(
269	'eael_adv_tabs_tab_id',
270	[
271	'label' => esc_html__('Custom ID', 'essential-addons-for-elementor-lite'),
272	'type' => Controls_Manager::TEXT,
273	'description' => esc_html__( 'Custom ID will be added as an anchor tag. For example, if you add ‘test’ as your custom ID, the link will become like the following: https://www.example.com/#test and it will open the respective tab directly.', 'essential-addons-for-elementor-lite' ),
274	'default' => '',
275	]
276	);
277
278	$this->add_control(
279	'eael_adv_tabs_tab',
280	[
281	'type' => Controls_Manager::REPEATER,
282	'seperator' => 'before',
283	'default' => [
284	['eael_adv_tabs_tab_title' => esc_html__('Tab Title 1', 'essential-addons-for-elementor-lite')],
285	['eael_adv_tabs_tab_title' => esc_html__('Tab Title 2', 'essential-addons-for-elementor-lite')],
286	['eael_adv_tabs_tab_title' => esc_html__('Tab Title 3', 'essential-addons-for-elementor-lite')],
287	],
288	'fields' => $repeater->get_controls(),
289	'title_field' => '{{eael_adv_tabs_tab_title}}',
290	]
291	);
292	$this->end_controls_section();
293
294	if (!apply_filters('eael/pro_enabled', false)) {
295	$this->start_controls_section(
296	'eael_section_pro',
297	[
298	'label' => __('Go Premium for More Features', 'essential-addons-for-elementor-lite'),
299	]
300	);
301
302	$this->add_control(
303	'eael_control_get_pro',
304	[
305	'label' => __('Unlock more possibilities', 'essential-addons-for-elementor-lite'),
306	'type' => Controls_Manager::CHOOSE,
307	'options' => [
308	'1' => [
309	'title' => '',
310	'icon' => 'fa fa-unlock-alt',
311	],
312	],
313	'default' => '1',
314	'description' => '<span class="pro-feature"> Get the <a href="https://wpdeveloper.com/upgrade/ea-pro" target="_blank">Pro version</a> for more stunning elements and customization options.</span>',
315	]
316	);
317
318	$this->end_controls_section();
319	}
320
321	/**
322	* -------------------------------------------
323	* Tab Style Advance Tabs Generel Style
324	* -------------------------------------------
325	*/
326	$this->start_controls_section(
327	'eael_section_adv_tabs_style_settings',
328	[
329	'label' => esc_html__('General', 'essential-addons-for-elementor-lite'),
330	'tab' => Controls_Manager::TAB_STYLE,
331	]
332	);
333
334	$this->add_responsive_control(
335	'eael_adv_tabs_padding',
336	[
337	'label' => esc_html__('Padding', 'essential-addons-for-elementor-lite'),
338	'type' => Controls_Manager::DIMENSIONS,
339	'size_units' => ['px', 'em', '%'],
340	'selectors' => [
341	'{{WRAPPER}} .eael-advance-tabs' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
342	],
343	]
344	);
345	$this->add_responsive_control(
346	'eael_adv_tabs_margin',
347	[
348	'label' => esc_html__('Margin', 'essential-addons-for-elementor-lite'),
349	'type' => Controls_Manager::DIMENSIONS,
350	'size_units' => ['px', 'em', '%'],
351	'selectors' => [
352	'{{WRAPPER}} .eael-advance-tabs' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
353	],
354	]
355	);
356	$this->add_group_control(
357	Group_Control_Border::get_type(),
358	[
359	'name' => 'eael_adv_tabs_border',
360	'label' => esc_html__('Border', 'essential-addons-for-elementor-lite'),
361	'selector' => '{{WRAPPER}} .eael-advance-tabs',
362	]
363	);
364
365	$this->add_responsive_control(
366	'eael_adv_tabs_border_radius',
367	[
368	'label' => esc_html__('Border Radius', 'essential-addons-for-elementor-lite'),
369	'type' => Controls_Manager::DIMENSIONS,
370	'size_units' => ['px', 'em', '%'],
371	'selectors' => [
372	'{{WRAPPER}} .eael-advance-tabs' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
373	],
374	]
375	);
376
377	$this->add_group_control(
378	Group_Control_Box_Shadow::get_type(),
379	[
380	'name' => 'eael_adv_tabs_box_shadow',
381	'selector' => '{{WRAPPER}} .eael-advance-tabs',
382	]
383	);
384	$this->end_controls_section();
385	/**
386	* -------------------------------------------
387	* Tab Style Advance Tabs Content Style
388	* -------------------------------------------
389	*/
390	$this->start_controls_section(
391	'eael_section_adv_tabs_tab_style_settings',
392	[
393	'label' => esc_html__('Tab Title', 'essential-addons-for-elementor-lite'),
394	'tab' => Controls_Manager::TAB_STYLE,
395	]
396	);
397	$this->add_group_control(
398	Group_Control_Typography::get_type(),
399	[
400	'name' => 'eael_adv_tabs_tab_title_typography',
401	'selector' => '{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li',
402	]
403	);
404	$this->add_responsive_control(
405	'eael_adv_tabs_title_width',
406	[
407	'label' => __('Title Min Width', 'essential-addons-for-elementor-lite'),
408	'type' => Controls_Manager::SLIDER,
409	'size_units' => ['px', 'em'],
410	'range' => [
411	'px' => [
412	'min' => 0,
413	'max' => 1000,
414	'step' => 1,
415	],
416	'em' => [
417	'min' => 0,
418	'max' => 50,
419	'step' => 1,
420	],
421	],
422	'selectors' => [
423	'{{WRAPPER}} .eael-advance-tabs.eael-tabs-vertical > .eael-tabs-nav > ul' => 'min-width: {{SIZE}}{{UNIT}};',
424	],
425	'condition' => [
426	'eael_adv_tab_layout' => 'eael-tabs-vertical',
427	],
428	]
429	);
430	$this->add_responsive_control(
431	'eael_adv_tabs_tab_icon_size',
432	[
433	'label' => __('Icon Size', 'essential-addons-for-elementor-lite'),
434	'type' => Controls_Manager::SLIDER,
435	'default' => [
436	'size' => 16,
437	'unit' => 'px',
438	],
439	'size_units' => ['px'],
440	'range' => [
441	'px' => [
442	'min' => 0,
443	'max' => 200,
444	'step' => 1,
445	],
446	],
447	'selectors' => [
448	'{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li i' => 'font-size: {{SIZE}}{{UNIT}};',
449	'{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li img' => 'width: {{SIZE}}{{UNIT}};',
450	'{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li svg' => 'width: {{SIZE}}{{UNIT}}; height: auto;',
451	],
452	]
453	);
454	$this->add_responsive_control(
455	'eael_adv_tabs_tab_icon_gap',
456	[
457	'label' => __('Icon Gap', 'essential-addons-for-elementor-lite'),
458	'type' => Controls_Manager::SLIDER,
459	'default' => [
460	'size' => 10,
461	'unit' => 'px',
462	],
463	'size_units' => ['px'],
464	'range' => [
465	'px' => [
466	'min' => 0,
467	'max' => 100,
468	'step' => 1,
469	],
470	],
471	'selectors' => [
472	'{{WRAPPER}} .eael-tab-inline-icon li span.title-before-icon' => 'margin-right: {{SIZE}}{{UNIT}};',
473	'{{WRAPPER}} .eael-tab-inline-icon li span.title-after-icon' => 'margin-left: {{SIZE}}{{UNIT}};',
474	'{{WRAPPER}} .eael-tab-top-icon li i, {{WRAPPER}} .eael-tab-top-icon li img, {{WRAPPER}} .eael-tab-top-icon li svg' => 'margin-bottom: {{SIZE}}{{UNIT}};',
475	],
476	]
477	);
478
479	$this->add_responsive_control(
480	'eael_adv_tabs_tab_padding',
481	[
482	'label' => esc_html__('Padding', 'essential-addons-for-elementor-lite'),
483	'type' => Controls_Manager::DIMENSIONS,
484	'size_units' => ['px', 'em', '%'],
485	'selectors' => [
486	'{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
487	],
488	]
489	);
490	$this->add_responsive_control(
491	'eael_adv_tabs_tab_margin',
492	[
493	'label' => esc_html__('Margin', 'essential-addons-for-elementor-lite'),
494	'type' => Controls_Manager::DIMENSIONS,
495	'size_units' => ['px', 'em', '%'],
496	'selectors' => [
497	'{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
498	],
499	]
500	);
501
502	$this->start_controls_tabs('eael_adv_tabs_header_tabs');
503	// Normal State Tab
504	$this->start_controls_tab('eael_adv_tabs_header_normal', ['label' => esc_html__('Normal', 'essential-addons-for-elementor-lite')]);
505	$this->add_control(
506	'eael_adv_tabs_tab_color',
507	[
508	'label' => esc_html__('Background Color', 'essential-addons-for-elementor-lite'),
509	'type' => Controls_Manager::COLOR,
510	'default' => '#f1f1f1',
511	'selectors' => [
512	'{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li' => 'background-color: {{VALUE}};',
513	],
514	]
515	);
516	$this->add_group_control(
517	Group_Control_Background::get_type(),
518	[
519	'name' => 'eael_adv_tabs_tab_bgtype',
520	'types' => ['classic', 'gradient'],
521	'selector' => '{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li',
522	]
523	);
524	$this->add_control(
525	'eael_adv_tabs_tab_text_color',
526	[
527	'label' => esc_html__('Text Color', 'essential-addons-for-elementor-lite'),
528	'type' => Controls_Manager::COLOR,
529	'default' => '#333',
530	'selectors' => [
531	'{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li' => 'color: {{VALUE}};',
532	],
533	]
534	);
535	$this->add_control(
536	'eael_adv_tabs_tab_icon_color',
537	[
538	'label' => esc_html__('Icon Color', 'essential-addons-for-elementor-lite'),
539	'type' => Controls_Manager::COLOR,
540	'default' => '#333',
541	'selectors' => [
542	'{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li i' => 'color: {{VALUE}};',
543	'{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li svg' => 'fill: {{VALUE}};',
544	],
545	'condition' => [
546	'eael_adv_tabs_icon_show' => 'yes',
547	],
548	]
549	);
550	$this->add_group_control(
551	Group_Control_Border::get_type(),
552	[
553	'name' => 'eael_adv_tabs_tab_border',
554	'label' => esc_html__('Border', 'essential-addons-for-elementor-lite'),
555	'selector' => '{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li',
556	]
557	);
558	$this->add_responsive_control(
559	'eael_adv_tabs_tab_border_radius',
560	[
561	'label' => esc_html__('Border Radius', 'essential-addons-for-elementor-lite'),
562	'type' => Controls_Manager::DIMENSIONS,
563	'size_units' => ['px', 'em', '%'],
564	'selectors' => [
565	'{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
566	],
567	]
568	);
569	$this->end_controls_tab();
570	// Hover State Tab
571	$this->start_controls_tab('eael_adv_tabs_header_hover', ['label' => esc_html__('Hover', 'essential-addons-for-elementor-lite')]);
572	$this->add_control(
573	'eael_adv_tabs_tab_color_hover',
574	[
575	'label' => esc_html__('Tab Background Color', 'essential-addons-for-elementor-lite'),
576	'type' => Controls_Manager::COLOR,
577	'default' => '#333',
578	'selectors' => [
579	'{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li:hover' => 'background-color: {{VALUE}};',
580	],
581	]
582	);
583	$this->add_group_control(
584	Group_Control_Background::get_type(),
585	[
586	'name' => 'eael_adv_tabs_tab_bgtype_hover',
587	'types' => ['classic', 'gradient'],
588	'selector' => '{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li:hover',
589	]
590	);
591	$this->add_control(
592	'eael_adv_tabs_tab_text_color_hover',
593	[
594	'label' => esc_html__('Text Color', 'essential-addons-for-elementor-lite'),
595	'type' => Controls_Manager::COLOR,
596	'default' => '#fff',
597	'selectors' => [
598	'{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li:hover' => 'color: {{VALUE}};',
599	],
600	]
601	);
602	$this->add_control(
603	'eael_adv_tabs_tab_icon_color_hover',
604	[
605	'label' => esc_html__('Icon Color', 'essential-addons-for-elementor-lite'),
606	'type' => Controls_Manager::COLOR,
607	'default' => '#fff',
608	'selectors' => [
609	'{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li:hover > i' => 'color: {{VALUE}};',
610	'{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li:hover > svg' => 'fill: {{VALUE}};',
611	],
612	'condition' => [
613	'eael_adv_tabs_icon_show' => 'yes',
614	],
615	]
616	);
617	$this->add_group_control(
618	Group_Control_Border::get_type(),
619	[
620	'name' => 'eael_adv_tabs_tab_border_hover',
621	'label' => esc_html__('Border', 'essential-addons-for-elementor-lite'),
622	'selector' => '{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li:hover',
623	]
624	);
625	$this->add_responsive_control(
626	'eael_adv_tabs_tab_border_radius_hover',
627	[
628	'label' => esc_html__('Border Radius', 'essential-addons-for-elementor-lite'),
629	'type' => Controls_Manager::DIMENSIONS,
630	'size_units' => ['px', 'em', '%'],
631	'selectors' => [
632	'{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
633	],
634	]
635	);
636	$this->end_controls_tab();
637	// Active State Tab
638	$this->start_controls_tab('eael_adv_tabs_header_active', ['label' => esc_html__('Active', 'essential-addons-for-elementor-lite')]);
639	$this->add_control(
640	'eael_adv_tabs_tab_color_active',
641	[
642	'label' => esc_html__('Tab Background Color', 'essential-addons-for-elementor-lite'),
643	'type' => Controls_Manager::COLOR,
644	'default' => '#444',
645	'selectors' => [
646	'{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li.active' => 'background-color: {{VALUE}};',
647	],
648	]
649	);
650	$this->add_group_control(
651	Group_Control_Background::get_type(),
652	[
653	'name' => 'eael_adv_tabs_tab_bgtype_active',
654	'types' => ['classic', 'gradient'],
655	'selector' => '{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li.active',
656	]
657	);
658	$this->add_control(
659	'eael_adv_tabs_tab_text_color_active',
660	[
661	'label' => esc_html__('Text Color', 'essential-addons-for-elementor-lite'),
662	'type' => Controls_Manager::COLOR,
663	'default' => '#fff',
664	'selectors' => [
665	'{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li.active' => 'color: {{VALUE}};',
666	],
667	]
668	);
669	$this->add_control(
670	'eael_adv_tabs_tab_icon_color_active',
671	[
672	'label' => esc_html__('Icon Color', 'essential-addons-for-elementor-lite'),
673	'type' => Controls_Manager::COLOR,
674	'default' => '#fff',
675	'selectors' => [
676	'{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li.active > i' => 'color: {{VALUE}};',
677	//'{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li.active-default > i' => 'color: {{VALUE}};',
678	'{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li.active > svg' => 'fill: {{VALUE}};',
679	//'{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li.active-default > svg' => 'fill: {{VALUE}};',
680	],
681	'condition' => [
682	'eael_adv_tabs_icon_show' => 'yes',
683	],
684	]
685	);
686	$this->add_group_control(
687	Group_Control_Border::get_type(),
688	[
689	'name' => 'eael_adv_tabs_tab_border_active',
690	'label' => esc_html__('Border', 'essential-addons-for-elementor-lite'),
691	'selector' => '{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li.active',
692	]
693	);
694	$this->add_responsive_control(
695	'eael_adv_tabs_tab_border_radius_active',
696	[
697	'label' => esc_html__('Border Radius', 'essential-addons-for-elementor-lite'),
698	'type' => Controls_Manager::DIMENSIONS,
699	'size_units' => ['px', 'em', '%'],
700	'selectors' => [
701	'{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li.active' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
702	],
703	]
704	);
705	$this->end_controls_tab();
706	$this->end_controls_tabs();
707	$this->end_controls_section();
708
709	/**
710	* -------------------------------------------
711	* Tab Style Advance Tabs Content Style
712	* -------------------------------------------
713	*/
714	$this->start_controls_section(
715	'eael_section_adv_tabs_tab_content_style_settings',
716	[
717	'label' => esc_html__('Content', 'essential-addons-for-elementor-lite'),
718	'tab' => Controls_Manager::TAB_STYLE,
719	]
720	);
721	$this->add_control(
722	'adv_tabs_content_bg_color',
723	[
724	'label' => esc_html__('Background Color', 'essential-addons-for-elementor-lite'),
725	'type' => Controls_Manager::COLOR,
726	'default' => '',
727	'selectors' => [
728	'{{WRAPPER}} .eael-advance-tabs .eael-tabs-content > div' => 'background-color: {{VALUE}};',
729	],
730	]
731	);
732	$this->add_group_control(
733	Group_Control_Background::get_type(),
734	[
735	'name' => 'adv_tabs_content_bgtype',
736	'types' => ['classic', 'gradient'],
737	'selector' => '{{WRAPPER}} .eael-advance-tabs .eael-tabs-content > div',
738	]
739	);
740	$this->add_control(
741	'adv_tabs_content_text_color',
742	[
743	'label' => esc_html__('Text Color', 'essential-addons-for-elementor-lite'),
744	'type' => Controls_Manager::COLOR,
745	'default' => '#333',
746	'selectors' => [
747	'{{WRAPPER}} .eael-advance-tabs .eael-tabs-content > div' => 'color: {{VALUE}};',
748	],
749	]
750	);
751	$this->add_group_control(
752	Group_Control_Typography::get_type(),
753	[
754	'name' => 'eael_adv_tabs_content_typography',
755	'selector' => '{{WRAPPER}} .eael-advance-tabs .eael-tabs-content > div',
756	]
757	);
758	$this->add_responsive_control(
759	'eael_adv_tabs_content_padding',
760	[
761	'label' => esc_html__('Padding', 'essential-addons-for-elementor-lite'),
762	'type' => Controls_Manager::DIMENSIONS,
763	'size_units' => ['px', 'em', '%'],
764	'selectors' => [
765	'{{WRAPPER}} .eael-advance-tabs .eael-tabs-content > div' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
766	],
767	]
768	);
769	$this->add_responsive_control(
770	'eael_adv_tabs_content_margin',
771	[
772	'label' => esc_html__('Margin', 'essential-addons-for-elementor-lite'),
773	'type' => Controls_Manager::DIMENSIONS,
774	'size_units' => ['px', 'em', '%'],
775	'selectors' => [
776	'{{WRAPPER}} .eael-advance-tabs .eael-tabs-content > div' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
777	],
778	]
779	);
780	$this->add_group_control(
781	Group_Control_Border::get_type(),
782	[
783	'name' => 'eael_adv_tabs_content_border',
784	'label' => esc_html__('Border', 'essential-addons-for-elementor-lite'),
785	'selector' => '{{WRAPPER}} .eael-advance-tabs .eael-tabs-content > div',
786	]
787	);
788	$this->add_responsive_control(
789	'eael_adv_tabs_content_border_radius',
790	[
791	'label' => esc_html__('Border Radius', 'essential-addons-for-elementor-lite'),
792	'type' => Controls_Manager::DIMENSIONS,
793	'size_units' => ['px', 'em', '%'],
794	'selectors' => [
795	'{{WRAPPER}} .eael-tabs-content' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
796	],
797	]
798	);
799	$this->add_group_control(
800	Group_Control_Box_Shadow::get_type(),
801	[
802	'name' => 'eael_adv_tabs_content_shadow',
803	'selector' => '{{WRAPPER}} .eael-advance-tabs .eael-tabs-content > div',
804	'separator' => 'before',
805	]
806	);
807	$this->end_controls_section();
808
809	/**
810	* -------------------------------------------
811	* Tab Style Advance Tabs Caret Style
812	* -------------------------------------------
813	*/
814	$this->start_controls_section(
815	'eael_section_adv_tabs_tab_caret_style_settings',
816	[
817	'label' => esc_html__('Caret', 'essential-addons-for-elementor-lite'),
818	'tab' => Controls_Manager::TAB_STYLE,
819	]
820	);
821	$this->add_control(
822	'eael_adv_tabs_tab_caret_show',
823	[
824	'label' => esc_html__('Show Caret on Active Tab', 'essential-addons-for-elementor-lite'),
825	'type' => Controls_Manager::SWITCHER,
826	'default' => 'yes',
827	'return_value' => 'yes',
828	]
829	);
830	$this->add_control(
831	'eael_adv_tabs_tab_caret_size',
832	[
833	'label' => esc_html__('Caret Size', 'essential-addons-for-elementor-lite'),
834	'type' => Controls_Manager::SLIDER,
835	'default' => [
836	'size' => 10,
837	],
838	'range' => [
839	'px' => [
840	'max' => 100,
841	],
842	],
843	'selectors' => [
844	'{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li:after' => 'border-width: {{SIZE}}px; bottom: -{{SIZE}}px',
845	'{{WRAPPER}} .eael-advance-tabs.eael-tabs-vertical > .eael-tabs-nav > ul li:after' => 'right: -{{SIZE}}px; top: calc(50% - {{SIZE}}px) !important;',
846	'.rtl {{WRAPPER}} .eael-advance-tabs.eael-tabs-vertical > .eael-tabs-nav > ul li:after' => 'right: auto; left: -{{SIZE}}px !important; top: calc(50% - {{SIZE}}px) !important;',
847	],
848	'condition' => [
849	'eael_adv_tabs_tab_caret_show' => 'yes',
850	],
851	]
852	);
853	$this->add_control(
854	'eael_adv_tabs_tab_caret_color',
855	[
856	'label' => esc_html__('Caret Color', 'essential-addons-for-elementor-lite'),
857	'type' => Controls_Manager::COLOR,
858	'default' => '#444',
859	'selectors' => [
860	'{{WRAPPER}} .eael-advance-tabs .eael-tabs-nav > ul li:after' => 'border-top-color: {{VALUE}};',
861	'{{WRAPPER}} .eael-advance-tabs.eael-tabs-vertical > .eael-tabs-nav > ul li:after' => 'border-top-color: transparent; border-left-color: {{VALUE}};',
862	],
863	'condition' => [
864	'eael_adv_tabs_tab_caret_show' => 'yes',
865	],
866	]
867	);
868	$this->end_controls_section();
869
870	/**
871	* -------------------------------------------
872	* Tab Style: Advance Tabs Responsive Controls
873	* -------------------------------------------
874	*/
875	$this->start_controls_section(
876	'eael_ad_responsive_controls',
877	[
878	'label' => esc_html__('Responsive Controls', 'essential-addons-elementor'),
879	'tab' => Controls_Manager::TAB_STYLE,
880	]
881	);
882
883	$this->add_control(
884	'responsive_vertical_layout',
885	[
886	'label' => __('Vertical Layout', 'essential-addons-elementor'),
887	'type' => Controls_Manager::SWITCHER,
888	'label_on' => __('Yes', 'essential-addons-for-elementor-lite'),
889	'label_off' => __('No', 'essential-addons-for-elementor-lite'),
890	'return_value' => 'yes',
891	'default' => 'yes',
892	]
893	);
894
895	$this->end_controls_section();
896	}
897
898	protected function render()
899	{
900	$settings = $this->get_settings_for_display();
901
902	$eael_find_default_tab = [];
903	$eael_adv_tab_id = 1;
904	$eael_adv_tab_content_id = 1;
905	$tab_icon_migrated = isset($settings['__fa4_migrated']['eael_adv_tabs_tab_title_icon_new']);
906	$tab_icon_is_new = empty($settings['eael_adv_tabs_tab_title_icon']);
907
908	$this->add_render_attribute(
909	'eael_tab_wrapper',
910	[
911	'id' => "eael-advance-tabs-{$this->get_id()}",
912	'class' => ['eael-advance-tabs', $settings['eael_adv_tab_layout']],
913	'data-tabid' => $this->get_id(),
914	]
915	);
916	if ($settings['eael_adv_tabs_tab_caret_show'] != 'yes') {
917	$this->add_render_attribute('eael_tab_wrapper', 'class', 'active-caret-on');
918	}
919
920	if ($settings['responsive_vertical_layout'] != 'yes') {
921	$this->add_render_attribute('eael_tab_wrapper', 'class', 'responsive-vertical-layout');
922	}
923
924	$this->add_render_attribute('eael_tab_icon_position', 'class', esc_attr($settings['eael_adv_tab_icon_position'])); ?>
925	<div <?php echo $this->get_render_attribute_string('eael_tab_wrapper'); ?>>
926	<div class="eael-tabs-nav">
927	<ul <?php echo $this->get_render_attribute_string('eael_tab_icon_position'); ?>>
928	<?php foreach ($settings['eael_adv_tabs_tab'] as $index => $tab) :
929	$tab_id = $tab['eael_adv_tabs_tab_id'] ? $tab['eael_adv_tabs_tab_id'] : Helper::str_to_css_id( $tab['eael_adv_tabs_tab_title'] );
930	$tab_id = $tab_id === 'safari' ? 'eael-safari' : $tab_id;
931
932	$tab_count = $index + 1;
933	$tab_title_setting_key = $this->get_repeater_setting_key( 'eael_adv_tabs_tab_title', 'eael_adv_tabs_tab', $index );
934
935
936	$this->add_render_attribute( $tab_title_setting_key, [
937	'id' => $tab_id,
938	'class' => [ $tab['eael_adv_tabs_tab_show_as_default'], 'eael-tab-item-trigger' ],
939	'aria-selected' => 1 === $tab_count ? 'true' : 'false',
940	'data-tab' => $tab_count,
941	'role' => 'tab',
942	'tabindex' => 1 === $tab_count ? '0' : '-1',
943	'aria-controls' => $tab_id . '-tab',
944	'aria-expanded' => 'false',
945	] );
946	?>
947	<li <?php $this->print_render_attribute_string( $tab_title_setting_key ); ?>>
948	<?php if( $settings['eael_adv_tab_icon_position'] === 'eael-tab-inline-icon' && $settings['eael_adv_tabs_tab_icon_alignment'] === 'after' ) : ?>
949	<span class="eael-tab-title title-before-icon"><?php echo Helper::eael_wp_kses($tab['eael_adv_tabs_tab_title']); ?></span>
950	<?php endif; ?>
951
952	<?php if ($settings['eael_adv_tabs_icon_show'] === 'yes') :
953	if ($tab['eael_adv_tabs_icon_type'] === 'icon') : ?>
954	<?php if ($tab_icon_is_new \|\| $tab_icon_migrated) {
955	Icons_Manager::render_icon( $tab['eael_adv_tabs_tab_title_icon_new'] );
956	} else {
957	echo '<i class="' . $tab['eael_adv_tabs_tab_title_icon'] . '"></i>';
958	} ?>
959	<?php elseif ($tab['eael_adv_tabs_icon_type'] === 'image') : ?>
960	<img src="<?php echo esc_attr($tab['eael_adv_tabs_tab_title_image']['url']); ?>" alt="<?php echo esc_attr(get_post_meta($tab['eael_adv_tabs_tab_title_image']['id'], '_wp_attachment_image_alt', true)); ?>">
961	<?php endif; ?>
962	<?php endif; ?>
963
964	<?php if( $settings['eael_adv_tab_icon_position'] === 'eael-tab-inline-icon' && $settings['eael_adv_tabs_tab_icon_alignment'] !== 'after' ) : ?>
965	<span class="eael-tab-title title-after-icon"><?php echo Helper::eael_wp_kses($tab['eael_adv_tabs_tab_title']); ?></span>
966	<?php endif; ?>
967
968	<?php if( $settings['eael_adv_tab_icon_position'] !== 'eael-tab-inline-icon' ) : ?>
969	<span class="eael-tab-title title-after-icon"><?php echo Helper::eael_wp_kses($tab['eael_adv_tabs_tab_title']); ?></span>
970	<?php endif; ?>
971	</li>
972	<?php endforeach; ?>
973	</ul>
974	</div>
975	<div class="eael-tabs-content">
976	<?php foreach ($settings['eael_adv_tabs_tab'] as $tab) :
977	$eael_find_default_tab[] = $tab['eael_adv_tabs_tab_show_as_default'];
978	$tab_id = $tab['eael_adv_tabs_tab_id'] ? $tab['eael_adv_tabs_tab_id'] : Helper::str_to_css_id( $tab['eael_adv_tabs_tab_title'] );
979	$tab_id = $tab_id === 'safari' ? 'eael-safari-tab' : $tab_id . '-tab'; ?>
980
981	<div id="<?php echo $tab_id; ?>" class="clearfix eael-tab-content-item <?php echo esc_attr($tab['eael_adv_tabs_tab_show_as_default']); ?>" data-title-link="<?php echo $tab_id; ?>">
982	<?php if ('content' == $tab['eael_adv_tabs_text_type']) : ?>
983	<?php echo do_shortcode($tab['eael_adv_tabs_tab_content']); ?>
984	<?php elseif ('template' == $tab['eael_adv_tabs_text_type']) : ?>
985	<?php if (!empty($tab['eael_primary_templates'])) {
986	echo Plugin::$instance->frontend->get_builder_content($tab['eael_primary_templates'], true);
987	} ?>
988	<?php endif; ?>
989	</div>
990	<?php endforeach; ?>
991	</div>
992	</div>
993	<?php }
994	}
995