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

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

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

premium-vscroll.php

1023 lines

1	<?php
2
3	/**
4	* Premium Vertical Scroll.
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\Scheme_Color;
13	use Elementor\Scheme_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') ) exit(); // If this file is called directly, abort.
23
24	/**
25	* Class Premium_Vscroll
26	*/
27	class Premium_Vscroll extends Widget_Base {
28
29	public function getTemplateInstance() {
30	return $this->templateInstance = Premium_Template_Tags::getInstance();
31	}
32
33	public function get_name() {
34	return 'premium-vscroll';
35	}
36
37	public function get_title() {
38	return sprintf( '%1$s %2$s', Helper_Functions::get_prefix(), __('Vertical Scroll', 'premium-addons-for-elementor') );
39	}
40
41	public function get_icon() {
42	return 'pa-vscroll';
43	}
44
45	public function get_categories() {
46	return [ 'premium-elements' ];
47	}
48
49	public function get_style_depends() {
50	return [
51	'premium-addons'
52	];
53	}
54
55	public function get_script_depends() {
56	return [
57	'iscroll-js',
58	'slimscroll-js',
59	'vscroll-js'
60	];
61	}
62
63	public function is_reload_preview_required() {
64	return true;
65	}
66
67	public function get_custom_help_url() {
68	return 'https://premiumaddons.com/support/';
69	}
70
71	/**
72	* Register Video Box controls.
73	*
74	* @since 2.7.4
75	* @access protected
76	*/
77	protected function _register_controls() {
78
79	$this->start_controls_section('content_templates',
80	[
81	'label' => __('Content', 'premium-addons-for-elementor'),
82	]
83	);
84
85	$this->add_control('template_height_hint',
86	[
87	'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>',
88	'type' => Controls_Manager::RAW_HTML,
89
90	]
91	);
92
93	$this->add_control('content_type',
94	[
95	'label' => __('Content Type', 'premium-addons-for-elementor'),
96	'type' => Controls_Manager::SELECT,
97	'description' => __('Choose which method you prefer to insert sections.', 'premium-addons-for-elementor'),
98	'options' => [
99	'templates' => __('Elementor Templates', 'premium-addons-for-elementor'),
100	'ids' => __('Section ID', 'premium-addons-for-elementor')
101	],
102	'default' => 'templates',
103	'label_block' => true,
104	]
105	);
106
107	$temp_repeater = new REPEATER();
108
109	$temp_repeater->add_control('section_template',
110	[
111	'label' => __( 'Elementor Template', 'premium-addons-for-elementor' ),
112	'type' => Controls_Manager::SELECT2,
113	'options' => $this->getTemplateInstance()->get_elementor_page_list(),
114	'multiple' => false,
115	'label_block' => true,
116	]
117	);
118
119	$temp_repeater->add_control('template_id',
120	[
121	'label' => __( 'Section ID', 'premium-addons-for-elementor' ),
122	'type' => Controls_Manager::TEXT,
123	'description' => __('Use this option to add unique ID to your template section', 'premium-addons-for-elementor'),
124	'dynamic' => [ 'active' => true ],
125	]
126	);
127
128	$this->add_control('section_repeater',
129	[
130	'label' => __( 'Sections', 'premium-addons-for-elementor' ),
131	'type' => Controls_Manager::REPEATER,
132	'fields' => $temp_repeater->get_controls(),
133	'condition' => [
134	'content_type' => 'templates'
135	],
136	'title_field' => '{{{ section_template }}}'
137	]
138	);
139
140	$id_repeater = new REPEATER();
141
142	$id_repeater->add_control('section_id',
143	[
144	'label' => __( 'Section ID', 'premium-addons-for-elementor' ),
145	'type' => Controls_Manager::TEXT,
146	'dynamic' => [ 'active' => true ],
147	]
148	);
149
150	$this->add_control('id_repeater',
151	[
152	'label' => __( 'Sections', 'premium-addons-for-elementor' ),
153	'type' => Controls_Manager::REPEATER,
154	'fields' => $id_repeater->get_controls(),
155	'condition' => [
156	'content_type' => 'ids'
157	],
158	'title_field' => '{{{ section_id }}}'
159	]
160	);
161
162	$this->end_controls_section();
163
164	$this->start_controls_section('nav_menu',
165	[
166	'label' => __('Navigation', 'premium-addons-for-elementor'),
167	]
168	);
169
170	$this->add_control('nav_menu_switch',
171	[
172	'label' => __('Navigation Menu', 'premium-addons-for-elementor'),
173	'type' => Controls_Manager::SWITCHER,
174	'description' => __('This option works only on the frontend', 'premium-addons-for-elementor'),
175	]
176	);
177
178	$this->add_control('navigation_menu_pos',
179	[
180	'label' => __('Position', 'premium-addons-for-elementor'),
181	'type' => Controls_Manager::SELECT,
182	'options' => [
183	'left' => __('Left', 'premium-addons-for-elementor'),
184	'right' => __('Right', 'premium-addons-for-elementor'),
185	],
186	'default' => 'left',
187	'condition' => [
188	'nav_menu_switch' => 'yes'
189	]
190	]
191	);
192
193	$this->add_responsive_control('navigation_menu_pos_offset_top',
194	[
195	'label' => __('Offset Top', 'premium-addons-for-elementor'),
196	'type' => Controls_Manager::SLIDER,
197	'size_units' => ['px', '%' ,'em'],
198	'selectors' => [
199	'{{WRAPPER}} .premium-vscroll-nav-menu' => 'top: {{SIZE}}{{UNIT}};'
200	],
201	'condition' => [
202	'nav_menu_switch' => 'yes',
203	]
204	]
205	);
206
207	$this->add_responsive_control('navigation_menu_pos_offset_left',
208	[
209	'label' => __('Offset Left', 'premium-addons-for-elementor'),
210	'type' => Controls_Manager::SLIDER,
211	'size_units' => ['px', '%' ,'em'],
212	'selectors' => [
213	'{{WRAPPER}} .premium-vscroll-nav-menu.left' => 'left: {{SIZE}}{{UNIT}};'
214	],
215	'condition' => [
216	'nav_menu_switch' => 'yes',
217	'navigation_menu_pos' => 'left'
218	]
219	]
220	);
221
222	$this->add_responsive_control('navigation_menu_pos_offset_right',
223	[
224	'label' => __('Offset Right', 'premium-addons-for-elementor'),
225	'type' => Controls_Manager::SLIDER,
226	'size_units' => ['px', '%' ,'em'],
227	'selectors' => [
228	'{{WRAPPER}} .premium-vscroll-nav-menu.right' => 'right: {{SIZE}}{{UNIT}};'
229	],
230	'condition' => [
231	'nav_menu_switch' => 'yes',
232	'navigation_menu_pos' => 'right'
233	]
234	]
235	);
236
237	$nav_repeater = new REPEATER();
238
239	$nav_repeater->add_control('nav_menu_item',
240	[
241	'label' => __( 'List Item', 'premium-addons-for-elementor' ),
242	'type' => Controls_Manager::TEXT,
243	'dynamic' => [ 'active' => true ],
244	]
245	);
246
247	$this->add_control('nav_menu_repeater',
248	[
249	'label' => __( 'Menu Items', 'premium-addons-for-elementor' ),
250	'type' => Controls_Manager::REPEATER,
251	'fields' => $nav_repeater->get_controls(),
252	'title_field' => '{{{ nav_menu_item }}}',
253	'condition' => [
254	'nav_menu_switch' => 'yes'
255	]
256	]
257	);
258
259	$this->add_control('navigation_dots',
260	[
261	'label' => __('Navigation Dots', 'premium-addons-for-elementor'),
262	'type' => Controls_Manager::SWITCHER,
263	'default' => 'yes',
264	'separator' => 'before',
265	'prefix_class' => 'premium-vscroll-nav-dots-'
266	]
267	);
268
269	$this->add_control('navigation_dots_pos',
270	[
271	'label' => __('Horizontal Position', 'premium-addons-for-elementor'),
272	'type' => Controls_Manager::SELECT,
273	'options' => [
274	'left' => __('Left', 'premium-addons-for-elementor'),
275	'right' => __('Right', 'premium-addons-for-elementor'),
276	],
277	'default' => 'right',
278	'condition' => [
279	'navigation_dots' => 'yes',
280	]
281	]
282	);
283
284	$this->add_control('navigation_dots_v_pos',
285	[
286	'label' => __('Vertical Position', 'premium-addons-for-elementor'),
287	'type' => Controls_Manager::SELECT,
288	'options' => [
289	'top' => __('Top', 'premium-addons-for-elementor'),
290	'middle'=> __('Middle', 'premium-addons-for-elementor'),
291	'bottom'=> __('Bottom', 'premium-addons-for-elementor'),
292	],
293	'default' => 'middle',
294	'condition' => [
295	'navigation_dots' => 'yes',
296	]
297	]
298	);
299
300	$this->add_control('dots_shape',
301	[
302	'label' => __('Shape', 'premium-addons-for-elementor'),
303	'type' => Controls_Manager::SELECT,
304	'options' => [
305	'circ' => __('Circles', 'premium-addons-for-elementor'),
306	'lines' => __('Lines', 'premium-addons-for-elementor')
307	],
308	'default' => 'circ',
309	'condition' => [
310	'navigation_dots' => 'yes',
311	]
312	]
313	);
314
315	$this->add_control('dots_tooltips_switcher',
316	[
317	'label' => __('Tooltips Text', 'premium-addons-for-elementor'),
318	'type' => Controls_Manager::SWITCHER,
319	'default' => 'yes',
320	'condition' => [
321	'navigation_dots' => 'yes',
322	]
323	]
324	);
325
326	$this->add_control('dots_tooltips',
327	[
328	'label' => __('Dots Tooltips Text', 'premium-addons-for-elementor'),
329	'type' => Controls_Manager::TEXT,
330	'dynamic' => [ 'active' => true ],
331	'description' => __('Add text for each navigation dot separated by \',\'','premium-addons-for-elementor'),
332	'condition' => [
333	'navigation_dots' => 'yes',
334	'dots_tooltips_switcher' => 'yes'
335	]
336	]
337	);
338
339	$this->add_control( 'dots_animation',
340	[
341	'label' => __( 'Entrance Animation', 'premium-addons-for-elementor' ),
342	'type' => Controls_Manager::ANIMATION,
343	'frontend_available' => true,
344	'render_type' => 'template',
345	'condition' => [
346	'navigation_dots' => 'yes',
347	]
348	]
349	);
350
351	$this->add_control( 'dots_animation_duration',
352	[
353	'label' => __( 'Animation Duration', 'premium-addons-for-elementor' ),
354	'type' => Controls_Manager::SELECT,
355	'default' => '',
356	'options' => [
357	'slow' => __( 'Slow', 'premium-addons-for-elementor' ),
358	'' => __( 'Normal', 'premium-addons-for-elementor' ),
359	'fast' => __( 'Fast', 'premium-addons-for-elementor' ),
360	],
361	'condition' => [
362	'navigation_dots' => 'yes',
363	'dots_animation!' => '',
364	],
365	]
366	);
367
368	$this->end_controls_section();
369
370	$this->start_controls_section('advanced_settings',
371	[
372	'label' => __('Scroll Settings', 'premium-addons-for-elementor'),
373	]
374	);
375
376	$this->add_control('scroll_speed',
377	[
378	'label' => __('Scroll Speed', 'premium-addons-for-elementor'),
379	'type' => Controls_Manager::NUMBER,
380	'description' => __('Set scolling speed in seconds, default: 0.7', 'premium-addons-for-elementor'),
381	]
382	);
383
384	$this->add_control('scroll_offset',
385	[
386	'label' => __('Scroll Offset', 'premium-addons-for-elementor'),
387	'type' => Controls_Manager::NUMBER
388	]
389	);
390
391	$this->add_control('full_section',
392	[
393	'label' => __('Full Section Scroll', 'premium-addons-for-elementor'),
394	'type' => Controls_Manager::SWITCHER,
395	'default' => 'yes',
396	]
397	);
398
399	$this->add_control('save_state',
400	[
401	'label' => __('Save to Browser History', 'premium-addons-for-elementor'),
402	'type' => Controls_Manager::SWITCHER,
403	'description' => __('Enabling this option will save the current section ID to the browser history', 'premium-addons-for-elementor'),
404	'default' => 'yes',
405	]
406	);
407
408	$this->add_control('full_section_touch',
409	[
410	'label' => __('Enable Full Section Scroll on Touch Devices', 'premium-addons-for-elementor'),
411	'type' => Controls_Manager::SWITCHER,
412	'condition' => [
413	'full_section' => 'yes'
414	]
415	]
416	);
417
418	$this->end_controls_section();
419
420	$this->start_controls_section('section_pa_docs',
421	[
422	'label' => __('Helpful Documentations', 'premium-addons-for-elementor'),
423	]
424	);
425
426	$this->add_control('doc_1',
427	[
428	'type' => Controls_Manager::RAW_HTML,
429	'raw' => sprintf( __( '%1$s How to create an Elementor template to be used in Premium Vertical Scroll » %2$s', 'premium-addons-for-elementor' ), '<a href="https://premiumaddons.com/docs/how-to-create-elementor-template-to-be-used-with-premium-addons/?utm_source=pa-dashboard&utm_medium=pa-editor&utm_campaign=pa-plugin" target="_blank" rel="noopener">', '</a>' ),
430	'content_classes' => 'editor-pa-doc',
431	]
432	);
433
434	$this->end_controls_section();
435
436	$this->start_controls_section('navigation_style',
437	[
438	'label' => __('Navigation Dots', 'premium-addons-for-elementor'),
439	'tab' => CONTROLS_MANAGER::TAB_STYLE,
440	'condition' => [
441	'navigation_dots' => 'yes'
442	]
443	]
444	);
445
446	$this->start_controls_tabs('navigation_style_tabs');
447
448	$this->start_controls_tab('tooltips_style_tab',
449	[
450	'label' => __('Tooltips', 'premium-addons-for-elementor'),
451	'condition' => [
452	'dots_tooltips_switcher' => 'yes'
453	]
454	]
455	);
456
457	$this->add_control('tooltips_color',
458	[
459	'label' => __( 'Tooltips Text Color', 'premium-addons-for-elementor' ),
460	'type' => Controls_Manager::COLOR,
461	'scheme' => [
462	'type' => Scheme_Color::get_type(),
463	'value' => Scheme_Color::COLOR_1
464	],
465	'selectors' => [
466	'{{WRAPPER}} .premium-vscroll-tooltip' => 'color: {{VALUE}};',
467	],
468	'condition' => [
469	'dots_tooltips_switcher' => 'yes'
470	]
471	]
472	);
473
474	$this->add_group_control(
475	Group_Control_Typography::get_type(),
476	[
477	'name' => 'tooltips_typography',
478	'scheme' => Scheme_Typography::TYPOGRAPHY_1,
479	'selector' => '{{WRAPPER}} .premium-vscroll-tooltip span',
480	'condition' => [
481	'dots_tooltips_switcher' => 'yes'
482	]
483	]
484	);
485
486	$this->add_control('tooltips_background',
487	[
488	'label' => __( 'Tooltips Background', 'premium-addons-for-elementor' ),
489	'type' => Controls_Manager::COLOR,
490	'scheme' => [
491	'type' => Scheme_Color::get_type(),
492	'value' => Scheme_Color::COLOR_1
493	],
494	'selectors' => [
495	'{{WRAPPER}} .premium-vscroll-tooltip' => 'background-color: {{VALUE}};',
496	'{{WRAPPER}} .premium-vscroll-inner .premium-vscroll-dots.right .premium-vscroll-tooltip::after' => 'border-left-color: {{VALUE}}',
497	'{{WRAPPER}} .premium-vscroll-inner .premium-vscroll-dots.left .premium-vscroll-tooltip::after' => 'border-right-color: {{VALUE}}',
498	],
499	'condition' => [
500	'dots_tooltips_switcher' => 'yes'
501	]
502	]
503	);
504
505	$this->add_group_control(
506	Group_Control_Border::get_type(),
507	[
508	'name' => 'tooltips_border',
509	'selector' => '{{WRAPPER}} .premium-vscroll-tooltip',
510	'condition' => [
511	'dots_tooltips_switcher' => 'yes'
512	]
513	]
514	);
515
516	$this->add_control('tooltips_border_radius',
517	[
518	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
519	'type' => Controls_Manager::SLIDER,
520	'size_units' => ['px', 'em', '%'],
521	'selectors' => [
522	'{{WRAPPER}} .premium-vscroll-tooltip' => 'border-radius: {{SIZE}}{{UNIT}};',
523	],
524	'condition' => [
525	'dots_tooltips_switcher' => 'yes'
526	]
527	]
528	);
529
530	$this->add_group_control(
531	Group_Control_Box_Shadow::get_type(),
532	[
533	'name' => 'tooltips_shadow',
534	'selector' => '{{WRAPPER}} .premium-vscroll-tooltip',
535	'condition' => [
536	'dots_tooltips_switcher' => 'yes'
537	]
538	]
539	);
540
541	$this->add_responsive_control('tooltips_margin',
542	[
543	'label' => __('Margin', 'premium-addons-for-elementor'),
544	'type' => Controls_Manager::DIMENSIONS,
545	'size_units' => ['px', 'em', '%'],
546	'selectors' => [
547	'{{WRAPPER}} .premium-vscroll-tooltip' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
548	],
549	'condition' => [
550	'dots_tooltips_switcher' => 'yes'
551	]
552	]
553	);
554
555	$this->add_responsive_control('tooltips_padding',
556	[
557	'label' => __('Padding', 'premium-addons-for-elementor'),
558	'type' => Controls_Manager::DIMENSIONS,
559	'size_units' => ['px', 'em', '%'],
560	'selectors' => [
561	'{{WRAPPER}} .premium-vscroll-tooltip' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
562	],
563	'condition' => [
564	'dots_tooltips_switcher' => 'yes'
565	]
566	]
567	);
568
569	$this->end_controls_tab();
570
571	$this->start_controls_tab('dots_style_tab',
572	[
573	'label' => __('Dots', 'premium-addons-for-elementor'),
574	]
575	);
576
577	$this->add_control('dots_color',
578	[
579	'label' => __( 'Dots Color', 'premium-addons-for-elementor' ),
580	'type' => Controls_Manager::COLOR,
581	'scheme' => [
582	'type' => Scheme_Color::get_type(),
583	'value' => Scheme_Color::COLOR_1
584	],
585	'selectors' => [
586	'{{WRAPPER}} .premium-vscroll-dots .premium-vscroll-nav-link span' => 'background-color: {{VALUE}};',
587	]
588	]
589	);
590
591	$this->add_control('active_dot_color',
592	[
593	'label' => __( 'Active Dot Color', 'premium-addons-for-elementor' ),
594	'type' => Controls_Manager::COLOR,
595	'scheme' => [
596	'type' => Scheme_Color::get_type(),
597	'value' => Scheme_Color::COLOR_2
598	],
599	'selectors' => [
600	'{{WRAPPER}} .premium-vscroll-dots li.active .premium-vscroll-nav-link span' => 'background-color: {{VALUE}};',
601	]
602	]
603	);
604
605	$this->add_control('dots_border_color',
606	[
607	'label' => __( 'Dots Border Color', 'premium-addons-for-elementor' ),
608	'type' => Controls_Manager::COLOR,
609	'scheme' => [
610	'type' => Scheme_Color::get_type(),
611	'value'=> Scheme_Color::COLOR_2
612	],
613	'selectors' => [
614	'{{WRAPPER}} .premium-vscroll-dots .premium-vscroll-nav-link span' => 'border-color: {{VALUE}};',
615	]
616	]
617	);
618
619	$this->add_responsive_control('dots_border_radius',
620	[
621	'label' => __('Border Radius', 'premium-addons-for-elementor'),
622	'type' => Controls_Manager::DIMENSIONS,
623	'size_units' => ['px', 'em', '%'],
624	'selectors' => [
625	'{{WRAPPER}} .premium-vscroll-dots .premium-vscroll-nav-link span' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}'
626	],
627	]
628	);
629
630	$this->end_controls_tab();
631
632	$this->start_controls_tab('container_style_tab',
633	[
634	'label' => __('Container', 'premium-addons-for-elementor'),
635	]
636	);
637
638	$this->add_control('navigation_background',
639	[
640	'label' => __( 'Background Color', 'premium-addons-for-elementor' ),
641	'type' => Controls_Manager::COLOR,
642	'scheme' => [
643	'type' => Scheme_Color::get_type(),
644	'value'=> Scheme_Color::COLOR_1
645	],
646	'selectors' => [
647	'{{WRAPPER}} .premium-vscroll-dots' => 'background-color: {{VALUE}}'
648	]
649	]
650	);
651
652	$this->add_control('navigation_border_radius',
653	[
654	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
655	'type' => Controls_Manager::SLIDER,
656	'size_units' => ['px', 'em', '%'],
657	'selectors' => [
658	'{{WRAPPER}} .premium-vscroll-dots' => 'border-radius: {{SIZE}}{{UNIT}};',
659	]
660	]
661	);
662
663	$this->add_group_control(
664	Group_Control_Box_Shadow::get_type(),
665	[
666	'label' => __('Shadow','premium-addons-for-elementor'),
667	'name' => 'navigation_box_shadow',
668	'selector' => '{{WRAPPER}} .premium-vscroll-dots',
669	]
670	);
671
672	$this->end_controls_tab();
673
674	$this->end_controls_tabs();
675
676	$this->end_controls_section();
677
678	$this->start_controls_section('navigation_menu_style',
679	[
680	'label' => __('Navigation Menu', 'premium-addons-for-elementor'),
681	'tab' => CONTROLS_MANAGER::TAB_STYLE,
682	'condition' => [
683	'nav_menu_switch' => 'yes'
684	]
685	]
686	);
687
688	$this->add_group_control(
689	Group_Control_Typography::get_type(),
690	[
691	'name' => 'navigation_items_typography',
692	'selector' => '{{WRAPPER}} .premium-vscroll-nav-menu .premium-vscroll-nav-item .premium-vscroll-nav-link'
693	]
694	);
695
696	$this->start_controls_tabs('navigation_menu_style_tabs');
697
698	$this->start_controls_tab('normal_style_tab',
699	[
700	'label' => __('Normal', 'premium-addons-for-elementor'),
701	]
702	);
703
704	$this->add_control('normal_color',
705	[
706	'label' => __( 'Text Color', 'premium-addons-for-elementor' ),
707	'type' => Controls_Manager::COLOR,
708	'scheme' => [
709	'type' => Scheme_Color::get_type(),
710	'value'=> Scheme_Color::COLOR_1
711	],
712	'selectors' => [
713	'{{WRAPPER}} .premium-vscroll-nav-menu .premium-vscroll-nav-item .premium-vscroll-nav-link' => 'color: {{VALUE}}'
714	]
715	]
716	);
717
718	$this->add_control('normal_hover_color',
719	[
720	'label' => __( 'Text Hover Color', 'premium-addons-for-elementor' ),
721	'type' => Controls_Manager::COLOR,
722	'scheme' => [
723	'type' => Scheme_Color::get_type(),
724	'value'=> Scheme_Color::COLOR_1
725	],
726	'selectors' => [
727	'{{WRAPPER}} .premium-vscroll-nav-menu .premium-vscroll-nav-item .premium-vscroll-nav-link:hover' => 'color: {{VALUE}}'
728	]
729	]
730	);
731
732	$this->add_control('normal_background',
733	[
734	'label' => __( 'Background Color', 'premium-addons-for-elementor' ),
735	'type' => Controls_Manager::COLOR,
736	'scheme' => [
737	'type' => Scheme_Color::get_type(),
738	'value'=> Scheme_Color::COLOR_2
739	],
740	'selectors' => [
741	'{{WRAPPER}} .premium-vscroll-nav-menu .premium-vscroll-nav-item' => 'background-color: {{VALUE}}'
742	]
743	]
744	);
745
746	$this->add_group_control(
747	Group_Control_Box_Shadow::get_type(),
748	[
749	'label' => __('Shadow','premium-addons-for-elementor'),
750	'name' => 'normal_shadow',
751	'selector' => '{{WRAPPER}} .premium-vscroll-nav-menu .premium-vscroll-nav-item'
752	]
753	);
754
755	$this->end_controls_tab();
756
757	$this->start_controls_tab('active_style_tab',
758	[
759	'label' => __('Active', 'premium-addons-for-elementor'),
760	]
761	);
762
763	$this->add_control('active_color',
764	[
765	'label' => __( 'Text Color', 'premium-addons-for-elementor' ),
766	'type' => Controls_Manager::COLOR,
767	'scheme' => [
768	'type' => Scheme_Color::get_type(),
769	'value'=> Scheme_Color::COLOR_2
770	],
771	'selectors' => [
772	'{{WRAPPER}} .premium-vscroll-nav-menu .premium-vscroll-nav-item.active .premium-vscroll-nav-link' => 'color: {{VALUE}}'
773	]
774	]
775	);
776
777	$this->add_control('active_hover_color',
778	[
779	'label' => __( 'Text Hover Color', 'premium-addons-for-elementor' ),
780	'type' => Controls_Manager::COLOR,
781	'scheme' => [
782	'type' => Scheme_Color::get_type(),
783	'value'=> Scheme_Color::COLOR_2
784	],
785	'selectors' => [
786	'{{WRAPPER}} .premium-vscroll-nav-menu .premium-vscroll-nav-item.active .premium-vscroll-nav-link:hover' => 'color: {{VALUE}}'
787	]
788	]
789	);
790
791	$this->add_control('active_background',
792	[
793	'label' => __( 'Background Color', 'premium-addons-for-elementor' ),
794	'type' => Controls_Manager::COLOR,
795	'scheme' => [
796	'type' => Scheme_Color::get_type(),
797	'value'=> Scheme_Color::COLOR_1
798	],
799	'selectors' => [
800	'{{WRAPPER}} .premium-vscroll-nav-menu .premium-vscroll-nav-item.active' => 'background-color: {{VALUE}}'
801	]
802	]
803	);
804
805	$this->add_group_control(
806	Group_Control_Box_Shadow::get_type(),
807	[
808	'label' => __('Shadow','premium-addons-for-elementor'),
809	'name' => 'active_shadow',
810	'selector' => '{{WRAPPER}} .premium-vscroll-nav-menu .premium-vscroll-nav-item.active'
811	]
812	);
813
814	$this->end_controls_tabs();
815
816	$this->add_group_control(
817	Group_Control_Border::get_type(),
818	[
819	'name' => 'navigation_items_border',
820	'selector' => '{{WRAPPER}} .premium-vscroll-nav-menu .premium-vscroll-nav-item',
821	'separator' => 'before'
822	]
823	);
824
825	$this->add_control('navigation_items_border_radius',
826	[
827	'label' => __('Border Radius', 'premium-addons-for-elementor'),
828	'type' => Controls_Manager::SLIDER,
829	'size_units' => ['px','em','%'],
830	'selectors' => [
831	'{{WRAPPER}} .premium-vscroll-nav-menu .premium-vscroll-nav-item' => 'border-radius: {{SIZE}}{{UNIT}};',
832	]
833	]
834	);
835
836	$this->add_responsive_control('navigation_items_margin',
837	[
838	'label' => __('Margin', 'premium-addons-for-elementor'),
839	'type' => Controls_Manager::DIMENSIONS,
840	'size_units' => ['px', 'em', '%'],
841	'selectors' => [
842	'{{WRAPPER}} .premium-vscroll-nav-menu .premium-vscroll-nav-item' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
843	],
844	]
845	);
846
847	$this->add_responsive_control('navigation_items_padding',
848	[
849	'label' => __('Padding', 'premium-addons-for-elementor'),
850	'type' => Controls_Manager::DIMENSIONS,
851	'size_units' => ['px', 'em', '%'],
852	'selectors' => [
853	'{{WRAPPER}} .premium-vscroll-nav-menu .premium-vscroll-nav-item .premium-vscroll-nav-link' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
854	],
855	]
856	);
857
858	$this->end_controls_section();
859
860	}
861
862	/**
863	* Render vertical scroll widget output on the frontend.
864	*
865	* Written in PHP and used to generate the final HTML.
866	*
867	* @since 2.7.4
868	* @access protected
869	*/
870	protected function render() {
871
872	$settings = $this->get_settings_for_display();
873
874	$id = $this->get_id();
875
876	$dots_text = explode(',', $settings['dots_tooltips'] );
877
878	$this->add_render_attribute( 'vertical_scroll_wrapper', 'class', 'premium-vscroll-wrap' );
879
880	$this->add_render_attribute( 'vertical_scroll_wrapper', 'id', 'premium-vscroll-wrap-' . $id );
881
882	$this->add_render_attribute( 'vertical_scroll_inner', 'class', 'premium-vscroll-inner' );
883
884	$this->add_render_attribute( 'vertical_scroll_inner', 'id', 'premium-vscroll-' . $id );
885
886	$this->add_render_attribute( 'vertical_scroll_dots', 'class', array(
887	'premium-vscroll-dots',
888	'premium-vscroll-dots-hide',
889	$settings['navigation_dots_pos'],
890	$settings['navigation_dots_v_pos'],
891	$settings['dots_shape']
892	)
893	);
894
895	if( '' !== $settings['dots_animation'] ) {
896	$this->add_render_attribute( 'vertical_scroll_dots', 'class', 'elementor-invisible' );
897	}
898
899	$this->add_render_attribute( 'vertical_scroll_dots_list', 'class', array( 'premium-vscroll-dots-list' ) );
900
901	$this->add_render_attribute( 'vertical_scroll_menu', [
902	'id' => 'premium-vscroll-nav-menu-' . $id,
903	'class' => [
904	'premium-vscroll-nav-menu',
905	$settings['navigation_menu_pos']
906	]
907	]);
908
909	$this->add_render_attribute( 'vertical_scroll_sections_wrap', [
910	'class' => 'premium-vscroll-sections-wrap',
911	'id' => 'premium-vscroll-sections-wrap-' . $id
912	]);
913
914	$vscroll_settings = [
915	'id' => $id,
916	'speed' => ! empty( $settings['scroll_speed'] ) ? $settings['scroll_speed'] * 1000 : 700,
917	'offset' => ! empty( $settings['scroll_offset'] ) ? $settings['scroll_offset'] : 0,
918	'tooltips' => 'yes' == $settings['dots_tooltips_switcher'] ? true : false,
919	'dotsText' => $dots_text,
920	'dotsPos' => $settings['navigation_dots_pos'],
921	'dotsVPos' => $settings['navigation_dots_v_pos'],
922	'fullSection' => 'yes' == $settings['full_section'] ? true : false,
923	'fullTouch' => 'yes' == $settings['full_section_touch'] ? true : false,
924	'addToHistory' => 'yes' == $settings['save_state'] ? true : false,
925	'animation' => $settings['dots_animation'],
926	'duration' => $settings['dots_animation_duration'],
927	];
928
929	$templates = 'templates' === $settings['content_type'] ? $settings['section_repeater'] : $settings['id_repeater'];
930
931	$nav_items = $settings['nav_menu_repeater'];
932
933	?>
934
935	<div <?php echo $this->get_render_attribute_string('vertical_scroll_wrapper'); ?> data-settings='<?php echo wp_json_encode($vscroll_settings); ?>'>
936	<?php if ('yes' == $settings['nav_menu_switch'] ) : ?>
937	<ul <?php echo $this->get_render_attribute_string('vertical_scroll_menu'); ?>>
938	<?php foreach( $nav_items as $index => $item ) :
939	$section_id = $this->get_template_id( $index );
940	?>
941	<li class="premium-vscroll-nav-item" data-menuanchor="<?php echo esc_attr( $section_id ); ?>">
942	<div class="premium-vscroll-nav-link">
943	<?php echo $item['nav_menu_item']; ?>
944	</div>
945	</li>
946	<?php endforeach; ?>
947	</ul>
948	<?php endif; ?>
949	<div <?php echo $this->get_render_attribute_string('vertical_scroll_inner'); ?>>
950	<div <?php echo $this->get_render_attribute_string('vertical_scroll_dots'); ?>>
951	<ul <?php echo $this->get_render_attribute_string('vertical_scroll_dots_list'); ?>>
952	<?php foreach( $templates as $index => $section ) :
953	$section_id = $this->get_template_id( $index );
954	?>
955	<li data-index="<?php echo $index; ?>" data-menuanchor="<?php echo esc_attr( $section_id ); ?>" class="premium-vscroll-dot-item"><div class="premium-vscroll-nav-link"><span></span></div></li>
956	<?php endforeach; ?>
957	</ul>
958	</div>
959	<?php if( 'templates' === $settings['content_type'] ) : ?>
960	<div <?php echo $this->get_render_attribute_string('vertical_scroll_sections_wrap'); ?>>
961
962	<?php foreach( $templates as $index => $section ) :
963	$section_id = $this->get_template_id( $index );
964
965	$this->add_render_attribute('section_' . $index, [
966	'id' => $section_id,
967	'class' => [
968	'premium-vscroll-temp',
969	'premium-vscroll-temp-' . $id
970	]
971	]);
972	?>
973	<div <?php echo $this->get_render_attribute_string('section_' . $index); ?>>
974	<?php
975	$template_title = $section['section_template'];
976	echo $this->getTemplateInstance()->get_template_content( $template_title );
977	?>
978	</div>
979	<?php endforeach; ?>
980	</div>
981	<?php endif; ?>
982	</div>
983	</div>
984
985	<?php }
986
987	/**
988	* Get template ID
989	*
990	* @since 3.21.0
991	* @access protected
992	*
993	* @param string $index template index
994	*
995	* @return string $id template ID
996	*/
997	protected function get_template_id( $index ) {
998
999	$settings = $this->get_settings_for_display();
1000
1001	$checkType = 'templates' === $settings['content_type'] ? true : false;
1002
1003	$templates = $checkType ? $settings['section_repeater'] : $settings['id_repeater'];
1004
1005	if( ! $checkType ) {
1006
1007	$id = $templates[ $index ][ 'section_id' ];
1008
1009	return $id;
1010	}
1011
1012	$widget_id = $this->get_id();
1013
1014	$id = 'section_' . $widget_id . $index;
1015
1016	if( ! empty( $templates[ $index ][ 'template_id' ] ) ) {
1017	$id = $templates[ $index ][ 'template_id' ];
1018	}
1019
1020	return $id;
1021
1022	}
1023	}