king-addons / includes / widgets / One_Page_Navigation / One_Page_Navigation.php

One_Page_Navigation.php in King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder 51.1.83, at includes/widgets/One_Page_Navigation/One_Page_Navigation.php

831 lines 31.4 KB

Raw Download Zip

1	<?php /** @noinspection SpellCheckingInspection, PhpUnused */
2
3	namespace King_Addons;
4
5	use Elementor\Controls_Manager;
6	use Elementor\Group_Control_Background;
7	use Elementor\Group_Control_Box_Shadow;
8	use Elementor\Group_Control_Typography;
9	use Elementor\Icons_Manager;
10	use Elementor\Repeater;
11	use Elementor\Widget_Base;
12
13	if (!defined('ABSPATH')) {
14	exit; // Exit if accessed directly.
15	}
16
17
18
19	class One_Page_Navigation extends Widget_Base
20	{
21
22
23	public function get_name(): string
24	{
25	return 'king-addons-one-page-navigation';
26	}
27
28	public function get_title(): string
29	{
30	return esc_html__('One Page Navigation', 'king-addons');
31	}
32
33	public function get_icon(): string
34	{
35	/** @noinspection SpellCheckingInspection */
36	return 'king-addons-icon king-addons-one-page-navigation';
37	}
38
39	public function get_style_depends(): array
40	{
41	return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-one-page-navigation-style'];
42	}
43
44	public function get_categories(): array
45	{
46	return ['king-addons'];
47	}
48
49	public function get_keywords(): array
50	{
51	return ['one page', 'one', 'page', 'onepage', 'sinle', 'nav', 'navigation', 'interactive', 'anchor', 'link',
52	'links', 'href', 'scroll', 'scrolling', 'scroller', 'scrollable', 'animation', 'effect', 'animated',
53	'floating', 'sticky', 'click', 'target', 'point', 'vertical', 'horizontal', 'mouse', 'hover', 'over',
54	'hover over', 'icon', 'king', 'addons', 'mouseover', 'kingaddons', 'king-addons'];
55	}
56
57	public function get_custom_help_url()
58	{
59	return 'mailto:bug@kingaddons.com?subject=Bug Report - King Addons&body=Please describe the issue';
60	}
61
62	protected function register_controls(): void
63	{
64	/** START TAB: CONTENT ===================== */
65	/** SECTION: General ===================== */
66	$this->start_controls_section(
67	'kng_one_page_nav_section_nav_items',
68	[
69	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Navigation Items', 'king-addons'),
70	]
71	);
72
73	$this->add_control(
74	'kng_one_page_nav_items_p_h',
75	[
76	'label' => esc_html__('Horizontal Position', 'king-addons'),
77	'type' => Controls_Manager::CHOOSE,
78	'default' => 'right',
79	'options' => [
80	'left' => [
81	'title' => esc_html__('Left', 'king-addons'),
82	'icon' => 'eicon-h-align-left',
83	],
84	'right' => [
85	'title' => esc_html__('Right', 'king-addons'),
86	'icon' => 'eicon-h-align-right',
87	]
88	],
89	'prefix_class' => 'king-addons-one-page-nav-items-p-h-'
90	]
91	);
92
93	$this->add_control(
94	'kng_one_page_nav_items_p_v',
95	[
96	'label' => esc_html__('Vertical Position', 'king-addons'),
97	'type' => Controls_Manager::CHOOSE,
98	'default' => 'middle',
99	'options' => [
100	'top' => [
101	'title' => esc_html__('Top', 'king-addons'),
102	'icon' => 'eicon-v-align-top',
103	],
104	'middle' => [
105	'title' => esc_html__('Middle', 'king-addons'),
106	'icon' => 'eicon-v-align-middle',
107	],
108	'bottom' => [
109	'title' => esc_html__('Bottom', 'king-addons'),
110	'icon' => 'eicon-v-align-bottom',
111	],
112	],
113	'prefix_class' => 'king-addons-one-page-nav-items-p-v-'
114	]
115	);
116
117	$this->add_control(
118	'kng_one_page_nav_show_tooltip',
119	[
120	'label' => esc_html__('Show Tooltip', 'king-addons'),
121	'type' => Controls_Manager::SWITCHER
122	]
123	);
124
125	$this->add_control(
126	'kng_one_page_nav_v_stretch',
127	[
128	'label' => esc_html__('Stretch Vertically', 'king-addons'),
129	'type' => Controls_Manager::SWITCHER,
130	'prefix_class' => 'king-addons-one-page-nav-v-stretch-',
131	'frontend_available' => true,
132	'separator' => 'after'
133	]
134	);
135
136	$repeater = new Repeater();
137
138	$repeater->add_control(
139	'kng_one_page_nav_item_id',
140	[
141	'label' => esc_html__('Section ID', 'king-addons'),
142	'type' => Controls_Manager::TEXT,
143	'description' => esc_html__('Section ID without #', 'king-addons'),
144	'default' => 'section-id',
145	]
146	);
147
148	$repeater->add_control(
149	'kng_one_page_nav_item_name',
150	[
151	'label' => esc_html__('Section Name (Optional)', 'king-addons'),
152	'type' => Controls_Manager::TEXT,
153	'description' => esc_html__('It is used for tooltip', 'king-addons'),
154	]
155	);
156
157	$repeater->add_control(
158	'kng_one_page_nav_item_icon',
159	[
160	'label' => esc_html__('Select Icon', 'king-addons'),
161	'type' => Controls_Manager::ICONS,
162	'skin' => 'inline',
163	'label_block' => false,
164	'default' => [
165	'value' => 'fas fa-home',
166	'library' => 'fa-solid',
167	],
168	]
169	);
170
171	$repeater->add_control(
172	'kng_one_page_nav_item_custom_colors',
173	[
174	'label' => esc_html__('Custom Colors', 'king-addons'),
175	'type' => Controls_Manager::SWITCHER,
176	'description' => esc_html__('Use custom colors for this icon instead of global from the Style tab.', 'king-addons'),
177	'separator' => 'before',
178	]
179	);
180
181	/** CONTROLS TABS ===================== */
182	$repeater->start_controls_tabs(
183	'kng_one_page_nav_item_style_custom',
184	[
185	'condition' => [
186	'kng_one_page_nav_item_custom_colors' => 'yes',
187	],
188	]
189	);
190
191	/** CONTROLS TAB: Normal ===================== */
192	$repeater->start_controls_tab(
193	'kng_one_page_nav_item_normal_custom',
194	[
195	'label' => esc_html__('Normal', 'king-addons'),
196	]
197	);
198
199	$repeater->add_control(
200	'kng_one_page_nav_item_color_custom',
201	[
202	'label' => esc_html__('Color', 'king-addons'),
203	'type' => Controls_Manager::COLOR,
204	'default' => '',
205	'selectors' => [
206	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-one-page-nav-item i' => 'color: {{VALUE}};',
207	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-one-page-nav-item svg' => 'fill: {{VALUE}};'
208	],
209	]
210	);
211
212	$repeater->add_control(
213	'kng_one_page_nav_item_bg_color_custom',
214	[
215	'label' => esc_html__('Background Color', 'king-addons'),
216	'type' => Controls_Manager::COLOR,
217	'default' => '',
218	'selectors' => [
219	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-one-page-nav-item i' => 'background-color: {{VALUE}};',
220	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-one-page-nav-item svg' => 'background-color: {{VALUE}};',
221	],
222	]
223	);
224
225	$repeater->add_control(
226	'kng_one_page_nav_item_border_color_custom',
227	[
228	'label' => esc_html__('Border Color', 'king-addons'),
229	'type' => Controls_Manager::COLOR,
230	'default' => '',
231	'selectors' => [
232	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-one-page-nav-item i' => 'border-color: {{VALUE}};',
233	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-one-page-nav-item svg' => 'border-color: {{VALUE}};',
234	],
235	]
236	);
237
238	$repeater->end_controls_tab();
239	/** END CONTROLS TAB: Normal ===================== */
240
241	/** CONTROLS TAB: Hover ===================== */
242	$repeater->start_controls_tab(
243	'kng_one_page_nav_item_hover_custom',
244	[
245	'label' => esc_html__('Hover', 'king-addons'),
246	]
247	);
248
249	$repeater->add_control(
250	'kng_one_page_nav_item_hover_color_custom',
251	[
252	'label' => esc_html__('Color', 'king-addons'),
253	'type' => Controls_Manager::COLOR,
254	'default' => '',
255	'selectors' => [
256	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-one-page-nav-item:hover i' => 'color: {{VALUE}};',
257	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-one-page-nav-item:hover svg' => 'fill: {{VALUE}};',
258	],
259	]
260	);
261
262	$repeater->add_control(
263	'kng_one_page_nav_item_hover_bg_color_custom',
264	[
265	'label' => esc_html__('Background Color', 'king-addons'),
266	'type' => Controls_Manager::COLOR,
267	'default' => '',
268	'selectors' => [
269	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-one-page-nav-item:hover i' => 'background-color: {{VALUE}};',
270	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-one-page-nav-item:hover svg' => 'background-color: {{VALUE}};',
271	],
272	]
273	);
274
275	$repeater->add_control(
276	'kng_one_page_nav_item_hover_border_color_custom',
277	[
278	'label' => esc_html__('Border Color', 'king-addons'),
279	'type' => Controls_Manager::COLOR,
280	'default' => '',
281	'selectors' => [
282	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-one-page-nav-item:hover i' => 'border-color: {{VALUE}};',
283	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-one-page-nav-item:hover svg' => 'border-color: {{VALUE}};',
284	],
285	]
286	);
287
288	$repeater->end_controls_tab();
289	$repeater->end_controls_tabs();
290	/** END CONTROLS TAB: Hover ===================== */
291	/** END CONTROLS TABS ===================== */
292
293	$this->add_control(
294	'kng_one_page_nav_items',
295	[
296	'label' => esc_html__('Navigation Items', 'king-addons'),
297	'type' => Controls_Manager::REPEATER,
298	'fields' => $repeater->get_controls(),
299	'default' => [
300	[
301	'kng_one_page_nav_item_id' => 'first-section',
302	'kng_one_page_nav_item_name' => 'First Section',
303	'kng_one_page_nav_item_icon' => [
304	'value' => 'fas fa-home',
305	'library' => 'fa-solid',
306	],
307	],
308	[
309	'kng_one_page_nav_item_id' => 'second-section',
310	'kng_one_page_nav_item_name' => 'Second Section',
311	'kng_one_page_nav_item_icon' => [
312	'value' => 'far fa-star',
313	'library' => 'fa-solid',
314	],
315	],
316	[
317	'kng_one_page_nav_item_id' => 'third-section',
318	'kng_one_page_nav_item_name' => 'Third Section',
319	'kng_one_page_nav_item_icon' => [
320	'value' => 'fas fa-cat',
321	'library' => 'fa-solid',
322	],
323	],
324	],
325	'title_field' => '{{ kng_one_page_nav_item_name }}',
326	]
327	);
328
329	$this->end_controls_section();
330	/** END SECTION: General ===================== */
331	/** END TAB: CONTENT ===================== */
332
333	/** TAB: Style ===================== */
334	/** SECTION: Navigation Box ===================== */
335	$this->start_controls_section(
336	'kng_one_page_nav_section_nav_box',
337	[
338	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Navigation Box', 'king-addons'),
339	'tab' => Controls_Manager::TAB_STYLE,
340	'show_label' => false,
341	]
342	);
343
344	$this->add_group_control(
345	Group_Control_Background::get_type(),
346	[
347	'name' => 'kng_one_page_nav_box_bg_color',
348	'types' => ['classic', 'gradient'],
349	'fields_options' => [
350	'color' => [
351	'default' => '#574ff7',
352	],
353	'background' => [
354	'default' => 'classic',
355	],
356	],
357	'exclude' => ['image'],
358	'selector' => '{{WRAPPER}} .king-addons-one-page-nav'
359	]
360	);
361
362	$this->add_control(
363	'kng_one_page_nav_box_border_color',
364	[
365	'label' => esc_html__('Border Color', 'king-addons'),
366	'type' => Controls_Manager::COLOR,
367	'default' => '#000000',
368	'selectors' => [
369	'{{WRAPPER}} .king-addons-one-page-nav' => 'border-color: {{VALUE}};',
370	],
371	]
372	);
373
374	$this->add_group_control(
375	Group_Control_Box_Shadow::get_type(),
376	[
377	'name' => 'kng_one_page_nav_box_box_shadow',
378	'selector' => '{{WRAPPER}} .king-addons-one-page-nav',
379	]
380	);
381
382	$this->add_responsive_control(
383	'kng_one_page_nav_box_items_gap',
384	[
385	'label' => esc_html__('Items Gap', 'king-addons'),
386	'description' => esc_html__('Space between navigation items', 'king-addons'),
387	'type' => Controls_Manager::NUMBER,
388	'min' => 0,
389	'step' => 1,
390	'default' => 10,
391	'selectors' => [
392	'{{WRAPPER}} .king-addons-one-page-nav-item' => 'margin-bottom: {{SIZE}}px;',
393	],
394	'separator' => 'before'
395	]
396	);
397
398	$this->add_responsive_control(
399	'kng_one_page_nav_box_padding',
400	[
401	'label' => esc_html__('Padding', 'king-addons'),
402	'type' => Controls_Manager::DIMENSIONS,
403	'default' => [
404	'top' => 15,
405	'right' => 15,
406	'bottom' => 15,
407	'left' => 15,
408	],
409	'size_units' => ['px'],
410	'selectors' => [
411	'{{WRAPPER}} .king-addons-one-page-nav' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
412	],
413	]
414	);
415
416	$this->add_responsive_control(
417	'kng_one_page_nav_box_margin',
418	[
419	'label' => esc_html__('Margin', 'king-addons'),
420	'type' => Controls_Manager::DIMENSIONS,
421	'default' => [
422	'top' => 0,
423	'right' => 0,
424	'bottom' => 0,
425	'left' => 0,
426	],
427	'size_units' => ['px'],
428	'selectors' => [
429	'{{WRAPPER}} .king-addons-one-page-nav' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
430	],
431	'condition' => [
432	'kng_one_page_nav_v_stretch!' => 'yes',
433	],
434	]
435	);
436
437	$this->add_control(
438	'kng_one_page_nav_box_border_type',
439	[
440	'label' => esc_html__('Border Type', 'king-addons'),
441	'type' => Controls_Manager::SELECT,
442	'options' => [
443	'none' => esc_html__('None', 'king-addons'),
444	'solid' => esc_html__('Solid', 'king-addons'),
445	'double' => esc_html__('Double', 'king-addons'),
446	'dotted' => esc_html__('Dotted', 'king-addons'),
447	'dashed' => esc_html__('Dashed', 'king-addons'),
448	'groove' => esc_html__('Groove', 'king-addons'),
449	],
450	'default' => 'none',
451	'selectors' => [
452	'{{WRAPPER}} .king-addons-one-page-nav' => 'border-style: {{VALUE}};',
453	],
454	'separator' => 'before'
455	]
456	);
457
458	$this->add_responsive_control(
459	'kng_one_page_nav_box_border_width',
460	[
461	'label' => esc_html__('Border Width', 'king-addons'),
462	'type' => Controls_Manager::DIMENSIONS,
463	'size_units' => ['px'],
464	'default' => [
465	'top' => 1,
466	'right' => 1,
467	'bottom' => 1,
468	'left' => 1,
469	],
470	'selectors' => [
471	'{{WRAPPER}} .king-addons-one-page-nav' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
472	],
473	'condition' => [
474	'kng_one_page_nav_box_border_type!' => 'none',
475	],
476	]
477	);
478
479	$this->add_responsive_control(
480	'kng_one_page_nav_box_border_radius',
481	[
482	'label' => esc_html__('Border Radius', 'king-addons'),
483	'type' => Controls_Manager::DIMENSIONS,
484	'size_units' => ['px'],
485	'default' => [
486	'top' => 5,
487	'right' => 0,
488	'bottom' => 0,
489	'left' => 5,
490	],
491	'selectors' => [
492	'{{WRAPPER}} .king-addons-one-page-nav' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
493	],
494	'separator' => 'before'
495	]
496	);
497
498	$this->end_controls_section();
499	/** END SECTION: Navigation Box ===================== */
500
501	/** SECTION: Navigation Item ===================== */
502	$this->start_controls_section(
503	'kng_one_page_nav_section_nav_item',
504	[
505	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Navigation Item', 'king-addons'),
506	'tab' => Controls_Manager::TAB_STYLE,
507	'show_label' => false
508	]
509	);
510
511	/** CONTROLS TABS ===================== */
512	$this->start_controls_tabs('kng_one_page_nav_item_style');
513
514	/** CONTROLS TAB: Normal ===================== */
515	$this->start_controls_tab(
516	'kng_one_page_nav_item_normal',
517	[
518	'label' => esc_html__('Normal', 'king-addons'),
519	]
520	);
521
522	$this->add_control(
523	'kng_one_page_nav_item_color',
524	[
525	'label' => esc_html__('Color', 'king-addons'),
526	'type' => Controls_Manager::COLOR,
527	'default' => '#ffffff',
528	'selectors' => [
529	'{{WRAPPER}} .king-addons-one-page-nav-item i' => 'color: {{VALUE}};',
530	'{{WRAPPER}} .king-addons-one-page-nav-item svg' => 'fill: {{VALUE}};'
531	],
532	]
533	);
534
535	$this->add_control(
536	'kng_one_page_nav_item_bg_color',
537	[
538	'label' => esc_html__('Background Color', 'king-addons'),
539	'type' => Controls_Manager::COLOR,
540	'default' => '',
541	'selectors' => [
542	'{{WRAPPER}} .king-addons-one-page-nav-item i' => 'background-color: {{VALUE}};',
543	'{{WRAPPER}} .king-addons-one-page-nav-item svg' => 'background-color: {{VALUE}};',
544	],
545	]
546	);
547
548	$this->add_control(
549	'kng_one_page_nav_item_border_color',
550	[
551	'label' => esc_html__('Border Color', 'king-addons'),
552	'type' => Controls_Manager::COLOR,
553	'default' => '#E8E8E8',
554	'selectors' => [
555	'{{WRAPPER}} .king-addons-one-page-nav-item i' => 'border-color: {{VALUE}};',
556	'{{WRAPPER}} .king-addons-one-page-nav-item svg' => 'border-color: {{VALUE}};',
557	],
558	]
559	);
560
561	$this->add_group_control(
562	Group_Control_Box_Shadow::get_type(),
563	[
564	'name' => 'kng_one_page_nav_item_box_shadow',
565	'selector' => '{{WRAPPER}} .king-addons-one-page-nav-item i, {{WRAPPER}} .king-addons-one-page-nav-item svg',
566	]
567	);
568
569	$this->end_controls_tab();
570	/** END CONTROLS TAB: Normal ===================== */
571
572	/** CONTROLS TAB: Hover ===================== */
573	$this->start_controls_tab(
574	'kng_one_page_nav_item_hover',
575	[
576	'label' => esc_html__('Hover', 'king-addons'),
577	]
578	);
579
580	$this->add_control(
581	'kng_one_page_nav_item_hover_color',
582	[
583	'label' => esc_html__('Color', 'king-addons'),
584	'type' => Controls_Manager::COLOR,
585	'default' => '#01FD0D',
586	'selectors' => [
587	'{{WRAPPER}} .king-addons-one-page-nav-item:hover i' => 'color: {{VALUE}};',
588	'{{WRAPPER}} .king-addons-one-page-nav-item:hover svg' => 'fill: {{VALUE}};',
589	],
590	]
591	);
592
593	$this->add_control(
594	'kng_one_page_nav_item_hover_bg_color',
595	[
596	'label' => esc_html__('Background Color', 'king-addons'),
597	'type' => Controls_Manager::COLOR,
598	'default' => '',
599	'selectors' => [
600	'{{WRAPPER}} .king-addons-one-page-nav-item:hover i' => 'background-color: {{VALUE}};',
601	'{{WRAPPER}} .king-addons-one-page-nav-item:hover svg' => 'background-color: {{VALUE}};',
602	],
603	]
604	);
605
606	$this->add_control(
607	'kng_one_page_nav_item_hover_border_color',
608	[
609	'label' => esc_html__('Border Color', 'king-addons'),
610	'type' => Controls_Manager::COLOR,
611	'default' => '',
612	'selectors' => [
613	'{{WRAPPER}} .king-addons-one-page-nav-item:hover i' => 'border-color: {{VALUE}};',
614	'{{WRAPPER}} .king-addons-one-page-nav-item:hover svg' => 'border-color: {{VALUE}};',
615	],
616	]
617	);
618
619	$this->add_group_control(
620	Group_Control_Box_Shadow::get_type(),
621	[
622	'name' => 'kng_one_page_nav_item_hover_box_shadow',
623	'selector' => '{{WRAPPER}} .king-addons-one-page-nav-item:hover i, {{WRAPPER}} .king-addons-one-page-nav-item:hover svg',
624	]
625	);
626
627	$this->end_controls_tab();
628	$this->end_controls_tabs();
629	/** END CONTROLS TAB: Hover ===================== */
630	/** END CONTROLS TABS ===================== */
631
632
633	$this->add_control(
634	'kng_one_page_nav_item_transition_duration',
635	[
636	'label' => esc_html__('Transition Duration (ms)', 'king-addons'),
637	'type' => Controls_Manager::NUMBER,
638	'default' => 100,
639	'min' => 0,
640	'max' => 5000,
641	'step' => 100,
642	'selectors' => [
643	'{{WRAPPER}} .king-addons-one-page-nav-item' => 'transition-duration: {{SIZE}}ms',
644	'{{WRAPPER}} .king-addons-one-page-nav-item i' => 'transition-duration: {{SIZE}}ms',
645	'{{WRAPPER}} .king-addons-one-page-nav-item svg' => 'transition-duration: {{SIZE}}ms',
646	],
647	'separator' => 'before'
648	]
649	);
650
651	$this->add_responsive_control(
652	'kng_one_page_nav_item_icon_size',
653	[
654	'label' => esc_html__('Icon Size', 'king-addons'),
655	'type' => Controls_Manager::NUMBER,
656	'default' => 16,
657	'min' => 0,
658	'step' => 1,
659	'selectors' => [
660	'{{WRAPPER}} .king-addons-one-page-nav-item i' => 'font-size: {{SIZE}}px;',
661	'{{WRAPPER}} .king-addons-one-page-nav-item svg' => 'width: {{SIZE}}px; height: {{SIZE}}px;',
662	],
663	'separator' => 'before'
664	]
665	);
666
667	$this->add_responsive_control(
668	'kng_one_page_nav_item_padding',
669	[
670	'label' => esc_html__('Padding', 'king-addons'),
671	'type' => Controls_Manager::DIMENSIONS,
672	'default' => [
673	'top' => 3,
674	'right' => 3,
675	'bottom' => 3,
676	'left' => 3,
677	],
678	'size_units' => ['px'],
679	'selectors' => [
680	'{{WRAPPER}} .king-addons-one-page-nav-item i' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
681	'{{WRAPPER}} .king-addons-one-page-nav-item svg' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
682	],
683	'separator' => 'before',
684	]
685	);
686
687	$this->add_control(
688	'kng_one_page_nav_item_border_type',
689	[
690	'label' => esc_html__('Border Type', 'king-addons'),
691	'type' => Controls_Manager::SELECT,
692	'options' => [
693	'none' => esc_html__('None', 'king-addons'),
694	'solid' => esc_html__('Solid', 'king-addons'),
695	'double' => esc_html__('Double', 'king-addons'),
696	'dotted' => esc_html__('Dotted', 'king-addons'),
697	'dashed' => esc_html__('Dashed', 'king-addons'),
698	'groove' => esc_html__('Groove', 'king-addons'),
699	],
700	'default' => 'none',
701	'selectors' => [
702	'{{WRAPPER}} .king-addons-one-page-nav-item i' => 'border-style: {{VALUE}};',
703	'{{WRAPPER}} .king-addons-one-page-nav-item svg' => 'border-style: {{VALUE}};',
704	],
705	'separator' => 'before'
706	]
707	);
708
709	$this->add_responsive_control(
710	'kng_one_page_nav_item_border_width',
711	[
712	'label' => esc_html__('Border Width', 'king-addons'),
713	'type' => Controls_Manager::DIMENSIONS,
714	'size_units' => ['px'],
715	'default' => [
716	'top' => 1,
717	'right' => 1,
718	'bottom' => 1,
719	'left' => 1,
720	],
721	'selectors' => [
722	'{{WRAPPER}} .king-addons-one-page-nav-item i' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
723	'{{WRAPPER}} .king-addons-one-page-nav-item svg' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
724	],
725	'condition' => [
726	'kng_one_page_nav_item_border_type!' => 'none',
727	],
728	]
729	);
730
731	$this->add_responsive_control(
732	'kng_one_page_nav_item_border_radius',
733	[
734	'label' => esc_html__('Border Radius', 'king-addons'),
735	'type' => Controls_Manager::NUMBER,
736	'default' => 0,
737	'min' => 0,
738	'step' => 1,
739	'selectors' => [
740	'{{WRAPPER}} .king-addons-one-page-nav-item i' => 'border-radius: {{SIZE}}px;',
741	'{{WRAPPER}} .king-addons-one-page-nav-item svg' => 'border-radius: {{SIZE}}px;',
742	],
743	'separator' => 'before'
744	]
745	);
746
747	$this->end_controls_section();
748	/** END SECTION: Navigation Item ===================== */
749
750	/** SECTION: Navigation Tooltip ===================== */
751	$this->start_controls_section(
752	'kng_one_page_nav_section_nav_tooltip',
753	[
754	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Navigation Tooltip (optional)', 'king-addons'),
755	'tab' => Controls_Manager::TAB_STYLE,
756	'show_label' => false
757	]
758	);
759
760	$this->add_control(
761	'kng_one_page_nav_tooltip_txt_color',
762	[
763	'label' => esc_html__('Text Color', 'king-addons'),
764	'type' => Controls_Manager::COLOR,
765	'default' => '#f2f2f2',
766	'selectors' => [
767	'{{WRAPPER}} .king-addons-one-page-nav-item .king-addons-one-page-nav-tooltip' => 'color: {{VALUE}};'
768	],
769	]
770	);
771
772	$this->add_group_control(
773	Group_Control_Typography::get_type(),
774	[
775	'label' => esc_html__('Typography', 'king-addons'),
776	'name' => 'kng_one_page_nav_tooltip_txt_typography',
777	'selector' => '{{WRAPPER}} .king-addons-one-page-nav-item .king-addons-one-page-nav-tooltip',
778	]
779	);
780
781	$this->add_control(
782	'kng_one_page_nav_tooltip_bg_color',
783	[
784	'label' => esc_html__('Background Color', 'king-addons'),
785	'type' => Controls_Manager::COLOR,
786	'default' => '#303030',
787	'selectors' => [
788	'{{WRAPPER}} .king-addons-one-page-nav-item .king-addons-one-page-nav-tooltip' => 'background: {{VALUE}};',
789	'{{WRAPPER}} .king-addons-one-page-nav-item .king-addons-one-page-nav-tooltip:before' => 'color: {{VALUE}};',
790	'{{WRAPPER}} .king-addons-one-page-nav-item .king-addons-one-page-nav-tooltip:after' => 'color: {{VALUE}};'
791	],
792	]
793	);
794
795	$this->add_responsive_control(
796	'kng_one_page_nav_tooltip_border_radius',
797	[
798	'label' => esc_html__('Border Radius', 'king-addons'),
799	'type' => Controls_Manager::NUMBER,
800	'default' => 4,
801	'min' => 0,
802	'step' => 1,
803	'selectors' => [
804	'{{WRAPPER}} .king-addons-one-page-nav-item .king-addons-one-page-nav-tooltip' => 'border-radius: {{SIZE}}px;',
805	],
806	]
807	);
808
809	$this->end_controls_section();
810	/** END SECTION: Navigation Tooltip ===================== */
811	/** END TAB: STYLE ===================== */
812	}
813
814	protected function render(): void
815	{
816	$settings = Core::displaySettings($this);
817
818	echo '<div class="king-addons-one-page-nav">';
819
820	foreach ($settings['kng_one_page_nav_items'] as $item) {
821	echo '<div class="king-addons-one-page-nav-item elementor-repeater-item-' . esc_attr($item['_id']) . '">';
822	echo '<a href="#' . esc_attr($item['kng_one_page_nav_item_id']) . '">';
823	echo ('yes' === esc_html($settings['kng_one_page_nav_show_tooltip'])) ? '<span class="king-addons-one-page-nav-tooltip">' . esc_html($item['kng_one_page_nav_item_name']) . '</span>' : '';
824	Icons_Manager::render_icon($item['kng_one_page_nav_item_icon']);
825	echo '</a>';
826	echo '</div>';
827	}
828
829	echo '</div>';
830	}
831	}