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

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

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

premium-vscroll.php

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