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

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

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

class-responsive-parallax-tabs.php

1359 lines

1	<?php
2	/**
3	* Responsive_Parallax_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\Group_Control_Background;
20	use Elementor\Group_Control_Typography;
21	use Elementor\Icons_Manager;
22	use Elementor\Group_Control_Border;
23	use Elementor\Repeater;
24	use Elementor\Utils;
25	use Elementor\Widget_Base;
26	use Elementor\Controls_Manager;
27
28	// Security Note: Blocks direct access to the plugin PHP files.
29	defined('ABSPATH') \|\| die();
30
31	/**
32	* ResponsiveParallaxTabs widget class.
33	*
34	* @since 11.0.1
35	*/
36	class Responsive_Parallax_Tabs extends Widget_Base
37	{
38	/**
39	* ResponsiveParallaxTabs constructor.
40	*
41	* @param array $data
42	* @param null $args
43	*
44	* @throws \Exception
45	*/
46	public function __construct($data = [], $args = null)
47	{
48	parent::__construct($data, $args);
49	Responsive_Tabs_Assets::register_swiper();
50	Responsive_Tabs_Assets::register_tabs_handler();
51
52	wp_register_style('parallax-tabs', plugins_url('/assets/css/responsive-parallax-tabs.min.css', RESPONSIVE_TABS_FOR_ELEMENTOR), [], RESPONSIVE_TABS_VERSION);
53	}
54
55	/**
56	* Retrieve the widget name.
57	*
58	* @return string Widget name.
59	* @since 11.0.1
60	*
61	* @access public
62	*
63	*/
64	public function get_name()
65	{
66	return 'responsive-parallax-tabs';
67	}
68
69	/**
70	* Retrieve the widget title.
71	*
72	* @return string Widget title.
73	* @since 11.0.1
74	*
75	* @access public
76	*
77	*/
78	public function get_title()
79	{
80	return __('Parallax Tabs', 'responsive-tabs-for-elementor');
81	}
82
83	/**
84	* Retrieve the widget icon.
85	*
86	* @return string Widget icon.
87	* @since 11.0.1
88	*
89	* @access public
90	*
91	*/
92	public function get_icon()
93	{
94	return 'icon-parallax-tabs';
95	}
96
97	/**
98	* Retrieve the list of categories the widget belongs to.
99	*
100	* Used to determine where to display the widget in the editor.
101	*
102	* Note that currently Elementor supports only one category.
103	* When multiple categories passed, Elementor uses the first one.
104	*
105	* @return array Widget categories.
106	* @since 11.0.1
107	*
108	* @access public
109	*
110	*/
111	public function get_categories()
112	{
113	return ['responsive_tabs'];
114	}
115
116	/**
117	* Enqueue styles.
118	*/
119	public function get_style_depends()
120	{
121	$styles = ['swiper', 'parallax-tabs'];
122
123	return $styles;
124	}
125
126	public function get_script_depends()
127	{
128	$scripts = ['swiper', 'responsive-tabs'];
129
130	return $scripts;
131	}
132
133	/**
134	* Get default tab.
135	*
136	* @return array Default tab.
137	* @since 11.0.1
138	*
139	* @access protected
140	*
141	*/
142	protected function get_default_tab()
143	{
144	return [
145	'parallax_background_image_left' => [
146	'url' => Utils::get_placeholder_image_src(),
147	],
148	'parallax_background_image_right' => [
149	'url' => Utils::get_placeholder_image_src(),
150	],
151	'parallax_title' => __('Title', 'responsive-tabs-for-elementor'),
152	'parallax_subtitle' => __('Subtitle', 'responsive-tabs-for-elementor'),
153	'parallax_content' => __('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>', 'responsive-tabs-for-elementor'),
154	];
155	}
156
157	/**
158	* Register the widget controls.
159	*
160	* Adds different input fields to allow the user to change and customize the widget settings.
161	*
162	* @since 11.0.1
163	*
164	* @access protected
165	*/
166	protected function register_controls()
167	{
168	// Content Section
169	$this->start_controls_section(
170	'section_content',
171	[
172	'label' => __('Content', 'responsive-tabs-for-elementor'),
173	]
174	);
175
176	$repeater = new Repeater();
177
178	$repeater->start_controls_tabs('parallax_background_images');
179
180	$repeater->start_controls_tab(
181	'parallax_background_left',
182	[
183	'label' => esc_html__('Left Image', 'responsive-tabs-for-elementor'),
184	]
185	);
186
187	$repeater->add_control(
188	'parallax_background_image_left',
189	[
190	'label' => __('Choose Image', 'responsive-tabs-for-elementor'),
191	'type' => Controls_Manager::MEDIA,
192	'default' => [
193	'url' => Utils::get_placeholder_image_src(),
194	],
195	'ai' => [
196	'active' => false,
197	],
198	]
199	);
200
201	$repeater->end_controls_tab();
202
203	$repeater->start_controls_tab(
204	'parallax_background_right',
205	[
206	'label' => esc_html__('Right Image', 'responsive-tabs-for-elementor'),
207	]
208	);
209
210	$repeater->add_control(
211	'parallax_background_image_right',
212	[
213	'label' => __('Choose Image', 'responsive-tabs-for-elementor'),
214	'type' => Controls_Manager::MEDIA,
215	'default' => [
216	'url' => Utils::get_placeholder_image_src(),
217	],
218	'ai' => [
219	'active' => false,
220	],
221	]
222	);
223
224	$repeater->end_controls_tab();
225	$repeater->end_controls_tabs();
226
227	$repeater->add_control(
228	'parallax_title',
229	[
230	'label' => esc_html__('Title', 'responsive-tabs-for-elementor'),
231	'type' => Controls_Manager::TEXTAREA,
232	'dynamic' => [
233	'active' => true,
234	],
235	'placeholder' => esc_html__('Enter your title', 'responsive-tabs-for-elementor'),
236	'default' => esc_html__('Title', 'responsive-tabs-for-elementor'),
237	'separator' => 'before',
238	]
239	);
240
241	$repeater->add_control(
242	'parallax_link',
243	[
244	'label' => esc_html__('Link', 'responsive-tabs-for-elementor'),
245	'type' => Controls_Manager::URL,
246	'dynamic' => [
247	'active' => true,
248	],
249	'default' => [
250	'url' => '',
251	],
252	]
253	);
254
255	$repeater->add_control(
256	'parallax_size',
257	[
258	'label' => esc_html__('Size', 'elementor'),
259	'type' => Controls_Manager::SELECT,
260	'options' => [
261	'default' => esc_html__('Default', 'responsive-tabs-for-elementor'),
262	'small' => esc_html__('Small', 'responsive-tabs-for-elementor'),
263	'medium' => esc_html__('Medium', 'responsive-tabs-for-elementor'),
264	'large' => esc_html__('Large', 'responsive-tabs-for-elementor'),
265	'xl' => esc_html__('XL', 'responsive-tabs-for-elementor'),
266	'xxl' => esc_html__('XXL', 'responsive-tabs-for-elementor'),
267	],
268	'default' => 'default',
269	'condition' => [
270	'parallax_size!' => 'default',
271	],
272	]
273	);
274
275	$repeater->add_control(
276	'parallax_header_size',
277	[
278	'label' => esc_html__('HTML Tag', 'responsive-tabs-for-elementor'),
279	'type' => Controls_Manager::SELECT,
280	'options' => [
281	'h1' => 'H1',
282	'h2' => 'H2',
283	'h3' => 'H3',
284	'h4' => 'H4',
285	'h5' => 'H5',
286	'h6' => 'H6',
287	'div' => 'div',
288	'span' => 'span',
289	'p' => 'p',
290	],
291	'default' => 'h2',
292	]
293	);
294
295	$repeater->add_control(
296	'parallax_subtitle',
297	[
298	'label' => esc_html__('Subtitle', 'responsive-tabs-for-elementor'),
299	'type' => Controls_Manager::TEXTAREA,
300	'dynamic' => [
301	'active' => true,
302	],
303	'placeholder' => esc_html__('Enter your title', 'responsive-tabs-for-elementor'),
304	'default' => esc_html__('Subtitle', 'responsive-tabs-for-elementor'),
305	'separator' => 'before',
306	]
307	);
308
309	$repeater->add_control(
310	'parallax_subtitle_link',
311	[
312	'label' => esc_html__('Link', 'responsive-tabs-for-elementor'),
313	'type' => Controls_Manager::URL,
314	'dynamic' => [
315	'active' => true,
316	],
317	'default' => [
318	'url' => '',
319	],
320	]
321	);
322
323	$repeater->add_control(
324	'parallax_subtitle_size',
325	[
326	'label' => esc_html__('Size', 'elementor'),
327	'type' => Controls_Manager::SELECT,
328	'options' => [
329	'default' => esc_html__('Default', 'responsive-tabs-for-elementor'),
330	'small' => esc_html__('Small', 'responsive-tabs-for-elementor'),
331	'medium' => esc_html__('Medium', 'responsive-tabs-for-elementor'),
332	'large' => esc_html__('Large', 'responsive-tabs-for-elementor'),
333	'xl' => esc_html__('XL', 'responsive-tabs-for-elementor'),
334	'xxl' => esc_html__('XXL', 'responsive-tabs-for-elementor'),
335	],
336	'default' => 'default',
337	'condition' => [
338	'parallax_subtitle_size!' => 'default',
339	],
340	]
341	);
342
343	$repeater->add_control(
344	'parallax_subtitle_header_size',
345	[
346	'label' => esc_html__('HTML Tag', 'responsive-tabs-for-elementor'),
347	'type' => Controls_Manager::SELECT,
348	'options' => [
349	'h1' => 'H1',
350	'h2' => 'H2',
351	'h3' => 'H3',
352	'h4' => 'H4',
353	'h5' => 'H5',
354	'h6' => 'H6',
355	'div' => 'div',
356	'span' => 'span',
357	'p' => 'p',
358	],
359	'default' => 'p',
360	]
361	);
362
363	$repeater->add_control(
364	'parallax_content',
365	[
366	'label' => __('Content', 'responsive-tabs-for-elementor'),
367	'type' => Controls_Manager::WYSIWYG,
368	'default' => __('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>', 'responsive-tabs-for-elementor'),
369	'rows' => 20,
370	'dynamic' => [
371	'active' => true,
372	],
373	'separator' => 'before',
374	]
375	);
376
377	$this->add_control(
378	'parallax_tab',
379	[
380	'label' => __('Parallax Tabs', 'responsive-tabs-for-elementor'),
381	'type' => Controls_Manager::REPEATER,
382	'fields' => $repeater->get_controls(),
383	'title_field' => '{{{ parallax_title }}}',
384	'default' => [$this->get_default_tab(), $this->get_default_tab(), $this->get_default_tab()],
385	]
386	);
387
388	$this->end_controls_section();
389
390	// Additional Options Section
391	$this->start_controls_section(
392	'section_additional_options',
393	[
394	'label' => esc_html__('Additional Options', 'responsive-tabs-for-elementor'),
395	]
396	);
397
398	$this->add_responsive_control(
399	'direction',
400	[
401	'label' => esc_html__('Direction', 'responsive-tabs-for-elementor'),
402	'type' => Controls_Manager::SELECT,
403	'default' => 'vertical',
404	'options' => [
405	'vertical' => esc_html__('Vertical', 'responsive-tabs-for-elementor'),
406	'horizontal' => esc_html__('Horizontal', 'responsive-tabs-for-elementor'),
407	],
408	'frontend_available' => true,
409	]
410	);
411
412	$this->add_control(
413	'parallax_loop',
414	[
415	'label' => esc_html__('Loop', 'responsive-tabs-for-elementor'),
416	'type' => Controls_Manager::SWITCHER,
417	'label_on' => __('Yes', 'responsive-tabs-for-elementor'),
418	'label_off' => __('No', 'responsive-tabs-for-elementor'),
419	'return_value' => 'yes',
420	'default' => 'yes',
421	'frontend_available' => true,
422	]
423	);
424
425	$this->add_control(
426	'parallax_mousewheel',
427	[
428	'label' => esc_html__('Mousewheel', 'responsive-tabs-for-elementor'),
429	'type' => Controls_Manager::SWITCHER,
430	'label_on' => __('Yes', 'responsive-tabs-for-elementor'),
431	'label_off' => __('No', 'responsive-tabs-for-elementor'),
432	'return_value' => 'yes',
433	'default' => 'yes',
434	'frontend_available' => true,
435	]
436	);
437
438	$this->add_control(
439	'parallax_grabcursor',
440	[
441	'label' => esc_html__('Grab Cursor', 'responsive-tabs-for-elementor'),
442	'type' => Controls_Manager::SWITCHER,
443	'label_on' => __('Yes', 'responsive-tabs-for-elementor'),
444	'label_off' => __('No', 'responsive-tabs-for-elementor'),
445	'return_value' => 'yes',
446	'default' => 'yes',
447	'frontend_available' => true,
448	]
449	);
450
451	$this->add_control(
452	'autoplay',
453	[
454	'label' => esc_html__('Autoplay', 'responsive-tabs-for-elementor'),
455	'type' => Controls_Manager::SELECT,
456	'default' => 'no',
457	'options' => [
458	'yes' => esc_html__('Yes', 'responsive-tabs-for-elementor'),
459	'no' => esc_html__('No', 'responsive-tabs-for-elementor'),
460	],
461	'frontend_available' => true,
462	]
463	);
464
465	$this->add_control(
466	'autoplay_speed',
467	[
468	'label' => esc_html__('Autoplay speed', 'responsive-tabs-for-elementor'),
469	'type' => Controls_Manager::NUMBER,
470	'default' => 5000,
471	'frontend_available' => true,
472	]
473	);
474
475	$this->add_control(
476	'navigation',
477	[
478	'label' => esc_html__('Navigation', 'responsive-tabs-for-elementor'),
479	'type' => Controls_Manager::SELECT,
480	'default' => 'dots',
481	'options' => [
482	'dots' => esc_html__('Dots', 'responsive-tabs-for-elementor'),
483	'none' => esc_html__('None', 'responsive-tabs-for-elementor'),
484	],
485	'frontend_available' => true,
486	]
487	);
488
489	$this->end_controls_section();
490
491	// General styles Section
492	$this->start_controls_section(
493	'general_styles_section',
494	[
495	'label' => esc_html__('General Styles', 'responsive-tabs-for-elementor'),
496	'tab' => Controls_Manager::TAB_STYLE,
497	]
498	);
499
500	$this->add_responsive_control(
501	'parallax_row_position',
502	[
503	'label' => esc_html__('Position', 'responsive-tabs-for-elementor'),
504	'type' => Controls_Manager::CHOOSE,
505	'options' => [
506	'row-reverse' => [
507	'title' => esc_html__('Row-Reverse', 'responsive-tabs-for-elementor'),
508	'icon' => 'eicon-order-start',
509	],
510	'row' => [
511	'title' => esc_html__('Row', 'responsive-tabs-for-elementor'),
512	'icon' => 'eicon-order-end',
513	],
514	'column-reverse' => [
515	'title' => esc_html__('Column-Reverse', 'responsive-tabs-for-elementor'),
516	'icon' => 'eicon-v-align-top',
517	],
518	'column' => [
519	'title' => esc_html__('Column', 'responsive-tabs-for-elementor'),
520	'icon' => 'eicon-v-align-bottom',
521	],
522	],
523	'frontend_available' => true,
524	'selectors' => [
525	'{{WRAPPER}} .parallax-tab .swiper-slide' => 'flex-direction: {{VALUE}}',
526	],
527	]
528	);
529
530	$this->add_responsive_control(
531	'parallax_width',
532	[
533	'label' => esc_html__('Width', 'responsive-tabs-for-elementor'),
534	'type' => Controls_Manager::SLIDER,
535	'default' => [
536	'unit' => '%',
537	'size' => '100'
538	],
539	'size_units' => ['px', '%', 'em', 'rem', 'vh', 'custom'],
540	'selectors' => [
541	'{{WRAPPER}} .parallax-tab .parallax-tab__image' => 'width: {{SIZE}}{{UNIT}}',
542	],
543	'condition' => [
544	'parallax_row_position' => ['column-reverse', 'column'],
545	],
546	]
547	);
548
549	$this->add_responsive_control(
550	'parallax_height',
551	[
552	'label' => esc_html__('Height', 'responsive-tabs-for-elementor'),
553	'type' => Controls_Manager::SLIDER,
554	'default' => [
555	'unit' => 'vh',
556	],
557	'size_units' => ['px', '%', 'em', 'rem', 'vh', 'custom'],
558	'selectors' => [
559	'{{WRAPPER}} .parallax-tab' => 'height: {{SIZE}}{{UNIT}}',
560	],
561	]
562	);
563
564	$this->end_controls_section();
565
566	// Title styles Section
567	$this->start_controls_section(
568	'title_styles_section',
569	[
570	'label' => esc_html__('Title Section Styles', 'responsive-tabs-for-elementor'),
571	'tab' => Controls_Manager::TAB_STYLE,
572	]
573	);
574
575	$this->add_control(
576	'enable_title_section',
577	[
578	'label' => esc_html__('Show Title', 'responsive-tabs-for-elementor'),
579	'type' => Controls_Manager::SWITCHER,
580	'label_on' => __('Yes', 'responsive-tabs-for-elementor'),
581	'label_off' => __('No', 'responsive-tabs-for-elementor'),
582	'return_value' => 'yes',
583	'default' => 'yes',
584	'frontend_available' => true,
585	]
586	);
587
588	$this->add_responsive_control(
589	'title_section_margin',
590	[
591	'label' => esc_html__('Margin', 'responsive-tabs-for-elementor'),
592	'type' => Controls_Manager::DIMENSIONS,
593	'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
594	'selectors' => [
595	'{{WRAPPER}} .parallax-tab .parallax-tab__title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
596	],
597	'separator' => 'before',
598	'condition' => [
599	'enable_title_section' => 'yes',
600	],
601	]
602	);
603
604	$this->add_responsive_control(
605	'title_section_padding',
606	[
607	'label' => esc_html__('Padding', 'responsive-tabs-for-elementor'),
608	'type' => Controls_Manager::DIMENSIONS,
609	'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
610	'selectors' => [
611	'{{WRAPPER}} .parallax-tab .parallax-tab__title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
612	],
613	'condition' => [
614	'enable_title_section' => 'yes',
615	],
616	]
617	);
618
619	$this->add_control(
620	'title_section_color',
621	[
622	'label' => esc_html__('Title Color', 'responsive-tabs-for-elementor'),
623	'type' => Controls_Manager::COLOR,
624	'selectors' => [
625	'{{WRAPPER}} .parallax-tab .parallax-tab__title *' => 'color: {{VALUE}}',
626	],
627	'condition' => [
628	'enable_title_section' => 'yes',
629	],
630	]
631	);
632
633	$this->add_group_control(
634	Group_Control_Typography::get_type(),
635	[
636	'name' => 'title_section_typography',
637	'label' => esc_html__('Title Typography', 'responsive-tabs-for-elementor'),
638	'selector' => '{{WRAPPER}} .parallax-tab .parallax-tab__title *',
639	'condition' => [
640	'enable_title_section' => 'yes',
641	],
642	]
643	);
644
645	$this->add_responsive_control(
646	'title_section_align',
647	[
648	'label' => esc_html__('Title Alignment', 'responsive-tabs-for-elementor'),
649	'type' => Controls_Manager::CHOOSE,
650	'options' => [
651	'left' => [
652	'title' => esc_html__('Left', 'responsive-tabs-for-elementor'),
653	'icon' => 'eicon-text-align-left',
654	],
655	'center' => [
656	'title' => esc_html__('Center', 'responsive-tabs-for-elementor'),
657	'icon' => 'eicon-text-align-center',
658	],
659	'right' => [
660	'title' => esc_html__('Right', 'responsive-tabs-for-elementor'),
661	'icon' => 'eicon-text-align-right',
662	],
663	],
664	'default' => 'left',
665	'selectors' => [
666	'{{WRAPPER}} .parallax-tab .parallax-tab__title *' => 'text-align: {{VALUE}}',
667	],
668	'condition' => [
669	'enable_title_section' => 'yes',
670	],
671	]
672	);
673
674	$this->add_responsive_control(
675	'title_section__width',
676	[
677	'label' => esc_html__('Title Width', 'responsive-tabs-for-elementor'),
678	'type' => Controls_Manager::SLIDER,
679	'size_units' => ['px', '%', 'custom'],
680	'default' => [
681	'unit' => '%',
682	],
683	'range' => [
684	'%' => [
685	'min' => 0,
686	'max' => 100,
687	],
688	],
689	'selectors' => [
690	'{{WRAPPER}} .parallax-tab .parallax-tab__title' => 'width: {{SIZE}}{{UNIT}}',
691	],
692	'condition' => [
693	'enable_title_section' => 'yes',
694	],
695	]
696	);
697
698	$this->end_controls_section();
699
700	// Subtitle styles Section
701	$this->start_controls_section(
702	'subtitle_styles_section',
703	[
704	'label' => esc_html__('Subtitle Section Styles', 'responsive-tabs-for-elementor'),
705	'tab' => Controls_Manager::TAB_STYLE,
706	]
707	);
708
709	$this->add_control(
710	'enable_subtitle_section',
711	[
712	'label' => esc_html__('Show Subtitle', 'responsive-tabs-for-elementor'),
713	'type' => Controls_Manager::SWITCHER,
714	'label_on' => __('Yes', 'responsive-tabs-for-elementor'),
715	'label_off' => __('No', 'responsive-tabs-for-elementor'),
716	'return_value' => 'yes',
717	'default' => 'yes',
718	'frontend_available' => true,
719	]
720	);
721
722	$this->add_responsive_control(
723	'subtitle_section_margin',
724	[
725	'label' => esc_html__('Margin', 'responsive-tabs-for-elementor'),
726	'type' => Controls_Manager::DIMENSIONS,
727	'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
728	'selectors' => [
729	'{{WRAPPER}} .parallax-tab .parallax-tab__subtitle' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
730	],
731	'separator' => 'before',
732	'condition' => [
733	'enable_subtitle_section' => 'yes',
734	],
735	]
736	);
737
738	$this->add_responsive_control(
739	'subtitle_section_padding',
740	[
741	'label' => esc_html__('Padding', 'responsive-tabs-for-elementor'),
742	'type' => Controls_Manager::DIMENSIONS,
743	'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
744	'selectors' => [
745	'{{WRAPPER}} .parallax-tab .parallax-tab__subtitle' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
746	],
747	'condition' => [
748	'enable_subtitle_section' => 'yes',
749	],
750	]
751	);
752
753	$this->add_control(
754	'subtitle_section_color',
755	[
756	'label' => esc_html__('Subtitle Color', 'responsive-tabs-for-elementor'),
757	'type' => Controls_Manager::COLOR,
758	'selectors' => [
759	'{{WRAPPER}} .parallax-tab .parallax-tab__subtitle *' => 'color: {{VALUE}}',
760	],
761	'condition' => [
762	'enable_subtitle_section' => 'yes',
763	],
764	]
765	);
766
767	$this->add_group_control(
768	Group_Control_Typography::get_type(),
769	[
770	'name' => 'subtitle_section_typography',
771	'label' => esc_html__('Subtitle Typography', 'responsive-tabs-for-elementor'),
772	'selector' => '{{WRAPPER}} .parallax-tab .parallax-tab__subtitle *',
773	'condition' => [
774	'enable_subtitle_section' => 'yes',
775	],
776	]
777	);
778
779	$this->add_responsive_control(
780	'subtitle_section_align',
781	[
782	'label' => esc_html__('Subtitle Alignment', 'responsive-tabs-for-elementor'),
783	'type' => Controls_Manager::CHOOSE,
784	'options' => [
785	'left' => [
786	'title' => esc_html__('Left', 'responsive-tabs-for-elementor'),
787	'icon' => 'eicon-text-align-left',
788	],
789	'center' => [
790	'title' => esc_html__('Center', 'responsive-tabs-for-elementor'),
791	'icon' => 'eicon-text-align-center',
792	],
793	'right' => [
794	'title' => esc_html__('Right', 'responsive-tabs-for-elementor'),
795	'icon' => 'eicon-text-align-right',
796	],
797	],
798	'default' => 'right',
799	'selectors' => [
800	'{{WRAPPER}} .parallax-tab .parallax-tab__subtitle *' => 'text-align: {{VALUE}}',
801	],
802	'condition' => [
803	'enable_subtitle_section' => 'yes',
804	],
805	]
806	);
807
808	$this->add_responsive_control(
809	'subtitle_section__width',
810	[
811	'label' => esc_html__('Subtitle Width', 'responsive-tabs-for-elementor'),
812	'type' => Controls_Manager::SLIDER,
813	'size_units' => ['px', '%', 'custom'],
814	'default' => [
815	'unit' => '%',
816	],
817	'range' => [
818	'%' => [
819	'min' => 0,
820	'max' => 100,
821	],
822	],
823	'selectors' => [
824	'{{WRAPPER}} .parallax-tab .parallax-tab__subtitle' => 'width: {{SIZE}}{{UNIT}}',
825	],
826	'condition' => [
827	'enable_subtitle_section' => 'yes',
828	],
829	]
830	);
831
832	$this->end_controls_section();
833
834	// Content Styles Section
835	$this->start_controls_section(
836	'content_styles_section',
837	[
838	'label' => esc_html__('Content Styles', 'responsive-tabs-for-elementor'),
839	'tab' => Controls_Manager::TAB_STYLE,
840	]
841	);
842
843	$this->add_control(
844	'enable_content_section',
845	[
846	'label' => esc_html__('Show Content', 'responsive-tabs-for-elementor'),
847	'type' => Controls_Manager::SWITCHER,
848	'label_on' => __('Yes', 'responsive-tabs-for-elementor'),
849	'label_off' => __('No', 'responsive-tabs-for-elementor'),
850	'return_value' => 'yes',
851	'default' => 'yes',
852	'frontend_available' => true,
853	]
854	);
855
856	$this->add_responsive_control(
857	'content_section_margin',
858	[
859	'label' => esc_html__('Margin', 'responsive-tabs-for-elementor'),
860	'type' => Controls_Manager::DIMENSIONS,
861	'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
862	'selectors' => [
863	'{{WRAPPER}} .parallax-tab .parallax-tab__description' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
864	],
865	'separator' => 'before',
866	'condition' => [
867	'enable_content_section' => 'yes',
868	],
869	]
870	);
871
872	$this->add_responsive_control(
873	'content_section_padding',
874	[
875	'label' => esc_html__('Padding', 'responsive-tabs-for-elementor'),
876	'type' => Controls_Manager::DIMENSIONS,
877	'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
878	'selectors' => [
879	'{{WRAPPER}} .parallax-tab .parallax-tab__description' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
880	],
881	'condition' => [
882	'enable_content_section' => 'yes',
883	],
884	]
885	);
886
887	$this->add_control(
888	'content_color',
889	[
890	'label' => esc_html__('Content Color', 'responsive-tabs-for-elementor'),
891	'type' => Controls_Manager::COLOR,
892	'selectors' => [
893	'{{WRAPPER}} .parallax-tab .parallax-tab__description *' => 'color: {{VALUE}}',
894	],
895	'condition' => [
896	'enable_content_section' => 'yes',
897	],
898	]
899	);
900
901	$this->add_group_control(
902	Group_Control_Typography::get_type(),
903	[
904	'name' => 'content_typography',
905	'label' => esc_html__('Content Typography', 'responsive-tabs-for-elementor'),
906	'selector' => '{{WRAPPER}} .parallax-tab .parallax-tab__description *',
907	'condition' => [
908	'enable_content_section' => 'yes',
909	],
910	]
911	);
912
913	$this->add_responsive_control(
914	'content_section_align',
915	[
916	'label' => esc_html__('Content Alignment', 'responsive-tabs-for-elementor'),
917	'type' => Controls_Manager::CHOOSE,
918	'options' => [
919	'left' => [
920	'title' => esc_html__('Left', 'responsive-tabs-for-elementor'),
921	'icon' => 'eicon-text-align-left',
922	],
923	'center' => [
924	'title' => esc_html__('Center', 'responsive-tabs-for-elementor'),
925	'icon' => 'eicon-text-align-center',
926	],
927	'right' => [
928	'title' => esc_html__('Right', 'responsive-tabs-for-elementor'),
929	'icon' => 'eicon-text-align-right',
930	],
931	'justify' => [
932	'title' => esc_html__('Justify', 'responsive-tabs-for-elementor'),
933	'icon' => 'eicon-text-align-justify',
934	],
935	],
936	'default' => 'left',
937	'selectors' => [
938	'{{WRAPPER}} .parallax-tab .parallax-tab__description *' => 'text-align: {{VALUE}}',
939	],
940	'condition' => [
941	'enable_content_section' => 'yes',
942	],
943	]
944	);
945
946	$this->add_responsive_control(
947	'content_section__width',
948	[
949	'label' => esc_html__('Content Width', 'responsive-tabs-for-elementor'),
950	'type' => Controls_Manager::SLIDER,
951	'size_units' => ['px', '%', 'custom'],
952	'default' => [
953	'unit' => '%',
954	],
955	'range' => [
956	'%' => [
957	'min' => 0,
958	'max' => 100,
959	],
960	],
961	'selectors' => [
962	'{{WRAPPER}} .parallax-tab .parallax-tab__description' => 'max-width: {{SIZE}}{{UNIT}}',
963	],
964	'condition' => [
965	'enable_content_section' => 'yes',
966	],
967	]
968	);
969
970	$this->end_controls_section();
971
972	// Overlay And Filter Styles Section
973	$this->start_controls_section(
974	'overlay_styles_section',
975	[
976	'label' => esc_html__('Overlay And Filter Styles', 'responsive-tabs-for-elementor'),
977	'tab' => Controls_Manager::TAB_STYLE,
978	]
979	);
980
981	$this->start_controls_tabs('filter_background_images');
982
983	$this->start_controls_tab(
984	'filter_background_left',
985	[
986	'label' => esc_html__('Left Filter', 'responsive-tabs-for-elementor'),
987	]
988	);
989
990	$this->add_control(
991	'filter_background_left_color',
992	[
993	'label' => esc_html__('Color', 'responsive-tabs-for-elementor'),
994	'type' => Controls_Manager::COLOR,
995	'selectors' => [
996	'{{WRAPPER}} .parallax-tab .parallax-tab__image_left .parallax-tab__filter' => 'background: {{VALUE}}',
997	],
998	]
999	);
1000
1001	$this->end_controls_tab();
1002
1003	$this->start_controls_tab(
1004	'filter_background_right',
1005	[
1006	'label' => esc_html__('Right Filter', 'responsive-tabs-for-elementor'),
1007	]
1008	);
1009
1010	$this->add_control(
1011	'filter_background_right_color',
1012	[
1013	'label' => esc_html__('Color', 'responsive-tabs-for-elementor'),
1014	'type' => Controls_Manager::COLOR,
1015	'selectors' => [
1016	'{{WRAPPER}} .parallax-tab .parallax-tab__image_right .parallax-tab__filter' => 'background: {{VALUE}}',
1017	],
1018	]
1019	);
1020
1021	$this->end_controls_tab();
1022	$this->end_controls_tabs();
1023
1024	$this->start_controls_tabs('overlay_background_images',
1025	[
1026	'separator' => 'before',
1027	]
1028	);
1029
1030	$this->start_controls_tab(
1031	'overlay_background_left',
1032	[
1033	'label' => esc_html__('Left Overlay', 'responsive-tabs-for-elementor'),
1034	]
1035	);
1036
1037	$this->add_control(
1038	'overlay_background_left_color',
1039	[
1040	'label' => esc_html__('Color', 'responsive-tabs-for-elementor'),
1041	'type' => Controls_Manager::COLOR,
1042	'selectors' => [
1043	'{{WRAPPER}} .parallax-tab .parallax-tab__image_inner.parallax-tab__image_left' => 'background-color: {{VALUE}}',
1044	],
1045	]
1046	);
1047
1048	$this->end_controls_tab();
1049
1050	$this->start_controls_tab(
1051	'overlay_background_right',
1052	[
1053	'label' => esc_html__('Right Overlay', 'responsive-tabs-for-elementor'),
1054	]
1055	);
1056
1057	$this->add_control(
1058	'overlay_background_right_color',
1059	[
1060	'label' => esc_html__('Color', 'responsive-tabs-for-elementor'),
1061	'type' => Controls_Manager::COLOR,
1062	'selectors' => [
1063	'{{WRAPPER}} .parallax-tab .parallax-tab__image_inner.parallax-tab__image_right' => 'background-color: {{VALUE}}',
1064	],
1065	]
1066	);
1067
1068	$this->end_controls_tab();
1069	$this->end_controls_tabs();
1070
1071	$this->end_controls_section();
1072
1073	// Pagination Styles Section
1074	$this->start_controls_section(
1075	'pagination_styles_section',
1076	[
1077	'label' => esc_html__('Pagination Styles', 'responsive-tabs-for-elementor'),
1078	'tab' => Controls_Manager::TAB_STYLE,
1079	]
1080	);
1081
1082	$this->add_responsive_control(
1083	'pagination_margin',
1084	[
1085	'label' => esc_html__('Margin', 'responsive-tabs-for-elementor'),
1086	'type' => Controls_Manager::DIMENSIONS,
1087	'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
1088	'selectors' => [
1089	'{{WRAPPER}} .parallax-tab__pagination' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1090	],
1091	'condition' => [
1092	'direction' => 'horizontal',
1093	],
1094	]
1095	);
1096
1097	$this->add_responsive_control(
1098	'pagination_padding',
1099	[
1100	'label' => esc_html__('Padding', 'responsive-tabs-for-elementor'),
1101	'type' => Controls_Manager::DIMENSIONS,
1102	'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
1103	'selectors' => [
1104	'{{WRAPPER}} .parallax-tab__pagination' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1105	],
1106	'condition' => [
1107	'direction' => 'horizontal',
1108	],
1109	]
1110	);
1111
1112	$this->add_responsive_control(
1113	'pagination_align',
1114	[
1115	'label' => esc_html__('Alignment', 'responsive-tabs-for-elementor'),
1116	'type' => Controls_Manager::CHOOSE,
1117	'options' => [
1118	'left' => [
1119	'title' => esc_html__('Left', 'responsive-tabs-for-elementor'),
1120	'icon' => 'eicon-order-start',
1121	],
1122	'center' => [
1123	'title' => esc_html__('Center', 'responsive-tabs-for-elementor'),
1124	'icon' => 'eicon-shrink',
1125	],
1126	'right' => [
1127	'title' => esc_html__('Right', 'responsive-tabs-for-elementor'),
1128	'icon' => 'eicon-order-end',
1129	],
1130	],
1131	'default' => 'center',
1132	'selectors' => [
1133	'{{WRAPPER}} .parallax-tab__pagination' => 'text-align: {{VALUE}}',
1134	],
1135	'condition' => [
1136	'direction' => 'horizontal',
1137	],
1138	'separator' => 'after',
1139	]
1140	);
1141
1142	$this->add_responsive_control(
1143	'pagination_size',
1144	[
1145	'label' => esc_html__('Dots Size', 'responsive-tabs-for-elementor'),
1146	'type' => Controls_Manager::SLIDER,
1147	'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
1148	'range' => [
1149	'px' => [
1150	'min' => 5,
1151	'max' => 30,
1152	],
1153	],
1154	'selectors' => [
1155	'{{WRAPPER}} .parallax-tab__pagination .swiper-pagination-bullet' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}',
1156	],
1157	]
1158	);
1159
1160	$this->add_responsive_control(
1161	'pagination_active_size',
1162	[
1163	'label' => esc_html__('Active Dot Size', 'responsive-tabs-for-elementor'),
1164	'type' => Controls_Manager::SLIDER,
1165	'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
1166	'range' => [
1167	'px' => [
1168	'min' => 5,
1169	'max' => 30,
1170	],
1171	],
1172	'selectors' => [
1173	'{{WRAPPER}} .parallax-tab__pagination .swiper-pagination-bullet-active' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}',
1174	],
1175	]
1176	);
1177
1178	$this->add_control(
1179	'pagination_color',
1180	[
1181	'label' => esc_html__('Dots Color', 'responsive-tabs-for-elementor'),
1182	'type' => Controls_Manager::COLOR,
1183	'selectors' => [
1184	'{{WRAPPER}} .parallax-tab__pagination .swiper-pagination-bullet' => 'background: {{VALUE}}',
1185	],
1186	'separator' => 'before',
1187	]
1188	);
1189
1190	$this->add_control(
1191	'pagination_hover_color',
1192	[
1193	'label' => esc_html__('Dots Hover Color', 'responsive-tabs-for-elementor'),
1194	'type' => Controls_Manager::COLOR,
1195	'selectors' => [
1196	'{{WRAPPER}} .parallax-tab__pagination .swiper-pagination-bullet:hover' => 'background: {{VALUE}};',
1197	],
1198	]
1199	);
1200
1201	$this->add_control(
1202	'pagination_active_color',
1203	[
1204	'label' => esc_html__('Active Dot Color', 'responsive-tabs-for-elementor'),
1205	'type' => Controls_Manager::COLOR,
1206	'selectors' => [
1207	'{{WRAPPER}} .parallax-tab__pagination .swiper-pagination-bullet-active' => 'background: {{VALUE}};',
1208	],
1209	]
1210	);
1211
1212	$this->add_responsive_control(
1213	'pagination_border_radius',
1214	[
1215	'label' => esc_html__('Border Radius Dots', 'responsive-tabs-for-elementor'),
1216	'type' => Controls_Manager::DIMENSIONS,
1217	'size_units' => ['px', '%', 'em', 'rem', 'custom'],
1218	'selectors' => [
1219	'{{WRAPPER}} .parallax-tab__pagination .swiper-pagination-bullet' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1220	],
1221	]
1222	);
1223
1224	$this->end_controls_section();
1225	}
1226
1227	/**
1228	* Render the widget output on the frontend.
1229	*
1230	* Written in PHP and used to generate the final HTML.
1231	*
1232	* @since 11.0.1
1233	*
1234	* @access protected
1235	*/
1236	protected function render()
1237	{
1238	$settings = $this->get_settings_for_display();
1239
1240	if (Responsive_Tabs_Assets::is_legacy_elementor()) {
1241	$this->add_render_attribute(
1242	'responsive_tabs',
1243	[
1244	'class' => ['tabs-params'],
1245	'data-loop-responsivetabs' => esc_attr($settings['parallax_loop']),
1246	'data-mousewheel-responsivetabs' => esc_attr($settings['parallax_mousewheel']),
1247	'data-grabcursor-responsivetabs' => esc_attr($settings['parallax_grabcursor']),
1248	'data-navigation-responsivetabs' => esc_attr($settings['navigation']),
1249	'data-autoplay-responsivetabs' => esc_attr($settings['autoplay']),
1250	'data-autoplayspeed-responsivetabs' => esc_attr($settings['autoplay_speed']),
1251	'data-direction-responsivetabs' => esc_attr($settings['direction']),
1252	'data-direction-responsivetabs-tablet' => esc_attr($settings['direction_tablet']),
1253	'data-direction-responsivetabs-mobile' => esc_attr($settings['direction_mobile']),
1254	]
1255	);
1256	}
1257
1258	if ($settings['parallax_tab']) {
1259	if (Responsive_Tabs_Assets::is_legacy_elementor()) { ?>
1260	<div <?php echo $this->get_render_attribute_string('responsive_tabs'); ?>></div>
1261	<?php }
1262
1263	$this->add_render_attribute(
1264	'parallax_slider',
1265	[
1266	'class' => ['swiper', 'swiperTabs', 'parallax-tab'],
1267	'data-parallax-loop' => esc_attr($settings['parallax_loop'] ?? ''),
1268	'data-parallax-mousewheel' => esc_attr($settings['parallax_mousewheel'] ?? ''),
1269	'data-parallax-grabcursor' => esc_attr($settings['parallax_grabcursor'] ?? ''),
1270	'data-parallax-autoplay' => esc_attr($settings['autoplay'] ?? 'no'),
1271	'data-parallax-autoplay-speed' => esc_attr($settings['autoplay_speed'] ?? 5000),
1272	'data-parallax-navigation' => esc_attr($settings['navigation'] ?? 'dots'),
1273	'data-parallax-direction' => esc_attr($settings['direction'] ?? 'vertical'),
1274	'data-parallax-direction-tablet' => esc_attr($settings['direction_tablet'] ?? ''),
1275	'data-parallax-direction-mobile' => esc_attr($settings['direction_mobile'] ?? ''),
1276	]
1277	);
1278	?>
1279
1280	<section <?php echo $this->get_render_attribute_string('parallax_slider'); ?>>
1281	<div class="swiper-wrapper parallax-tab__container">
1282	<?php foreach ($settings['parallax_tab'] as $parallax_items) { ?>
1283	<div class="swiper-slide">
1284	<div class="parallax-tab__image">
1285	<div class="parallax-tab__image_inner parallax-tab__image_left"
1286	style="background-image: url('<?php echo esc_url($parallax_items['parallax_background_image_left']['url']); ?>');">
1287	<?php if ($settings['enable_title_section'] === 'yes') { ?>
1288	<div class="parallax-tab__title">
1289	<?php if (!empty($parallax_items['parallax_size'])) {
1290	$this->add_render_attribute('parallax_title', 'class', 'elementor-size-' . $parallax_items['parallax_size']);
1291	} else {
1292	$this->add_render_attribute('parallax_title', 'class', 'elementor-size-default');
1293	}
1294
1295	$this->add_inline_editing_attributes('parallax_title');
1296
1297	$title = $parallax_items['parallax_title'];
1298
1299	if (!empty($parallax_items['parallax_link']['url'])) {
1300	$this->add_link_attributes('url', $parallax_items['parallax_link']);
1301
1302	$title = sprintf('<a %1$s>%2$s</a>', $this->get_render_attribute_string('url'), $title);
1303	}
1304
1305	$parallax_title = sprintf('<%1$s %2$s>%3$s</%1$s>', Utils::validate_html_tag($parallax_items['parallax_header_size']), $this->get_render_attribute_string('parallax_title'), $title);
1306
1307	echo wp_kses_post($parallax_title); ?>
1308	</div>
1309	<?php }
1310
1311	if ($settings['enable_subtitle_section'] === 'yes') { ?>
1312	<div class="parallax-tab__subtitle">
1313	<?php if (!empty($parallax_items['parallax_subtitle_size'])) {
1314	$this->add_render_attribute('parallax_subtitle', 'class', 'elementor-size-' . $parallax_items['parallax_subtitle_size']);
1315	} else {
1316	$this->add_render_attribute('parallax_subtitle', 'class', 'elementor-size-default');
1317	}
1318
1319	$this->add_inline_editing_attributes('parallax_subtitle');
1320
1321	$subtitle = $parallax_items['parallax_subtitle'];
1322
1323	if (!empty($parallax_items['parallax_subtitle_link']['url'])) {
1324	$this->add_link_attributes('url', $parallax_items['parallax_subtitle_link']);
1325
1326	$subtitle = sprintf('<a %1$s>%2$s</a>', $this->get_render_attribute_string('url'), $subtitle);
1327	}
1328
1329	$parallax_subtitle = sprintf('<%1$s %2$s>%3$s</%1$s>', Utils::validate_html_tag($parallax_items['parallax_subtitle_header_size']), $this->get_render_attribute_string('parallax_subtitle'), $subtitle);
1330
1331	echo wp_kses_post($parallax_subtitle); ?>
1332	</div>
1333	<?php } ?>
1334
1335	<div class="parallax-tab__filter"></div>
1336	</div>
1337	</div>
1338	<div class="parallax-tab__image">
1339	<div class="parallax-tab__image_inner parallax-tab__image_right"
1340	style="background-image: url('<?php echo esc_url($parallax_items['parallax_background_image_right']['url']); ?>');">
1341	<?php if ($settings['enable_content_section'] === 'yes') { ?>
1342	<div class="parallax-tab__description">
1343	<?php echo wp_kses_post($parallax_items['parallax_content']); ?>
1344	</div>
1345	<?php } ?>
1346
1347	<div class="parallax-tab__filter"></div>
1348	</div>
1349	</div>
1350	</div>
1351	<?php } ?>
1352	</div>
1353	<div class="parallax-tab__pagination swiper-pagination"></div>
1354	</section>
1355
1356	<?php } ?>
1357	<?php }
1358	}
1359