premium-vscroll.php — Premium Addons for Elementor – Powerful Elementor Templates & Widgets 4.10.30

premium-addons-for-elementor / widgets / premium-vscroll.php

premium-addons-for-elementor / widgets Last commit date

premium-vscroll.php

1293 lines

1	<?php
2	/**
3	* Premium Vertical Scroll.
4	*/
5
6	namespace PremiumAddons\Widgets;
7
8	// Elementor Classes.
9	use Elementor\Widget_Base;
10	use Elementor\Controls_Manager;
11	use Elementor\Repeater;
12	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
13	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
14	use Elementor\Group_Control_Border;
15	use Elementor\Group_Control_Typography;
16	use Elementor\Group_Control_Box_Shadow;
17
18	// PremiumAddons Classes.
19	use PremiumAddons\Includes\Helper_Functions;
20	use PremiumAddons\Includes\Premium_Template_Tags;
21
22	if ( ! defined( 'ABSPATH' ) ) {
23	exit(); // If this file is called directly, abort.
24	}
25
26	/**
27	* Class Premium_Vscroll
28	*/
29	class Premium_Vscroll extends Widget_Base {
30
31	/**
32	* Template Instance
33	*
34	* @var template_instance
35	*/
36	protected $template_instance;
37
38	/**
39	* Get Elementor Helper Instance.
40	*
41	* @since 1.0.0
42	* @access public
43	*/
44	public function getTemplateInstance() {
45	return $this->template_instance = Premium_Template_Tags::getInstance();
46	}
47
48	/**
49	* Retrieve Widget Name.
50	*
51	* @since 1.0.0
52	* @access public
53	*/
54	public function get_name() {
55	return 'premium-vscroll';
56	}
57
58	/**
59	* Retrieve Widget Title.
60	*
61	* @since 1.0.0
62	* @access public
63	*/
64	public function get_title() {
65	return __( 'Vertical Scroll', 'premium-addons-for-elementor' );
66	}
67
68	/**
69	* Retrieve Widget Icon.
70	*
71	* @since 1.0.0
72	* @access public
73	*
74	* @return string widget icon.
75	*/
76	public function get_icon() {
77	return 'pa-vscroll';
78	}
79
80	/**
81	* Retrieve Widget Categories.
82	*
83	* @since 1.5.1
84	* @access public
85	*
86	* @return array Widget categories.
87	*/
88	public function get_categories() {
89	return array( 'premium-elements' );
90	}
91
92	/**
93	* Retrieve Widget Keywords.
94	*
95	* @since 1.0.0
96	* @access public
97	*
98	* @return string Widget keywords.
99	*/
100	public function get_keywords() {
101	return array( 'pa', 'premium', 'full', 'section', 'navigation', 'one', 'page' );
102	}
103
104	/**
105	* Retrieve Widget Dependent CSS.
106	*
107	* @since 1.0.0
108	* @access public
109	*
110	* @return array CSS style handles.
111	*/
112	public function get_style_depends() {
113	return array(
114	'premium-addons',
115	);
116	}
117
118	/**
119	* Retrieve Widget Dependent JS.
120	*
121	* @since 1.0.0
122	* @access public
123	*
124	* @return array JS script handles.
125	*/
126	public function get_script_depends() {
127	return array(
128	'pa-iscroll',
129	'pa-slimscroll',
130	'pa-vscroll',
131	);
132	}
133
134	/**
135	* Widget preview refresh button.
136	*
137	* @since 1.0.0
138	* @access public
139	*/
140	public function is_reload_preview_required() {
141	return true;
142	}
143
144	/**
145	* Retrieve Widget Support URL.
146	*
147	* @access public
148	*
149	* @return string support URL.
150	*/
151	public function get_custom_help_url() {
152	return 'https://premiumaddons.com/support/';
153	}
154
155	/**
156	* Register Video Box controls.
157	*
158	* @since 2.7.4
159	* @access protected
160	*/
161	protected function register_controls() { // phpcs:ignore PSR2.Methods.MethodDeclaration.Underscore
162
163	$this->start_controls_section(
164	'content_templates',
165	array(
166	'label' => __( 'Content', 'premium-addons-for-elementor' ),
167	)
168	);
169
170	$this->add_control(
171	'template_height_hint',
172	array(
173	'label' => '<span style="line-height: 1.4em;"><b>Important<br></b></span><ul style="line-height: 1.2"><li>1- Section Height needs to be set to default.</li><li>2- It\'s recommended that templates be the same height.</li><li>3- For navigation menu, you will need to add navigation menu items first</li></ul>',
174	'type' => Controls_Manager::RAW_HTML,
175
176	)
177	);
178
179	$this->add_control(
180	'content_type',
181	array(
182	'label' => __( 'Content Type', 'premium-addons-for-elementor' ),
183	'type' => Controls_Manager::SELECT,
184	'description' => __( 'Choose which method you prefer to insert sections.', 'premium-addons-for-elementor' ),
185	'options' => array(
186	'templates' => __( 'Elementor Templates', 'premium-addons-for-elementor' ),
187	'ids' => __( 'Section ID', 'premium-addons-for-elementor' ),
188	),
189	'default' => 'templates',
190	'label_block' => true,
191	)
192	);
193
194	$temp_repeater = new REPEATER();
195
196	$temp_repeater->add_control(
197	'live_temp_content',
198	array(
199	'label' => __( 'Template Title', 'premium-addons-for-elementor' ),
200	'type' => Controls_Manager::TEXT,
201	'classes' => 'premium-live-temp-title control-hidden',
202	'label_block' => true,
203	)
204	);
205
206	$temp_repeater->add_control(
207	'section_template_live',
208	array(
209	'type' => Controls_Manager::BUTTON,
210	'label_block' => true,
211	'button_type' => 'default papro-btn-block',
212	'text' => __( 'Create / Edit Template', 'premium-addons-for-elementor' ),
213	'event' => 'createLiveTemp',
214	)
215	);
216
217	$temp_repeater->add_control(
218	'section_template',
219	array(
220	'label' => __( 'OR Select Existing Template', 'premium-addons-for-elementor' ),
221	'type' => Controls_Manager::SELECT2,
222	'classes' => 'premium-live-temp-label',
223	'options' => $this->getTemplateInstance()->get_elementor_page_list(),
224	'multiple' => false,
225	'label_block' => true,
226	)
227	);
228
229	$temp_repeater->add_control(
230	'template_id',
231	array(
232	'label' => __( 'Section ID', 'premium-addons-for-elementor' ),
233	'type' => Controls_Manager::TEXT,
234	'description' => __( 'Use this option to add unique ID to your template section', 'premium-addons-for-elementor' ),
235	'dynamic' => array( 'active' => true ),
236	)
237	);
238
239	$this->add_control(
240	'section_repeater',
241	array(
242	'label' => __( 'Sections', 'premium-addons-for-elementor' ),
243	'type' => Controls_Manager::REPEATER,
244	'fields' => $temp_repeater->get_controls(),
245	'condition' => array(
246	'content_type' => 'templates',
247	),
248	'title_field' => '{{{ "" !== section_template ? section_template : "Live Template" }}}',
249	)
250	);
251
252	$id_repeater = new REPEATER();
253
254	$id_repeater->add_control(
255	'section_id',
256	array(
257	'label' => __( 'Section ID', 'premium-addons-for-elementor' ),
258	'type' => Controls_Manager::TEXT,
259	'dynamic' => array( 'active' => true ),
260	)
261	);
262
263	$this->add_control(
264	'id_repeater',
265	array(
266	'label' => __( 'Sections', 'premium-addons-for-elementor' ),
267	'type' => Controls_Manager::REPEATER,
268	'fields' => $id_repeater->get_controls(),
269	'condition' => array(
270	'content_type' => 'ids',
271	),
272	'title_field' => '{{{ section_id }}}',
273	)
274	);
275
276	$this->end_controls_section();
277
278	$this->start_controls_section(
279	'nav_menu',
280	array(
281	'label' => __( 'Navigation', 'premium-addons-for-elementor' ),
282	)
283	);
284
285	$this->add_control(
286	'nav_menu_switch',
287	array(
288	'label' => __( 'Navigation Menu', 'premium-addons-for-elementor' ),
289	'type' => Controls_Manager::SWITCHER,
290	'description' => __( 'This option works only on the frontend', 'premium-addons-for-elementor' ),
291	)
292	);
293
294	$this->add_control(
295	'navigation_menu_pos',
296	array(
297	'label' => __( 'Position', 'premium-addons-for-elementor' ),
298	'type' => Controls_Manager::SELECT,
299	'options' => array(
300	'left' => __( 'Left', 'premium-addons-for-elementor' ),
301	'right' => __( 'Right', 'premium-addons-for-elementor' ),
302	),
303	'default' => 'left',
304	'condition' => array(
305	'nav_menu_switch' => 'yes',
306	),
307	)
308	);
309
310	$this->add_responsive_control(
311	'navigation_menu_pos_offset_top',
312	array(
313	'label' => __( 'Offset Top', 'premium-addons-for-elementor' ),
314	'type' => Controls_Manager::SLIDER,
315	'size_units' => array( 'px', '%', 'em' ),
316	'selectors' => array(
317	'{{WRAPPER}} .premium-vscroll-nav-menu' => 'top: {{SIZE}}{{UNIT}};',
318	),
319	'condition' => array(
320	'nav_menu_switch' => 'yes',
321	),
322	)
323	);
324
325	$this->add_responsive_control(
326	'navigation_menu_pos_offset_left',
327	array(
328	'label' => __( 'Offset Left', 'premium-addons-for-elementor' ),
329	'type' => Controls_Manager::SLIDER,
330	'size_units' => array( 'px', '%', 'em' ),
331	'selectors' => array(
332	'{{WRAPPER}} .premium-vscroll-nav-menu.left' => 'left: {{SIZE}}{{UNIT}};',
333	),
334	'condition' => array(
335	'nav_menu_switch' => 'yes',
336	'navigation_menu_pos' => 'left',
337	),
338	)
339	);
340
341	$this->add_responsive_control(
342	'navigation_menu_pos_offset_right',
343	array(
344	'label' => __( 'Offset Right', 'premium-addons-for-elementor' ),
345	'type' => Controls_Manager::SLIDER,
346	'size_units' => array( 'px', '%', 'em' ),
347	'selectors' => array(
348	'{{WRAPPER}} .premium-vscroll-nav-menu.right' => 'right: {{SIZE}}{{UNIT}};',
349	),
350	'condition' => array(
351	'nav_menu_switch' => 'yes',
352	'navigation_menu_pos' => 'right',
353	),
354	)
355	);
356
357	$nav_repeater = new REPEATER();
358
359	$nav_repeater->add_control(
360	'nav_menu_item',
361	array(
362	'label' => __( 'List Item', 'premium-addons-for-elementor' ),
363	'type' => Controls_Manager::TEXT,
364	'dynamic' => array( 'active' => true ),
365	)
366	);
367
368	$this->add_control(
369	'nav_menu_repeater',
370	array(
371	'label' => __( 'Menu Items', 'premium-addons-for-elementor' ),
372	'type' => Controls_Manager::REPEATER,
373	'fields' => $nav_repeater->get_controls(),
374	'title_field' => '{{{ nav_menu_item }}}',
375	'condition' => array(
376	'nav_menu_switch' => 'yes',
377	),
378	)
379	);
380
381	$this->add_control(
382	'navigation_dots',
383	array(
384	'label' => __( 'Navigation Dots', 'premium-addons-for-elementor' ),
385	'type' => Controls_Manager::SWITCHER,
386	'default' => 'yes',
387	'separator' => 'before',
388	'prefix_class' => 'premium-vscroll-nav-dots-',
389	)
390	);
391
392	$this->add_control(
393	'navigation_dots_pos',
394	array(
395	'label' => __( 'Horizontal Position', 'premium-addons-for-elementor' ),
396	'type' => Controls_Manager::SELECT,
397	'options' => array(
398	'left' => __( 'Left', 'premium-addons-for-elementor' ),
399	'right' => __( 'Right', 'premium-addons-for-elementor' ),
400	),
401	'default' => 'right',
402	'condition' => array(
403	'navigation_dots' => 'yes',
404	),
405	)
406	);
407
408	$this->add_control(
409	'navigation_dots_v_pos',
410	array(
411	'label' => __( 'Vertical Position', 'premium-addons-for-elementor' ),
412	'type' => Controls_Manager::SELECT,
413	'options' => array(
414	'top' => __( 'Top', 'premium-addons-for-elementor' ),
415	'middle' => __( 'Middle', 'premium-addons-for-elementor' ),
416	'bottom' => __( 'Bottom', 'premium-addons-for-elementor' ),
417	),
418	'default' => 'middle',
419	'condition' => array(
420	'navigation_dots' => 'yes',
421	),
422	)
423	);
424
425	$this->add_control(
426	'dots_shape',
427	array(
428	'label' => __( 'Shape', 'premium-addons-for-elementor' ),
429	'type' => Controls_Manager::SELECT,
430	'options' => array(
431	'circ' => __( 'Circles', 'premium-addons-for-elementor' ),
432	'lines' => __( 'Lines', 'premium-addons-for-elementor' ),
433	),
434	'default' => 'circ',
435	'condition' => array(
436	'navigation_dots' => 'yes',
437	),
438	)
439	);
440
441	$this->add_control(
442	'dots_tooltips_switcher',
443	array(
444	'label' => __( 'Tooltips Text', 'premium-addons-for-elementor' ),
445	'type' => Controls_Manager::SWITCHER,
446	'default' => 'yes',
447	'condition' => array(
448	'navigation_dots' => 'yes',
449	),
450	)
451	);
452
453	$this->add_control(
454	'dots_tooltips',
455	array(
456	'label' => __( 'Dots Tooltips Text', 'premium-addons-for-elementor' ),
457	'type' => Controls_Manager::TEXT,
458	'dynamic' => array( 'active' => true ),
459	'description' => __( 'Add text for each navigation dot separated by \',\'', 'premium-addons-for-elementor' ),
460	'condition' => array(
461	'navigation_dots' => 'yes',
462	'dots_tooltips_switcher' => 'yes',
463	),
464	)
465	);
466
467	$this->add_control(
468	'dots_animation',
469	array(
470	'label' => __( 'Entrance Animation', 'premium-addons-for-elementor' ),
471	'type' => Controls_Manager::ANIMATION,
472	'frontend_available' => true,
473	'render_type' => 'template',
474	'condition' => array(
475	'navigation_dots' => 'yes',
476	),
477	)
478	);
479
480	$this->add_control(
481	'dots_animation_duration',
482	array(
483	'label' => __( 'Animation Duration', 'premium-addons-for-elementor' ),
484	'type' => Controls_Manager::SELECT,
485	'default' => '',
486	'options' => array(
487	'slow' => __( 'Slow', 'premium-addons-for-elementor' ),
488	'' => __( 'Normal', 'premium-addons-for-elementor' ),
489	'fast' => __( 'Fast', 'premium-addons-for-elementor' ),
490	),
491	'condition' => array(
492	'navigation_dots' => 'yes',
493	'dots_animation!' => '',
494	),
495	)
496	);
497
498	$this->end_controls_section();
499
500	$this->start_controls_section(
501	'advanced_settings',
502	array(
503	'label' => __( 'Scroll Settings', 'premium-addons-for-elementor' ),
504	)
505	);
506
507	$this->add_control(
508	'scroll_effect',
509	array(
510	'label' => __( 'Scroll Effect', 'premium-addons-for-elementor' ),
511	'type' => Controls_Manager::SELECT,
512	'options' => array(
513	'default' => __( 'Default', 'premium-addons-for-elementor' ),
514	'parallax' => __( 'Parallax', 'premium-addons-for-elementor' ),
515	'scaleDown' => __( 'Zoomed Parallax', 'premium-addons-for-elementor' ),
516	'rotate' => __( 'Cube', 'premium-addons-for-elementor' ),
517	),
518	'default' => 'default',
519	)
520	);
521
522	$this->add_control(
523	'cube_effect_note',
524	array(
525	'raw' => __( 'Full Section scroll option is enabled by default for Cube effect for better UX.', 'premium-addons-for-elemeentor' ),
526	'type' => Controls_Manager::RAW_HTML,
527	'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
528	'condition' => array(
529	'scroll_effect' => 'rotate',
530	),
531	)
532	);
533
534	$this->add_control(
535	'new_effect_note',
536	array(
537	'raw' => __(
538	'Please note that the
539	animation will automatically be changed to default on touch devices for better performance.',
540	'premium-addons-for-elemeentor'
541	),
542	'type' => Controls_Manager::RAW_HTML,
543	'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
544	'condition' => array(
545	'scroll_effect!' => 'default',
546	),
547	)
548	);
549
550	$this->add_control(
551	'scroll_speed',
552	array(
553	'label' => __( 'Scroll Speed (sec)', 'premium-addons-for-elementor' ),
554	'type' => Controls_Manager::NUMBER,
555	'description' => __( 'Set scolling speed in seconds, default: 0.7', 'premium-addons-for-elementor' ),
556	)
557	);
558
559	$this->add_control(
560	'scroll_offset',
561	array(
562	'label' => __( 'Scroll Offset', 'premium-addons-for-elementor' ),
563	'type' => Controls_Manager::NUMBER,
564	'condition' => array(
565	'scroll_effect!' => array( 'rotate', 'scaleDown' ),
566	),
567	)
568	);
569
570	$this->add_control(
571	'full_section',
572	array(
573	'label' => __( 'Full Section Scroll', 'premium-addons-for-elementor' ),
574	'type' => Controls_Manager::SWITCHER,
575	'default' => 'yes',
576	'condition' => array(
577	'scroll_effect!' => 'rotate',
578	),
579	)
580	);
581
582	$this->add_control(
583	'save_state',
584	array(
585	'label' => __( 'Save to Browser History', 'premium-addons-for-elementor' ),
586	'type' => Controls_Manager::SWITCHER,
587	'description' => __( 'Enabling this option will save the current section ID to the browser history', 'premium-addons-for-elementor' ),
588	'default' => 'yes',
589	)
590	);
591
592	$this->add_control(
593	'full_section_touch',
594	array(
595	'label' => __( 'Enable Full Section Scroll on Touch Devices', 'premium-addons-for-elementor' ),
596	'type' => Controls_Manager::SWITCHER,
597	'condition' => array(
598	'full_section' => 'yes',
599	'scroll_effect!' => 'rotate',
600	),
601	)
602	);
603
604	$this->add_control(
605	'full_section_overflow',
606	array(
607	'label' => __( 'Check Content Overflow', 'premium-addons-for-elementor' ),
608	'type' => Controls_Manager::SWITCHER,
609	'description' => __( 'Enable this option to check if sections height is larger than screen height and add a scroll bar for the content', 'premium-addons-for-elementor' ),
610	'condition' => array(
611	'full_section' => 'yes',
612	'scroll_effect!' => 'rotate',
613	),
614	'separator' => 'before',
615	'default' => 'true',
616	'return_value' => 'true',
617	)
618	);
619
620	$this->end_controls_section();
621
622	$this->start_controls_section(
623	'section_pa_docs',
624	array(
625	'label' => __( 'Helpful Documentations', 'premium-addons-for-elementor' ),
626	)
627	);
628
629	$doc_url = Helper_Functions::get_campaign_link( 'https://premiumaddons.com/docs/how-to-create-elementor-template-to-be-used-with-premium-addons', 'editor-page', 'wp-editor', 'get-support' );
630	$title = __( 'How to create an Elementor template to be used in Premium Vertical Scroll »', 'premium-addons-for-elementor' );
631
632	$this->add_control(
633	'doc_1',
634	array(
635	'type' => Controls_Manager::RAW_HTML,
636	'raw' => sprintf( '<a href="%s" target="_blank">%s</a>', $doc_url, $title ),
637	'content_classes' => 'editor-pa-doc',
638	)
639	);
640
641	$this->end_controls_section();
642
643	$this->start_controls_section(
644	'navigation_style',
645	array(
646	'label' => __( 'Navigation Dots', 'premium-addons-for-elementor' ),
647	'tab' => CONTROLS_MANAGER::TAB_STYLE,
648	'condition' => array(
649	'navigation_dots' => 'yes',
650	),
651	)
652	);
653
654	$this->start_controls_tabs( 'navigation_style_tabs' );
655
656	$this->start_controls_tab(
657	'tooltips_style_tab',
658	array(
659	'label' => __( 'Tooltips', 'premium-addons-for-elementor' ),
660	'condition' => array(
661	'dots_tooltips_switcher' => 'yes',
662	),
663	)
664	);
665
666	$this->add_control(
667	'tooltips_color',
668	array(
669	'label' => __( 'Tooltips Text Color', 'premium-addons-for-elementor' ),
670	'type' => Controls_Manager::COLOR,
671	'global' => array(
672	'default' => Global_Colors::COLOR_PRIMARY,
673	),
674	'selectors' => array(
675	'{{WRAPPER}} .premium-vscroll-tooltip' => 'color: {{VALUE}};',
676	),
677	'condition' => array(
678	'dots_tooltips_switcher' => 'yes',
679	),
680	)
681	);
682
683	$this->add_group_control(
684	Group_Control_Typography::get_type(),
685	array(
686	'name' => 'tooltips_typography',
687	'global' => array(
688	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
689	),
690	'selector' => '{{WRAPPER}} .premium-vscroll-tooltip span',
691	'condition' => array(
692	'dots_tooltips_switcher' => 'yes',
693	),
694	)
695	);
696
697	$this->add_control(
698	'tooltips_background',
699	array(
700	'label' => __( 'Tooltips Background', 'premium-addons-for-elementor' ),
701	'type' => Controls_Manager::COLOR,
702	'global' => array(
703	'default' => Global_Colors::COLOR_PRIMARY,
704	),
705	'selectors' => array(
706	'{{WRAPPER}} .premium-vscroll-tooltip' => 'background-color: {{VALUE}};',
707	'{{WRAPPER}} .premium-vscroll-inner .premium-vscroll-dots.right .premium-vscroll-tooltip::after' => 'border-left-color: {{VALUE}}',
708	'{{WRAPPER}} .premium-vscroll-inner .premium-vscroll-dots.left .premium-vscroll-tooltip::after' => 'border-right-color: {{VALUE}}',
709	),
710	'condition' => array(
711	'dots_tooltips_switcher' => 'yes',
712	),
713	)
714	);
715
716	$this->add_group_control(
717	Group_Control_Border::get_type(),
718	array(
719	'name' => 'tooltips_border',
720	'selector' => '{{WRAPPER}} .premium-vscroll-tooltip',
721	'condition' => array(
722	'dots_tooltips_switcher' => 'yes',
723	),
724	)
725	);
726
727	$this->add_control(
728	'tooltips_border_radius',
729	array(
730	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
731	'type' => Controls_Manager::SLIDER,
732	'size_units' => array( 'px', 'em', '%' ),
733	'selectors' => array(
734	'{{WRAPPER}} .premium-vscroll-tooltip' => 'border-radius: {{SIZE}}{{UNIT}};',
735	),
736	'condition' => array(
737	'dots_tooltips_switcher' => 'yes',
738	),
739	)
740	);
741
742	$this->add_group_control(
743	Group_Control_Box_Shadow::get_type(),
744	array(
745	'name' => 'tooltips_shadow',
746	'selector' => '{{WRAPPER}} .premium-vscroll-tooltip',
747	'condition' => array(
748	'dots_tooltips_switcher' => 'yes',
749	),
750	)
751	);
752
753	$this->add_responsive_control(
754	'tooltips_margin',
755	array(
756	'label' => __( 'Margin', 'premium-addons-for-elementor' ),
757	'type' => Controls_Manager::DIMENSIONS,
758	'size_units' => array( 'px', 'em', '%' ),
759	'selectors' => array(
760	'{{WRAPPER}} .premium-vscroll-tooltip' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
761	),
762	'condition' => array(
763	'dots_tooltips_switcher' => 'yes',
764	),
765	)
766	);
767
768	$this->add_responsive_control(
769	'tooltips_padding',
770	array(
771	'label' => __( 'Padding', 'premium-addons-for-elementor' ),
772	'type' => Controls_Manager::DIMENSIONS,
773	'size_units' => array( 'px', 'em', '%' ),
774	'selectors' => array(
775	'{{WRAPPER}} .premium-vscroll-tooltip' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
776	),
777	'condition' => array(
778	'dots_tooltips_switcher' => 'yes',
779	),
780	)
781	);
782
783	$this->end_controls_tab();
784
785	$this->start_controls_tab(
786	'dots_style_tab',
787	array(
788	'label' => __( 'Dots', 'premium-addons-for-elementor' ),
789	)
790	);
791
792	$this->add_control(
793	'dots_color',
794	array(
795	'label' => __( 'Dots Color', 'premium-addons-for-elementor' ),
796	'type' => Controls_Manager::COLOR,
797	'global' => array(
798	'default' => Global_Colors::COLOR_PRIMARY,
799	),
800	'selectors' => array(
801	'{{WRAPPER}} .premium-vscroll-dots .premium-vscroll-nav-link span' => 'background-color: {{VALUE}};',
802	),
803	)
804	);
805
806	$this->add_control(
807	'active_dot_color',
808	array(
809	'label' => __( 'Active Dot Color', 'premium-addons-for-elementor' ),
810	'type' => Controls_Manager::COLOR,
811	'global' => array(
812	'default' => Global_Colors::COLOR_SECONDARY,
813	),
814	'selectors' => array(
815	'{{WRAPPER}} .premium-vscroll-dots li.active .premium-vscroll-nav-link span' => 'background-color: {{VALUE}};',
816	),
817	)
818	);
819
820	$this->add_control(
821	'dots_border_color',
822	array(
823	'label' => __( 'Dots Border Color', 'premium-addons-for-elementor' ),
824	'type' => Controls_Manager::COLOR,
825	'global' => array(
826	'default' => Global_Colors::COLOR_SECONDARY,
827	),
828	'selectors' => array(
829	'{{WRAPPER}} .premium-vscroll-dots .premium-vscroll-nav-link span' => 'border-color: {{VALUE}};',
830	),
831	)
832	);
833
834	$this->add_responsive_control(
835	'dots_border_radius',
836	array(
837	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
838	'type' => Controls_Manager::DIMENSIONS,
839	'size_units' => array( 'px', 'em', '%' ),
840	'selectors' => array(
841	'{{WRAPPER}} .premium-vscroll-dots .premium-vscroll-nav-link span' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}',
842	),
843	)
844	);
845
846	$this->end_controls_tab();
847
848	$this->start_controls_tab(
849	'container_style_tab',
850	array(
851	'label' => __( 'Container', 'premium-addons-for-elementor' ),
852	)
853	);
854
855	$this->add_control(
856	'navigation_background',
857	array(
858	'label' => __( 'Background Color', 'premium-addons-for-elementor' ),
859	'type' => Controls_Manager::COLOR,
860	'global' => array(
861	'default' => Global_Colors::COLOR_PRIMARY,
862	),
863	'selectors' => array(
864	'{{WRAPPER}} .premium-vscroll-dots' => 'background-color: {{VALUE}}',
865	),
866	)
867	);
868
869	$this->add_control(
870	'navigation_border_radius',
871	array(
872	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
873	'type' => Controls_Manager::SLIDER,
874	'size_units' => array( 'px', 'em', '%' ),
875	'selectors' => array(
876	'{{WRAPPER}} .premium-vscroll-dots' => 'border-radius: {{SIZE}}{{UNIT}};',
877	),
878	)
879	);
880
881	$this->add_group_control(
882	Group_Control_Box_Shadow::get_type(),
883	array(
884	'label' => __( 'Shadow', 'premium-addons-for-elementor' ),
885	'name' => 'navigation_box_shadow',
886	'selector' => '{{WRAPPER}} .premium-vscroll-dots',
887	)
888	);
889
890	$this->end_controls_tab();
891
892	$this->end_controls_tabs();
893
894	$this->end_controls_section();
895
896	$this->start_controls_section(
897	'navigation_menu_style',
898	array(
899	'label' => __( 'Navigation Menu', 'premium-addons-for-elementor' ),
900	'tab' => CONTROLS_MANAGER::TAB_STYLE,
901	'condition' => array(
902	'nav_menu_switch' => 'yes',
903	),
904	)
905	);
906
907	$this->add_group_control(
908	Group_Control_Typography::get_type(),
909	array(
910	'name' => 'navigation_items_typography',
911	'selector' => '{{WRAPPER}} .premium-vscroll-nav-menu .premium-vscroll-nav-item .premium-vscroll-nav-link',
912	)
913	);
914
915	$this->start_controls_tabs( 'navigation_menu_style_tabs' );
916
917	$this->start_controls_tab(
918	'normal_style_tab',
919	array(
920	'label' => __( 'Normal', 'premium-addons-for-elementor' ),
921	)
922	);
923
924	$this->add_control(
925	'normal_color',
926	array(
927	'label' => __( 'Text Color', 'premium-addons-for-elementor' ),
928	'type' => Controls_Manager::COLOR,
929	'global' => array(
930	'default' => Global_Colors::COLOR_PRIMARY,
931	),
932	'selectors' => array(
933	'{{WRAPPER}} .premium-vscroll-nav-menu .premium-vscroll-nav-item .premium-vscroll-nav-link' => 'color: {{VALUE}}',
934	),
935	)
936	);
937
938	$this->add_control(
939	'normal_hover_color',
940	array(
941	'label' => __( 'Text Hover Color', 'premium-addons-for-elementor' ),
942	'type' => Controls_Manager::COLOR,
943	'global' => array(
944	'default' => Global_Colors::COLOR_PRIMARY,
945	),
946	'selectors' => array(
947	'{{WRAPPER}} .premium-vscroll-nav-menu .premium-vscroll-nav-item .premium-vscroll-nav-link:hover' => 'color: {{VALUE}}',
948	),
949	)
950	);
951
952	$this->add_control(
953	'normal_background',
954	array(
955	'label' => __( 'Background Color', 'premium-addons-for-elementor' ),
956	'type' => Controls_Manager::COLOR,
957	'global' => array(
958	'default' => Global_Colors::COLOR_SECONDARY,
959	),
960	'selectors' => array(
961	'{{WRAPPER}} .premium-vscroll-nav-menu .premium-vscroll-nav-item' => 'background-color: {{VALUE}}',
962	),
963	)
964	);
965
966	$this->add_group_control(
967	Group_Control_Box_Shadow::get_type(),
968	array(
969	'label' => __( 'Shadow', 'premium-addons-for-elementor' ),
970	'name' => 'normal_shadow',
971	'selector' => '{{WRAPPER}} .premium-vscroll-nav-menu .premium-vscroll-nav-item',
972	)
973	);
974
975	$this->end_controls_tab();
976
977	$this->start_controls_tab(
978	'active_style_tab',
979	array(
980	'label' => __( 'Active', 'premium-addons-for-elementor' ),
981	)
982	);
983
984	$this->add_control(
985	'active_color',
986	array(
987	'label' => __( 'Text Color', 'premium-addons-for-elementor' ),
988	'type' => Controls_Manager::COLOR,
989	'global' => array(
990	'default' => Global_Colors::COLOR_SECONDARY,
991	),
992	'selectors' => array(
993	'{{WRAPPER}} .premium-vscroll-nav-menu .premium-vscroll-nav-item.active .premium-vscroll-nav-link' => 'color: {{VALUE}}',
994	),
995	)
996	);
997
998	$this->add_control(
999	'active_hover_color',
1000	array(
1001	'label' => __( 'Text Hover Color', 'premium-addons-for-elementor' ),
1002	'type' => Controls_Manager::COLOR,
1003	'global' => array(
1004	'default' => Global_Colors::COLOR_SECONDARY,
1005	),
1006	'selectors' => array(
1007	'{{WRAPPER}} .premium-vscroll-nav-menu .premium-vscroll-nav-item.active .premium-vscroll-nav-link:hover' => 'color: {{VALUE}}',
1008	),
1009	)
1010	);
1011
1012	$this->add_control(
1013	'active_background',
1014	array(
1015	'label' => __( 'Background Color', 'premium-addons-for-elementor' ),
1016	'type' => Controls_Manager::COLOR,
1017	'global' => array(
1018	'default' => Global_Colors::COLOR_PRIMARY,
1019	),
1020	'selectors' => array(
1021	'{{WRAPPER}} .premium-vscroll-nav-menu .premium-vscroll-nav-item.active' => 'background-color: {{VALUE}}',
1022	),
1023	)
1024	);
1025
1026	$this->add_group_control(
1027	Group_Control_Box_Shadow::get_type(),
1028	array(
1029	'label' => __( 'Shadow', 'premium-addons-for-elementor' ),
1030	'name' => 'active_shadow',
1031	'selector' => '{{WRAPPER}} .premium-vscroll-nav-menu .premium-vscroll-nav-item.active',
1032	)
1033	);
1034
1035	$this->end_controls_tabs();
1036
1037	$this->add_group_control(
1038	Group_Control_Border::get_type(),
1039	array(
1040	'name' => 'navigation_items_border',
1041	'selector' => '{{WRAPPER}} .premium-vscroll-nav-menu .premium-vscroll-nav-item',
1042	'separator' => 'before',
1043	)
1044	);
1045
1046	$this->add_control(
1047	'navigation_items_border_radius',
1048	array(
1049	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
1050	'type' => Controls_Manager::SLIDER,
1051	'size_units' => array( 'px', 'em', '%' ),
1052	'selectors' => array(
1053	'{{WRAPPER}} .premium-vscroll-nav-menu .premium-vscroll-nav-item' => 'border-radius: {{SIZE}}{{UNIT}};',
1054	),
1055	)
1056	);
1057
1058	$this->add_responsive_control(
1059	'navigation_items_margin',
1060	array(
1061	'label' => __( 'Margin', 'premium-addons-for-elementor' ),
1062	'type' => Controls_Manager::DIMENSIONS,
1063	'size_units' => array( 'px', 'em', '%' ),
1064	'selectors' => array(
1065	'{{WRAPPER}} .premium-vscroll-nav-menu .premium-vscroll-nav-item' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1066	),
1067	)
1068	);
1069
1070	$this->add_responsive_control(
1071	'navigation_items_padding',
1072	array(
1073	'label' => __( 'Padding', 'premium-addons-for-elementor' ),
1074	'type' => Controls_Manager::DIMENSIONS,
1075	'size_units' => array( 'px', 'em', '%' ),
1076	'selectors' => array(
1077	'{{WRAPPER}} .premium-vscroll-nav-menu .premium-vscroll-nav-item .premium-vscroll-nav-link' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1078	),
1079	)
1080	);
1081
1082	$this->end_controls_section();
1083	}
1084
1085	/**
1086	* Render vertical scroll widget output on the frontend.
1087	*
1088	* Written in PHP and used to generate the final HTML.
1089	*
1090	* @since 2.7.4
1091	* @access protected
1092	*/
1093	protected function render() {
1094
1095	$settings = $this->get_settings_for_display();
1096
1097	$id = $this->get_id();
1098
1099	$dots_text = explode( ',', $settings['dots_tooltips'] );
1100
1101	$this->add_render_attribute(
1102	'vscroll_wrapper',
1103	array(
1104	'class' => 'premium-vscroll-wrap',
1105	'id' => 'premium-vscroll-wrap-' . $id,
1106	)
1107	);
1108
1109	$this->add_render_attribute(
1110	'vscroll_inner',
1111	array(
1112	'class' => 'premium-vscroll-inner',
1113	'id' => 'premium-vscroll-' . $id,
1114	)
1115	);
1116
1117	$this->add_render_attribute(
1118	'vertical_scroll_dots',
1119	'class',
1120	array(
1121	'premium-vscroll-dots',
1122	'premium-vscroll-dots-hide',
1123	$settings['navigation_dots_pos'],
1124	$settings['navigation_dots_v_pos'],
1125	$settings['dots_shape'],
1126	)
1127	);
1128
1129	if ( '' !== $settings['dots_animation'] ) {
1130	$this->add_render_attribute( 'vertical_scroll_dots', 'class', 'elementor-invisible' );
1131	}
1132
1133	$this->add_render_attribute( 'vscroll_dots_list', 'class', array( 'premium-vscroll-dots-list' ) );
1134
1135	$this->add_render_attribute(
1136	'vertical_scroll_menu',
1137	array(
1138	'id' => 'premium-vscroll-nav-menu-' . $id,
1139	'class' => array(
1140	'premium-vscroll-nav-menu',
1141	$settings['navigation_menu_pos'],
1142	),
1143	)
1144	);
1145
1146	$this->add_render_attribute(
1147	'vscroll_sections_wrap',
1148	array(
1149	'class' => 'premium-vscroll-sections-wrap',
1150	'id' => 'premium-vscroll-sections-wrap-' . $id,
1151	)
1152	);
1153
1154	if ( 'default' !== $settings['scroll_effect'] && ! wp_is_mobile() ) {
1155
1156	$this->add_render_attribute(
1157	'vscroll_sections_wrap',
1158	array(
1159	'data-animation' => $settings['scroll_effect'],
1160	'data-hijacking' => 'off',
1161	)
1162	);
1163
1164	}
1165
1166	$vscroll_settings = array(
1167	'id' => $id,
1168	'speed' => ! empty( $settings['scroll_speed'] ) ? $settings['scroll_speed'] * 1000 : 700,
1169	'offset' => ! empty( $settings['scroll_offset'] ) ? $settings['scroll_offset'] : 0,
1170	'tooltips' => 'yes' === $settings['dots_tooltips_switcher'] ? true : false,
1171	'dotsText' => $dots_text,
1172	'dotsPos' => $settings['navigation_dots_pos'],
1173	'dotsVPos' => $settings['navigation_dots_v_pos'],
1174	'fullSection' => 'rotate' === $settings['scroll_effect'] \|\| 'yes' === $settings['full_section'] ? true : false,
1175	'fullTouch' => 'rotate' === $settings['scroll_effect'] \|\| 'yes' === $settings['full_section_touch'] ? true : false,
1176	'fullCheckOverflow' => 'rotate' === $settings['scroll_effect'] \|\| $settings['full_section_overflow'],
1177	'addToHistory' => 'yes' === $settings['save_state'] ? true : false,
1178	'animation' => $settings['dots_animation'],
1179	'duration' => $settings['dots_animation_duration'],
1180	);
1181
1182	$templates = 'templates' === $settings['content_type'] ? $settings['section_repeater'] : $settings['id_repeater'];
1183
1184	$nav_items = $settings['nav_menu_repeater'];
1185
1186	$this->add_render_attribute( 'vscroll_wrapper', 'data-settings', wp_json_encode( $vscroll_settings ) );
1187
1188	?>
1189
1190	<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'vscroll_wrapper' ) ); ?>>
1191	<?php if ( 'yes' === $settings['nav_menu_switch'] ) : ?>
1192	<ul <?php echo wp_kses_post( $this->get_render_attribute_string( 'vertical_scroll_menu' ) ); ?>>
1193	<?php
1194	foreach ( $nav_items as $index => $item ) :
1195	$section_id = $this->get_template_id( $index );
1196	?>
1197	<li class="premium-vscroll-nav-item" data-menuanchor="<?php echo esc_attr( $section_id ); ?>">
1198	<div class="premium-vscroll-nav-link">
1199	<?php echo wp_kses_post( $item['nav_menu_item'] ); ?>
1200	</div>
1201	</li>
1202	<?php endforeach; ?>
1203	</ul>
1204	<?php endif; ?>
1205	<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'vscroll_inner' ) ); ?>>
1206	<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'vertical_scroll_dots' ) ); ?>>
1207	<ul <?php echo wp_kses_post( $this->get_render_attribute_string( 'vscroll_dots_list' ) ); ?>>
1208	<?php
1209	foreach ( $templates as $index => $section ) :
1210	$section_id = $this->get_template_id( $index );
1211	?>
1212	<li data-index="<?php echo esc_attr( $index ); ?>" data-menuanchor="<?php echo esc_attr( $section_id ); ?>" class="premium-vscroll-dot-item">
1213	<div class="premium-vscroll-nav-link"><span></span></div>
1214	</li>
1215	<?php endforeach; ?>
1216	</ul>
1217	</div>
1218	<?php if ( 'templates' === $settings['content_type'] ) : ?>
1219	<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'vscroll_sections_wrap' ) ); ?>>
1220
1221	<?php
1222	$temp_id = '';
1223	foreach ( $templates as $index => $section ) :
1224	$section_id = $this->get_template_id( $index );
1225
1226	$this->add_render_attribute(
1227	'section_' . $index,
1228	array(
1229	'id' => $section_id,
1230	'class' => array(
1231	'premium-vscroll-temp',
1232	'premium-vscroll-temp-' . $id,
1233	),
1234	)
1235	);
1236
1237	if ( 0 === $index && 'rotate' === $settings['scroll_effect'] ) {
1238	$this->add_render_attribute( 'section_' . $index, 'class', 'visible' );
1239	}
1240
1241	?>
1242	<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'section_' . $index ) ); ?>>
1243	<?php
1244	$temp_id = empty( $section['section_template'] ) ? $section['live_temp_content'] : $section['section_template'];
1245	echo $this->getTemplateInstance()->get_template_content( $temp_id ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1246	?>
1247	</div>
1248	<?php endforeach; ?>
1249	</div>
1250	<?php endif; ?>
1251	</div>
1252	</div>
1253
1254	<?php
1255	}
1256
1257	/**
1258	* Get template ID
1259	*
1260	* @since 3.21.0
1261	* @access protected
1262	*
1263	* @param string $index template index.
1264	*
1265	* @return string $id template ID
1266	*/
1267	protected function get_template_id( $index ) {
1268
1269	$settings = $this->get_settings_for_display();
1270
1271	$check_type = 'templates' === $settings['content_type'] ? true : false;
1272
1273	$templates = $check_type ? $settings['section_repeater'] : $settings['id_repeater'];
1274
1275	if ( ! $check_type ) {
1276
1277	$id = $templates[ $index ]['section_id'];
1278
1279	return $id;
1280	}
1281
1282	$widget_id = $this->get_id();
1283
1284	$id = 'section_' . $widget_id . $index;
1285
1286	if ( ! empty( $templates[ $index ]['template_id'] ) ) {
1287	$id = $templates[ $index ]['template_id'];
1288	}
1289
1290	return $id;
1291	}
1292	}
1293