PluginProbe
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder / 51.1.83
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder v51.1.83
51.1.84 51.1.85 51.1.83 51.1.82 51.1.81 51.1.79 51.1.78 51.1.77 51.1.76 51.1.74 51.1.75 51.1.65 51.1.64 51.1.63 trunk 51.1.14 51.1.2 51.1.35 51.1.36 51.1.37 51.1.38 51.1.39 51.1.44 51.1.45 51.1.46 All 39 releases
← All changes | includes/widgets/One_Page_Navigation/One_Page_Navigation.php +831 -0 51.1.2 → 51.1.83 View file →
@@ -1,0 +1,831 @@
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 +}