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

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

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

premium-vscroll.php

1281 lines

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