PluginProbe
King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder / 51.1.82
King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder v51.1.82
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 51.1.47 51.1.49 All 37 releases
king-addons / includes / widgets / Timeline / Timeline.php

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

5,823 lines 244.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2
3 namespace King_Addons;
4
5 use Elementor\Icons_Manager;
6 use Elementor\Widget_Base;
7 use Elementor\Utils;
8 use Elementor\Repeater;
9 use Elementor\Controls_Manager;
10 use Elementor\Group_Control_Box_Shadow;
11 use Elementor\Group_Control_Image_Size;
12 use Elementor\Group_Control_Background;
13 use Elementor\Group_Control_Typography;
14 use WP_Query;
15
16 class Timeline extends Widget_Base
17 {
18
19
20
21 public function get_name()
22 {
23 return 'king-addons-timeline';
24 }
25
26 public function get_title()
27 {
28 return esc_html__('Timeline Post/Story', 'king-addons');
29 }
30
31 public function get_icon()
32 {
33 return 'king-addons-icon king-addons-timeline';
34 }
35
36 public function get_categories()
37 {
38 return ['king-addons'];
39 }
40
41 public function get_keywords()
42 {
43 return ['king addons', 'king', 'addons', 'kingaddons', 'king-addons', 'post timeline', 'time',
44 'line', 'story', 'telling', 'storytelling', 'content', 'grid', 'scroll', 'events', 'event',
45 'blog', 'post', 'posts', 'timeline', 'posts timeline', 'story timeline', 'content timeline'];
46 }
47
48 public function get_script_depends()
49 {
50
51 return [
52 'swiper',
53 KING_ADDONS_ASSETS_UNIQUE_KEY . '-infinitescroll-infinitescroll',
54 KING_ADDONS_ASSETS_UNIQUE_KEY . '-aos-aos',
55 KING_ADDONS_ASSETS_UNIQUE_KEY . '-timeline-script'
56 ];
57 }
58
59 public function get_style_depends()
60 {
61 return [
62 'swiper',
63 'e-swiper',
64 KING_ADDONS_ASSETS_UNIQUE_KEY . '-animation-button',
65 KING_ADDONS_ASSETS_UNIQUE_KEY . '-animation-general',
66 KING_ADDONS_ASSETS_UNIQUE_KEY . '-animation-timing',
67 KING_ADDONS_ASSETS_UNIQUE_KEY . '-animation-loading',
68 KING_ADDONS_ASSETS_UNIQUE_KEY . '-aos-aos',
69 KING_ADDONS_ASSETS_UNIQUE_KEY . '-timeline-style'
70 ];
71 }
72
73 public function get_custom_help_url()
74 {
75 return 'mailto:bug@kingaddons.com?subject=Bug Report - King Addons&body=Please describe the issue';
76 }
77
78 /** @noinspection PhpMissingFieldTypeInspection */
79 public $alt,
80 $animation,
81 $animation_class,
82 $animation_loadmore_left,
83 $animation_loadmore_right,
84 $background_class,
85 $background_image,
86 $date_label_key,
87 $description_key,
88 $extra_label_key,
89 $horizontal_inner_class,
90 $horizontal_timeline_class,
91 $image,
92 $item_url_count,
93 $my_query,
94 $pagination_max_pages,
95 $pagination_type,
96 $show_readmore,
97 $show_year_label,
98 $slides_to_show,
99 $src,
100 $story_date_label,
101 $story_extra_label,
102 $swiper_class,
103 $thumbnail_custom_dimension,
104 $thumbnail_size,
105 $timeline_description,
106 $timeline_fill,
107 $timeline_layout,
108 $timeline_layout_wrapper,
109 $timeline_story_title,
110 $timeline_year,
111 $title_key,
112 $year_key;
113
114 public function king_addons_aos_animation_array()
115 {
116 return [
117 'none' => 'None',
118 'fade' => 'Fade',
119 'pro-fd' => 'Fade Down (Pro)',
120 'pro-fdl' => 'Fade Down Left (Pro)',
121 'pro-fdr' => 'Fade Down Right (Pro)',
122 'pro-fl' => 'Fade Left (Pro)',
123 'pro-fr' => 'Fade Right (Pro)',
124 'pro-fu' => 'Fade Up (Pro)',
125 'pro-ful' => 'Fade Up Left (Pro)',
126 'pro-fur' => 'Fade Up Right (Pro)',
127 'pro-fld' => 'Flip Down (Pro)',
128 'pro-fll' => 'Flip Left (Pro)',
129 'pro-flr' => 'Flip Right (Pro)',
130 'pro-flu' => 'Flip Up (Pro)',
131 'pro-sld' => 'Slide Down (Pro)',
132 'pro-sll' => 'Slide Left (Pro)',
133 'pro-slr' => 'Slide Right (Pro)',
134 'pro-slu' => 'Slide Up (Pro)',
135 'pro-zmi' => 'Zoom In (Pro)',
136 'pro-zmid' => 'Zoom In Down (Pro)',
137 'pro-zmil' => 'Zoom In Left (Pro)',
138 'pro-zmir' => 'Zoom In Right (Pro)',
139 'pro-zmiu' => 'Zoom In Up (Pro)',
140 'pro-zmo' => 'Zoom Out (Pro)',
141 'pro-zmod' => 'Zoom Out Down (Pro)',
142 'pro-zmol' => 'Zoom Out Left (Pro)',
143 'pro-zmor' => 'Zoom Out Right (Pro)',
144 'pro-zmou' => 'Zoom Out Up (Pro)',
145 ];
146 }
147
148 public function add_control_slides_to_show()
149 {
150 $this->add_control(
151 'slides_to_show',
152 [
153 'label' => esc_html__('Slides To Show', 'king-addons'),
154 'type' => Controls_Manager::NUMBER,
155 'default' => '3',
156 'max' => '4',
157 'separator' => 'before',
158 'render_type' => 'template',
159 'condition' => [
160 'timeline_layout' => [
161 'horizontal',
162 'horizontal-bottom'
163 ],
164 ]
165 ]
166 );
167 }
168
169 public function add_control_swiper_loop()
170 {
171 $this->add_control(
172 'swiper_loop',
173 [
174 'label' => sprintf(__('Loop %s', 'king-addons'), '<i class="eicon-pro-icon"></i>'),
175 'type' => Controls_Manager::SWITCHER,
176 'separator' => 'before',
177 'classes' => 'king-addons-pro-control'
178 ]
179 );
180 }
181
182 public function add_control_group_autoplay()
183 {
184 $this->add_control(
185 'swiper_autoplay',
186 [
187 'label' => sprintf(__('Autoplay %s', 'king-addons'), '<i class="eicon-pro-icon"></i>'),
188 'type' => Controls_Manager::SWITCHER,
189 'separator' => 'before',
190 'classes' => 'king-addons-pro-control'
191 ]
192 );
193 }
194
195 public function add_control_show_pagination()
196 {
197 $this->add_control(
198 'show_pagination',
199 [
200 'label' => sprintf(__('Show Pagination %s', 'king-addons'), '<i class="eicon-pro-icon"></i>'),
201 'type' => Controls_Manager::SWITCHER,
202 'separator' => 'before',
203 'classes' => 'king-addons-pro-control'
204 ]
205 );
206 }
207
208 public function add_control_posts_per_page()
209 {
210 $this->add_control(
211 'posts_per_page',
212 [
213 'label' => esc_html__('Posts Per Page', 'king-addons'),
214 'type' => Controls_Manager::NUMBER,
215 'render_type' => 'template',
216 'default' => 3,
217 'max' => 4,
218 'min' => 0,
219 'label_block' => false,
220 ]
221 );
222 }
223
224 protected function register_controls()
225 {
226
227 $this->start_controls_section(
228 'general_section',
229 [
230 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Layout', 'king-addons'),
231 'tab' => Controls_Manager::TAB_CONTENT,
232 ]
233 );
234
235
236 $this->add_control(
237 'timeline_content',
238 [
239 'label' => esc_html__('Timeline Content', 'king-addons'),
240 'type' => Controls_Manager::SELECT,
241 'default' => 'custom',
242 'options' => [
243 'custom' => esc_html__('Custom', 'king-addons'),
244 'dynamic' => esc_html__('Dynamic', 'king-addons')
245 ],
246 'render_type' => 'template',
247 ]
248 );
249
250 $this->add_control(
251 'timeline_layout',
252 [
253 'label' => esc_html__('Layout', 'king-addons'),
254 'type' => Controls_Manager::SELECT,
255 'default' => 'centered',
256 'options' => [
257 'centered' => esc_html__('Zig-Zag', 'king-addons'),
258 'one-sided' => esc_html__('Line Left', 'king-addons'),
259 'one-sided-left' => esc_html__('Line Right', 'king-addons'),
260 'horizontal-bottom' => esc_html__('Line Top - Carousel', 'king-addons'),
261 'horizontal' => esc_html__('Line Bottom - Carousel', 'king-addons'),
262 ],
263 'render_type' => 'template',
264 ]
265 );
266
267 $this->add_control(
268 'content_layout',
269 [
270 'label' => esc_html__('Media Position', 'king-addons'),
271 'type' => Controls_Manager::SELECT,
272 'default' => 'image-top',
273 'options' => [
274 'image-top' => esc_html__('Top', 'king-addons'),
275 'image-bottom' => esc_html__('Bottom', 'king-addons'),
276
277 ],
278 ]
279 );
280
281 $this->add_group_control(
282 Group_Control_Image_Size::get_type(),
283 [
284 'name' => 'king_addons_thumbnail_dynamic',
285 'default' => 'full',
286 'separator' => 'none',
287 'condition' => [
288 'timeline_content' => 'dynamic'
289 ]
290 ]
291 );
292
293 $this->add_control(
294 'date_format',
295 [
296 'label' => esc_html__('Date Format', 'king-addons'),
297 'type' => Controls_Manager::SELECT,
298 'default' => 'F j, Y',
299 'options' => [
300 'F j, Y' => esc_html(date('F j, Y')),
301 'Y-m-d' => esc_html(date('Y-m-d')),
302 'Y, M, D' => esc_html(date('Y, M, D')),
303 'm/d/Y' => esc_html(date('m/d/Y')),
304 'd/m/Y' => esc_html(date('d/m/Y')),
305 'j. F Y' => esc_html(date('j. F y'))
306 ],
307 'condition' => [
308 'timeline_content' => 'dynamic',
309 ]
310 ]
311 );
312
313 $this->add_control(
314 'timeline_fill',
315 [
316 'label' => esc_html__('Main Line Fill', 'king-addons'),
317 'type' => Controls_Manager::SWITCHER,
318 'return_value' => 'yes',
319 'default' => 'yes',
320 'label_block' => false,
321 'render_type' => 'template',
322 'condition' => [
323 'timeline_layout!' => ['horizontal', 'horizontal-bottom']
324 ]
325 ]
326 );
327
328 $this->add_control(
329 'posts_icon',
330 [
331 'label' => esc_html__('Main Line Icon', 'king-addons'),
332 'type' => Controls_Manager::ICONS,
333 'skin' => 'inline',
334 'label_block' => false,
335 'default' => [
336 'value' => 'fab fa-apple',
337 'library' => 'solid',
338 ],
339 'condition' => [
340 'timeline_content' => 'dynamic'
341 ]
342 ]
343 );
344
345 $this->add_control(
346 'show_extra_label',
347 [
348 'label' => esc_html__('Show Extra Label', 'king-addons'),
349 'type' => Controls_Manager::SWITCHER,
350 'return_value' => 'yes',
351 'default' => 'yes',
352 'label_block' => false,
353 'separator' => 'before',
354 'condition' => [
355 'timeline_content' => 'dynamic'
356 ]
357 ]
358 );
359
360 $this->add_control_slides_to_show();
361
362 if (!king_addons_freemius()->can_use_premium_code__premium_only()) {
363 $this->add_control(
364 'slides_to_show_pro_notice',
365 [
366 'type' => Controls_Manager::RAW_HTML,
367 'raw' => 'More than 4 Slides are available<br> in the <strong><a href="https://kingaddons.com/pricing/?utm_source=kng-module-posts-timeline-settings-upgrade-pro&utm_medium=plugin&utm_campaign=kng" target="_blank">Pro version</a></strong>',
368
369 'content_classes' => 'king-addons-pro-notice',
370 'condition' => [
371 'timeline_layout' => [
372 'horizontal',
373 'horizontal-bottom'
374 ],
375 ]
376 ]
377 );
378 }
379
380 $this->add_control(
381 'story_info_gutter',
382 [
383 'label' => esc_html__('Gutter', 'king-addons'),
384 'type' => Controls_Manager::NUMBER,
385 'default' => 5,
386 'condition' => [
387 'timeline_layout' => [
388 'horizontal',
389 'horizontal-bottom'
390 ],
391 ]
392 ]
393 );
394
395 $this->add_control(
396 'equal_height_slides',
397 [
398 'label' => esc_html__('Equal Height Slides', 'king-addons'),
399 'description' => esc_html__('Make all slides the same height', 'king-addons'),
400 'type' => Controls_Manager::SWITCHER,
401 'return_value' => 'auto-height',
402 'default' => 'no',
403 'label_block' => false,
404 'render_type' => 'template',
405 'condition' => [
406 'timeline_layout' => [
407 'horizontal-bottom',
408 'horizontal'
409 ],
410 ]
411 ]
412 );
413
414
415 $this->add_control_swiper_loop();
416
417 $this->add_control_group_autoplay();
418
419 $this->add_control(
420 'swiper_speed',
421 [
422 'label' => esc_html__('Carousel Speed', 'king-addons'),
423 'type' => Controls_Manager::NUMBER,
424 'min' => 0,
425 'max' => 5000,
426 'frontend_available' => true,
427 'default' => 500,
428 'condition' => [
429 'timeline_layout' => ['horizontal', 'horizontal-bottom']
430 ]
431 ]
432 );
433
434 $this->add_control(
435 'swiper_nav_icon',
436 [
437 'label' => esc_html__('Carousel Icon', 'king-addons'),
438 'type' => Controls_Manager::SELECT,
439 'default' => 'fas fa-angle-left',
440 'options' => [
441 'fas fa-angle-left' => esc_html__('Angle', 'king-addons'),
442 'fas fa-angle-double-left' => esc_html__('Angle Double', 'king-addons'),
443 'fas fa-arrow-left' => esc_html__('Arrow', 'king-addons'),
444 'fas fa-arrow-alt-circle-left' => esc_html__('Arrow Circle', 'king-addons'),
445 'far fa-arrow-alt-circle-left' => esc_html__('Arrow Circle Alt', 'king-addons'),
446 'fas fa-long-arrow-alt-left' => esc_html__('Long Arrow', 'king-addons'),
447 'fas fa-chevron-left' => esc_html__('Chevron', 'king-addons'),
448 ],
449 'condition' => [
450 'timeline_layout' => ['horizontal', 'horizontal-bottom'],
451 ],
452
453 ]
454 );
455
456 $this->add_control(
457 'timeline_animation',
458 [
459 'label' => esc_html__('Entrance Animation', 'king-addons'),
460 'type' => Controls_Manager::SELECT,
461 'default' => 'fade',
462 'separator' => 'before',
463 'options' => $this->king_addons_aos_animation_array(),
464 'condition' => [
465 'timeline_layout!' => [
466 'horizontal',
467 'horizontal-bottom'
468 ],
469 ]
470 ]
471 );
472
473
474 Core::renderUpgradeProNotice($this, Controls_Manager::RAW_HTML, 'timeline', 'timeline_animation', [
475 'pro-fu',
476 'pro-fd',
477 'pro-fl',
478 'pro-fr',
479 'pro-fur',
480 'pro-ful',
481 'pro-fdr',
482 'pro-fdl',
483 'pro-flu',
484 'pro-fld',
485 'pro-flr',
486 'pro-fll',
487 'pro-slu',
488 'pro-sll',
489 'pro-slr',
490 'pro-sld',
491 'pro-zmi',
492 'pro-zmo',
493 'pro-zmiu',
494 'pro-zmid',
495 'pro-zmil',
496 'pro-zmir',
497 'pro-zmou',
498 'pro-zmod',
499 'pro-zmol',
500 'pro-zmor',
501 ]);
502
503 $this->add_control(
504 'animation_offset',
505 [
506 'label' => esc_html__('Animation Offset', 'king-addons'),
507 'type' => Controls_Manager::NUMBER,
508 'min' => 0,
509 'max' => 500,
510 'frontend_available' => true,
511 'default' => 150,
512 'condition' => [
513 'timeline_layout!' => ['horizontal', 'horizontal-bottom']
514 ]
515 ]
516 );
517
518 $this->add_control(
519 'aos_animation_duration',
520 [
521 'label' => esc_html__('Animation Duration', 'king-addons'),
522 'type' => Controls_Manager::NUMBER,
523 'min' => 0,
524 'max' => 2000,
525 'frontend_available' => true,
526 'default' => 600,
527 'condition' => [
528 'timeline_layout!' => ['horizontal', 'horizontal-bottom']
529 ]
530 ]
531 );
532
533 $this->add_control_show_pagination();
534
535 $this->end_controls_section();
536
537 $this->start_controls_section(
538 'repeater_content_section',
539 [
540 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Timeline Items', 'king-addons'),
541 'tab' => Controls_Manager::TAB_CONTENT,
542 'condition' => [
543 'timeline_content' => 'custom'
544 ]
545 ]
546 );
547
548 $repeater = new Repeater();
549
550 $repeater->start_controls_tabs(
551 'story_tabs'
552 );
553
554 $repeater->start_controls_tab(
555 'content_tab',
556 [
557 'label' => esc_html__('Content', 'king-addons'),
558 ]
559 );
560
561 $repeater->add_control(
562 'main_line_label_heading',
563 [
564 'label' => esc_html__('Main Line Label', 'king-addons'),
565 'type' => Controls_Manager::HEADING,
566 'separator' => 'before',
567 ]
568 );
569
570 $repeater->add_control(
571 'repeater_show_year_label',
572 [
573 'label' => esc_html__('Show Label', 'king-addons'),
574 'type' => Controls_Manager::SWITCHER,
575 'label_on' => esc_html__('Show', 'king-addons'),
576 'label_off' => esc_html__('Hide', 'king-addons'),
577 'return_value' => 'yes',
578 'default' => 'no',
579 ]
580 );
581
582 $repeater->add_control(
583 'repeater_year',
584 [
585 'label' => esc_html__('Label Text', 'king-addons'),
586 'type' => Controls_Manager::TEXT,
587 'dynamic' => [
588 'active' => true,
589 ],
590 'default' => '2022',
591 'condition' => [
592 'repeater_show_year_label' => 'yes'
593 ]
594 ]
595 );
596
597 $repeater->add_control(
598 'main_line_label_icon',
599 [
600 'label' => esc_html__('Main Line Icon', 'king-addons'),
601 'type' => Controls_Manager::HEADING,
602 'separator' => 'before',
603 ]
604 );
605
606 $repeater->add_control(
607 'repeater_story_icon',
608 [
609 'label' => esc_html__('Select Icon', 'king-addons'),
610 'type' => Controls_Manager::ICONS,
611 'skin' => 'inline',
612 'label_block' => false,
613 'default' => [
614 'value' => 'fab fa-apple',
615 'library' => 'solid',
616 ],
617 ]
618 );
619
620 $repeater->add_control(
621 'extra_label_heading',
622 [
623 'label' => esc_html__('Extra Label', 'king-addons'),
624 'type' => Controls_Manager::HEADING,
625 'separator' => 'before',
626 ]
627 );
628
629 $repeater->add_control(
630 'repeater_show_extra_label',
631 [
632 'label' => esc_html__('Show Extra Label', 'king-addons'),
633 'type' => Controls_Manager::SWITCHER,
634 'return_value' => 'yes',
635 'default' => 'yes',
636 'label_block' => false,
637 ]
638 );
639
640 $repeater->add_control(
641 'repeater_date_label',
642 [
643 'label' => esc_html__('Primary Label', 'king-addons'),
644 'label_block' => true,
645 'type' => Controls_Manager::TEXT,
646 'dynamic' => [
647 'active' => true,
648 ],
649 'default' => '01 Jan 2022',
650 'condition' => [
651 'repeater_show_extra_label' => 'yes'
652 ]
653 ]
654 );
655
656 $repeater->add_control(
657 'repeater_extra_label',
658 [
659 'label' => esc_html__('Secondary Label', 'king-addons'),
660 'label_block' => true,
661 'type' => Controls_Manager::TEXT,
662 'dynamic' => [
663 'active' => true,
664 ],
665 'default' => 'Secondary Label',
666 'condition' => [
667 'repeater_show_extra_label' => 'yes'
668 ]
669 ]
670 );
671
672 $repeater->add_control(
673 'repeater_media',
674 [
675 'label' => esc_html__('Display Media', 'king-addons'),
676 'type' => Controls_Manager::SELECT,
677 'default' => 'image',
678 'options' => [
679 'image' => esc_html__('Image', 'king-addons'),
680 'icon' => esc_html__('Icon', 'king-addons'),
681 'video' => esc_html__('Video', 'king-addons'),
682 ],
683 'render_type' => 'template',
684 'separator' => 'before'
685 ]
686 );
687
688 $repeater->add_group_control(
689 Group_Control_Image_Size::get_type(),
690 [
691 'name' => 'king_addons_thumbnail',
692 'default' => 'full',
693 'separator' => 'none',
694 'condition' => [
695 'repeater_media' => 'image'
696 ]
697 ]
698 );
699
700 $repeater->add_control(
701 'repeater_youtube_video_url',
702 [
703 'label' => esc_html__('Youtube Video Link', 'king-addons'),
704 'type' => Controls_Manager::TEXT,
705 'dynamic' => [
706 'active' => true,
707 ],
708 'label_block' => true,
709 'default' => '',
710 'condition' => [
711 'repeater_media' => 'video',
712 ]
713 ]
714 );
715
716 $repeater->add_control(
717 'repeater_image',
718 [
719 'label' => esc_html__('Choose Image', 'king-addons'),
720 'type' => Controls_Manager::MEDIA,
721 'dynamic' => [
722 'active' => true
723 ],
724 'description' => esc_html__('Image Size will not work with default image', 'king-addons'),
725 'condition' => [
726 'repeater_media' => 'image'
727 ]
728 ]
729 );
730
731 $repeater->add_control(
732 'repeater_timeline_item_icon',
733 [
734 'label' => esc_html__('Media Icon', 'king-addons'),
735 'type' => Controls_Manager::ICONS,
736 'skin' => 'inline',
737 'label_block' => false,
738 'default' => [
739 'value' => 'far fa-star',
740 'library' => 'solid',
741 ],
742 'condition' => [
743 'repeater_media' => 'icon'
744 ]
745 ]
746 );
747
748 $repeater->add_control(
749 'repeater_story_title',
750 [
751 'label' => esc_html__('Item Title', 'king-addons'),
752 'type' => Controls_Manager::TEXT,
753 'dynamic' => [
754 'active' => true,
755 ],
756 'default' => 'Timeline Story',
757 'label_block' => true,
758 'separator' => 'before'
759 ]
760 );
761
762 $repeater->add_control(
763 'repeater_title_link',
764 [
765 'label' => esc_html__('Item Title URL', 'king-addons'),
766 'type' => Controls_Manager::URL,
767 'dynamic' => [
768 'active' => true,
769 ],
770 'placeholder' => esc_html__('https://example.com', 'king-addons'),
771 'default' => [
772 'url' => '',
773 'is_external' => true,
774 'nofollow' => true,
775 'custom_attributes' => '',
776 ],
777 ]
778 );
779
780 $repeater->add_control(
781 'repeater_description',
782 [
783 'label' => esc_html__('Description', 'king-addons'),
784 'type' => Controls_Manager::WYSIWYG,
785 'default' => 'Add Description Here',
786 ]
787 );
788
789 $repeater->end_controls_tab();
790
791 $repeater->start_controls_tab(
792 'repeater_advanced_tab',
793 [
794 'label' => esc_html__('Style', 'king-addons'),
795 ]
796 );
797
798 $repeater->add_control(
799 'show_custom_styles',
800 [
801 'label' => esc_html__('Custom Colors', 'king-addons'),
802 'type' => Controls_Manager::SWITCHER,
803 'return_value' => 'yes',
804 'label_block' => false
805 ]
806 );
807
808 $repeater->add_control(
809 'item_main_styles',
810 [
811 'label' => esc_html__('Item', 'king-addons'),
812 'type' => Controls_Manager::HEADING,
813 'separator' => 'before',
814 'condition' => [
815 'show_custom_styles' => 'yes'
816 ]
817 ]
818 );
819
820 $repeater->add_control(
821 'item_bg_color',
822 [
823 'label' => esc_html__('Background Color', 'king-addons'),
824 'type' => Controls_Manager::COLOR,
825 'default' => '#FFF',
826 'selectors' => [
827 '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-story-info-vertical.king-addons-data-wrap' => 'background-color: {{VALUE}}',
828 '{{WRAPPER}} .king-addons-horizontal-bottom-timeline {{CURRENT_ITEM}} .king-addons-story-info' => 'background-color: {{VALUE}}',
829 '{{WRAPPER}} .king-addons-horizontal {{CURRENT_ITEM}} .king-addons-story-info' => 'background-color: {{VALUE}}'
830 ],
831 'condition' => [
832 'show_custom_styles' => 'yes'
833 ]
834 ]
835 );
836
837 $repeater->add_control(
838 'repeater_story_border_color',
839 [
840 'label' => esc_html__('Border Color', 'king-addons'),
841 'type' => Controls_Manager::COLOR,
842 'selectors' => [
843 '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-story-info' => 'border-color: {{VALUE}} !important;',
844 '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-left-aligned .king-addons-story-info-vertical' => 'border-color: {{VALUE}} !important;',
845 '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-right-aligned .king-addons-story-info-vertical' => 'border-color: {{VALUE}} !important;',
846
847
848 '{{WRAPPER}} {{CURRENT_ITEM}}.swiper-slide-line-top .king-addons-story-info:before' => 'border-bottom-color: {{VALUE}} !important;',
849 '{{WRAPPER}} {{CURRENT_ITEM}}.swiper-slide-line-bottom .king-addons-story-info:before' => 'border-top-color: {{VALUE}} !important',
850 '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-left-aligned .king-addons-story-info-vertical:after' => 'border-left-color: {{VALUE}} !important',
851 'body[data-elementor-device-mode=mobile] {{WRAPPER}} .king-addons-wrapper .king-addons-both-sided-timeline .king-addons-left-aligned .king-addons-data-wrap:after' => 'border-right-color: {{VALUE}} !important; border-left-color: transparent !important;',
852 '{{WRAPPER}} .king-addons-centered .king-addons-one-sided-timeline .king-addons-right-aligned-aligned .king-addons-data-wrap:after' => 'border-right-color: {{VALUE}} !important; border-left-color: transparent !important;',
853 ],
854 'default' => '#5B03FF',
855 'condition' => [
856 'show_custom_styles' => 'yes'
857 ]
858 ]
859 );
860
861 $repeater->add_control(
862 'repeater_triangle_color',
863 [
864 'label' => esc_html__('Triangle', 'king-addons'),
865 'type' => Controls_Manager::HEADING,
866 'separator' => 'before',
867 'condition' => [
868 'show_custom_styles' => 'yes'
869 ]
870 ]
871 );
872
873 $repeater->add_control(
874 'repeater_triangle_bgcolor',
875 [
876 'label' => esc_html__('Color', 'king-addons'),
877 'type' => Controls_Manager::COLOR,
878 'selectors' => [
879 '{{WRAPPER}} .king-addons-wrapper .king-addons-one-sided-timeline {{CURRENT_ITEM}}.king-addons-right-aligned .king-addons-data-wrap:after' => 'border-right-color: {{icon_bgcolor}}',
880 '{{WRAPPER}} .king-addons-wrapper .king-addons-one-sided-timeline-left {{CURRENT_ITEM}}.king-addons-left-aligned .king-addons-data-wrap:after' => 'border-left-color: {{VALUE}}',
881 '{{WRAPPER}} .king-addons-wrapper {{CURRENT_ITEM}}.king-addons-right-aligned .king-addons-data-wrap:after' => 'border-right-color: {{VALUE}}',
882 '{{WRAPPER}} .king-addons-horizontal {{CURRENT_ITEM}} .king-addons-story-info:before' => 'border-top-color: {{VALUE}} !important',
883 '{{WRAPPER}} .king-addons-horizontal-bottom {{CURRENT_ITEM}} .king-addons-story-info:before' => 'border-bottom-color: {{VALUE}} !important',
884 '{{WRAPPER}} .king-addons-wrapper {{CURRENT_ITEM}}.king-addons-left-aligned .king-addons-data-wrap:after' => 'border-left-color: {{VALUE}} !important',
885 '{{WRAPPER}} .king-addons-centered {{CURRENT_ITEM}} .king-addons-one-sided-timeline .king-addons-right-aligned .king-addons-data-wrap:after' => 'border-right-color: {{VALUE}} !important; border-left-color: transparent !important;',
886 '{{WRAPPER}} .king-addons-wrapper {{CURRENT_ITEM}} .king-addons-one-sided-timeline-left .king-addons-left-aligned .king-addons-data-wrap:after' => 'border-left-color: {{VALUE}} !important',
887 ],
888 'default' => '#5B03FF',
889 'condition' => [
890 'show_custom_styles' => 'yes'
891 ]
892
893 ]
894 );
895
896 $repeater->add_control(
897 'repeater_media_styles',
898 [
899 'label' => esc_html__('Media', 'king-addons'),
900 'type' => Controls_Manager::HEADING,
901 'separator' => 'before',
902 'condition' => [
903 'show_custom_styles' => 'yes'
904 ]
905 ]
906 );
907
908 $repeater->add_control(
909 'repeater_overlay_bgcolor',
910 [
911 'label' => esc_html__('Overlay Background Color', 'king-addons'),
912 'type' => Controls_Manager::COLOR,
913 'selectors' => [
914 '{{WRAPPER}} .king-addons-wrapper {{CURRENT_ITEM}} .king-addons-timeline-story-overlay' => 'background-color: {{VALUE}}',
915 ],
916 'default' => '#0000005E',
917 'condition' => [
918 'show_custom_styles' => 'yes'
919 ]
920 ]
921 );
922
923 $repeater->add_control(
924 'repeater_media_item_border_color',
925 [
926 'label' => esc_html__('Border Color', 'king-addons'),
927 'type' => Controls_Manager::COLOR,
928 'default' => '#E8E8E8',
929 'selectors' => [
930 '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-timeline-media' => 'border-color: {{VALUE}}',
931 ],
932 'condition' => [
933 'show_custom_styles' => 'yes'
934 ]
935 ]
936 );
937
938 $repeater->add_control(
939 'repeater_item_content_styles',
940 [
941 'label' => esc_html__('Content', 'king-addons'),
942 'type' => Controls_Manager::HEADING,
943 'separator' => 'before',
944 'condition' => [
945 'show_custom_styles' => 'yes'
946 ]
947 ]
948 );
949
950
951 $repeater->add_control(
952 'repeater_story_title_color',
953 [
954 'label' => esc_html__('Title Color', 'king-addons'),
955 'type' => Controls_Manager::COLOR,
956 'selectors' => [
957 '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-title' => 'color: {{VALUE}} !important;',
958 ],
959 'default' => '#444444',
960 'condition' => [
961 'show_custom_styles' => 'yes'
962 ]
963 ]
964 );
965
966 $repeater->add_control(
967 'repeater_description_color',
968 [
969 'label' => esc_html__('Description Color', 'king-addons'),
970 'type' => Controls_Manager::COLOR,
971 'selectors' => [
972 '{{WRAPPER}} .king-addons-wrapper {{CURRENT_ITEM}} .king-addons-description' => 'color: {{VALUE}};',
973 '{{WRAPPER}} .king-addons-wrapper {{CURRENT_ITEM}} .king-addons-description p' => 'color: {{VALUE}};'
974 ],
975 'default' => '#333333',
976 'condition' => [
977 'show_custom_styles' => 'yes'
978 ]
979 ]
980 );
981
982 $repeater->add_control(
983 'item_content_border_color',
984 [
985 'label' => esc_html__('Border Color', 'king-addons'),
986 'type' => Controls_Manager::COLOR,
987 'default' => '#E8E8E8',
988 'selectors' => [
989 '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-timeline-content-wrapper' => 'border-color: {{VALUE}}',
990 ],
991 'condition' => [
992 'show_custom_styles' => 'yes'
993 ]
994 ]
995 );
996
997 $repeater->add_control(
998 'repeater_main_line_content_styles',
999 [
1000 'label' => esc_html__('Main Line', 'king-addons'),
1001 'type' => Controls_Manager::HEADING,
1002 'separator' => 'before',
1003 'condition' => [
1004 'show_custom_styles' => 'yes'
1005 ]
1006 ]
1007 );
1008
1009 $repeater->add_control(
1010 'repeater_timeline_icon_color',
1011 [
1012 'label' => esc_html__('Icon Color', 'king-addons'),
1013 'type' => Controls_Manager::COLOR,
1014 'selectors' => [
1015 '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-icon i' => 'color: {{VALUE}}',
1016 '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-icon svg' => 'fill: {{VALUE}}'
1017 ],
1018 'default' => '#000',
1019 'condition' => [
1020 'show_custom_styles' => 'yes'
1021 ]
1022 ]
1023 );
1024
1025 $repeater->add_control(
1026 'repeater_icon_timeline_fill_color',
1027 [
1028 'label' => esc_html__('Icon Fill Color', 'king-addons'),
1029 'type' => Controls_Manager::COLOR,
1030 'default' => '#fff',
1031 'selectors' => [
1032 '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-change-border-color.king-addons-icon i' => 'color: {{VALUE}} !important;',
1033 '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-change-border-color.king-addons-icon svg' => 'fill: {{VALUE}} !important;',
1034 ],
1035 'condition' => [
1036 'show_custom_styles' => 'yes'
1037 ]
1038 ]
1039 );
1040
1041 $repeater->add_control(
1042 'repeater_timeline_icon_bg_color',
1043 [
1044 'label' => esc_html__('Icon Background Color', 'king-addons'),
1045 'type' => Controls_Manager::COLOR,
1046 'selectors' => [
1047 '{{WRAPPER}} .king-addons-wrapper {{CURRENT_ITEM}} .king-addons-icon' => 'background-color: {{VALUE}} !important;',
1048 ],
1049 'default' => '#FFFFF',
1050 'condition' => [
1051 'show_custom_styles' => 'yes'
1052 ]
1053 ]
1054 );
1055
1056 $repeater->add_control(
1057 'repeater_icon_timeline_background_fill_color',
1058 [
1059 'label' => esc_html__('Icon Background Fill Color', 'king-addons'),
1060 'type' => Controls_Manager::COLOR,
1061 'default' => '#FFFFFF',
1062 'selectors' => [
1063 '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-change-border-color.king-addons-icon' => 'background-color: {{VALUE}} !important;',
1064 ],
1065 'condition' => [
1066 'show_custom_styles' => 'yes'
1067 ],
1068 ]
1069 );
1070
1071 $repeater->add_control(
1072 'repeater_icon_border_color',
1073 [
1074 'label' => esc_html__('Icon Border Color', 'king-addons'),
1075 'type' => Controls_Manager::COLOR,
1076 'default' => '#000',
1077 'selectors' => [
1078 '{{WRAPPER}} .king-addons-wrapper {{CURRENT_ITEM}} .king-addons-icon' => 'border-color: {{VALUE}}',
1079 ],
1080 'condition' => [
1081 'show_custom_styles' => 'yes'
1082 ]
1083 ]
1084 );
1085
1086 $repeater->add_control(
1087 'item_icon_styles',
1088 [
1089 'label' => esc_html__('Media Icon', 'king-addons'),
1090 'type' => Controls_Manager::HEADING,
1091 'separator' => 'before',
1092 'condition' => [
1093 'repeater_media' => 'icon',
1094 ],
1095 ]
1096 );
1097
1098 $repeater->add_control(
1099 'repeater_timeline_item_icon_color',
1100 [
1101 'label' => esc_html__('Color', 'king-addons'),
1102 'type' => Controls_Manager::COLOR,
1103 'selectors' => [
1104 '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-timeline-media i' => 'color: {{VALUE}}',
1105 '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-timeline-media svg' => 'fill: {{VALUE}}'
1106 ],
1107 'condition' => [
1108 'repeater_media' => 'icon',
1109 ],
1110 'default' => '#000',
1111 ]
1112 );
1113
1114 $repeater->add_control(
1115 'repeater_timeline_item_icon_bgcolor',
1116 [
1117 'label' => esc_html__('Background Color', 'king-addons'),
1118 'type' => Controls_Manager::COLOR,
1119 'selectors' => [
1120 '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-timeline-media' => 'background-color: {{VALUE}}',
1121 ],
1122 'condition' => [
1123 'repeater_media' => 'icon',
1124 ],
1125 'default' => '#FFF',
1126 ]
1127 );
1128
1129 $repeater->add_responsive_control(
1130 'repeater_timeline_item_icon_size',
1131 [
1132 'label' => esc_html__('Size', 'king-addons'),
1133 'type' => Controls_Manager::SLIDER,
1134 'size_units' => ['px'],
1135 'range' => [
1136 'px' => [
1137 'min' => 0,
1138 'max' => 600,
1139 ],
1140 ],
1141 'default' => [
1142 'unit' => 'px',
1143 'size' => 40,
1144 ],
1145 'selectors' => [
1146 '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-timeline-media i' => 'font-size: {{SIZE}}{{UNIT}};',
1147 '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-timeline-media svg' => 'width: {{SIZE}}{{UNIT}};',
1148
1149 ],
1150 'condition' => [
1151 'repeater_media' => 'icon',
1152 ]
1153 ]
1154 );
1155
1156 $repeater->add_responsive_control(
1157 'repeater_timeline_item_icon_padding',
1158 [
1159 'label' => esc_html__('Padding', 'king-addons'),
1160 'type' => Controls_Manager::DIMENSIONS,
1161 'size_units' => ['px'],
1162 'default' => [
1163 'top' => 20,
1164 'right' => 20,
1165 'bottom' => 20,
1166 'left' => 20,
1167 ],
1168 'selectors' => [
1169 '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-timeline-media' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1170 ],
1171 'condition' => [
1172
1173
1174 'repeater_media' => 'icon'
1175 ],
1176 ]
1177 );
1178
1179 $repeater->add_responsive_control(
1180 'repeater_timeline_item_icon_alignment',
1181 [
1182 'label' => esc_html__('Align', 'king-addons'),
1183 'type' => Controls_Manager::CHOOSE,
1184 'label_block' => false,
1185 'default' => 'center',
1186 'options' => [
1187 'left' => [
1188 'title' => esc_html__('Start', 'king-addons'),
1189 'icon' => 'eicon-text-align-left',
1190 ],
1191 'center' => [
1192 'title' => esc_html__('Center', 'king-addons'),
1193 'icon' => 'eicon-text-align-center',
1194 ],
1195 'right' => [
1196 'title' => esc_html__('End', 'king-addons'),
1197 'icon' => 'eicon-text-align-right',
1198 ],
1199 ],
1200 'selectors' => [
1201 '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-timeline-media i' => 'display: block; text-align: {{VALUE}};',
1202 '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-timeline-media svg' => 'text-align: {{VALUE}};'
1203 ],
1204 'condition' => [
1205
1206 'repeater_media' => 'icon'
1207 ]
1208 ]
1209 );
1210
1211 $repeater->end_controls_tab();
1212
1213 $repeater->end_controls_tabs();
1214
1215 $this->add_control(
1216 'timeline_repeater_list',
1217 [
1218 'label' => esc_html__('Content', 'king-addons'),
1219 'type' => Controls_Manager::REPEATER,
1220 'fields' => $repeater->get_controls(),
1221 'default' => [
1222 [
1223 'repeater_story_title' => esc_html__('Timeline Item 1', 'king-addons'),
1224 'repeater_description' => esc_html__('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima incidunt voluptates nemo.', 'king-addons'),
1225 'repeater_year' => esc_html__('2023', 'king-addons'),
1226 'repeater_date_label' => esc_html__('January 2023', 'king-addons'),
1227 'repeater_extra_label' => esc_html__('Company Established', 'king-addons'),
1228 'repeater_story_icon' => [
1229 'value' => 'far fa-star',
1230 'library' => 'solid'
1231 ],
1232 'repeater_show_year_label' => 'yes',
1233 'repeater_image' => [
1234 'url' => Utils::get_placeholder_image_src(),
1235 'id' => '',
1236 ],
1237 'repeater_youtube_video_url' => '',
1238 'item_bg_color' => '#f44771',
1239 'repeater_triangle_bgcolor' => '#f44771',
1240 'repeater_overlay_bgcolor' => '#0000005E',
1241 'repeater_story_title_color' => '#FCFCFC',
1242 'repeater_description_color' => '#ECECEC',
1243 'repeater_timeline_icon_bg_color' => '',
1244 'item_content_border_color' => '#E8E8E8',
1245 'repeater_timeline_icon_color' => '#E8E8E8',
1246 'repeater_icon_timeline_fill_color' => '#f44771',
1247 'repeater_icon_timeline_background_fill_color' => '#FFFFFF',
1248 'repeater_icon_border_color' => '#E8E8E8'
1249 ],
1250 [
1251 'repeater_story_title' => esc_html__('Timeline Item 2', 'king-addons'),
1252 'repeater_description' => esc_html__('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima incidunt voluptates nemo.', 'king-addons'),
1253 'repeater_year' => esc_html__('2023', 'king-addons'),
1254 'repeater_date_label' => esc_html__('February 2023', 'king-addons'),
1255 'repeater_extra_label' => esc_html__('New office in California', 'king-addons'),
1256 'repeater_story_icon' => [
1257 'value' => 'fas fa-crown',
1258 'library' => 'solid'
1259 ],
1260 'repeater_image' => [
1261 'url' => Utils::get_placeholder_image_src(),
1262 'id' => '',
1263 ],
1264 'repeater_youtube_video_url' => '',
1265 'item_bg_color' => '#f44771',
1266 'repeater_triangle_bgcolor' => '#f44771',
1267 'repeater_overlay_bgcolor' => '#0000005E',
1268 'repeater_story_title_color' => '#FCFCFC',
1269 'repeater_description_color' => '#ECECEC',
1270 'repeater_timeline_icon_bg_color' => '',
1271 'item_content_border_color' => '#E8E8E8',
1272 'repeater_timeline_icon_color' => '#E8E8E8',
1273 'repeater_icon_timeline_fill_color' => '#f44771',
1274 'repeater_icon_timeline_background_fill_color' => '#FFFFFF',
1275 'repeater_icon_border_color' => '#E8E8E8'
1276 ],
1277 [
1278 'repeater_story_title' => esc_html__('Timeline Item 3', 'king-addons'),
1279 'repeater_description' => esc_html__('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima incidunt voluptates nemo.', 'king-addons'),
1280 'repeater_year' => esc_html__('2023', 'king-addons'),
1281 'repeater_date_label' => esc_html__('March 2023', 'king-addons'),
1282 'repeater_extra_label' => esc_html__('First Product Launch', 'king-addons'),
1283 'repeater_story_icon' => [
1284 'value' => 'fas fa-rocket',
1285 'library' => 'solid'
1286 ],
1287 'repeater_show_year_label' => 'yes',
1288 'repeater_image' => [
1289 'url' => Utils::get_placeholder_image_src(),
1290 'id' => '',
1291 ],
1292 'repeater_youtube_video_url' => '',
1293 'item_bg_color' => '#f44771',
1294 'repeater_triangle_bgcolor' => '#f44771',
1295 'repeater_overlay_bgcolor' => '#0000005E',
1296 'repeater_story_title_color' => '#FCFCFC',
1297 'repeater_description_color' => '#FDFDFD',
1298 'item_content_border_color' => '#E8E8E8',
1299 'repeater_timeline_icon_bg_color' => '',
1300 'repeater_timeline_icon_color' => '#E8E8E8',
1301 'repeater_icon_timeline_fill_color' => '#f44771',
1302 'repeater_icon_timeline_background_fill_color' => '#FFFFFF',
1303 'repeater_icon_border_color' => '#E8E8E8'
1304 ],
1305 [
1306 'repeater_story_title' => esc_html__('Timeline Item 4', 'king-addons'),
1307 'repeater_description' => esc_html__('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima incidunt voluptates nemo.', 'king-addons'),
1308 'repeater_year' => esc_html__('2023', 'king-addons'),
1309 'repeater_date_label' => esc_html__('April 2023', 'king-addons'),
1310 'repeater_extra_label' => esc_html__('Entering Stock Market', 'king-addons'),
1311 'repeater_story_icon' => [
1312 'value' => 'fas fa-bolt',
1313 'library' => 'solid'
1314 ],
1315 'repeater_image' => [
1316 'url' => Utils::get_placeholder_image_src(),
1317 'id' => '',
1318 ],
1319 'repeater_youtube_video_url' => '',
1320 'item_bg_color' => '#f44771',
1321 'repeater_triangle_bgcolor' => '#f44771',
1322 'repeater_overlay_bgcolor' => '#0000005E',
1323 'repeater_story_title_color' => '#FCFCFC',
1324 'repeater_description_color' => '#F3F3F3',
1325 'item_content_border_color' => '#E8E8E8',
1326 'repeater_timeline_icon_bg_color' => '',
1327 'repeater_timeline_icon_color' => '#E8E8E8',
1328 'repeater_icon_timeline_fill_color' => '#f44771',
1329 'repeater_icon_timeline_background_fill_color' => '#FFFFFF',
1330 'repeater_icon_border_color' => '#E8E8E8'
1331 ],
1332 ],
1333 'title_field' => '{{ repeater_story_title }}',
1334 ]
1335 );
1336
1337 if (!king_addons_freemius()->can_use_premium_code__premium_only()) {
1338 $this->add_control(
1339 'timeline_repeater_pro_notice',
1340 [
1341 'type' => Controls_Manager::RAW_HTML,
1342 'raw' => 'More than 4 Slides are available<br> in the <strong><a href="https://kingaddons.com/pricing/?utm_source=kng-module-posts-timeline-settings-upgrade-pro&utm_medium=plugin&utm_campaign=kng" target="_blank">Pro version</a></strong>',
1343
1344 'content_classes' => 'king-addons-pro-notice',
1345 ]
1346 );
1347 }
1348
1349 $this->end_controls_section();
1350
1351
1352 $post_types = $this->add_option_query_source();
1353
1354
1355 $post_taxonomies = Core::getCustomTypes('tax', false);
1356
1357 $this->start_controls_section(
1358 'query_section',
1359 [
1360 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Query', 'king-addons'),
1361 'condition' => [
1362 'timeline_content' => 'dynamic',
1363 ]
1364 ]
1365 );
1366
1367 $this->add_control(
1368 'timeline_post_types',
1369 [
1370 'label' => esc_html__('Post Type', 'king-addons'),
1371 'type' => Controls_Manager::SELECT,
1372 'default' => 'post',
1373 'label_block' => false,
1374 'options' => $post_types,
1375 ]
1376 );
1377
1378 Core::renderUpgradeProNotice($this, Controls_Manager::RAW_HTML, 'timeline', 'timeline_post_types', ['pro-rl']);
1379
1380 if (!king_addons_freemius()->can_use_premium_code__premium_only()) {
1381 $this->add_control(
1382 'query_source_cpt_pro_notice',
1383 [
1384 'raw' => 'This option is available<br> in the <strong><a href="https://kingaddons.com/pricing/?utm_source=kng-module-grid-upgrade-pro&utm_medium=plugin&utm_campaign=kng" target="_blank">Pro version</a></strong>',
1385 'type' => Controls_Manager::RAW_HTML,
1386 'content_classes' => 'king-addons-pro-notice',
1387 'condition' => [
1388 'timeline_post_types!' => ['post', 'page', 'related', 'current', 'pro-rl'],
1389 ]
1390 ]
1391 );
1392 }
1393
1394 $this->add_control(
1395 'query_selection',
1396 [
1397 'label' => esc_html__('Selection', 'king-addons'),
1398 'type' => Controls_Manager::SELECT,
1399 'default' => 'dynamic',
1400 'options' => [
1401 'dynamic' => esc_html__('Dynamic', 'king-addons'),
1402 'manual' => esc_html__('Manual', 'king-addons'),
1403 ],
1404 'condition' => [
1405 'timeline_post_types!' => ['current', 'related'],
1406 ],
1407 ]
1408 );
1409
1410 $this->add_control(
1411 'query_tax_selection',
1412 [
1413 'label' => esc_html__('Selection Taxonomy', 'king-addons'),
1414 'type' => Controls_Manager::SELECT,
1415 'default' => 'category',
1416 'options' => $post_taxonomies,
1417 'condition' => [
1418 'timeline_post_types' => 'related',
1419 ],
1420 ]
1421 );
1422
1423
1424 foreach ($post_types as $slug => $title) {
1425 $this->add_control(
1426 'query_manual_' . $slug,
1427 [
1428 'label' => esc_html__('Select ', 'king-addons') . $title,
1429 'type' => 'king-addons-ajax-select2',
1430 'options' => 'ajaxselect2/getPostsByPostType',
1431 'query_slug' => $slug,
1432 'multiple' => true,
1433 'label_block' => true,
1434 'condition' => [
1435 'timeline_post_types' => $slug,
1436 'query_selection' => 'manual',
1437 ],
1438 'separator' => 'before',
1439 ]
1440 );
1441 }
1442
1443 $this->add_control(
1444 'query_author',
1445 [
1446 'label' => esc_html__('Authors', 'king-addons'),
1447 'type' => 'king-addons-ajax-select2',
1448 'options' => 'ajaxselect2/getUsers',
1449 'multiple' => true,
1450 'label_block' => true,
1451 'separator' => 'before',
1452 'condition' => [
1453 'timeline_post_types!' => ['current', 'related'],
1454 'query_selection' => 'dynamic',
1455 ],
1456 ]
1457 );
1458
1459 foreach ($post_taxonomies as $slug => $title) {
1460 global $wp_taxonomies;
1461 $post_type = '';
1462 if (isset($wp_taxonomies[$slug]->object_type[0])) {
1463 $post_type = $wp_taxonomies[$slug]->object_type[0];
1464 }
1465
1466 $this->add_control(
1467 'query_taxonomy_' . $slug,
1468 [
1469 'label' => $title,
1470 'type' => 'king-addons-ajax-select2',
1471 'options' => 'ajaxselect2/getTaxonomies',
1472 'query_slug' => $slug,
1473 'multiple' => true,
1474 'label_block' => true,
1475 'condition' => [
1476 'timeline_post_types' => $post_type,
1477 'query_selection' => 'dynamic',
1478 ],
1479 ]
1480 );
1481 }
1482
1483 foreach ($post_types as $slug => $title) {
1484 $this->add_control(
1485 'query_exclude_' . $slug,
1486 [
1487 'label' => esc_html__('Exclude ', 'king-addons') . $title,
1488 'type' => 'king-addons-ajax-select2',
1489 'options' => 'ajaxselect2/getPostsByPostType',
1490 'query_slug' => $slug,
1491 'multiple' => true,
1492 'label_block' => true,
1493 'condition' => [
1494 'timeline_content' => 'dynamic',
1495 'timeline_post_types' => $slug,
1496 'timeline_post_types!' => ['current', 'related'],
1497 'query_selection' => 'dynamic',
1498 ],
1499 ]
1500 );
1501 }
1502
1503 $this->add_control_posts_per_page();
1504
1505 if (!king_addons_freemius()->can_use_premium_code__premium_only()) {
1506 $this->add_control(
1507 'posts_per_page_pro_notice',
1508 [
1509 'type' => Controls_Manager::RAW_HTML,
1510 'raw' => 'More than 4 Posts are available<br> in the <strong><a href="https://kingaddons.com/pricing/?utm_source=kng-module-posts-timeline-settings-upgrade-pro&utm_medium=plugin&utm_campaign=kng" target="_blank">Pro version</a></strong>',
1511
1512 'content_classes' => 'king-addons-pro-notice',
1513 ]
1514 );
1515 }
1516
1517 $this->add_control(
1518 'order_posts',
1519 [
1520 'label' => esc_html__('Order By', 'king-addons'),
1521 'type' => Controls_Manager::SELECT,
1522 'default' => 'date',
1523 'label_block' => false,
1524 'options' => [
1525 'title' => esc_html__('Title', 'king-addons'),
1526 'date' => esc_html__('Date', 'king-addons'),
1527 ],
1528 'condition' => [
1529 'query_selection' => 'dynamic',
1530 ]
1531 ]
1532 );
1533
1534 $this->add_control(
1535 'order_direction',
1536 [
1537 'label' => esc_html__('Order', 'king-addons'),
1538 'type' => Controls_Manager::SELECT,
1539 'default' => 'DESC',
1540 'label_block' => false,
1541 'options' => [
1542 'ASC' => esc_html__('Ascending', 'king-addons'),
1543 'DESC' => esc_html__('Descending', 'king-addons'),
1544 ],
1545 'condition' => [
1546 'query_selection' => 'dynamic',
1547 ]
1548 ]
1549 );
1550
1551 $this->add_control(
1552 'query_not_found_text',
1553 [
1554 'label' => esc_html__('Not Found Text', 'king-addons'),
1555 'type' => Controls_Manager::TEXT,
1556 'dynamic' => [
1557 'active' => true,
1558 ],
1559 'default' => 'No Posts Found!',
1560 'condition' => [
1561
1562
1563 ]
1564 ]
1565 );
1566
1567 $this->add_control(
1568 'query_exclude_no_images',
1569 [
1570 'label' => esc_html__('Exclude Items without Thumbnail', 'king-addons'),
1571 'type' => Controls_Manager::SWITCHER,
1572 'return_value' => 'yes',
1573 'label_block' => false
1574 ]
1575 );
1576
1577 $this->end_controls_section();
1578
1579 $this->start_controls_section(
1580 'content_section',
1581 [
1582 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Content', 'king-addons'),
1583 'condition' => [
1584
1585 ]
1586 ]
1587 );
1588
1589 $this->add_responsive_control(
1590 'content_alignment_left',
1591 [
1592 'label' => esc_html__('Content Align', 'king-addons'),
1593 'type' => Controls_Manager::CHOOSE,
1594 'label_block' => false,
1595 'default' => 'center',
1596 'options' => [
1597 'left' => [
1598 'title' => esc_html__('Left', 'king-addons'),
1599 'icon' => 'eicon-text-align-left',
1600 ],
1601 'center' => [
1602 'title' => esc_html__('Center', 'king-addons'),
1603 'icon' => 'eicon-text-align-center',
1604 ],
1605 'right' => [
1606 'title' => esc_html__('Right', 'king-addons'),
1607 'icon' => 'eicon-text-align-right',
1608 ],
1609 ],
1610 'selectors' => [
1611 '{{WRAPPER}} .king-addons-story-info' => 'text-align: {{VALUE}};',
1612 '{{WRAPPER}} .king-addons-left-aligned .king-addons-story-info-vertical' => 'text-align: {{VALUE}};',
1613 '{{WRAPPER}} .king-addons-left-aligned .king-addons-title-wrap' => 'text-align: {{VALUE}};',
1614 '{{WRAPPER}} .king-addons-left-aligned .king-addons-description' => 'text-align: {{VALUE}};',
1615 '{{WRAPPER}} .king-addons-left-aligned .king-addons-inner-date-label' => 'text-align: {{VALUE}};',
1616 '{{WRAPPER}} .swiper-wrapper .king-addons-title-wrap' => 'text-align: {{VALUE}};',
1617 '{{WRAPPER}} .swiper-wrapper .king-addons-description' => 'text-align: {{VALUE}};',
1618 '{{WRAPPER}} .swiper-wrapper .king-addons-inner-date-label' => 'text-align: {{VALUE}};',
1619 '{{WRAPPER}} .king-addons-title-wrap' => 'text-align: {{VALUE}};',
1620 ],
1621 'condition' => [
1622 'timeline_layout' => ['centered', 'one-sided-left', 'horizontal', 'horizontal-bottom']
1623 ]
1624 ]
1625 );
1626
1627 $this->add_responsive_control(
1628 'content_alignment',
1629 [
1630 'label' => esc_html__('Content Align (Right)', 'king-addons'),
1631 'type' => Controls_Manager::CHOOSE,
1632 'label_block' => false,
1633 'default' => 'center',
1634 'options' => [
1635 'left' => [
1636 'title' => esc_html__('Left', 'king-addons'),
1637 'icon' => 'eicon-text-align-left',
1638 ],
1639 'center' => [
1640 'title' => esc_html__('Center', 'king-addons'),
1641 'icon' => 'eicon-text-align-center',
1642 ],
1643 'right' => [
1644 'title' => esc_html__('Right', 'king-addons'),
1645 'icon' => 'eicon-text-align-right',
1646 ],
1647 ],
1648 'selectors' => [
1649 '{{WRAPPER}} .king-addons-story-info' => 'text-align: {{VALUE}};',
1650 '{{WRAPPER}} .king-addons-right-aligned .king-addons-story-info-vertical' => 'text-align: {{VALUE}};',
1651 '{{WRAPPER}} .king-addons-right-aligned .king-addons-title-wrap' => 'text-align: {{VALUE}};',
1652 '{{WRAPPER}} .king-addons-right-aligned .king-addons-description' => 'text-align: {{VALUE}};',
1653 '{{WRAPPER}} .king-addons-right-aligned .king-addons-inner-date-label' => 'text-align: {{VALUE}};',
1654 '{{WRAPPER}} .king-addons-title-wrap' => 'text-align: {{VALUE}};',
1655 ],
1656 'condition' => [
1657 'timeline_layout' => ['centered', 'one-sided']
1658 ]
1659 ]
1660 );
1661
1662 $this->add_control(
1663 'show_overlay',
1664 [
1665 'label' => esc_html__('Show Image Overlay', 'king-addons'),
1666 'type' => Controls_Manager::SWITCHER,
1667 'return_value' => 'yes',
1668 'default' => 'no',
1669 'label_block' => false,
1670 'separator' => 'before',
1671 'render_type' => 'template',
1672 'condition' => [
1673 'content_layout' => 'image-top'
1674 ],
1675 ]
1676 );
1677
1678 $this->add_control(
1679 'show_on_hover',
1680 [
1681 'label' => esc_html__('Show Items on Hover', 'king-addons'),
1682 'type' => Controls_Manager::SWITCHER,
1683 'return_value' => 'yes',
1684 'label_block' => false,
1685 'selectors_dictionary' => [
1686 'yes' => 'opacity: 0; transform: translateY(-50%); transition: all 0.5s ease',
1687 'no' => 'visibility: visible;',
1688 ],
1689 'selectors' => [
1690 '{{WRAPPER}} .king-addons-story-info' => '{{VALUE}}',
1691 '{{WRAPPER}} .king-addons-horizontal-timeline .swiper-slide:hover .king-addons-story-info' => 'opacity: 1; transform: translateY(0%);'
1692 ],
1693 'condition' => [
1694 'timeline_layout' => ['horizontal']
1695 ]
1696 ]
1697 );
1698
1699 $this->add_control(
1700 'show_title',
1701 [
1702 'label' => esc_html__('Show Title', 'king-addons'),
1703 'type' => Controls_Manager::SWITCHER,
1704 'return_value' => 'yes',
1705 'default' => 'yes',
1706 'label_block' => false,
1707 'render_type' => 'template',
1708 'separator' => 'before'
1709 ]
1710 );
1711
1712 $this->add_control(
1713 'title_overlay',
1714 [
1715 'label' => esc_html__('Title Over Image', 'king-addons'),
1716 'type' => Controls_Manager::SWITCHER,
1717 'return_value' => 'yes',
1718 'default' => 'no',
1719 'label_block' => false,
1720 'render_type' => 'template',
1721 'condition' => [
1722 'show_overlay' => 'yes',
1723 'content_layout' => 'image-top',
1724 'show_title' => 'yes'
1725 ]
1726 ]
1727 );
1728
1729 $this->add_control(
1730 'show_date',
1731 [
1732 'label' => esc_html__('Show Date', 'king-addons'),
1733 'type' => Controls_Manager::SWITCHER,
1734 'return_value' => 'yes',
1735 'default' => 'yes',
1736 'label_block' => false,
1737 'render_type' => 'template',
1738 'separator' => 'before',
1739 'condition' => [
1740 'timeline_content' => 'dynamic'
1741 ]
1742 ]
1743 );
1744
1745 $this->add_control(
1746 'date_overlay',
1747 [
1748 'label' => esc_html__('Date Over Image', 'king-addons'),
1749 'type' => Controls_Manager::SWITCHER,
1750 'return_value' => 'yes',
1751 'default' => 'no',
1752 'label_block' => false,
1753
1754 'condition' => [
1755 'show_overlay' => 'yes',
1756 'content_layout' => 'image-top',
1757 'timeline_content' => 'dynamic',
1758 'show_date' => 'yes'
1759 ]
1760 ]
1761 );
1762
1763 $this->add_control(
1764 'show_description',
1765 [
1766 'label' => esc_html__('Show Description', 'king-addons'),
1767 'type' => Controls_Manager::SWITCHER,
1768 'return_value' => 'yes',
1769 'default' => 'yes',
1770 'label_block' => false,
1771 'render_type' => 'template',
1772 'separator' => 'before',
1773 'condition' => [
1774
1775 ]
1776 ]
1777 );
1778
1779 $this->add_control(
1780 'description_overlay',
1781 [
1782 'label' => esc_html__('Description Over Image', 'king-addons'),
1783 'type' => Controls_Manager::SWITCHER,
1784 'return_value' => 'yes',
1785 'default' => 'no',
1786 'label_block' => false,
1787 'condition' => [
1788 'show_overlay' => 'yes',
1789 'content_layout' => 'image-top',
1790 'show_description' => 'yes'
1791 ]
1792 ]
1793 );
1794
1795 $this->add_control(
1796 'excerpt_count',
1797 [
1798 'label' => esc_html__('Excerpt Count', 'king-addons'),
1799 'type' => Controls_Manager::NUMBER,
1800 'min' => 0,
1801 'max' => 200,
1802 'render_type' => 'template',
1803 'frontend_available' => true,
1804 'default' => 10,
1805 'condition' => [
1806 'timeline_content' => 'dynamic',
1807 'show_description' => 'yes'
1808 ]
1809 ]
1810 );
1811
1812
1813 $this->add_control(
1814 'show_readmore',
1815 [
1816 'label' => esc_html__('Show Read More', 'king-addons'),
1817 'type' => Controls_Manager::SWITCHER,
1818 'return_value' => 'yes',
1819 'default' => 'yes',
1820 'label_block' => false,
1821 'render_type' => 'template',
1822 'separator' => 'before',
1823 'condition' => [
1824 'timeline_content' => ['dynamic']
1825 ]
1826 ]
1827 );
1828
1829 $this->add_control(
1830 'readmore_overlay',
1831 [
1832 'label' => esc_html__('Read More Over Image', 'king-addons'),
1833 'type' => Controls_Manager::SWITCHER,
1834 'return_value' => 'yes',
1835 'default' => 'no',
1836 'label_block' => false,
1837 'render_type' => 'template',
1838 'condition' => [
1839 'show_overlay' => 'yes',
1840 'show_readmore' => 'yes',
1841 'content_layout' => 'image-top',
1842 'timeline_content' => ['dynamic']
1843 ]
1844 ]
1845 );
1846
1847 $this->add_responsive_control(
1848 'readmore_content_alignment_left',
1849 [
1850 'label' => esc_html__('Align', 'king-addons'),
1851 'type' => Controls_Manager::CHOOSE,
1852 'label_block' => false,
1853 'default' => 'center',
1854 'options' => [
1855 'left' => [
1856 'title' => esc_html__('Left', 'king-addons'),
1857 'icon' => 'eicon-text-align-left',
1858 ],
1859 'center' => [
1860 'title' => esc_html__('Center', 'king-addons'),
1861 'icon' => 'eicon-text-align-center',
1862 ],
1863 'right' => [
1864 'title' => esc_html__('Right', 'king-addons'),
1865 'icon' => 'eicon-text-align-right',
1866 ],
1867 ],
1868 'selectors' => [
1869 '{{WRAPPER}} .king-addons-left-aligned .king-addons-read-more-wrap' => 'text-align: {{VALUE}};',
1870 '{{WRAPPER}} .king-addons-left-aligned .king-addons-read-more-button' => 'text-align: center;',
1871 '{{WRAPPER}} .swiper-wrapper .king-addons-read-more-wrap' => 'text-align: {{VALUE}};',
1872 '{{WRAPPER}} .swiper-wrapper .king-addons-read-more-button' => 'text-align: center;',
1873 ],
1874 'condition' => [
1875 'show_readmore' => 'yes',
1876 'timeline_content' => ['dynamic'],
1877 'timeline_layout!' => 'one-sided',
1878 ]
1879 ]
1880 );
1881
1882 $this->add_responsive_control(
1883 'readmore_content_alignment',
1884 [
1885 'label' => esc_html__('Align (Right)', 'king-addons'),
1886 'type' => Controls_Manager::CHOOSE,
1887 'label_block' => false,
1888 'default' => 'center',
1889 'options' => [
1890 'left' => [
1891 'title' => esc_html__('Left', 'king-addons'),
1892 'icon' => 'eicon-text-align-left',
1893 ],
1894 'center' => [
1895 'title' => esc_html__('Center', 'king-addons'),
1896 'icon' => 'eicon-text-align-center',
1897 ],
1898 'right' => [
1899 'title' => esc_html__('Right', 'king-addons'),
1900 'icon' => 'eicon-text-align-right',
1901 ],
1902 ],
1903 'selectors' => [
1904 '{{WRAPPER}} .king-addons-right-aligned .king-addons-read-more-wrap' => 'text-align: {{VALUE}};',
1905 '{{WRAPPER}} .king-addons-right-aligned .king-addons-read-more-button' => 'text-align: center;',
1906 ],
1907 'condition' => [
1908 'show_readmore' => 'yes',
1909 'timeline_content' => ['dynamic'],
1910 'timeline_layout' => ['centered', 'one-sided']
1911 ]
1912 ]
1913 );
1914
1915 $this->add_control(
1916 'read_more_text',
1917 [
1918 'label' => esc_html__('Read More', 'king-addons'),
1919 'type' => Controls_Manager::TEXT,
1920 'dynamic' => [
1921 'active' => true,
1922 ],
1923 'default' => 'Read More',
1924 'condition' => [
1925 'show_readmore' => 'yes',
1926 'timeline_content' => 'dynamic'
1927 ]
1928 ]
1929 );
1930
1931 $this->end_controls_section();
1932
1933 $this->start_controls_section(
1934 'overlay_section',
1935 [
1936 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Overlay', 'king-addons'),
1937 'tab' => Controls_Manager::TAB_CONTENT,
1938 'condition' => [
1939 'content_layout' => 'image-top',
1940 'show_overlay' => 'yes'
1941 ]
1942 ]
1943 );
1944
1945 $this->add_control(
1946 'overlay_width',
1947 [
1948 'label' => esc_html__('Width', 'king-addons'),
1949 'type' => Controls_Manager::SLIDER,
1950 'size_units' => ['%', 'px'],
1951 'default' => [
1952 'unit' => '%',
1953 'size' => 100,
1954 ],
1955 'range' => [
1956 '%' => [
1957 'min' => 0,
1958 'max' => 100,
1959 ],
1960 'px' => [
1961 'min' => 0,
1962 'max' => 500,
1963 ],
1964 ],
1965 'selectors' => [
1966 '{{WRAPPER}} .king-addons-timeline-story-overlay' => 'width: {{SIZE}}{{UNIT}};top:calc((100% - {{overlay_height.SIZE}}{{overlay_height.UNIT}})/2);left:calc((100% - {{SIZE}}{{UNIT}})/2);',
1967
1968
1969 ],
1970 ]
1971 );
1972
1973 $this->add_responsive_control(
1974 'overlay_height',
1975 [
1976 'label' => esc_html__('Height', 'king-addons'),
1977 'type' => Controls_Manager::SLIDER,
1978 'size_units' => ['%', 'px'],
1979 'default' => [
1980 'unit' => '%',
1981 'size' => 100,
1982 ],
1983 'range' => [
1984 '%' => [
1985 'min' => 0,
1986 'max' => 100,
1987 ],
1988 'px' => [
1989 'min' => 0,
1990 'max' => 500,
1991 ],
1992 ],
1993 'selectors' => [
1994 '{{WRAPPER}} .king-addons-timeline-story-overlay' => 'height: {{SIZE}}{{UNIT}};top:calc((100% - {{SIZE}}{{UNIT}})/2);left:calc((100% - {{overlay_width.SIZE}}{{overlay_width.UNIT}})/2);',
1995
1996
1997 ],
1998 'separator' => 'after',
1999 ]
2000 );
2001
2002 $this->add_responsive_control(
2003 'overlay_content_alignment_vertical',
2004 [
2005 'label' => esc_html__('Content Vertical Align', 'king-addons'),
2006 'type' => Controls_Manager::CHOOSE,
2007 'label_block' => false,
2008 'default' => 'center',
2009 'options' => [
2010 'flex-start' => [
2011 'title' => esc_html__('Start', 'king-addons'),
2012 'icon' => 'eicon-v-align-top',
2013 ],
2014 'center' => [
2015 'title' => esc_html__('Center', 'king-addons'),
2016 'icon' => 'eicon-v-align-middle',
2017 ],
2018 'flex-end' => [
2019 'title' => esc_html__('End', 'king-addons'),
2020 'icon' => 'eicon-v-align-bottom',
2021 ],
2022 ],
2023 'selectors' => [
2024 '{{WRAPPER}} .king-addons-timeline-story-overlay' => 'justify-content: {{VALUE}};',
2025 ],
2026 'condition' => [
2027 'show_overlay' => 'yes',
2028 'content_layout' => 'image-top'
2029 ]
2030 ]
2031 );
2032
2033 $this->add_responsive_control(
2034 'overlay_content_alignment_horizontal',
2035 [
2036 'label' => esc_html__('Content Horizontal Align', 'king-addons'),
2037 'type' => Controls_Manager::CHOOSE,
2038 'label_block' => false,
2039 'default' => 'center',
2040 'options' => [
2041 'flex-start' => [
2042 'title' => esc_html__('Start', 'king-addons'),
2043 'icon' => 'eicon-h-align-left',
2044 ],
2045 'center' => [
2046 'title' => esc_html__('Center', 'king-addons'),
2047 'icon' => 'eicon-h-align-center',
2048 ],
2049 'flex-end' => [
2050 'title' => esc_html__('End', 'king-addons'),
2051 'icon' => 'eicon-h-align-right',
2052 ],
2053 ],
2054 'selectors' => [
2055 '{{WRAPPER}} .king-addons-timeline-story-overlay p' => 'display: flex; justify-content: {{VALUE}};',
2056 '{{WRAPPER}} .king-addons-timeline-story-overlay div' => 'display: flex; justify-content: {{VALUE}};',
2057 ],
2058 'condition' => [
2059 'show_overlay' => 'yes',
2060 'content_layout' => 'image-top'
2061 ]
2062 ]
2063 );
2064
2065 $this->add_control(
2066 'overlay_animation',
2067 [
2068 'label' => esc_html__('Select Animation', 'king-addons'),
2069 'type' => 'king-addons-animations',
2070 'default' => 'none',
2071 ]
2072 );
2073
2074 Core::renderUpgradeProNotice($this, Controls_Manager::RAW_HTML, 'timeline', 'overlay_animation', ['pro-slrt', 'pro-slxrt', 'pro-slbt', 'pro-sllt', 'pro-sltp', 'pro-slxlt', 'pro-sktp', 'pro-skrt', 'pro-skbt', 'pro-sklt', 'pro-scup', 'pro-scdn', 'pro-rllt', 'pro-rlrt']);
2075
2076 $this->add_control(
2077 'overlay_animation_duration',
2078 [
2079 'label' => esc_html__('Animation Duration', 'king-addons'),
2080 'type' => Controls_Manager::NUMBER,
2081 'default' => 0.3,
2082 'min' => 0,
2083 'max' => 5,
2084 'step' => 0.1,
2085 'selectors' => [
2086 '{{WRAPPER}} .king-addons-timeline-story-overlay' => 'transition-duration: {{VALUE}}s;'
2087 ],
2088 'condition' => [
2089 'overlay_animation!' => 'none',
2090 ],
2091 ]
2092 );
2093
2094 $this->add_control(
2095 'overlay_animation_delay',
2096 [
2097 'label' => esc_html__('Animation Delay', 'king-addons'),
2098 'type' => Controls_Manager::NUMBER,
2099 'default' => 0,
2100 'min' => 0,
2101 'max' => 5,
2102 'step' => 0.1,
2103 'selectors' => [
2104 '{{WRAPPER}} .king-addons-animation-wrap:hover .king-addons-timeline-story-overlay' => 'transition-delay: {{VALUE}}s;'
2105 ],
2106 'condition' => [
2107 'overlay_animation!' => 'none',
2108 ],
2109 ]
2110 );
2111
2112 $this->add_control(
2113 'overlay_animation_size',
2114 [
2115 'label' => esc_html__('Animation Size', 'king-addons'),
2116 'type' => Controls_Manager::SELECT,
2117 'options' => [
2118 'small' => esc_html__('Small', 'king-addons'),
2119 'medium' => esc_html__('Medium', 'king-addons'),
2120 'large' => esc_html__('Large', 'king-addons'),
2121 ],
2122 'default' => 'large',
2123 'condition' => [
2124 'overlay_animation!' => 'none',
2125 ],
2126 ]
2127 );
2128
2129 $this->add_control(
2130 'overlay_animation_timing',
2131 [
2132 'label' => esc_html__('Animation Timing', 'king-addons'),
2133 'type' => Controls_Manager::SELECT,
2134 'options' => Core::getAnimationTimings(),
2135 'default' => 'ease-default',
2136 'condition' => [
2137 'overlay_animation!' => 'none',
2138 ],
2139 ]
2140 );
2141
2142 $this->add_control(
2143 'overlay_animation_tr',
2144 [
2145 'label' => esc_html__('Animation Transparency', 'king-addons'),
2146 'type' => Controls_Manager::SWITCHER,
2147 'default' => 'yes',
2148 'return_value' => 'yes',
2149 'condition' => [
2150 'overlay_animation!' => 'none',
2151 ],
2152 ]
2153 );
2154
2155 $this->end_controls_section();
2156
2157 $this->start_controls_section(
2158 'pagination_section',
2159 [
2160 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Pagination', 'king-addons'),
2161 'tab' => Controls_Manager::TAB_CONTENT,
2162 'condition' => [
2163 'timeline_content' => 'dynamic',
2164 'timeline_layout' => ['centered', 'one-sided', 'one-sided-left'],
2165 'show_pagination' => 'yes'
2166 ]
2167 ]
2168 );
2169
2170 $this->add_control(
2171 'pagination_type',
2172 [
2173 'label' => esc_html__('Pagination Type', 'king-addons'),
2174 'type' => Controls_Manager::SELECT,
2175 'render_type' => 'template',
2176 'default' => 'load-more',
2177 'options' => [
2178 'load-more' => esc_html__('Load More'),
2179 'infinite-scroll' => esc_html__('Infinite Scroll')
2180 ],
2181 'condition' => [
2182 'show_pagination' => 'yes',
2183 ]
2184 ]
2185 );
2186
2187 $this->add_control(
2188 'pagination_load_more_text',
2189 [
2190 'label' => esc_html__('Load More Text', 'king-addons'),
2191 'type' => Controls_Manager::TEXT,
2192 'dynamic' => [
2193 'active' => true,
2194 ],
2195 'default' => esc_html__('Load More', 'king-addons'),
2196 'condition' => [
2197 'pagination_type' => 'load-more',
2198 ]
2199 ]
2200 );
2201
2202 $this->add_control(
2203 'pagination_finish_text',
2204 [
2205 'label' => esc_html__('Finish Text', 'king-addons'),
2206 'type' => Controls_Manager::TEXT,
2207 'dynamic' => [
2208 'active' => true,
2209 ],
2210 'default' => 'End of Content.',
2211 'condition' => [
2212 'pagination_type' => ['load-more', 'infinite-scroll'],
2213 ]
2214 ]
2215 );
2216
2217 $this->add_control(
2218 'pagination_animation',
2219 [
2220 'label' => esc_html__('Select Animation', 'king-addons'),
2221 'type' => Controls_Manager::SELECT,
2222 'default' => 'loader-1',
2223 'options' => [
2224 'none' => esc_html__('None', 'king-addons'),
2225 'loader-1' => esc_html__('Loader 1', 'king-addons'),
2226 'loader-2' => esc_html__('Loader 2', 'king-addons'),
2227 'loader-3' => esc_html__('Loader 3', 'king-addons'),
2228 'loader-4' => esc_html__('Loader 4', 'king-addons'),
2229 'loader-5' => esc_html__('Loader 5', 'king-addons'),
2230 'loader-6' => esc_html__('Loader 6', 'king-addons'),
2231 ],
2232 'condition' => [
2233 'pagination_type' => ['load-more', 'infinite-scroll'],
2234 'timeline_layout' => ['centered', 'one-sided', 'one-sided-left']
2235 ],
2236 ]
2237 );
2238
2239 $this->add_responsive_control(
2240 'pagination_alignment',
2241 [
2242 'label' => esc_html__('Align', 'king-addons'),
2243 'type' => Controls_Manager::CHOOSE,
2244 'label_block' => false,
2245 'default' => 'center',
2246 'options' => [
2247 'left' => [
2248 'title' => esc_html__('Left', 'king-addons'),
2249 'icon' => 'eicon-text-align-left',
2250 ],
2251 'center' => [
2252 'title' => esc_html__('Center', 'king-addons'),
2253 'icon' => 'eicon-text-align-center',
2254 ],
2255 'right' => [
2256 'title' => esc_html__('Right', 'king-addons'),
2257 'icon' => 'eicon-text-align-right',
2258 ],
2259 ],
2260 'selectors' => [
2261 '{{WRAPPER}} .king-addons-grid-pagination' => 'text-align: {{VALUE}};',
2262 '{{WRAPPER}} .king-addons-pagination-loading' => 'text-align: {{VALUE}};',
2263 ],
2264 'condition' => [
2265 'timeline_content' => ['dynamic'],
2266 'timeline_layout' => ['centered', 'one-sided']
2267 ]
2268 ]
2269 );
2270
2271 $this->end_controls_section();
2272
2273 Core::renderProFeaturesSection($this, '', Controls_Manager::RAW_HTML, 'posts-timeline', [
2274 'Add Unlimited Custom Timeline Items',
2275 'Unlimited Posts Per Page Option',
2276 'Custom Post Types Support',
2277 'Unlimited Slides to Show Option',
2278 'Carousel Autoplay and Autoplay Speed',
2279 'Pause on Hover',
2280 'Advanced Pagination - Load More Button or Infinite Scroll Options',
2281 'Advanced Entrance Animation Options'
2282 ]);
2283
2284 $this->start_controls_section(
2285 'content_styles_section',
2286 [
2287 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Timeline Items', 'king-addons'),
2288 'tab' => Controls_Manager::TAB_STYLE,
2289 ]
2290 );
2291
2292 $this->add_control(
2293 'story_bgcolor',
2294 [
2295 'label' => esc_html__('Background Color', 'king-addons'),
2296 'type' => Controls_Manager::COLOR,
2297 'selectors' => [
2298 '{{WRAPPER}} .king-addons-wrapper .king-addons-data-wrap' => 'background-color: {{VALUE}}',
2299 '{{WRAPPER}} .king-addons-horizontal .king-addons-story-info' => 'background-color: {{VALUE}}',
2300 '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-story-info' => 'background-color: {{VALUE}}',
2301 ],
2302 'default' => '#FFF',
2303 ]
2304 );
2305
2306 $this->add_control(
2307 'story_border_color',
2308 [
2309 'label' => esc_html__('Border Color', 'king-addons'),
2310 'type' => Controls_Manager::COLOR,
2311 'selectors' => [
2312 '{{WRAPPER}} .king-addons-story-info' => 'border-color: {{VALUE}} !important;',
2313 '{{WRAPPER}} .king-addons-story-info-vertical' => 'border-color: {{VALUE}} !important;',
2314 ],
2315 'condition' => [
2316 'timeline_layout!' => 'centered'
2317 ],
2318 'default' => '#5B03FF',
2319 ]
2320 );
2321
2322 $this->add_control(
2323 'story_border_color_left',
2324 [
2325 'label' => esc_html__('Border Color (Left Aligned)', 'king-addons'),
2326 'type' => Controls_Manager::COLOR,
2327 'selectors' => [
2328 '{{WRAPPER}} .king-addons-left-aligned .king-addons-story-info-vertical' => 'border-color: {{VALUE}};',
2329 ],
2330 'condition' => [
2331 'timeline_layout' => 'centered',
2332 ],
2333 'default' => '#5B03FF',
2334 ]
2335 );
2336
2337 $this->add_control(
2338 'story_border_color_right',
2339 [
2340 'label' => esc_html__('Border Color (Right Aligned)', 'king-addons'),
2341 'type' => Controls_Manager::COLOR,
2342 'selectors' => [
2343 '{{WRAPPER}} .king-addons-right-aligned .king-addons-story-info-vertical' => 'border-color: {{VALUE}} !important;',
2344 ],
2345 'condition' => [
2346 'timeline_layout' => 'centered',
2347 ],
2348 'default' => '#5B03FF',
2349 ]
2350 );
2351
2352 $this->add_group_control(
2353 Group_Control_Box_Shadow::get_type(),
2354 [
2355 'name' => 'timeline_item_shadow',
2356 'selector' => '{{WRAPPER}} .king-addons-story-info',
2357 'fields_options' => [
2358 'box_shadow_type' =>
2359 [
2360 'default' => 'yes'
2361 ],
2362 'box_shadow' => [
2363 'default' =>
2364 [
2365 'horizontal' => 0,
2366 'vertical' => 0,
2367 'blur' => 20,
2368 'spread' => 1,
2369 'color' => 'rgba(0,0,0,0.1)'
2370 ]
2371 ]
2372 ],
2373 'condition' => [
2374 'timeline_layout' => ['horizontal', 'horizontal-bottom']
2375 ]
2376 ]
2377 );
2378
2379 $this->add_group_control(
2380 Group_Control_Box_Shadow::get_type(),
2381 [
2382 'name' => 'timeline_item_shadow_vertical',
2383 'selector' => '{{WRAPPER}} .king-addons-story-info-vertical',
2384 'fields_options' => [
2385 'box_shadow_type' =>
2386 [
2387 'default' => 'yes'
2388 ],
2389 'box_shadow' => [
2390 'default' =>
2391 [
2392 'horizontal' => 0,
2393 'vertical' => 0,
2394 'blur' => 20,
2395 'spread' => 1,
2396 'color' => 'rgba(0,0,0,0.1)'
2397 ]
2398 ]
2399 ],
2400 'condition' => [
2401 'timeline_layout' => ['centered', 'one-sided', 'one-sided-left']
2402 ]
2403 ]
2404 );
2405
2406
2407 $this->add_responsive_control(
2408 'item_distance_from_line',
2409 [
2410 'label' => esc_html__('Distance From Line', 'king-addons'),
2411 'type' => Controls_Manager::SLIDER,
2412 'size_units' => ['px'],
2413 'range' => [
2414 'px' => [
2415 'min' => 0,
2416 'max' => 100,
2417 ],
2418 ],
2419 'devices' => ['desktop', 'tablet', 'mobile'],
2420 'default' => [
2421 'size' => 40,
2422 'unit' => 'px',
2423 ],
2424 'tablet_default' => [
2425 'size' => 40,
2426 'unit' => 'px',
2427 ],
2428 'mobile_default' => [
2429 'size' => 15,
2430 'unit' => 'px',
2431 ],
2432 'selectors' => [
2433 '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline-left .king-addons-data-wrap' => 'margin-right: calc({{main_line_side_distance.SIZE}}px/2 + {{SIZE}}px);',
2434 '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline .king-addons-data-wrap' => 'margin-left: calc({{main_line_side_distance.SIZE}}px/2 + {{SIZE}}px);',
2435
2436 '{{WRAPPER}} .king-addons-centered .king-addons-left-aligned .king-addons-timeline-entry-inner .king-addons-data-wrap' => 'margin-right: {{SIZE}}px;',
2437 '{{WRAPPER}} .king-addons-centered .king-addons-right-aligned .king-addons-timeline-entry-inner .king-addons-data-wrap' => 'margin-left: {{SIZE}}px;',
2438 '{{WRAPPER}} .king-addons-centered .king-addons-one-sided-timeline .king-addons-right-aligned .king-addons-timeline-entry-inner .king-addons-data-wrap' => 'margin-left: calc({{main_line_side_distance.SIZE}}px/2 + {{SIZE}}px);',
2439
2440 '{{WRAPPER}} .king-addons-centered .king-addons-one-sided-timeline .king-addons-extra-label' => 'margin-left: calc({{main_line_side_distance.SIZE}}px/2 + {{SIZE}}px);',
2441 '{{WRAPPER}} .king-addons-one-sided-wrapper .king-addons-one-sided-timeline .king-addons-extra-label' => 'margin-left: calc({{main_line_side_distance.SIZE}}px/2 + {{SIZE}}px);',
2442 '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline-left .king-addons-timeline-entry .king-addons-extra-label' => 'margin-right: calc({{main_line_side_distance.SIZE}}px/2 + {{SIZE}}px);',
2443 ],
2444 'condition' => [
2445 'timeline_layout' => ['centered', 'one-sided', 'one-sided-left']
2446 ],
2447 'render_type' => 'template',
2448 'separator' => 'before'
2449 ]
2450 );
2451
2452 $this->add_responsive_control(
2453 'item_distance_vertical',
2454 [
2455 'label' => esc_html__('Vertical Distance', 'king-addons'),
2456 'type' => Controls_Manager::SLIDER,
2457 'size_units' => ['px'],
2458 'range' => [
2459 'px' => [
2460 'min' => 0,
2461 'max' => 200,
2462 ],
2463 ],
2464 'default' => [
2465 'unit' => 'px',
2466 'size' => 40,
2467 ],
2468 'selectors' => [
2469 '{{WRAPPER}} .king-addons-timeline-centered .king-addons-year-wrap' => 'margin-bottom: {{SIZE}}px;',
2470 '{{WRAPPER}} .king-addons-timeline-centered .king-addons-timeline-entry' => 'margin-bottom: {{SIZE}}px;',
2471 ],
2472 'condition' => [
2473 'timeline_layout' => ['centered', 'one-sided', 'one-sided-left']
2474 ],
2475 'render_type' => 'template',
2476 ]
2477 );
2478
2479 $this->add_responsive_control(
2480 'timeline_item_position',
2481 [
2482 'type' => Controls_Manager::SLIDER,
2483 'label' => esc_html__('Item Bottom Distance', 'king-addons'),
2484 'size_units' => ['px'],
2485 'range' => [
2486 'px' => [
2487 'min' => 0,
2488 'max' => 150,
2489 ]
2490 ],
2491 'default' => [
2492 'unit' => 'px',
2493 'size' => 50,
2494 ],
2495 'selectors' => [
2496 '{{WRAPPER}} .king-addons-story-info' => 'margin-bottom: calc({{SIZE}}{{UNIT}} + {{swiper_pagination_progressbar_bottom.SIZE}}{{swiper_pagination_progressbar_bottom.UNIT}}) !important;',
2497 ],
2498 'condition' => [
2499 'timeline_layout' => ['horizontal'],
2500 'equal_height_slides!' => 'auto-height',
2501 ],
2502 'separator' => 'before'
2503 ]
2504 );
2505
2506 $this->add_responsive_control(
2507 'timeline_item_position_equal_heights',
2508 [
2509 'type' => Controls_Manager::SLIDER,
2510 'label' => esc_html__('Item Bottom Distance', 'king-addons'),
2511 'size_units' => ['px'],
2512 'range' => [
2513 'px' => [
2514 'min' => 0,
2515 'max' => 150,
2516 ]
2517 ],
2518 'default' => [
2519 'unit' => 'px',
2520 'size' => 50,
2521 ],
2522 'selectors' => [
2523 '{{WRAPPER}} .king-addons-horizontal-timeline .swiper-slide.swiper-slide-line-bottom.auto-height .king-addons-story-info' => 'margin-bottom: calc({{SIZE}}{{UNIT}} + {{swiper_pagination_progressbar_bottom.SIZE}}{{swiper_pagination_progressbar_bottom.UNIT}}) !important; max-height: calc(100% - {{SIZE}}{{UNIT}} - {{swiper_pagination_progressbar_bottom.SIZE}}{{swiper_pagination_progressbar_bottom.UNIT}}) !important; height: calc(100% - {{SIZE}}{{UNIT}} - {{swiper_pagination_progressbar_bottom.SIZE}}{{swiper_pagination_progressbar_bottom.UNIT}}) !important;'
2524 ],
2525 'condition' => [
2526 'timeline_layout' => 'horizontal',
2527 'equal_height_slides' => 'auto-height',
2528 ],
2529 'separator' => 'before'
2530 ]
2531 );
2532
2533 $this->add_responsive_control(
2534 'story_info_margin_top',
2535 [
2536 'label' => esc_html__('Item Top Distance', 'king-addons'),
2537 'type' => Controls_Manager::SLIDER,
2538 'default' => [
2539 'unit' => 'px',
2540 'size' => 50,
2541 ],
2542 'range' => [
2543 'px' => [
2544 'min' => 0,
2545 'max' => 150,
2546 ],
2547 ],
2548 'selectors' => [
2549 '{{WRAPPER}} .king-addons-horizontal-bottom-timeline .king-addons-story-info' => 'margin-top: calc({{SIZE}}{{UNIT}} + {{swiper_pagination_progressbar_top.SIZE}}{{swiper_pagination_progressbar_top.UNIT}}) !important; max-height: calc(100% - {{SIZE}}{{UNIT}}) !important;',
2550 '{{WRAPPER}} .king-addons-horizontal-bottom-timeline .swiper-slide.auto-height .king-addons-story-info' => 'margin-top: calc({{SIZE}}{{UNIT}} + {{swiper_pagination_progressbar_top.SIZE}}{{swiper_pagination_progressbar_top.UNIT}}) !important; max-height: calc(100% - {{SIZE}}{{UNIT}}) !important; height: calc(100% - ({{SIZE}}{{UNIT}} + {{swiper_pagination_progressbar_top.SIZE}}{{swiper_pagination_progressbar_top.UNIT}})) !important'
2551 ],
2552 'separator' => 'before',
2553 'condition' => [
2554 'timeline_layout' => ['horizontal-bottom'],
2555 ],
2556 ]
2557 );
2558
2559 $this->add_responsive_control(
2560 'story_padding',
2561 [
2562 'label' => esc_html__('Item Padding', 'king-addons'),
2563 'type' => Controls_Manager::DIMENSIONS,
2564 'size_units' => ['px'],
2565 'default' => [
2566 'top' => 20,
2567 'right' => 20,
2568 'bottom' => 20,
2569 'left' => 20,
2570 ],
2571 'selectors' => [
2572 '{{WRAPPER}} .king-addons-story-info' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2573 '{{WRAPPER}} .king-addons-data-wrap' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
2574 ],
2575 'condition' => [
2576 ],
2577 ]
2578 );
2579
2580 $this->add_responsive_control(
2581 'story_container_padding',
2582 [
2583 'label' => esc_html__('Container Padding', 'king-addons'),
2584 'type' => Controls_Manager::DIMENSIONS,
2585 'description' => esc_html__('Apply this option to fix Box Shadow issue.', 'king-addons'),
2586 'size_units' => ['px'],
2587 'devices' => ['desktop', 'tablet', 'mobile'],
2588 'default' => [
2589 'top' => 10,
2590 'right' => 10,
2591 'left' => 10,
2592 'bottom' => 10,
2593 'unit' => 'px'
2594 ],
2595 'tablet_default' => [
2596 'top' => 10,
2597 'right' => 10,
2598 'left' => 10,
2599 'bottom' => 10,
2600 'unit' => 'px',
2601 ],
2602 'mobile_default' => [
2603 'top' => 10,
2604 'right' => 10,
2605 'left' => 10,
2606 'bottom' => 10,
2607 'unit' => 'px',
2608 ],
2609 'selectors' => [
2610 '{{WRAPPER}} .king-addons-vertical' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2611 '{{WRAPPER}} .king-addons-wrapper .swiper-slide' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2612 ],
2613 ]
2614 );
2615
2616 $this->add_control(
2617 'timeline_item_border_type',
2618 [
2619 'label' => esc_html__('Border Type', 'king-addons'),
2620 'type' => Controls_Manager::SELECT,
2621 'options' => [
2622 'none' => esc_html__('None', 'king-addons'),
2623 'solid' => esc_html__('Solid', 'king-addons'),
2624 'double' => esc_html__('Double', 'king-addons'),
2625 'dotted' => esc_html__('Dotted', 'king-addons'),
2626 'dashed' => esc_html__('Dashed', 'king-addons'),
2627 'groove' => esc_html__('Groove', 'king-addons'),
2628 ],
2629 'default' => 'none',
2630 'selectors' => [
2631 '{{WRAPPER}} .king-addons-story-info' => 'border-style: {{VALUE}} !important;',
2632 '{{WRAPPER}} .king-addons-story-info-vertical' => 'border-style: {{VALUE}} !important;',
2633 ],
2634 'separator' => 'before',
2635 ]
2636 );
2637
2638
2639 $this->add_control(
2640 'timeline_item_border_width',
2641 [
2642 'label' => esc_html__('Border Width', 'king-addons'),
2643 'type' => Controls_Manager::DIMENSIONS,
2644 'size_units' => ['px'],
2645 'default' => [
2646 'top' => 1,
2647 'right' => 1,
2648 'bottom' => 1,
2649 'left' => 1,
2650 ],
2651 'selectors' => [
2652 '{{WRAPPER}} .king-addons-story-info' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
2653 '{{WRAPPER}} .king-addons-story-info-vertical' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
2654 '{{WRAPPER}} .king-addons-horizontal-timeline .king-addons-story-info:before' => 'top: calc( 100% + {{BOTTOM}}{{UNIT}} ) !important;',
2655 '{{WRAPPER}} .king-addons-horizontal-bottom-timeline .king-addons-story-info:before' => 'bottom: calc( 100% + {{TOP}}{{UNIT}} ) !important;',
2656 '{{WRAPPER}} .king-addons-right-aligned .king-addons-story-info-vertical.king-addons-data-wrap:after' => 'right: calc( 100% + {{LEFT}}{{UNIT}} ) !important;',
2657 '{{WRAPPER}} .king-addons-left-aligned .king-addons-story-info-vertical.king-addons-data-wrap:after' => 'left: calc( 100% + {{LEFT}}{{UNIT}} ) !important;'
2658 ],
2659 'condition' => [
2660 'timeline_layout!' => 'centered',
2661 'timeline_item_border_type!' => 'none'
2662 ],
2663 ]
2664 );
2665
2666 $this->add_control(
2667 'timeline_item_border_width_left',
2668 [
2669 'label' => esc_html__('Border Width (Left Aligned)', 'king-addons'),
2670 'type' => Controls_Manager::DIMENSIONS,
2671 'size_units' => ['px'],
2672 'default' => [
2673 'top' => 1,
2674 'right' => 1,
2675 'bottom' => 1,
2676 'left' => 1,
2677 ],
2678 'selectors' => [
2679 '{{WRAPPER}} .king-addons-story-info' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
2680 '{{WRAPPER}} .king-addons-story-info-vertical' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
2681 'body[data-elementor-device-mode=desktop] {{WRAPPER}} .king-addons-both-sided-timeline .king-addons-left-aligned .king-addons-data-wrap:after' => 'left: calc( 100% + {{RIGHT}}{{UNIT}} ) !important;',
2682 'body[data-elementor-device-mode=tablet] {{WRAPPER}} .king-addons-both-sided-timeline .king-addons-left-aligned .king-addons-data-wrap:after' => 'left: calc( 100% + {{RIGHT}}{{UNIT}} ) !important;',
2683 'body[data-elementor-device-mode=mobile] {{WRAPPER}} .king-addons-both-sided-timeline .king-addons-left-aligned .king-addons-data-wrap:after' => 'right: calc( 103% + {{LEFT}}{{UNIT}} ) !important; left: auto !important',
2684 ],
2685 'condition' => [
2686 'timeline_layout' => 'centered',
2687 'timeline_item_border_type!' => 'none'
2688 ]
2689 ]
2690 );
2691
2692 $this->add_control(
2693 'timeline_item_border_width_right',
2694 [
2695 'label' => esc_html__('Border Width (Right Aligned)', 'king-addons'),
2696 'type' => Controls_Manager::DIMENSIONS,
2697 'size_units' => ['px'],
2698 'default' => [
2699 'top' => 1,
2700 'right' => 1,
2701 'bottom' => 1,
2702 'left' => 1,
2703 ],
2704 'selectors' => [
2705 '{{WRAPPER}} .king-addons-right-aligned .king-addons-story-info-vertical' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
2706 'body[data-elementor-device-mode=desktop] {{WRAPPER}} .king-addons-right-aligned .king-addons-data-wrap:after' => 'right: calc( 100% + {{LEFT}}{{UNIT}} ) !important;',
2707 'body[data-elementor-device-mode=tablet] {{WRAPPER}} .king-addons-right-aligned .king-addons-data-wrap:after' => 'right: calc( 100% + {{LEFT}}{{UNIT}} ) !important;',
2708 'body[data-elementor-device-mode=mobile] {{WRAPPER}} .king-addons-right-aligned .king-addons-data-wrap:after' => 'right: calc( 100% + {{LEFT}}{{UNIT}} ) !important;',
2709 ],
2710 'condition' => [
2711 'timeline_layout' => 'centered',
2712 'timeline_item_border_type!' => 'none'
2713 ]
2714 ]
2715 );
2716
2717 $this->add_control(
2718 'story_border_radius',
2719 [
2720 'label' => esc_html__('Border Radius', 'king-addons'),
2721 'type' => Controls_Manager::DIMENSIONS,
2722 'size_units' => ['px'],
2723 'default' => [
2724 'top' => 5,
2725 'right' => 5,
2726 'bottom' => 5,
2727 'left' => 5,
2728 ],
2729 'selectors' => [
2730 '{{WRAPPER}} .king-addons-story-info' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
2731 '{{WRAPPER}} .king-addons-story-info-vertical' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
2732 ],
2733
2734 ]
2735 );
2736
2737 $this->end_controls_section();
2738
2739 $this->start_controls_section(
2740 'media_style_section',
2741 [
2742 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Media', 'king-addons'),
2743 'tab' => Controls_Manager::TAB_STYLE,
2744 ]
2745 );
2746
2747 $this->add_responsive_control(
2748 'width',
2749 [
2750 'label' => esc_html__('Image Width', 'king-addons'),
2751 'type' => Controls_Manager::SLIDER,
2752 'default' => [
2753 'size' => 100,
2754 'unit' => '%',
2755 ],
2756 'size_units' => ['%', 'px'],
2757 'range' => [
2758 '%' => [
2759 'min' => 10,
2760 'max' => 100,
2761 ],
2762 'px' => [
2763 'min' => 10,
2764 'max' => 200,
2765 ],
2766 ],
2767 'selectors' => [
2768 '{{WRAPPER}} .king-addons-timeline-media' => 'width: {{SIZE}}{{UNIT}};',
2769 ],
2770 'separator' => 'after',
2771 ]
2772 );
2773
2774 $this->add_control(
2775 'media_item_border_color',
2776 [
2777 'label' => esc_html__('Border Color', 'king-addons'),
2778 'type' => Controls_Manager::COLOR,
2779 'default' => '#E8E8E8',
2780 'selectors' => [
2781 '{{WRAPPER}} .king-addons-timeline-media' => 'border-color: {{VALUE}}',
2782 ],
2783 ]
2784 );
2785
2786 $this->add_control(
2787 'media_item_border_type',
2788 [
2789 'label' => esc_html__('Border Type', 'king-addons'),
2790 'type' => Controls_Manager::SELECT,
2791 'options' => [
2792 'none' => esc_html__('None', 'king-addons'),
2793 'solid' => esc_html__('Solid', 'king-addons'),
2794 'double' => esc_html__('Double', 'king-addons'),
2795 'dotted' => esc_html__('Dotted', 'king-addons'),
2796 'dashed' => esc_html__('Dashed', 'king-addons'),
2797 'groove' => esc_html__('Groove', 'king-addons'),
2798 ],
2799 'default' => 'none',
2800 'selectors' => [
2801 '{{WRAPPER}} .king-addons-timeline-media' => 'border-style: {{VALUE}};',
2802 ],
2803 ]
2804 );
2805
2806 $this->add_responsive_control(
2807 'media_item_border_width',
2808 [
2809 'label' => esc_html__('Border Width', 'king-addons'),
2810 'type' => Controls_Manager::DIMENSIONS,
2811 'size_units' => ['px'],
2812 'default' => [
2813 'top' => 0,
2814 'right' => 0,
2815 'bottom' => 0,
2816 'left' => 0,
2817 ],
2818 'selectors' => [
2819 '{{WRAPPER}} .king-addons-timeline-media' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2820 ],
2821 'condition' => [
2822 'media_item_border_type!' => 'none'
2823 ]
2824
2825 ]
2826 );
2827
2828 $this->add_control(
2829 'media_item_radius',
2830 [
2831 'label' => esc_html__('Border Radius', 'king-addons'),
2832 'type' => Controls_Manager::DIMENSIONS,
2833 'size_units' => ['px', '%'],
2834 'default' => [
2835 'top' => 0,
2836 'right' => 0,
2837 'bottom' => 0,
2838 'left' => 0,
2839 ],
2840 'selectors' => [
2841 '{{WRAPPER}} .king-addons-timeline-media' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2842 ],
2843 ]
2844 );
2845
2846 $this->add_responsive_control(
2847 'media_item_padding',
2848 [
2849 'label' => esc_html__('Padding', 'king-addons'),
2850 'type' => Controls_Manager::DIMENSIONS,
2851 'size_units' => ['px'],
2852 'default' => [
2853 'top' => 0,
2854 'right' => 0,
2855 'bottom' => 0,
2856 'left' => 0,
2857 ],
2858 'selectors' => [
2859 '{{WRAPPER}} .king-addons-timeline-media' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2860 ],
2861 'separator' => 'before'
2862
2863 ]
2864 );
2865
2866 $this->end_controls_section();
2867
2868 $this->start_controls_section(
2869 'content_style_section',
2870 [
2871 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Content', 'king-addons'),
2872 'tab' => Controls_Manager::TAB_STYLE,
2873 'condition' => [
2874
2875 ],
2876 ]
2877 );
2878
2879 $this->add_control(
2880 'item_content_border_color',
2881 [
2882 'label' => esc_html__('Border Color', 'king-addons'),
2883 'type' => Controls_Manager::COLOR,
2884 'default' => '#E8E8E8',
2885 'selectors' => [
2886 '{{WRAPPER}} .king-addons-timeline-content-wrapper' => 'border-color: {{VALUE}}',
2887 ],
2888 ]
2889 );
2890
2891 $this->add_control(
2892 'item_content_border_type',
2893 [
2894 'label' => esc_html__('Border Type', 'king-addons'),
2895 'type' => Controls_Manager::SELECT,
2896 'options' => [
2897 'none' => esc_html__('None', 'king-addons'),
2898 'solid' => esc_html__('Solid', 'king-addons'),
2899 'double' => esc_html__('Double', 'king-addons'),
2900 'dotted' => esc_html__('Dotted', 'king-addons'),
2901 'dashed' => esc_html__('Dashed', 'king-addons'),
2902 'groove' => esc_html__('Groove', 'king-addons'),
2903 ],
2904 'default' => 'none',
2905 'selectors' => [
2906 '{{WRAPPER}} .king-addons-timeline-content-wrapper' => 'border-style: {{VALUE}};',
2907 ],
2908 'separator' => 'before',
2909 ]
2910 );
2911
2912 $this->add_responsive_control(
2913 'item_content_border_width',
2914 [
2915 'label' => esc_html__('Border Width', 'king-addons'),
2916 'type' => Controls_Manager::DIMENSIONS,
2917 'size_units' => ['px'],
2918 'default' => [
2919 'top' => 0,
2920 'right' => 0,
2921 'bottom' => 0,
2922 'left' => 0,
2923 ],
2924 'selectors' => [
2925 '{{WRAPPER}} .king-addons-timeline-content-wrapper' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2926 ],
2927 'condition' => [
2928 'item_content_border_type!' => 'none'
2929 ],
2930 'separator' => 'before'
2931
2932 ]
2933 );
2934
2935 $this->add_control(
2936 'item_content_border_radius',
2937 [
2938 'label' => esc_html__('Border Radius', 'king-addons'),
2939 'type' => Controls_Manager::DIMENSIONS,
2940 'size_units' => ['px', '%'],
2941 'default' => [
2942 'top' => 0,
2943 'right' => 0,
2944 'bottom' => 0,
2945 'left' => 0,
2946 ],
2947 'selectors' => [
2948 '{{WRAPPER}} .king-addons-timeline-content-wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden',
2949 ],
2950 ]
2951 );
2952
2953 $this->add_responsive_control(
2954 'content_item_padding',
2955 [
2956 'label' => esc_html__('Padding', 'king-addons'),
2957 'type' => Controls_Manager::DIMENSIONS,
2958 'size_units' => ['px'],
2959 'default' => [
2960 'top' => 0,
2961 'right' => 0,
2962 'bottom' => 0,
2963 'left' => 0,
2964 ],
2965 'selectors' => [
2966 '{{WRAPPER}} .king-addons-timeline-content-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2967 ],
2968 'separator' => 'before',
2969
2970 ]
2971 );
2972
2973 $this->end_controls_section();
2974
2975 $this->start_controls_section(
2976 'overlay_style_section',
2977 [
2978 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Overlay', 'king-addons'),
2979 'tab' => Controls_Manager::TAB_STYLE,
2980 'condition' => [
2981 'content_layout' => 'image-top',
2982 'show_overlay' => 'yes'
2983 ],
2984 ]
2985 );
2986
2987 $this->add_control(
2988 'overlay_bgcolor',
2989 [
2990 'label' => esc_html__('Background Color', 'king-addons'),
2991 'type' => Controls_Manager::COLOR,
2992 'selectors' => [
2993 '{{WRAPPER}} .king-addons-wrapper .king-addons-timeline-story-overlay' => 'background-color: {{VALUE}}',
2994 ],
2995 'default' => '#0000005E',
2996 ]
2997 );
2998
2999 $this->add_group_control(
3000 Group_Control_Background::get_type(),
3001 [
3002 'name' => 'overlay_background',
3003 'label' => esc_html__('Background', 'king-addons'),
3004 'types' => ['classic', 'gradient', 'video'],
3005 'selector' => '{{WRAPPER}} .king-addons-timeline-story-overlay',
3006 ]
3007 );
3008
3009 $this->add_control(
3010 'overlay_border_radius',
3011 [
3012 'label' => esc_html__('Border Radius', 'king-addons'),
3013 'type' => Controls_Manager::DIMENSIONS,
3014 'size_units' => ['px'],
3015 'default' => [
3016 'top' => 0,
3017 'right' => 0,
3018 'bottom' => 0,
3019 'left' => 0,
3020 ],
3021 'selectors' => [
3022 '{{WRAPPER}} .king-addons-timeline-story-overlay' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
3023 ],
3024
3025 ]
3026 );
3027
3028 $this->add_responsive_control(
3029 'timeline_overlay_padding',
3030 [
3031 'label' => esc_html__('Overlay Padding', 'king-addons'),
3032 'type' => Controls_Manager::DIMENSIONS,
3033 'size_units' => ['px'],
3034 'separator' => 'before',
3035 'default' => [
3036 'top' => 25,
3037 'right' => 25,
3038 'bottom' => 25,
3039 'left' => 25,
3040 ],
3041 'selectors' => [
3042 '{{WRAPPER}} .king-addons-timeline-story-overlay' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
3043 ],
3044 'condition' => [
3045 'show_overlay' => 'yes',
3046 'content_layout' => 'image-top',
3047 ],
3048 ]
3049 );
3050
3051 $this->end_controls_section();
3052
3053 $this->start_controls_section(
3054 'title_styles_section',
3055 [
3056 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Title', 'king-addons'),
3057 'tab' => Controls_Manager::TAB_STYLE,
3058 ]
3059 );
3060
3061
3062 $this->add_control(
3063 'story_title_color',
3064 [
3065 'label' => esc_html__('Color', 'king-addons'),
3066 'type' => Controls_Manager::COLOR,
3067 'selectors' => [
3068 '{{WRAPPER}} .king-addons-title' => 'color: {{VALUE}}',
3069 ],
3070 'default' => '#444444',
3071 ]
3072 );
3073
3074 $this->add_control(
3075 'story_title_bg_color',
3076 [
3077 'label' => esc_html__('Background Color', 'king-addons'),
3078 'type' => Controls_Manager::COLOR,
3079 'selectors' => [
3080 '{{WRAPPER}} .king-addons-wrapper .king-addons-title-wrap' => 'background-color: {{VALUE}} !important',
3081 ],
3082 'default' => '#FFFFFF00',
3083 ]
3084 );
3085
3086 $this->add_group_control(
3087 Group_Control_Typography::get_type(),
3088 [
3089 'name' => 'title_typography',
3090 'label' => esc_html__('Typography', 'king-addons'),
3091 'selector' => '{{WRAPPER}} .king-addons-wrapper .king-addons-title',
3092 ]
3093 );
3094
3095 $this->add_responsive_control(
3096 'title_padding',
3097 [
3098 'label' => esc_html__('Padding', 'king-addons'),
3099 'type' => Controls_Manager::DIMENSIONS,
3100 'size_units' => ['px'],
3101 'default' => [
3102 'top' => 0,
3103 'right' => 0,
3104 'bottom' => 0,
3105 'left' => 0,
3106 ],
3107 'selectors' => [
3108 '{{WRAPPER}} .king-addons-wrapper .king-addons-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
3109 ],
3110 'separator' => 'before',
3111 ]
3112 );
3113
3114 $this->add_responsive_control(
3115 'title_margin',
3116 [
3117 'label' => esc_html__('Margin', 'king-addons'),
3118 'type' => Controls_Manager::DIMENSIONS,
3119 'size_units' => ['px'],
3120 'default' => [
3121 'top' => 10,
3122 'right' => 0,
3123 'bottom' => 0,
3124 'left' => 0,
3125 ],
3126 'selectors' => [
3127 '{{WRAPPER}} .king-addons-wrapper .king-addons-title-wrap' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
3128 ],
3129 'separator' => 'before',
3130 ]
3131 );
3132
3133 $this->end_controls_section();
3134
3135 $this->start_controls_section(
3136 'section_style_date',
3137 [
3138 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Date', 'king-addons'),
3139 'tab' => Controls_Manager::TAB_STYLE,
3140 'show_label' => false,
3141 'condition' => [
3142 'timeline_content' => 'dynamic'
3143 ]
3144 ]
3145 );
3146
3147 $this->add_control(
3148 'date_color',
3149 [
3150 'label' => esc_html__('Color', 'king-addons'),
3151 'type' => Controls_Manager::COLOR,
3152 'default' => '#9C9C9C',
3153 'selectors' => [
3154 '{{WRAPPER}} .king-addons-inner-date-label' => 'color: {{VALUE}}',
3155 ],
3156 ]
3157 );
3158
3159 $this->add_control(
3160 'date_border_color',
3161 [
3162 'label' => esc_html__('Border Color', 'king-addons'),
3163 'type' => Controls_Manager::COLOR,
3164 'default' => '#E8E8E8',
3165 'selectors' => [
3166 '{{WRAPPER}} .king-addons-inner-date-label' => 'border-color: {{VALUE}}',
3167 ]
3168 ]
3169 );
3170
3171 $this->add_group_control(
3172 Group_Control_Typography::get_type(),
3173 [
3174 'name' => 'date_typography',
3175 'label' => esc_html__('Typography', 'king-addons'),
3176 'selector' => '{{WRAPPER}} .king-addons-inner-date-label',
3177 'fields_options' => [
3178 'typography' => [
3179 'default' => 'custom',
3180 ],
3181 'font_weight' => [
3182 'default' => '300',
3183 ],
3184 'font_family' => [
3185 'default' => 'Roboto',
3186 ],
3187 'font_size' => [
3188 'default' => [
3189 'size' => '15',
3190 'unit' => 'px',
3191 ]
3192 ]
3193 ]
3194 ]
3195 );
3196
3197 $this->add_control(
3198 'date_border_type',
3199 [
3200 'label' => esc_html__('Border Type', 'king-addons'),
3201 'type' => Controls_Manager::SELECT,
3202 'options' => [
3203 'none' => esc_html__('None', 'king-addons'),
3204 'solid' => esc_html__('Solid', 'king-addons'),
3205 'double' => esc_html__('Double', 'king-addons'),
3206 'dotted' => esc_html__('Dotted', 'king-addons'),
3207 'dashed' => esc_html__('Dashed', 'king-addons'),
3208 'groove' => esc_html__('Groove', 'king-addons'),
3209 ],
3210 'default' => 'none',
3211 'selectors' => [
3212 '{{WRAPPER}} .king-addons-inner-date-label' => 'border-style: {{VALUE}};',
3213 ],
3214 'separator' => 'before',
3215 ]
3216 );
3217
3218 $this->add_control(
3219 'date_border_width',
3220 [
3221 'label' => esc_html__('Border Width', 'king-addons'),
3222 'type' => Controls_Manager::DIMENSIONS,
3223 'size_units' => ['px'],
3224 'default' => [
3225 'top' => 1,
3226 'right' => 1,
3227 'bottom' => 1,
3228 'left' => 1,
3229 ],
3230 'selectors' => [
3231 '{{WRAPPER}} .king-addons-inner-date-label' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
3232 ],
3233 'condition' => [
3234 'date_border_type!' => 'none',
3235 ],
3236 ]
3237 );
3238
3239 $this->add_responsive_control(
3240 'date_margin',
3241 [
3242 'label' => esc_html__('Margin', 'king-addons'),
3243 'type' => Controls_Manager::DIMENSIONS,
3244 'size_units' => ['px'],
3245 'default' => [
3246 'top' => 5,
3247 'right' => 0,
3248 'bottom' => 0,
3249 'left' => 0,
3250 ],
3251 'selectors' => [
3252 '{{WRAPPER}} .king-addons-inner-date-label' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
3253 ],
3254 ]
3255 );
3256
3257 $this->end_controls_section();
3258
3259 $this->start_controls_section(
3260 'description_styles_section',
3261 [
3262 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Description', 'king-addons'),
3263 'tab' => Controls_Manager::TAB_STYLE,
3264 ]
3265 );
3266
3267 $this->add_control(
3268 'description_color',
3269 [
3270 'label' => esc_html__('Color', 'king-addons'),
3271 'type' => Controls_Manager::COLOR,
3272 'selectors' => [
3273 '{{WRAPPER}} .king-addons-wrapper .king-addons-description' => 'color: {{VALUE}}',
3274 '{{WRAPPER}} .king-addons-wrapper .king-addons-description p' => 'color: {{VALUE}}'
3275 ],
3276 'default' => '#808080',
3277 ]
3278 );
3279
3280 $this->add_group_control(
3281 Group_Control_Typography::get_type(),
3282 [
3283 'name' => 'description_typography_description',
3284 'label' => esc_html__('Typography', 'king-addons'),
3285 'selector' => '{{WRAPPER}} .king-addons-wrapper .king-addons-description',
3286 ]
3287 );
3288
3289 $this->add_control(
3290 'timeline_list_types',
3291 [
3292 'label' => esc_html__('List Style', 'king-addons'),
3293 'type' => Controls_Manager::SELECT,
3294 'default' => 'none',
3295 'label_block' => false,
3296 'description' => esc_html__('Apply this option for WYSIWYG lists', 'king-addons'),
3297 'options' => [
3298 'none' => esc_html__('None', 'king-addons'),
3299 'disc' => esc_html__('Disc', 'king-addons'),
3300 'decimal' => esc_html__('Number', 'king-addons')
3301 ],
3302 'prefix_class' => 'king-addons-list-style-',
3303 ]
3304 );
3305
3306 $this->add_responsive_control(
3307 'description_margin',
3308 [
3309 'label' => esc_html__('Margin', 'king-addons'),
3310 'type' => Controls_Manager::DIMENSIONS,
3311 'size_units' => ['px'],
3312 'default' => [
3313 'top' => 5,
3314 'right' => 0,
3315 'bottom' => 5,
3316 'left' => 0,
3317 ],
3318 'selectors' => [
3319 '{{WRAPPER}} .king-addons-wrapper .king-addons-description' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
3320 ],
3321 'separator' => 'before',
3322 ]
3323 );
3324
3325 $this->end_controls_section();
3326
3327 $this->start_controls_section(
3328 'readmore_styles_section',
3329 [
3330 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Read More', 'king-addons'),
3331 'tab' => Controls_Manager::TAB_STYLE,
3332 'condition' => [
3333 'timeline_content' => ['dynamic']
3334 ]
3335 ]
3336 );
3337
3338 $this->start_controls_tabs(
3339 'readmore_style_tabs'
3340 );
3341
3342 $this->start_controls_tab(
3343 'readmore_style_normal_tab',
3344 [
3345 'label' => esc_html__('Normal', 'king-addons'),
3346 ]
3347 );
3348
3349 $this->add_control(
3350 'readmore_color',
3351 [
3352 'label' => esc_html__('Color', 'king-addons'),
3353 'type' => Controls_Manager::COLOR,
3354 'selectors' => [
3355 '{{WRAPPER}} .king-addons-wrapper .king-addons-read-more-button' => 'color: {{VAlUE}}',
3356 ],
3357 'default' => '#fff',
3358 ]
3359 );
3360
3361 $this->add_control(
3362 'readmore_bg_color',
3363 [
3364 'label' => esc_html__('Background Color', 'king-addons'),
3365 'type' => Controls_Manager::COLOR,
3366 'selectors' => [
3367 '{{WRAPPER}} .king-addons-wrapper .king-addons-read-more-button' => 'background-color: {{VAlUE}}',
3368 ],
3369 'default' => '#5B03FF',
3370 ]
3371 );
3372
3373 $this->add_control(
3374 'readmore_border_color',
3375 [
3376 'label' => esc_html__('Border Color', 'king-addons'),
3377 'type' => Controls_Manager::COLOR,
3378 'default' => '#E8E8E8',
3379 'selectors' => [
3380 '{{WRAPPER}} .king-addons-read-more-button' => 'border-color: {{VALUE}}',
3381 ],
3382 ]
3383 );
3384
3385 $this->add_group_control(
3386 Group_Control_Box_Shadow::get_type(),
3387 [
3388 'name' => 'read_more_box_shadow',
3389 'selector' => '{{WRAPPER}} .king-addons-read-more-button',
3390 ]
3391 );
3392
3393 $this->add_group_control(
3394 Group_Control_Typography::get_type(),
3395 [
3396 'name' => 'readmore_typography',
3397 'label' => esc_html__('Typography', 'king-addons'),
3398 'selector' => '{{WRAPPER}} .king-addons-wrapper .king-addons-read-more-button',
3399 ]
3400 );
3401
3402 $this->add_control(
3403 'read_more_transition_duration',
3404 [
3405 'label' => esc_html__('Transition Duration (seconds)', 'king-addons'),
3406 'type' => Controls_Manager::NUMBER,
3407 'default' => 0.1,
3408 'min' => 0,
3409 'max' => 5,
3410 'step' => 0.1,
3411 'selectors' => [
3412 '{{WRAPPER}} .king-addons-read-more-button' => 'transition-duration: {{VALUE}}s',
3413 ],
3414 'separator' => 'before'
3415 ]
3416 );
3417
3418 $this->add_control(
3419 'readmore_border_type',
3420 [
3421 'label' => esc_html__('Border Type', 'king-addons'),
3422 'type' => Controls_Manager::SELECT,
3423 'options' => [
3424 'none' => esc_html__('None', 'king-addons'),
3425 'solid' => esc_html__('Solid', 'king-addons'),
3426 'double' => esc_html__('Double', 'king-addons'),
3427 'dotted' => esc_html__('Dotted', 'king-addons'),
3428 'dashed' => esc_html__('Dashed', 'king-addons'),
3429 'groove' => esc_html__('Groove', 'king-addons'),
3430 ],
3431 'default' => 'none',
3432 'selectors' => [
3433 '{{WRAPPER}} .king-addons-read-more-button' => 'border-style: {{VALUE}};',
3434 ],
3435 'separator' => 'before',
3436 ]
3437 );
3438
3439 $this->add_control(
3440 'readmore_item_border_width',
3441 [
3442 'label' => esc_html__('Border Width', 'king-addons'),
3443 'type' => Controls_Manager::DIMENSIONS,
3444 'size_units' => ['px'],
3445 'default' => [
3446 'top' => 1,
3447 'right' => 1,
3448 'bottom' => 1,
3449 'left' => 1,
3450 ],
3451 'selectors' => [
3452 '{{WRAPPER}} .king-addons-read-more-button' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
3453 ],
3454 'condition' => [
3455 'readmore_border_type!' => 'none',
3456 ],
3457 'render_type' => 'template'
3458 ]
3459 );
3460
3461 $this->add_responsive_control(
3462 'readmore_padding',
3463 [
3464 'label' => esc_html__('Padding', 'king-addons'),
3465 'type' => Controls_Manager::DIMENSIONS,
3466 'size_units' => ['px'],
3467 'default' => [
3468 'top' => 6,
3469 'right' => 13,
3470 'bottom' => 7,
3471 'left' => 13,
3472 ],
3473 'selectors' => [
3474 '{{WRAPPER}} .king-addons-wrapper .king-addons-read-more-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
3475 ],
3476 'separator' => 'before',
3477 ]
3478 );
3479
3480 $this->add_responsive_control(
3481 'readmore_margin',
3482 [
3483 'label' => esc_html__('Margin', 'king-addons'),
3484 'type' => Controls_Manager::DIMENSIONS,
3485 'size_units' => ['px'],
3486 'default' => [
3487 'top' => 15,
3488 'right' => 0,
3489 'bottom' => 15,
3490 'left' => 0,
3491 ],
3492 'selectors' => [
3493 '{{WRAPPER}} .king-addons-wrapper .king-addons-read-more-wrap' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
3494 ],
3495 ]
3496 );
3497
3498 $this->add_control(
3499 'readmore_border_radius',
3500 [
3501 'label' => esc_html__('Border Radius', 'king-addons'),
3502 'type' => Controls_Manager::DIMENSIONS,
3503 'size_units' => ['px', '%'],
3504 'default' => [
3505 'top' => 0,
3506 'right' => 0,
3507 'bottom' => 0,
3508 'left' => 0,
3509 ],
3510 'selectors' => [
3511 '{{WRAPPER}} .king-addons-wrapper .king-addons-read-more-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
3512 ],
3513 'separator' => 'before',
3514 ]
3515 );
3516
3517 $this->end_controls_tab();
3518
3519 $this->start_controls_tab(
3520 'style_hover_tab',
3521 [
3522 'label' => esc_html__('Hover', 'king-addons'),
3523 ]
3524 );
3525
3526 $this->add_control(
3527 'readmore_color_hover',
3528 [
3529 'label' => esc_html__('Color', 'king-addons'),
3530 'type' => Controls_Manager::COLOR,
3531 'selectors' => [
3532 '{{WRAPPER}} .king-addons-wrapper .king-addons-read-more-button:hover' => 'color: {{VAlUE}}',
3533 ],
3534 'default' => '#ffffff',
3535 ]
3536 );
3537
3538 $this->add_control(
3539 'readmore_bg_color_hover',
3540 [
3541 'label' => esc_html__('Background Color', 'king-addons'),
3542 'type' => Controls_Manager::COLOR,
3543 'selectors' => [
3544 '{{WRAPPER}} .king-addons-wrapper .king-addons-read-more-button:hover' => 'background-color: {{VAlUE}}',
3545 ],
3546 'default' => '#000000',
3547 ]
3548 );
3549
3550 $this->end_controls_tab();
3551
3552 $this->end_controls_tabs();
3553
3554 $this->end_controls_section();
3555
3556 $this->start_controls_section(
3557 'middle_line_styles_section',
3558 [
3559 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Main Line', 'king-addons'),
3560 'tab' => Controls_Manager::TAB_STYLE,
3561 ]
3562 );
3563
3564 $this->add_control(
3565 'line_color',
3566 [
3567 'label' => esc_html__('Line Color', 'king-addons'),
3568 'type' => Controls_Manager::COLOR,
3569 'selectors' => [
3570 '{{WRAPPER}} .king-addons-wrapper .king-addons-line::before' => 'background-color: {{VALUE}}',
3571 '{{WRAPPER}} .king-addons-wrapper .king-addons-middle-line' => 'background-color: {{VALUE}}',
3572 '{{WRAPPER}} .king-addons-wrapper .king-addons-timeline-centered .king-addons-year' => 'border-color: {{VALUE}}',
3573
3574 '{{WRAPPER}} .king-addons-wrapper:before' => 'background-color: {{VALUE}}',
3575 '{{WRAPPER}} .king-addons-wrapper:after' => 'background-color: {{VALUE}}',
3576
3577 '{{WRAPPER}} .king-addons-horizontal .king-addons-swiper-pagination.swiper-pagination-progressbar' => 'background-color: {{VALUE}}',
3578 '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-swiper-pagination.swiper-pagination-progressbar' => 'background-color: {{VALUE}}',
3579 '{{WRAPPER}} .king-addons-horizontal .king-addons-button-prev' => 'color: {{VALUE}}',
3580 '{{WRAPPER}} .king-addons-horizontal .king-addons-button-next' => 'color: {{VALUE}}',
3581 ],
3582 'default' => '#D6D6D6',
3583 ]
3584 );
3585
3586 $this->add_control(
3587 'swiper_progressbar_color',
3588 [
3589 'label' => esc_html__('Progress(Fill) Color', 'king-addons'),
3590 'type' => Controls_Manager::COLOR,
3591 'selectors' => [
3592 '{{WRAPPER}} .king-addons-horizontal .king-addons-swiper-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill' => 'background-color: {{VALUE}}',
3593 '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-swiper-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill' => 'background-color: {{VALUE}}',
3594 ],
3595 'condition' => [
3596 'timeline_layout' => ['horizontal', 'horizontal-bottom']
3597 ],
3598 'default' => '#5B03FF',
3599 ]
3600 );
3601
3602 $this->add_control(
3603 'timeline_fill_color',
3604 [
3605 'label' => esc_html__('Line Fill Color', 'king-addons'),
3606 'type' => Controls_Manager::COLOR,
3607 'default' => '#5B03FF',
3608 'selectors' => [
3609 '{{WRAPPER}} .king-addons-timeline-fill' => 'background-color: {{VALUE}} !important;',
3610 '{{WRAPPER}} .king-addons-change-border-color' => 'border-color: {{VALUE}} !important;',
3611 '{{WRAPPER}} .king-addons-vertical:before' => 'background-color: {{VALUE}} !important;',
3612 '{{WRAPPER}} .king-addons-vertical:after' => 'background-color: {{VALUE}} !important;',
3613 ],
3614 'condition' => [
3615 'timeline_layout!' => ['horizontal', 'horizontal-bottom']
3616 ],
3617 ]
3618 );
3619
3620 $this->add_control(
3621 'middle_line_width',
3622 [
3623 'label' => esc_html__('Line Width', 'king-addons'),
3624 'type' => Controls_Manager::SLIDER,
3625 'size_units' => ['px'],
3626 'range' => [
3627 'px' => [
3628 'min' => 1,
3629 'max' => 50,
3630 ]
3631 ],
3632 'default' => [
3633 'unit' => 'px',
3634 'size' => 4,
3635 ],
3636 'selectors' => [
3637
3638 '{{WRAPPER}} .king-addons-wrapper .king-addons-middle-line' => 'width: {{SIZE}}px; transform: translate(-50%) !important',
3639 '{{WRAPPER}} .king-addons-wrapper .king-addons-timeline-fill' => 'width: {{SIZE}}px; transform: translate(-50%) !important;',
3640
3641
3642 '{{WRAPPER}} .king-addons-wrapper .king-addons-one-sided-timeline-left .king-addons-middle-line' => 'width: {{SIZE}}px; transform: translate(50%) !important;',
3643 '{{WRAPPER}} .king-addons-wrapper .king-addons-one-sided-timeline-left .king-addons-timeline-fill' => 'width: {{SIZE}}px; transform: translate(50%) !important;',
3644
3645
3646 '{{WRAPPER}} .king-addons-wrapper .king-addons-one-sided-timeline .king-addons-middle-line' => 'width: {{SIZE}}px; transform: translate(-50%) !important;',
3647 '{{WRAPPER}} .king-addons-wrapper .king-addons-one-sided-timeline .king-addons-timeline-fill' => 'width: {{SIZE}}px; transform: translate(-50%) !important;',
3648 ],
3649 'condition' => [
3650 'timeline_layout' => ['centered', 'one-sided', 'one-sided-left']
3651 ],
3652 'separator' => 'before',
3653 ]
3654 );
3655
3656 $this->add_responsive_control(
3657 'swiper_pagination_progressbar_height',
3658 [
3659 'type' => Controls_Manager::NUMBER,
3660 'label' => esc_html__('Height', 'king-addons'),
3661 'default' => 0.7,
3662 'step' => 0.1,
3663 'selectors' => [
3664 '{{WRAPPER}} .king-addons-swiper-pagination.swiper-pagination-progressbar' => 'transform: scaleY({{SIZE}}) translateX(-50%);',
3665 ],
3666 'separator' => 'before',
3667 'condition' => [
3668 'timeline_layout' => ['horizontal-bottom', 'horizontal']
3669 ],
3670 ]
3671 );
3672
3673 $this->add_responsive_control(
3674 'swiper_pagination_progressbar_bottom',
3675 [
3676 'type' => Controls_Manager::SLIDER,
3677 'label' => esc_html__('Bottom Distance', 'king-addons'),
3678 'size_units' => ['px'],
3679 'range' => [
3680 'px' => [
3681 'min' => 0,
3682 'max' => 100,
3683 ]
3684 ],
3685 'default' => [
3686 'unit' => 'px',
3687 'size' => 100,
3688 ],
3689 'selectors' => [
3690 '{{WRAPPER}} .king-addons-horizontal .king-addons-swiper-pagination.swiper-pagination-progressbar' => 'top: auto; bottom: {{SIZE}}{{UNIT}};',
3691 '{{WRAPPER}} .king-addons-horizontal .king-addons-icon' => 'bottom: calc({{SIZE}}{{UNIT}} + 1px) !important;',
3692 '{{WRAPPER}} .king-addons-button-prev' => 'top: auto; bottom: calc({{SIZE}}{{UNIT}});',
3693 '{{WRAPPER}} .king-addons-button-next' => 'top: auto; bottom: calc({{SIZE}}{{UNIT}});',
3694 ],
3695 'condition' => [
3696 'timeline_layout' => ['horizontal']
3697 ],
3698 ]
3699 );
3700
3701 $this->add_responsive_control(
3702 'swiper_pagination_progressbar_top',
3703 [
3704 'type' => Controls_Manager::SLIDER,
3705 'label' => esc_html__('Top Distance', 'king-addons'),
3706 'size_units' => ['px'],
3707 'range' => [
3708 'px' => [
3709 'min' => 0,
3710 'max' => 100,
3711 ]
3712 ],
3713 'default' => [
3714 'unit' => 'px',
3715 'size' => 100,
3716 ],
3717 'selectors' => [
3718 '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-swiper-pagination.swiper-pagination-progressbar' => 'bottom: auto; top: {{SIZE}}{{UNIT}} !important',
3719 '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-icon' => 'position: absolute; top: calc({{SIZE}}{{UNIT}} + 1px) !important; left: 50%; transform: translate(-50%, -50%);',
3720 '{{WRAPPER}} .king-addons-button-prev' => 'bottom: auto; top: calc({{SIZE}}{{UNIT}} + 2px);',
3721 '{{WRAPPER}} .king-addons-button-next' => 'bottom: auto; top: calc({{SIZE}}{{UNIT}} + 2px);',
3722 ],
3723 'condition' => [
3724 'timeline_layout' => ['horizontal-bottom']
3725 ],
3726 ]
3727 );
3728
3729 $this->add_responsive_control(
3730 'main_line_side_distance',
3731 [
3732 'type' => Controls_Manager::SLIDER,
3733 'label' => esc_html__('Side Distance', 'king-addons'),
3734 'description' => esc_html__('This option for Zig-Zag layout only works on mobile devices.', 'king-addons'),
3735 'size_units' => ['px'],
3736 'range' => [
3737 'px' => [
3738 'min' => 0,
3739 'max' => 100,
3740 ]
3741 ],
3742 'devices' => ['desktop', 'tablet', 'mobile'],
3743 'default' => [
3744 'size' => 100,
3745 'unit' => 'px',
3746 ],
3747 'tablet_default' => [
3748 'size' => 100,
3749 'unit' => 'px',
3750 ],
3751 'mobile_default' => [
3752 'size' => 50,
3753 'unit' => 'px',
3754 ],
3755 'selectors' => [
3756 '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline .king-addons-year-label' => 'left: calc({{SIZE}}px/2);',
3757 '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline .king-addons-middle-line' => 'left: calc({{SIZE}}px/2);',
3758 '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline .king-addons-timeline-fill' => 'left: calc({{SIZE}}px/2);',
3759 '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline .king-addons-icon' => 'left: calc({{SIZE}}px/2);',
3760
3761 '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline-left .king-addons-year-label' => 'right: calc({{SIZE}}px/2);',
3762 '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline-left .king-addons-middle-line' => 'right: calc({{SIZE}}px/2);',
3763 '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline-left .king-addons-timeline-fill' => 'right: calc({{SIZE}}px/2);',
3764 '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline-left .king-addons-icon' => 'right: calc({{SIZE}}px/2);',
3765
3766 'body[data-elementor-device-mode=mobile] {{WRAPPER}} .king-addons-both-sided-timeline .king-addons-year-label' => 'position: absolute; left: calc({{SIZE}}px/2);',
3767 'body[data-elementor-device-mode=mobile] {{WRAPPER}} .king-addons-both-sided-timeline .king-addons-middle-line' => 'left: calc({{SIZE}}px/2);',
3768 'body[data-elementor-device-mode=mobile] {{WRAPPER}} .king-addons-both-sided-timeline .king-addons-timeline-fill' => 'left: calc({{SIZE}}px/2);',
3769 'body[data-elementor-device-mode=mobile] {{WRAPPER}} .king-addons-both-sided-timeline .king-addons-icon' => 'left: calc({{SIZE}}px/2); transform: translate(-50%, -50%) !important;',
3770 ],
3771 'render_type' => 'template',
3772 'condition' => [
3773 'timeline_layout' => ['centered', 'one-sided', 'one-sided-left']
3774 ],
3775 ]
3776 );
3777
3778 $this->end_controls_section();
3779
3780 $this->start_controls_section(
3781 'year_label_section',
3782 [
3783 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Main Line Label', 'king-addons'),
3784 'tab' => Controls_Manager::TAB_STYLE,
3785 'condition' => [
3786 'timeline_content' => 'custom'
3787 ]
3788 ]
3789 );
3790
3791 $this->add_control(
3792 'year_label_color',
3793 [
3794 'label' => esc_html__('Color', 'king-addons'),
3795 'type' => Controls_Manager::COLOR,
3796 'selectors' => [
3797 '{{WRAPPER}} .king-addons-wrapper .king-addons-year' => 'color: {{VALUE}}',
3798 ],
3799 'default' => '#222222',
3800 'condition' => [
3801 'timeline_content' => ['custom'],
3802 ]
3803 ]
3804 );
3805
3806 $this->add_control(
3807 'year_label_bgcolor',
3808 [
3809 'label' => esc_html__('Background Color', 'king-addons'),
3810 'type' => Controls_Manager::COLOR,
3811 'selectors' => [
3812 '{{WRAPPER}} .king-addons-wrapper .king-addons-year' => 'background-color: {{VALUE}}',
3813 ],
3814 'default' => '#fff',
3815 'condition' => [
3816 'timeline_content' => ['custom'],
3817 ]
3818 ]
3819 );
3820
3821 $this->add_control(
3822 'year_label_border_color',
3823 [
3824 'label' => esc_html__('Border Color', 'king-addons'),
3825 'type' => Controls_Manager::COLOR,
3826 'selectors' => [
3827 '{{WRAPPER}} .king-addons-wrapper .king-addons-year.king-addons-year-label' => 'border-color: {{VALUE}}',
3828 ],
3829 'default' => '#E0E0E0',
3830 'condition' => [
3831 'timeline_content' => ['custom'],
3832 ]
3833 ]
3834 );
3835
3836 $this->add_group_control(
3837 Group_Control_Typography::get_type(),
3838 [
3839 'name' => 'year_typography',
3840 'label' => esc_html__('Typography', 'king-addons'),
3841 'selector' => '{{WRAPPER}} .king-addons-wrapper .king-addons-year',
3842 'condition' => [
3843 'timeline_content' => ['custom'],
3844 ]
3845 ]
3846 );
3847
3848 $this->add_responsive_control(
3849 'year_label_width',
3850 [
3851 'type' => Controls_Manager::SLIDER,
3852 'label' => esc_html__('Width', 'king-addons'),
3853 'size_units' => ['px'],
3854 'default' => [
3855 'size' => 70,
3856 'unit' => 'px'
3857 ],
3858 'range' => [
3859 'px' => [
3860 'min' => 0,
3861 'max' => 100,
3862 ]
3863 ],
3864 'selectors' => [
3865 '{{WRAPPER}} .king-addons-year-label' => 'width: {{SIZE}}{{UNIT}};',
3866 ],
3867 'separator' => 'before',
3868 'render_type' => 'template',
3869 ]
3870 );
3871
3872 $this->add_responsive_control(
3873 'year_label_height',
3874 [
3875 'type' => Controls_Manager::SLIDER,
3876 'label' => esc_html__('Height', 'king-addons'),
3877 'size_units' => ['px'],
3878 'default' => [
3879 'size' => 41,
3880 'unit' => 'px'
3881 ],
3882 'range' => [
3883 'px' => [
3884 'min' => 0,
3885 'max' => 100,
3886 ]
3887 ],
3888 'selectors' => [
3889 '{{WRAPPER}} .king-addons-year-label' => 'height: {{SIZE}}{{UNIT}};',
3890 '{{WRAPPER}} .king-addons-year-wrap' => 'height: {{SIZE}}{{UNIT}};',
3891 ],
3892 ]
3893 );
3894
3895 $this->add_control(
3896 'year_label_border_type',
3897 [
3898 'label' => esc_html__('Border Type', 'king-addons'),
3899 'type' => Controls_Manager::SELECT,
3900 'options' => [
3901 'none' => esc_html__('None', 'king-addons'),
3902 'solid' => esc_html__('Solid', 'king-addons'),
3903 'double' => esc_html__('Double', 'king-addons'),
3904 'dotted' => esc_html__('Dotted', 'king-addons'),
3905 'dashed' => esc_html__('Dashed', 'king-addons'),
3906 'groove' => esc_html__('Groove', 'king-addons'),
3907 ],
3908 'default' => 'solid',
3909 'selectors' => [
3910 '{{WRAPPER}} .king-addons-year-label' => 'border-style: {{VALUE}};',
3911 ],
3912 'separator' => 'before',
3913 ]
3914 );
3915
3916 $this->add_responsive_control(
3917 'year_label_border_size',
3918 [
3919 'label' => esc_html__('Border Width', 'king-addons'),
3920 'type' => Controls_Manager::SLIDER,
3921 'size_units' => ['px'],
3922 'range' => [
3923 'px' => [
3924 'min' => 0,
3925 'max' => 10,
3926 ],
3927 ],
3928 'default' => [
3929 'unit' => 'px',
3930 'size' => 3,
3931 ],
3932 'selectors' => [
3933 '{{WRAPPER}} .king-addons-year-label' => 'border-width: {{SIZE}}{{UNIT}};',
3934 ],
3935 'condition' => [
3936 'year_label_border_type!' => 'none'
3937 ]
3938 ]
3939 );
3940
3941 $this->add_control(
3942 'year_label_radius',
3943 [
3944 'label' => esc_html__('Border Radius', 'king-addons'),
3945 'type' => Controls_Manager::DIMENSIONS,
3946 'size_units' => ['px', '%'],
3947 'default' => [
3948 'top' => 5,
3949 'right' => 5,
3950 'bottom' => 5,
3951 'left' => 5,
3952 ],
3953 'selectors' => [
3954 '{{WRAPPER}} .king-addons-year-label' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
3955 ],
3956 'separator' => 'before',
3957 ]
3958 );
3959
3960 $this->end_controls_section();
3961
3962 $this->start_controls_section(
3963 'icon_styles_section',
3964 [
3965 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Main Line Icon', 'king-addons'),
3966 'tab' => Controls_Manager::TAB_STYLE,
3967 ]
3968 );
3969
3970 $this->add_control(
3971 'icon_color',
3972 [
3973 'label' => esc_html__('Color', 'king-addons'),
3974 'type' => Controls_Manager::COLOR,
3975 'selectors' => [
3976 '{{WRAPPER}} .king-addons-icon i' => 'color: {{VALUE}};',
3977 '{{WRAPPER}} .king-addons-wrapper .king-addons-icon' => 'color: {{VALUE}};',
3978 '{{WRAPPER}} .king-addons-wrapper .king-addons-icon svg' => 'fill: {{VALUE}};',
3979 ],
3980 'default' => '#666666',
3981 ]
3982 );
3983
3984 $this->add_control(
3985 'icon_timeline_fill_color',
3986 [
3987 'label' => esc_html__('Fill Color', 'king-addons'),
3988 'type' => Controls_Manager::COLOR,
3989 'default' => '#333333',
3990 'selectors' => [
3991 '{{WRAPPER}} .king-addons-change-border-color.king-addons-icon i' => 'color: {{VALUE}};',
3992 '{{WRAPPER}} .king-addons-change-border-color.king-addons-icon svg' => 'fill: {{VALUE}};',
3993 ],
3994 'condition' => [
3995 'timeline_layout!' => ['horizontal', 'horizontal-bottom']
3996 ],
3997 ]
3998 );
3999
4000 $this->add_control(
4001 'icon_bgcolor',
4002 [
4003 'label' => esc_html__('Background Color', 'king-addons'),
4004 'type' => Controls_Manager::COLOR,
4005 'selectors' => [
4006 '{{WRAPPER}} .king-addons-wrapper .king-addons-icon' => 'background-color: {{VALUE}}',
4007 ],
4008 'default' => '#FFFFFF',
4009 ]
4010 );
4011
4012 $this->add_control(
4013 'icon_timeline_background_fill_color',
4014 [
4015 'label' => esc_html__('Background Fill Color', 'king-addons'),
4016 'type' => Controls_Manager::COLOR,
4017 'default' => '#FFFFFF',
4018 'selectors' => [
4019 '{{WRAPPER}} .king-addons-change-border-color.king-addons-icon' => 'background-color: {{VALUE}};',
4020 ],
4021 'condition' => [
4022 'timeline_layout!' => ['horizontal', 'horizontal-bottom']
4023 ],
4024 ]
4025 );
4026
4027 $this->add_control(
4028 'icon_border_color',
4029 [
4030 'label' => esc_html__('Border Color', 'king-addons'),
4031 'type' => Controls_Manager::COLOR,
4032 'default' => '#EAEAEA',
4033 'selectors' => [
4034 '{{WRAPPER}} .king-addons-wrapper .king-addons-icon' => 'border-color: {{VALUE}}',
4035 ],
4036 ]
4037 );
4038
4039 $this->add_control(
4040 'icon_transition_duration',
4041 [
4042 'label' => esc_html__('Transition Duration (seconds)', 'king-addons'),
4043 'type' => Controls_Manager::NUMBER,
4044 'default' => 0.1,
4045 'min' => 0,
4046 'max' => 5,
4047 'step' => 0.1,
4048 'selectors' => [
4049 '{{WRAPPER}} .king-addons-icon' => 'transition-duration: {{VALUE}}s',
4050 ],
4051 'separator' => 'before'
4052 ]
4053 );
4054
4055 $this->add_responsive_control(
4056 'icon_size',
4057 [
4058 'label' => esc_html__('Icon Size', 'king-addons'),
4059 'type' => Controls_Manager::SLIDER,
4060 'range' => [
4061 'px' => [
4062 'min' => 10,
4063 'max' => 100,
4064 ],
4065 ],
4066 'default' => [
4067 'size' => 17,
4068 ],
4069 'selectors' => [
4070 '{{WRAPPER}} .king-addons-wrapper .king-addons-icon i' => 'font-size: {{SIZE}}{{UNIT}} !important',
4071 '{{WRAPPER}} .king-addons-wrapper .king-addons-icon svg' => 'width: {{SIZE}}{{UNIT}} !important; height: {{SIZE}}{{UNIT}} !important;'
4072 ],
4073 'separator' => 'before'
4074 ]
4075 );
4076
4077 $this->add_responsive_control(
4078 'icon_bg_size',
4079 [
4080 'label' => esc_html__('Background Size', 'king-addons'),
4081 'type' => Controls_Manager::SLIDER,
4082 'default' => [
4083 'unit' => 'px',
4084 'size' => 45,
4085 ],
4086 'range' => [
4087 'px' => [
4088 'min' => 0,
4089 'max' => 100,
4090 ],
4091 ],
4092 'selectors' => [
4093 '{{WRAPPER}} .king-addons-wrapper .king-addons-icon i' => 'display: block;',
4094 '{{WRAPPER}} .king-addons-wrapper .king-addons-icon' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}}; display: flex !important; justify-content: center !important; align-items: center !important;',
4095 ],
4096 'render_type' => 'template',
4097 ]
4098 );
4099
4100 $this->add_control(
4101 'icon_border_type',
4102 [
4103 'label' => esc_html__('Border Type', 'king-addons'),
4104 'type' => Controls_Manager::SELECT,
4105 'options' => [
4106 'none' => esc_html__('None', 'king-addons'),
4107 'solid' => esc_html__('Solid', 'king-addons'),
4108 'double' => esc_html__('Double', 'king-addons'),
4109 'dotted' => esc_html__('Dotted', 'king-addons'),
4110 'dashed' => esc_html__('Dashed', 'king-addons'),
4111 'groove' => esc_html__('Groove', 'king-addons'),
4112 ],
4113 'default' => 'solid',
4114 'selectors' => [
4115 '{{WRAPPER}} .king-addons-icon' => 'border-style: {{VALUE}}',
4116 ],
4117 'separator' => 'before',
4118 ]
4119 );
4120
4121 $this->add_control(
4122 'icon_border_width',
4123 [
4124 'label' => esc_html__('Border Width', 'king-addons'),
4125 'type' => Controls_Manager::DIMENSIONS,
4126 'size_units' => ['px', '%'],
4127 'default' => [
4128 'top' => 2,
4129 'right' => 2,
4130 'bottom' => 2,
4131 'left' => 2,
4132 ],
4133 'selectors' => [
4134 '{{WRAPPER}} .king-addons-icon' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
4135 ],
4136 'condition' => [
4137 'icon_border_type!' => 'none'
4138 ]
4139 ]
4140 );
4141
4142 $this->add_control(
4143 'icon_border_radius',
4144 [
4145 'label' => esc_html__('Border Radius', 'king-addons'),
4146 'type' => Controls_Manager::DIMENSIONS,
4147 'size_units' => ['px', '%'],
4148 'default' => [
4149 'top' => 50,
4150 'right' => 50,
4151 'bottom' => 50,
4152 'left' => 50,
4153 'unit' => '%'
4154 ],
4155 'selectors' => [
4156 '{{WRAPPER}} .king-addons-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
4157 ],
4158 ]
4159 );
4160
4161 $this->end_controls_section();
4162
4163 $this->start_controls_section(
4164 'label_styles_section',
4165 [
4166 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Extra Label', 'king-addons'),
4167 'tab' => Controls_Manager::TAB_STYLE,
4168 'condition' => [
4169 'show_extra_label' => 'yes',
4170 ]
4171 ]
4172 );
4173
4174 $this->add_control(
4175 'extra_label_bg_color_dynamic',
4176 [
4177 'label' => esc_html__('Background Color', 'king-addons'),
4178 'type' => Controls_Manager::COLOR,
4179 'default' => '',
4180 'selectors' => [
4181 '{{WRAPPER}} .king-addons-extra-label' => 'background-color: {{VALUE}}',
4182 ],
4183 ]
4184 );
4185
4186 $this->add_responsive_control(
4187 'label_bg_size',
4188 [
4189 'label' => esc_html__('Background Size', 'king-addons'),
4190 'type' => Controls_Manager::SLIDER,
4191 'default' => [
4192 'unit' => 'px',
4193 'size' => 180,
4194 ],
4195 'range' => [
4196 'px' => [
4197 'min' => 0,
4198 'max' => 300,
4199 ],
4200 ],
4201 'selectors' => [
4202 '{{WRAPPER}} .king-addons-wrapper .king-addons-extra-label' => 'width: {{SIZE}}{{UNIT}}; height: auto;',
4203
4204 ],
4205 'separator' => 'before',
4206 ]
4207 );
4208
4209 $this->add_responsive_control(
4210 'label_right',
4211 [
4212 'label' => esc_html__('Label Distance', 'king-addons'),
4213 'type' => Controls_Manager::SLIDER,
4214 'range' => [
4215 'px' => [
4216 'min' => 0,
4217 'max' => 50,
4218 ],
4219 ],
4220 'default' => [
4221 'unit' => 'px',
4222 'size' => 25,
4223 ],
4224 'selectors' => [
4225 '{{WRAPPER}} .king-addons-timeline-centered.king-addons-both-sided-timeline .king-addons-timeline-entry.king-addons-left-aligned .king-addons-extra-label' => 'left: calc(100% + {{SIZE}}{{UNIT}})',
4226 '{{WRAPPER}} .king-addons-timeline-centered.king-addons-both-sided-timeline .king-addons-timeline-entry.king-addons-right-aligned .king-addons-extra-label' => 'right: calc(100% + {{SIZE}}{{UNIT}})',
4227 ],
4228 'condition' => [
4229 'timeline_layout' => ['centered'],
4230 ]
4231 ]
4232 );
4233
4234 $this->add_responsive_control(
4235 'label_padding',
4236 [
4237 'label' => esc_html__('Padding', 'king-addons'),
4238 'type' => Controls_Manager::DIMENSIONS,
4239 'size_units' => ['px'],
4240 'default' => [
4241 'top' => 5,
4242 'right' => 10,
4243 'bottom' => 5,
4244 'left' => 10,
4245 ],
4246 'selectors' => [
4247 '{{WRAPPER}} .king-addons-wrapper .king-addons-extra-label' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
4248 ],
4249 'separator' => 'before',
4250 ]
4251 );
4252
4253 $this->add_control(
4254 'label_border_radius',
4255 [
4256 'label' => esc_html__('Border Radius', 'king-addons'),
4257 'type' => Controls_Manager::DIMENSIONS,
4258 'size_units' => ['px', '%'],
4259 'default' => [
4260 'top' => 0,
4261 'right' => 0,
4262 'bottom' => 0,
4263 'left' => 0,
4264 ],
4265 'selectors' => [
4266 '{{WRAPPER}} .king-addons-wrapper .king-addons-extra-label' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
4267 ],
4268 'separator' => 'before',
4269 ]
4270 );
4271
4272 $this->add_control(
4273 'label_section',
4274 [
4275 'label' => esc_html__('Primary Label', 'king-addons'),
4276 'type' => Controls_Manager::HEADING,
4277 'separator' => 'before',
4278 ]
4279 );
4280
4281 $this->add_control(
4282 'date_label_color',
4283 [
4284 'label' => esc_html__('Color', 'king-addons'),
4285 'type' => Controls_Manager::COLOR,
4286 'selectors' => [
4287 '{{WRAPPER}} .king-addons-wrapper span.king-addons-label' => 'color: {{VALUE}}',
4288 ],
4289 'default' => '#5B03FF',
4290 ]
4291 );
4292
4293 $this->add_group_control(
4294 Group_Control_Typography::get_type(),
4295 [
4296 'name' => 'label_typography',
4297 'label' => esc_html__('Typography', 'king-addons'),
4298 'selector' => '{{WRAPPER}} .king-addons-extra-label span.king-addons-label',
4299 ]
4300 );
4301
4302
4303 $this->add_control(
4304 'secondary_label_section',
4305 [
4306 'label' => esc_html__('Secondary Label', 'king-addons'),
4307 'type' => Controls_Manager::HEADING,
4308 'separator' => 'before',
4309 'condition' => [
4310 'timeline_content' => 'custom'
4311 ]
4312 ]
4313 );
4314
4315 $this->add_control(
4316 'secondary_label_color',
4317 [
4318 'label' => esc_html__('Color', 'king-addons'),
4319 'type' => Controls_Manager::COLOR,
4320
4321 'selectors' => [
4322 '{{WRAPPER}} .king-addons-wrapper span.king-addons-sub-label' => 'color: {{VALUE}}',
4323 ],
4324 'condition' => [
4325 'timeline_content' => 'custom'
4326 ],
4327 'default' => '#7A7A7A',
4328 ]
4329 );
4330
4331 $this->add_group_control(
4332 Group_Control_Typography::get_type(),
4333 [
4334 'name' => 'secondary_label_typography',
4335 'label' => esc_html__('Typography', 'king-addons'),
4336 'selector' => '{{WRAPPER}} .king-addons-wrapper span.king-addons-sub-label',
4337 'condition' => [
4338 'timeline_content' => 'custom'
4339 ],
4340 ]
4341 );
4342
4343 $this->end_controls_section();
4344
4345 $this->start_controls_section(
4346 'triangle_styles',
4347 [
4348 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Triangle', 'king-addons'),
4349 'tab' => Controls_Manager::TAB_STYLE,
4350 ]
4351 );
4352
4353 $this->add_control(
4354 'triangle_bgcolor',
4355 [
4356 'label' => esc_html__('Color', 'king-addons'),
4357 'type' => Controls_Manager::COLOR,
4358 'selectors' => [
4359 '{{WRAPPER}} .king-addons-wrapper .king-addons-one-sided-timeline .king-addons-data-wrap:after' => 'border-right-color: {{icon_bgcolor}}',
4360 '{{WRAPPER}} .king-addons-wrapper .king-addons-one-sided-timeline-left .king-addons-data-wrap:after' => 'border-left-color: {{VALUE}}',
4361 '{{WRAPPER}} .king-addons-wrapper .king-addons-right-aligned .king-addons-data-wrap:after' => 'border-right-color: {{VALUE}}',
4362 '{{WRAPPER}} .king-addons-horizontal .king-addons-story-info:before' => 'border-top-color: {{VALUE}} !important',
4363 '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-story-info:before' => 'border-bottom-color: {{VALUE}} !important',
4364 '{{WRAPPER}} .king-addons-wrapper .king-addons-left-aligned .king-addons-data-wrap:after' => 'border-left-color: {{VALUE}}',
4365 'body[data-elementor-device-mode=mobile] {{WRAPPER}} .king-addons-wrapper .king-addons-both-sided-timeline .king-addons-left-aligned .king-addons-data-wrap:after' => 'border-right-color: {{VALUE}} !important; border-left-color: transparent !important;',
4366 '{{WRAPPER}} .king-addons-centered .king-addons-one-sided-timeline .king-addons-right-aligned .king-addons-data-wrap:after' => 'border-right-color: {{VALUE}} !important; border-left-color: transparent !important;',
4367 ],
4368 'default' => '#FFFFFF',
4369 'render_type' => 'template'
4370 ]
4371 );
4372
4373 $this->add_responsive_control(
4374 'story_triangle_size',
4375 [
4376 'label' => esc_html__('Size', 'king-addons'),
4377 'type' => Controls_Manager::SLIDER,
4378 'size_units' => ['px'],
4379 'default' => [
4380 'unit' => 'px',
4381 'size' => 11,
4382 ],
4383 'range' => [
4384 'px' => [
4385 'min' => 0,
4386 'max' => 25,
4387 ],
4388 ],
4389 'selectors' => [
4390 '{{WRAPPER}} .king-addons-horizontal .king-addons-story-info:before' => 'border-width: {{size}}{{UNIT}}; top: 100%; left: 50%; transform: translate(-50%);',
4391 '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-story-info:before' => 'border-width: {{size}}{{UNIT}}; bottom: 100%; left: 50%; transform: translate(-50%);',
4392 '{{WRAPPER}} .king-addons-one-sided-timeline .king-addons-data-wrap:after' => 'border-width: {{size}}{{UNIT}}; top: {{triangle_onesided_position_top.SIZE}}%; transform: translateY(-50%);',
4393 '{{WRAPPER}} .king-addons-one-sided-timeline-left .king-addons-data-wrap:after' => 'border-width: {{size}}{{UNIT}}; top: {{triangle_onesided_position_top.SIZE}}%; transform: translateY(-50%);',
4394 '{{WRAPPER}} .king-addons-both-sided-timeline .king-addons-right-aligned .king-addons-data-wrap:after' => 'border-width: {{size}}{{UNIT}}; top: {{arrow_bothsided_position_top.SIZE}}{{arrow_bothsided_position_top.UNIT}}; transform: translateY(-50%);',
4395 '{{WRAPPER}} .king-addons-both-sided-timeline .king-addons-left-aligned .king-addons-data-wrap:after' => 'border-width: {{size}}{{UNIT}}; top: {{arrow_bothsided_position_top.SIZE}}{{arrow_bothsided_position_top.UNIT}}; transform: translateY(-50%);',
4396 ],
4397 'separator' => 'before'
4398 ]
4399 );
4400
4401 $this->add_control(
4402 'triangle_onesided_position_top',
4403 [
4404 'label' => esc_html__('Position Top', 'king-addons'),
4405 'type' => Controls_Manager::SLIDER,
4406 'size_units' => ['%', 'px'],
4407 'range' => [
4408 '%' => [
4409 'min' => 0,
4410 'max' => 100,
4411 ],
4412 'px' => [
4413 'min' => 0,
4414 'max' => 150,
4415 ],
4416 ],
4417 'default' => [
4418 'unit' => '%',
4419 'size' => 30,
4420 ],
4421 'selectors' => [
4422
4423 '{{WRAPPER}} .king-addons-one-sided-timeline .king-addons-data-wrap:after' => 'top: {{size}}{{UNIT}}; transform: translateY(-50%) !important;',
4424 '{{WRAPPER}} .king-addons-one-sided-timeline-left .king-addons-data-wrap:after' => 'top: {{size}}{{UNIT}}; transform: translateY(-50%) !important;',
4425 '{{WRAPPER}} .king-addons-one-sided-timeline .king-addons-icon' => 'position: absolute; top: {{size}}{{UNIT}}; transform: translate(-50%, -50%) !important;',
4426 '{{WRAPPER}} .king-addons-one-sided-timeline-left .king-addons-icon' => 'position: absolute; top: {{size}}{{UNIT}}; transform: translate(50%,-50%) !important;',
4427 ],
4428 'condition' => [
4429 'timeline_layout' => ['one-sided', 'one-sided-left']
4430 ],
4431 'render_type' => 'template',
4432 ]
4433 );
4434
4435 $this->add_control(
4436 'arrow_bothsided_position_top',
4437 [
4438 'label' => esc_html__('Position Top', 'king-addons'),
4439 'type' => Controls_Manager::SLIDER,
4440 'size_units' => ['%', 'px'],
4441 'range' => [
4442 '%' => [
4443 'min' => 0,
4444 'max' => 100,
4445 ],
4446 'px' => [
4447 'min' => 0,
4448 'max' => 150,
4449 ],
4450 ],
4451 'default' => [
4452 'size' => 30,
4453 'unit' => '%',
4454 ],
4455 'selectors' => [
4456 '{{WRAPPER}} .king-addons-timeline-centered .king-addons-data-wrap:after' => 'top: {{size}}{{UNIT}}; transform: translateY(-50%) !important;',
4457 '{{WRAPPER}} .king-addons-timeline-centered.king-addons-both-sided-timeline .king-addons-right-aligned .king-addons-icon' => 'position: absolute; top: {{size}}{{UNIT}}; transform: translate(50%, -50%) !important;',
4458 '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline .king-addons-right-aligned .king-addons-icon' => 'position: absolute; top: {{size}}{{UNIT}}; transform: translate(-50%, -50%) !important;',
4459 '{{WRAPPER}} .king-addons-timeline-centered .king-addons-left-aligned .king-addons-icon' => 'position: absolute; top: {{size}}{{UNIT}}; transform: translate(-50%, -50%) !important;',
4460 '{{WRAPPER}} .king-addons-timeline-centered .king-addons-extra-label' => 'top: {{size}}{{UNIT}};',
4461 '{{WRAPPER}} .king-addons-centered .king-addons-one-sided-timeline .king-addons-data-wrap:after' => 'top: {{size}}{{UNIT}}; transform: translateY(-50%) !important;',
4462 ],
4463 'condition' => [
4464 'timeline_layout' => ['centered']
4465 ],
4466 'render_type' => 'template'
4467 ]
4468 );
4469
4470 $this->end_controls_section();
4471
4472 $this->start_controls_section(
4473 'navigation_button_styles',
4474 [
4475 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Navigation', 'king-addons'),
4476 'tab' => Controls_Manager::TAB_STYLE,
4477 'condition' => [
4478 'timeline_layout' => ['horizontal', 'horizontal-bottom']
4479 ]
4480 ]
4481 );
4482
4483 $this->start_controls_tabs(
4484 'navigation_style_tabs'
4485 );
4486
4487 $this->start_controls_tab(
4488 'navigation_style_normal_tab',
4489 [
4490 'label' => esc_html__('Normal', 'king-addons'),
4491 ]
4492 );
4493
4494 $this->add_control(
4495 'navigation_button_bg_color',
4496 [
4497 'label' => esc_html__('Background Color', 'king-addons'),
4498 'type' => Controls_Manager::COLOR,
4499 'default' => '',
4500 'selectors' => [
4501 '{{WRAPPER}} .king-addons-button-prev' => 'background-color: {{VALUE}}',
4502 '{{WRAPPER}} .king-addons-button-next' => 'background-color: {{VALUE}}',
4503 ],
4504 'condition' => [
4505 'timeline_layout' => ['horizontal', 'horizontal-bottom']
4506 ]
4507 ]
4508 );
4509
4510 $this->add_control(
4511 'navigation_button_color',
4512 [
4513 'label' => esc_html__('Color', 'king-addons'),
4514 'type' => Controls_Manager::COLOR,
4515 'default' => '#5B03FF',
4516 'selectors' => [
4517 '{{WRAPPER}} .king-addons-button-prev i' => 'color: {{VALUE}}',
4518 '{{WRAPPER}} .king-addons-button-next i' => 'color: {{VALUE}}',
4519 '{{WRAPPER}} .king-addons-button-prev svg' => 'fill: {{VALUE}}; cursor: pointer; z-index: 11;',
4520 '{{WRAPPER}} .king-addons-button-next svg' => 'fill: {{VALUE}}; cursor: pointer; z-index: 11;',
4521 ],
4522 'condition' => [
4523 'timeline_layout' => ['horizontal', 'horizontal-bottom']
4524 ]
4525 ]
4526 );
4527
4528 $this->add_control(
4529 'navigation_transition_duration',
4530 [
4531 'label' => esc_html__('Transition Duration (seconds)', 'king-addons'),
4532 'type' => Controls_Manager::NUMBER,
4533 'default' => 0.1,
4534 'min' => 0,
4535 'max' => 5,
4536 'step' => 0.1,
4537 'selectors' => [
4538 '{{WRAPPER}} .king-addons-button-prev' => 'transition-duration: {{VALUE}}s',
4539 '{{WRAPPER}} .king-addons-button-next' => 'transition-duration: {{VALUE}}s',
4540 '{{WRAPPER}} .king-addons-button-prev i' => 'transition-duration: {{VALUE}}s',
4541 '{{WRAPPER}} .king-addons-button-next i' => 'transition-duration: {{VALUE}}s',
4542 '{{WRAPPER}} .king-addons-button-prev svg' => 'transition-duration: {{VALUE}}s',
4543 '{{WRAPPER}} .king-addons-button-next svg' => 'transition-duration: {{VALUE}}s',
4544 ],
4545 'separator' => 'before'
4546 ]
4547 );
4548
4549 $this->add_responsive_control(
4550 'navigation_icon_size',
4551 [
4552 'label' => esc_html__('Icon Size', 'king-addons'),
4553 'type' => Controls_Manager::SLIDER,
4554 'size_units' => ['px'],
4555 'range' => [
4556 'px' => [
4557 'min' => 10,
4558 'max' => 100,
4559 ],
4560 ],
4561 'default' => [
4562 'unit' => 'px',
4563 'size' => 40,
4564 ],
4565 'selectors' => [
4566 '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-next' => 'font-size: {{SIZE}}{{UNIT}};',
4567 '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-prev' => 'font-size: {{SIZE}}{{UNIT}};',
4568 '{{WRAPPER}} .king-addons-horizontal .king-addons-button-next' => 'font-size: {{SIZE}}{{UNIT}};',
4569 '{{WRAPPER}} .king-addons-horizontal .king-addons-button-prev' => 'font-size: {{SIZE}}{{UNIT}};',
4570 '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-next svg' => 'width: {{SIZE}}{{UNIT}};',
4571 '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-prev svg' => 'width: {{SIZE}}{{UNIT}};',
4572 '{{WRAPPER}} .king-addons-horizontal .king-addons-button-next svg' => 'width: {{SIZE}}{{UNIT}};',
4573 '{{WRAPPER}} .king-addons-horizontal .king-addons-button-prev svg' => 'width: {{SIZE}}{{UNIT}};',
4574
4575 ],
4576 'separator' => 'before',
4577 ]
4578 );
4579
4580 $this->add_responsive_control(
4581 'navigation_icon_bg_size',
4582 [
4583 'label' => esc_html__('Box Size', 'king-addons'),
4584 'type' => Controls_Manager::SLIDER,
4585 'size_units' => ['px'],
4586 'range' => [
4587 'px' => [
4588 'min' => 20,
4589 'max' => 100,
4590 ],
4591 ],
4592 'default' => [
4593 'unit' => 'px',
4594 'size' => 40,
4595 ],
4596 'selectors' => [
4597 '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-next' => 'width: {{SIZE}}{{UNIT}}; text-align: center; height: {{SIZE}}{{UNIT}};',
4598 '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-prev' => 'width: {{SIZE}}{{UNIT}}; text-align: center; height: {{SIZE}}{{UNIT}};',
4599 '{{WRAPPER}} .king-addons-horizontal .king-addons-button-next' => 'width: {{SIZE}}{{UNIT}}; text-align: center; height: {{SIZE}}{{UNIT}};',
4600 '{{WRAPPER}} .king-addons-horizontal .king-addons-button-prev' => 'width: {{SIZE}}{{UNIT}}; text-align: center; height: {{SIZE}}{{UNIT}};',
4601 '{{WRAPPER}} .king-addons-horizontal .king-addons-button-next i' => 'width: {{SIZE}}{{UNIT}}; text-align: center; line-height: {{SIZE}}{{UNIT}};',
4602 '{{WRAPPER}} .king-addons-horizontal .king-addons-button-prev i' => 'width: {{SIZE}}{{UNIT}}; text-align: center; line-height: {{SIZE}}{{UNIT}};',
4603 '{{WRAPPER}} .king-addons-horizontal .king-addons-button-next svg' => ' text-align: center; line-height: 1.5;',
4604 '{{WRAPPER}} .king-addons-horizontal .king-addons-button-prev svg' => ' text-align: center; line-height: 1.5;',
4605 '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-next i' => 'width: {{SIZE}}{{UNIT}}; text-align: center; line-height: {{SIZE}}{{UNIT}};',
4606 '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-prev i' => 'width: {{SIZE}}{{UNIT}}; text-align: center; line-height: {{SIZE}}{{UNIT}};',
4607 '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-next svg' => 'text-align: center; line-height: 1.5;',
4608 '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-prev svg' => 'text-align: center; line-height: 1.5;',
4609 '{{WRAPPER}} .king-addons-swiper-pagination.swiper-pagination-progressbar' => 'width: calc(100% - ({{SIZE}}px + 15px)*2);',
4610 '{{WRAPPER}} .king-addons-horizontal-bottom.swiper' => 'margin-left: {{SIZE}}px; margin-right: {{SIZE}}px;',
4611 '{{WRAPPER}} .king-addons-horizontal.swiper' => 'margin-left: {{SIZE}}px; margin-right: {{SIZE}}px;',
4612 ],
4613 'render_type' => 'template'
4614 ]
4615 );
4616
4617 $this->end_controls_tab();
4618
4619 $this->start_controls_tab(
4620 'navigation_style_hover_tab',
4621 [
4622 'label' => esc_html__('Hover', 'king-addons'),
4623 ]
4624 );
4625
4626 $this->add_control(
4627 'navigation_button_bg_color_hover',
4628 [
4629 'label' => esc_html__('Background Color', 'king-addons'),
4630 'type' => Controls_Manager::COLOR,
4631 'default' => '',
4632 'selectors' => [
4633 '{{WRAPPER}} .king-addons-button-prev:hover' => 'background-color: {{VALUE}}; cursor: pointer;',
4634 '{{WRAPPER}} .king-addons-button-next:hover' => 'background-color: {{VALUE}}; cursor: pointer;',
4635 ],
4636 'condition' => [
4637 'timeline_layout' => ['horizontal', 'horizontal-bottom']
4638 ]
4639 ]
4640 );
4641
4642 $this->add_control(
4643 'navigation_button_color_hover',
4644 [
4645 'label' => esc_html__('Color', 'king-addons'),
4646 'type' => Controls_Manager::COLOR,
4647 'default' => '#605BE1',
4648 'selectors' => [
4649 '{{WRAPPER}} .king-addons-button-prev:hover i' => 'color: {{VALUE}}; cursor: pointer; z-index: 11;',
4650 '{{WRAPPER}} .king-addons-button-next:hover i' => 'color: {{VALUE}}; cursor: pointer; z-index: 11;',
4651 '{{WRAPPER}} .king-addons-button-prev:hover svg' => 'fill: {{VALUE}}; cursor: pointer; z-index: 11;',
4652 '{{WRAPPER}} .king-addons-button-next:hover svg' => 'fill: {{VALUE}}; cursor: pointer; z-index: 11;',
4653 ],
4654 'condition' => [
4655 'timeline_layout' => ['horizontal', 'horizontal-bottom']
4656 ]
4657 ]
4658 );
4659
4660 $this->end_controls_tab();
4661
4662 $this->end_controls_tabs();
4663
4664 $this->end_controls_section();
4665
4666
4667 $this->start_controls_section(
4668 'section_style_pagination',
4669 [
4670 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Pagination', 'king-addons'),
4671 'tab' => Controls_Manager::TAB_STYLE,
4672 'show_label' => false,
4673 'condition' => [
4674 'timeline_content' => 'dynamic',
4675 'timeline_layout' => ['centered', 'one-sided', 'one-sided-left']
4676 ],
4677 ]
4678 );
4679
4680 $this->start_controls_tabs('tabs_grid_pagination_style');
4681
4682 $this->start_controls_tab(
4683 'tab_grid_pagination_normal',
4684 [
4685 'label' => esc_html__('Normal', 'king-addons'),
4686 ]
4687 );
4688
4689 $this->add_control(
4690 'pagination_color',
4691 [
4692 'label' => esc_html__('Color', 'king-addons'),
4693 'type' => Controls_Manager::COLOR,
4694 'default' => '#ffffff',
4695 'selectors' => [
4696 '{{WRAPPER}} .king-addons-grid-pagination a' => 'color: {{VALUE}}',
4697 '{{WRAPPER}} .king-addons-grid-pagination svg' => 'fill: {{VALUE}}',
4698 '{{WRAPPER}} .king-addons-grid-pagination > div > span' => 'color: {{VALUE}}',
4699 '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-disabled-arrow' => 'color: {{VALUE}}',
4700 ],
4701 'condition' => [
4702 'timeline_layout' => ['centered', 'one-sided', 'one-sided-left']
4703 ]
4704 ]
4705 );
4706
4707 $this->add_control(
4708 'pagination_bg_color',
4709 [
4710 'label' => esc_html__('Background Color', 'king-addons'),
4711 'type' => Controls_Manager::COLOR,
4712 'default' => '#5B03FF',
4713 'selectors' => [
4714 '{{WRAPPER}} .king-addons-grid-pagination a' => 'background-color: {{VALUE}}',
4715 '{{WRAPPER}} .king-addons-grid-pagination > div > span' => 'background-color: {{VALUE}}',
4716 '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-disabled-arrow' => 'background-color: {{VALUE}}',
4717 '{{WRAPPER}} .king-addons-pagination-finish' => 'color: {{VALUE}}',
4718 ]
4719 ]
4720 );
4721
4722 $this->add_control(
4723 'pagination_border_color',
4724 [
4725 'label' => esc_html__('Border Color', 'king-addons'),
4726 'type' => Controls_Manager::COLOR,
4727 'default' => '#E8E8E8',
4728 'selectors' => [
4729 '{{WRAPPER}} .king-addons-grid-pagination a' => 'border-color: {{VALUE}}',
4730 '{{WRAPPER}} .king-addons-grid-pagination > div > span' => 'border-color: {{VALUE}}',
4731 '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-disabled-arrow' => 'border-color: {{VALUE}}',
4732 ],
4733 ]
4734 );
4735
4736 $this->add_group_control(
4737 Group_Control_Box_Shadow::get_type(),
4738 [
4739 'name' => 'pagination_box_shadow',
4740 'selector' => '{{WRAPPER}} .king-addons-grid-pagination a, {{WRAPPER}} .king-addons-grid-pagination > div > span',
4741 ]
4742 );
4743
4744 $this->add_control(
4745 'pagination_loader_color',
4746 [
4747 'label' => esc_html__('Loader Color', 'king-addons'),
4748 'type' => Controls_Manager::COLOR,
4749 'default' => '#5B03FF',
4750 'selectors' => [
4751 '{{WRAPPER}} .king-addons-double-bounce .king-addons-child' => 'background-color: {{VALUE}}',
4752 '{{WRAPPER}} .king-addons-wave .king-addons-rect' => 'background-color: {{VALUE}}',
4753 '{{WRAPPER}} .king-addons-spinner-pulse' => 'background-color: {{VALUE}}',
4754 '{{WRAPPER}} .king-addons-chasing-dots .king-addons-child' => 'background-color: {{VALUE}}',
4755 '{{WRAPPER}} .king-addons-three-bounce .king-addons-child' => 'background-color: {{VALUE}}',
4756 '{{WRAPPER}} .king-addons-fading-circle .king-addons-circle:before' => 'background-color: {{VALUE}}',
4757 ],
4758 'condition' => [
4759 'pagination_type' => ['load-more', 'infinite-scroll']
4760 ]
4761 ]
4762 );
4763
4764 $this->end_controls_tab();
4765
4766 $this->start_controls_tab(
4767 'tab_grid_pagination_hover',
4768 [
4769 'label' => esc_html__('Hover', 'king-addons'),
4770 ]
4771 );
4772
4773 $this->add_control(
4774 'pagination_color_hr',
4775 [
4776 'label' => esc_html__('Color', 'king-addons'),
4777 'type' => Controls_Manager::COLOR,
4778 'default' => '#ffffff',
4779 'selectors' => [
4780 '{{WRAPPER}} .king-addons-grid-pagination a:hover' => 'color: {{VALUE}}',
4781 '{{WRAPPER}} .king-addons-grid-pagination a:hover svg' => 'fill: {{VALUE}}',
4782 '{{WRAPPER}} .king-addons-grid-pagination > div > span:not(.king-addons-disabled-arrow):hover' => 'color: {{VALUE}}',
4783 '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-grid-current-page' => 'color: {{VALUE}}',
4784 ],
4785 ]
4786 );
4787
4788 $this->add_control(
4789 'pagination_bg_color_hr',
4790 [
4791 'label' => esc_html__('Background Color', 'king-addons'),
4792 'type' => Controls_Manager::COLOR,
4793 'default' => '#4D02D8',
4794 'selectors' => [
4795 '{{WRAPPER}} .king-addons-grid-pagination a:hover' => 'background-color: {{VALUE}}',
4796 '{{WRAPPER}} .king-addons-grid-pagination > div > span:not(.king-addons-disabled-arrow):hover' => 'background-color: {{VALUE}}',
4797 '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-grid-current-page' => 'background-color: {{VALUE}}',
4798 ]
4799 ]
4800 );
4801
4802 $this->add_control(
4803 'pagination_border_color_hr',
4804 [
4805 'label' => esc_html__('Border Color', 'king-addons'),
4806 'type' => Controls_Manager::COLOR,
4807 'default' => '#E8E8E8',
4808 'selectors' => [
4809 '{{WRAPPER}} .king-addons-grid-pagination a:hover' => 'border-color: {{VALUE}}',
4810 '{{WRAPPER}} .king-addons-grid-pagination > div > span:not(.king-addons-disabled-arrow):hover' => 'border-color: {{VALUE}}',
4811 '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-grid-current-page' => 'border-color: {{VALUE}}',
4812 ]
4813 ]
4814 );
4815
4816 $this->add_group_control(
4817 Group_Control_Box_Shadow::get_type(),
4818 [
4819 'name' => 'pagination_box_shadow_hr',
4820 'selector' => '{{WRAPPER}} .king-addons-grid-pagination a:hover, {{WRAPPER}} .king-addons-grid-pagination > div > span:not(.king-addons-disabled-arrow):hover',
4821 'separator' => 'after',
4822 ]
4823 );
4824
4825 $this->end_controls_tab();
4826
4827 $this->end_controls_tabs();
4828
4829 $this->add_control(
4830 'pagination_transition_duration',
4831 [
4832 'label' => esc_html__('Transition Duration (seconds)', 'king-addons'),
4833 'type' => Controls_Manager::NUMBER,
4834 'default' => 0.1,
4835 'min' => 0,
4836 'max' => 5,
4837 'step' => 0.1,
4838 'selectors' => [
4839 '{{WRAPPER}} .king-addons-grid-pagination a' => 'transition-duration: {{VALUE}}s',
4840 '{{WRAPPER}} .king-addons-grid-pagination svg' => 'transition-duration: {{VALUE}}s',
4841 '{{WRAPPER}} .king-addons-grid-pagination > div > span' => 'transition-duration: {{VALUE}}s',
4842 ],
4843 'separator' => 'after',
4844 ]
4845 );
4846 $this->add_group_control(
4847 Group_Control_Typography::get_type(),
4848 [
4849 'name' => 'loadmore_typography',
4850 'label' => esc_html__('Typography', 'king-addons'),
4851 'selector' => '{{WRAPPER}} .king-addons-load-more-btn',
4852 ]
4853 );
4854
4855 $this->add_control(
4856 'pagination_border_type',
4857 [
4858 'label' => esc_html__('Border Type', 'king-addons'),
4859 'type' => Controls_Manager::SELECT,
4860 'options' => [
4861 'none' => esc_html__('None', 'king-addons'),
4862 'solid' => esc_html__('Solid', 'king-addons'),
4863 'double' => esc_html__('Double', 'king-addons'),
4864 'dotted' => esc_html__('Dotted', 'king-addons'),
4865 'dashed' => esc_html__('Dashed', 'king-addons'),
4866 'groove' => esc_html__('Groove', 'king-addons'),
4867 ],
4868 'default' => 'none',
4869 'selectors' => [
4870 '{{WRAPPER}} .king-addons-grid-pagination a' => 'border-style: {{VALUE}};',
4871 '{{WRAPPER}} .king-addons-grid-pagination > div > span' => 'border-style: {{VALUE}};',
4872 '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-grid-current-page' => 'border-style: {{VALUE}};',
4873 '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-disabled-arrow' => 'border-style: {{VALUE}}',
4874 ],
4875 'separator' => 'before',
4876 ]
4877 );
4878
4879 $this->add_control(
4880 'pagination_border_width',
4881 [
4882 'label' => esc_html__('Border Width', 'king-addons'),
4883 'type' => Controls_Manager::DIMENSIONS,
4884 'size_units' => ['px'],
4885 'default' => [
4886 'top' => 1,
4887 'right' => 1,
4888 'bottom' => 1,
4889 'left' => 1,
4890 ],
4891 'selectors' => [
4892 '{{WRAPPER}} .king-addons-grid-pagination a' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
4893 '{{WRAPPER}} .king-addons-grid-pagination > div > span' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
4894 '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-grid-current-page' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
4895 '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-disabled-arrow' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
4896 ],
4897 'condition' => [
4898 'pagination_border_type!' => 'none',
4899 ],
4900 ]
4901 );
4902
4903 $this->add_responsive_control(
4904 'pagination_distance_from_grid',
4905 [
4906 'label' => esc_html__('Distance From Timeline', 'king-addons'),
4907 'type' => Controls_Manager::SLIDER,
4908 'size_units' => ['px'],
4909 'range' => [
4910 'px' => [
4911 'min' => 0,
4912 'max' => 100,
4913 ],
4914 ],
4915 'default' => [
4916 'unit' => 'px',
4917 'size' => 25,
4918 ],
4919 'selectors' => [
4920 '{{WRAPPER}} .king-addons-grid-pagination' => 'margin-top: {{SIZE}}{{UNIT}};',
4921 ],
4922 'separator' => 'before'
4923 ]
4924 );
4925
4926 $this->add_responsive_control(
4927 'pagination_padding',
4928 [
4929 'label' => esc_html__('Padding', 'king-addons'),
4930 'type' => Controls_Manager::DIMENSIONS,
4931 'size_units' => ['px'],
4932 'default' => [
4933 'top' => 8,
4934 'right' => 20,
4935 'bottom' => 8,
4936 'left' => 20,
4937 ],
4938 'selectors' => [
4939 '{{WRAPPER}} .king-addons-grid-pagination a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
4940 '{{WRAPPER}} .king-addons-grid-pagination > div > span' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
4941 '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-disabled-arrow' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
4942 '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-grid-current-page' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
4943 ],
4944 ]
4945 );
4946
4947 $this->add_responsive_control(
4948 'pagination_wrapper_padding',
4949 [
4950 'label' => esc_html__('Wrapper Padding', 'king-addons'),
4951 'type' => Controls_Manager::DIMENSIONS,
4952 'size_units' => ['px'],
4953 'default' => [
4954 'top' => 0,
4955 'right' => 0,
4956 'bottom' => 0,
4957 'left' => 0,
4958 ],
4959 'selectors' => [
4960 '{{WRAPPER}} .king-addons-grid-pagination' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
4961 ],
4962 ]
4963 );
4964
4965 $this->add_control(
4966 'pagination_radius',
4967 [
4968 'label' => esc_html__('Border Radius', 'king-addons'),
4969 'type' => Controls_Manager::DIMENSIONS,
4970 'size_units' => ['px', '%'],
4971 'default' => [
4972 'top' => 3,
4973 'right' => 3,
4974 'bottom' => 3,
4975 'left' => 3,
4976 ],
4977 'selectors' => [
4978 '{{WRAPPER}} .king-addons-grid-pagination a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
4979 '{{WRAPPER}} .king-addons-grid-pagination > div > span' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
4980 '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-grid-current-page' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
4981 ],
4982 'separator' => 'before',
4983 ]
4984 );
4985
4986
4987
4988
4989 $this->end_controls_section();
4990
4991
4992
4993 }
4994
4995 public function get_tax_query_args()
4996 {
4997 $settings = $this->get_settings();
4998 $tax_query = [];
4999
5000 if ('related' === $settings['timeline_post_types']) {
5001 $tax_query[] = [
5002 'taxonomy' => $settings['query_tax_selection'],
5003 'field' => 'term_id',
5004 'terms' => wp_get_object_terms(
5005 get_the_ID(),
5006 $settings['query_tax_selection'],
5007 ['fields' => 'ids']
5008 ),
5009 ];
5010 } else {
5011 foreach (get_object_taxonomies($settings['timeline_post_types']) as $tax) {
5012 $term_setting = $settings['query_taxonomy_' . $tax] ?? [];
5013 if (!empty($term_setting)) {
5014 $tax_query[] = [
5015 'taxonomy' => $tax,
5016 'field' => 'id',
5017 'terms' => $term_setting,
5018 ];
5019 }
5020 }
5021 }
5022
5023 return $tax_query;
5024 }
5025
5026 public function get_main_query_args()
5027 {
5028 $settings = $this->get_settings();
5029 $author = !empty($settings['query_author']) ? implode(',', $settings['query_author']) : '';
5030 $paged = get_query_var('paged') ?: (get_query_var('page') ?: 1);
5031 $posts_per_page = !king_addons_freemius()->can_use_premium_code__premium_only() && $settings['posts_per_page'] > 4
5032 ? 4
5033 : ($settings['posts_per_page'] ?: 4);
5034
5035 $args = [
5036 'post_type' => $settings['timeline_post_types'],
5037 'tax_query' => $this->get_tax_query_args(),
5038 'post__not_in' => $settings['query_exclude_' . $settings['timeline_post_types']] ?? '',
5039 'posts_per_page' => $posts_per_page,
5040 'orderby' => $settings['order_posts'],
5041 'order' => $settings['order_direction'],
5042 'author' => $author,
5043 'paged' => $paged,
5044 ];
5045
5046 if ('yes' === $settings['query_exclude_no_images']) {
5047 $args['meta_key'] = '_thumbnail_id';
5048 }
5049
5050 // Overwrite main query args if manual selection
5051 if ('manual' === $settings['query_selection']) {
5052 $post_ids = $settings['query_manual_' . $settings['timeline_post_types']] ?? [''];
5053 $args = [
5054 'post_type' => $settings['timeline_post_types'],
5055 'post__in' => $post_ids,
5056 'posts_per_page' => $posts_per_page,
5057 'orderby' => '',
5058 'paged' => $paged,
5059 ];
5060 }
5061
5062 return $args;
5063 }
5064
5065 public function get_max_num_pages()
5066 {
5067 $query = new WP_Query($this->get_main_query_args());
5068 $max_num_pages = (int)ceil($query->max_num_pages);
5069 wp_reset_postdata();
5070 return $max_num_pages;
5071 }
5072
5073 /** @noinspection PhpMissingFieldTypeInspection */
5074 public $content_alignment = '';
5075
5076 public function content_and_animation_alignment($layout, $countItem, $settings)
5077 {
5078 // Default alignment
5079 $this->content_alignment = ($layout === 'one-sided-left')
5080 ? 'king-addons-left-aligned'
5081 : 'king-addons-right-aligned';
5082
5083 // Special case for centered
5084 if ($layout === 'centered') {
5085 if ($countItem % 2 === 0) {
5086 $this->content_alignment = 'king-addons-left-aligned';
5087 }
5088 // Handle swapping animations
5089 if (preg_match('/right/i', $settings['timeline_animation'])) {
5090 if ('king-addons-left-aligned' === $this->content_alignment) {
5091 $this->animation = preg_match('/right/i', $settings['timeline_animation'])
5092 ? str_replace('right', 'left', $settings['timeline_animation'])
5093 : $settings['timeline_animation'];
5094 } else {
5095 $this->animation = preg_match('/left/i', $settings['timeline_animation'])
5096 ? str_replace('left', 'right', $settings['timeline_animation'])
5097 : $settings['timeline_animation'];
5098 }
5099 }
5100 if (preg_match('/left/i', $settings['timeline_animation'])) {
5101 if ('king-addons-left-aligned' === $this->content_alignment) {
5102 $this->animation = preg_match('/left/i', $settings['timeline_animation'])
5103 ? str_replace('left', 'right', $settings['timeline_animation'])
5104 : $settings['timeline_animation'];
5105 } elseif ('king-addons-right-aligned' === $this->content_alignment) {
5106 $this->animation = preg_match('/right/i', $settings['timeline_animation'])
5107 ? str_replace('right', 'left', $settings['timeline_animation'])
5108 : $settings['timeline_animation'];
5109 }
5110 }
5111 }
5112
5113 // Handle animation for load more
5114 if (preg_match('/right/i', $settings['timeline_animation'])) {
5115 $this->animation_loadmore_left = preg_match('/right/i', $settings['timeline_animation'])
5116 ? str_replace('right', 'left', $settings['timeline_animation'])
5117 : $settings['timeline_animation'];
5118 $this->animation_loadmore_right = preg_match('/left/i', $settings['timeline_animation'])
5119 ? str_replace('left', 'right', $settings['timeline_animation'])
5120 : $settings['timeline_animation'];
5121 } elseif (preg_match('/left/i', $settings['timeline_animation'])) {
5122 $this->animation_loadmore_left = preg_match('/left/i', $settings['timeline_animation'])
5123 ? str_replace('left', 'right', $settings['timeline_animation'])
5124 : $settings['timeline_animation'];
5125 $this->animation_loadmore_right = preg_match('/right/i', $settings['timeline_animation'])
5126 ? str_replace('right', 'left', $settings['timeline_animation'])
5127 : $settings['timeline_animation'];
5128 }
5129 }
5130
5131 public function add_custom_horizontal_timeline_attributes($content, $settings, $index)
5132 {
5133 $this->timeline_description = $content['repeater_description'];
5134 $this->story_date_label = esc_html($content['repeater_date_label']);
5135 $this->story_extra_label = esc_html($content['repeater_extra_label']);
5136 $this->timeline_story_title = wp_kses_post($content['repeater_story_title']);
5137 $this->thumbnail_size = $content['king_addons_thumbnail_size'];
5138 $this->thumbnail_custom_dimension = $content['king_addons_thumbnail_custom_dimension'];
5139 $this->show_year_label = esc_html($content['repeater_show_year_label']);
5140 $this->timeline_year = esc_html($content['repeater_year']);
5141
5142 $this->title_key = $this->get_repeater_setting_key('repeater_story_title', 'timeline_repeater_list', $index);
5143 $this->year_key = $this->get_repeater_setting_key('repeater_year', 'timeline_repeater_list', $index);
5144 $this->date_label_key = $this->get_repeater_setting_key('repeater_date_label', 'timeline_repeater_list', $index);
5145 $this->extra_label_key = $this->get_repeater_setting_key('repeater_extra_label', 'timeline_repeater_list', $index);
5146 $this->description_key = $this->get_repeater_setting_key('repeater_description', 'timeline_repeater_list', $index);
5147
5148 $this->background_image = ($settings['content_layout'] === 'background')
5149 ? $content['repeater_image']['url']
5150 : '';
5151 $this->background_class = ($settings['content_layout'] === 'background')
5152 ? 'story-with-background'
5153 : '';
5154
5155 $this->add_inline_editing_attributes($this->title_key, 'none');
5156 $this->add_inline_editing_attributes($this->year_key, 'none');
5157 $this->add_inline_editing_attributes($this->date_label_key, 'none');
5158 $this->add_inline_editing_attributes($this->extra_label_key, 'none');
5159 $this->add_inline_editing_attributes($this->description_key, 'advanced');
5160
5161 $this->add_render_attribute($this->title_key, ['class' => 'king-addons-title']);
5162 $this->add_render_attribute($this->year_key, ['class' => 'king-addons-year-label king-addons-year']);
5163 $this->add_render_attribute($this->date_label_key, ['class' => 'king-addons-label']);
5164 $this->add_render_attribute($this->extra_label_key, ['class' => 'king-addons-sub-label']);
5165 $this->add_render_attribute($this->description_key, ['class' => 'king-addons-description']);
5166 }
5167
5168 public function render_image_or_icon($content)
5169 {
5170 $img_id = $content['repeater_image']['id'] ?? '';
5171 $img_url = $content['repeater_image']['url'] ?? '';
5172 $icon = $content['repeater_timeline_item_icon'] ?? '';
5173
5174 if (!empty($img_id)) {
5175 if ($this->thumbnail_size === 'custom') {
5176 $size = [$this->thumbnail_custom_dimension['width'], $this->thumbnail_custom_dimension['height']];
5177 $this->image = wp_get_attachment_image($img_id, $size, true);
5178 } else {
5179 $this->image = wp_get_attachment_image($img_id, $this->thumbnail_size, true);
5180 }
5181 } elseif (!empty($img_url)) {
5182 $this->image = '<img src="' . esc_url($img_url) . '">';
5183 } elseif (!empty($icon)) {
5184 ob_start();
5185 Icons_Manager::render_icon($icon, ['aria-hidden' => 'true']);
5186 $this->image = ob_get_clean();
5187 } else {
5188 $this->image = '';
5189 }
5190 }
5191
5192 public function king_addons_render_swiper_navigation($settings)
5193 {
5194 echo '</div>
5195 <div class="king-addons-swiper-pagination"></div>
5196 <div class="king-addons-button-prev king-addons-timeline-prev-arrow king-addons-timeline-prev-' . esc_attr($this->get_id()) . '">
5197 ' . Core::getIcon($settings['swiper_nav_icon'], '') . '
5198 </div>
5199 <div class="king-addons-button-next king-addons-timeline-next-arrow king-addons-timeline-next-' . esc_attr($this->get_id()) . '">
5200 ' . Core::getIcon($settings['swiper_nav_icon'], '') . '
5201 </div>
5202 </div>';
5203 }
5204
5205 public function render_pagination($settings, $paged)
5206 {
5207 }
5208
5209 public function get_animation_class($data, $object)
5210 {
5211 $class = '';
5212 $anim = $data[$object . '_animation'] ?? 'none';
5213
5214 if ('none' !== $anim) {
5215 $class .= ' king-addons-' . $object . '-' . $anim;
5216 $class .= ' king-addons-anim-size-' . $data[$object . '_animation_size'];
5217 $class .= ' king-addons-animation-timing-' . $data[$object . '_animation_timing'];
5218 if ('yes' === $data[$object . '_animation_tr']) {
5219 $class .= ' king-addons-anim-transparency';
5220 }
5221 }
5222 return $class;
5223 }
5224
5225 public static function youtube_url($story_settings)
5226 {
5227 $url = $story_settings['repeater_youtube_video_url'] ?? '';
5228 $media = '';
5229 if (!empty($url)) {
5230 preg_match(
5231 '%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i',
5232 $url,
5233 $matches
5234 );
5235 if (!empty($matches[1])) {
5236 $id = $matches[1];
5237 $media = '<iframe width="100%" height="auto" src="https://www.youtube.com/embed/' . esc_attr($id) . '" allowfullscreen></iframe>';
5238 } else {
5239 $media = __("Wrong URL", "king-addons-addons");
5240 }
5241 }
5242 return $media;
5243 }
5244
5245 public function horizontal_timeline_classes($settings)
5246 {
5247 $this->slides_to_show = $settings['slides_to_show'] ?? 2;
5248 if (!king_addons_freemius()->can_use_premium_code__premium_only() && $this->slides_to_show > 4) {
5249 $this->slides_to_show = 4;
5250 }
5251
5252 $horizontal_class = '';
5253 if ($settings['timeline_layout'] === 'horizontal') {
5254 $horizontal_class = 'king-addons-horizontal-wrapper';
5255 } elseif ($settings['timeline_layout'] === 'horizontal-bottom') {
5256 $horizontal_class = 'king-addons-horizontal-bottom-wrapper';
5257 }
5258
5259 $this->horizontal_inner_class = ($horizontal_class === 'king-addons-horizontal-wrapper')
5260 ? 'king-addons-horizontal'
5261 : 'king-addons-horizontal-bottom';
5262 $this->horizontal_timeline_class = ($this->horizontal_inner_class === 'king-addons-horizontal')
5263 ? 'king-addons-horizontal-timeline'
5264 : 'king-addons-horizontal-bottom-timeline';
5265 $this->swiper_class = ($this->horizontal_timeline_class === 'king-addons-horizontal-timeline')
5266 ? 'swiper-slide-line-bottom'
5267 : 'swiper-slide-line-top';
5268 }
5269
5270 public function render_custom_vertical_timeline($layout, $settings, $data, $countItem)
5271 {
5272 echo '<div class="king-addons-wrapper king-addons-vertical ' . esc_attr($this->timeline_layout_wrapper) . '">
5273 <div class="king-addons-timeline-centered king-addons-line ' . esc_attr($this->timeline_layout) . '">
5274 <div class="king-addons-middle-line"></div>';
5275 echo ('yes' === $this->timeline_fill)
5276 ? '<div class="king-addons-timeline-fill" data-layout="' . esc_attr($layout) . '"></div>'
5277 : '';
5278
5279 foreach ($data as $index => $content) {
5280 if (!king_addons_freemius()->can_use_premium_code__premium_only() && $index === 4) {
5281 break;
5282 }
5283 $repeater_title_link = $content['repeater_title_link'] ?? '';
5284 /** @noinspection PhpIllegalStringOffsetInspection */
5285 if (!empty($repeater_title_link['url'])) {
5286 $this->add_link_attributes('repeater_title_link' . $this->item_url_count, $repeater_title_link);
5287 }
5288
5289 $this->content_and_animation_alignment($layout, $countItem, $settings);
5290 $this->render_image_or_icon($content);
5291
5292 $background_class = ($settings['content_layout'] === 'background') ? 'story-with-background' : '';
5293
5294 if ($content['repeater_show_year_label'] === 'yes') {
5295 echo '<span class="king-addons-year-wrap">
5296 <span class="king-addons-year-label king-addons-year">' . esc_html($content['repeater_year']) . '</span>
5297 </span>';
5298 }
5299
5300 echo '<article class="king-addons-timeline-entry ' . esc_attr($this->content_alignment) . ' elementor-repeater-item-' . esc_attr($content['_id']) . '" data-item-id="elementor-repeater-item-' . esc_attr($content['_id']) . '">';
5301
5302 if ('yes' === $content['repeater_show_extra_label']) {
5303 if (!empty($content['repeater_date_label']) || !empty($content['repeater_extra_label'])) {
5304 echo '<time class="king-addons-extra-label" data-aos="' . esc_attr($this->animation) . '" data-aos-left="' . esc_attr($this->animation_loadmore_left) . '" data-aos-right="' . esc_attr($this->animation_loadmore_right) . '" data-animation-offset="' . esc_attr($settings['animation_offset']) . '" data-animation-duration="' . esc_attr($settings['aos_animation_duration']) . '">';
5305 echo !empty($content['repeater_date_label'])
5306 ? '<span class="king-addons-label">' . esc_html($content['repeater_date_label']) . '</span>'
5307 : '';
5308 echo !empty($content['repeater_extra_label'])
5309 ? '<span class="king-addons-sub-label">' . wp_kses_post($content['repeater_extra_label']) . '</span>'
5310 : '';
5311 echo '</time>';
5312 }
5313 }
5314
5315 echo '<div class="king-addons-timeline-entry-inner">
5316 <div class="king-addons-main-line-icon king-addons-icon">';
5317 Icons_Manager::render_icon($content['repeater_story_icon'], ['aria-hidden' => 'true']);
5318 echo '</div>
5319 <div class="king-addons-story-info-vertical king-addons-data-wrap ' . esc_attr($background_class) . '" data-aos="' . esc_attr($this->animation) . '" data-aos-left="' . esc_attr($this->animation_loadmore_left) . '" data-aos-right="' . esc_attr($this->animation_loadmore_right) . '" data-animation-offset="' . esc_attr($settings['animation_offset']) . '" data-animation-duration="' . esc_attr($settings['aos_animation_duration']) . '">';
5320
5321 // IMAGE TOP
5322 if ($settings['content_layout'] === 'image-top' && (!empty($this->image) || !empty($content['repeater_youtube_video_url']))) {
5323 echo '<div class="king-addons-animation-wrap king-addons-timeline-media">' . $this->image;
5324 if (!empty($content['repeater_youtube_video_url'])) {
5325 echo '<div class="king-addons-timeline-iframe-wrapper"> ' . $this->youtube_url($content) . ' </div>';
5326 }
5327 if ('yes' === $settings['show_overlay'] && (!empty($this->image) || !empty($content['repeater_youtube_video_url']))) {
5328 echo '<div class="king-addons-timeline-story-overlay ' . esc_attr($this->animation_class) . '">';
5329 if (!empty($content['repeater_story_title']) && 'yes' === $settings['show_title'] && 'yes' === $settings['title_overlay']) {
5330 /** @noinspection PhpIllegalStringOffsetInspection */
5331 if (!empty($repeater_title_link['url'])) {
5332 echo '<p class="king-addons-title-wrap"><a ' . $this->get_render_attribute_string('repeater_title_link' . $this->item_url_count) . ' class="king-addons-title">' . esc_html($content['repeater_story_title']) . '</a></p>';
5333 } else {
5334 echo '<p class="king-addons-title-wrap"><span class="king-addons-title">' . esc_html($content['repeater_story_title']) . '</span></p>';
5335 }
5336 }
5337 if (!empty($content['repeater_description']) && 'yes' === $settings['show_description'] && 'yes' === $settings['description_overlay']) {
5338 echo '<div class="king-addons-description">' . wp_kses_post($content['repeater_description']) . '</div>';
5339 }
5340 echo '</div>';
5341 }
5342 echo '</div>';
5343 }
5344
5345 // NON-OVERLAY TITLE & DESCRIPTION
5346 if (
5347 ('yes' !== $settings['title_overlay'] && 'yes' === $settings['show_title'] && !empty($content['repeater_story_title'])) ||
5348 ('yes' !== $settings['description_overlay'] && 'yes' === $settings['show_description'] && !empty($content['repeater_description']))
5349 ) {
5350 echo '<div class="king-addons-timeline-content-wrapper">
5351 <div class="king-addons-content-wrapper">';
5352 if (!empty($content['repeater_story_title']) && 'yes' === $settings['show_title'] && 'yes' !== $settings['title_overlay']) {
5353 /** @noinspection PhpIllegalStringOffsetInspection */
5354 if (!empty($repeater_title_link['url'])) {
5355 echo '<p class="king-addons-title-wrap"><a ' . $this->get_render_attribute_string('repeater_title_link' . $this->item_url_count) . ' class="king-addons-title">' . esc_html($content['repeater_story_title']) . '</a></p>';
5356 } else {
5357 echo '<p class="king-addons-title-wrap"><span class="king-addons-title">' . esc_html($content['repeater_story_title']) . '</span></p>';
5358 }
5359 }
5360 if (!empty($content['repeater_description']) && 'yes' === $settings['show_description'] && 'yes' !== $settings['description_overlay']) {
5361 echo '<div class="king-addons-description">' . wp_kses_post($content['repeater_description']) . '</div>';
5362 }
5363 echo '</div>';
5364 if (!empty($content['repeater_youtube_video_url']) && $settings['content_layout'] !== 'image-top') {
5365 echo '<div class="king-addons-timeline-iframe-wrapper"> ' . $this->youtube_url($content) . ' </div>';
5366 }
5367 echo '</div>';
5368 }
5369
5370 // IMAGE BOTTOM
5371 if ($settings['content_layout'] === 'image-bottom' && !empty($this->image)) {
5372 echo '<div class="king-addons-animation-wrap king-addons-timeline-media">' . $this->image . '</div>';
5373 }
5374
5375 echo '</div>
5376 </div>
5377 </article>';
5378
5379 $countItem++;
5380 $this->item_url_count++;
5381 }
5382 echo '</div></div>';
5383 }
5384
5385 public function render_dynamic_vertical_timeline($settings, $arrow_bgcolor, $layout, $countItem, $paged)
5386 {
5387 $layout_settings = ['pagination_type' => $settings['pagination_type']];
5388 $this->add_render_attribute('grid-settings', ['data-settings' => wp_json_encode($layout_settings)]);
5389 wp_reset_postdata();
5390
5391 if (!$this->my_query->have_posts()) {
5392 echo '<div>' . esc_html($settings['query_not_found_text']) . '</div>';
5393 return;
5394 }
5395
5396 echo '<div class="king-addons-wrapper king-addons-vertical ' . esc_attr($this->timeline_layout_wrapper) . '">
5397 <div class="king-addons-timeline-centered king-addons-line ' . esc_attr($this->timeline_layout) . '"
5398 data-pagination="' . esc_attr($this->pagination_type) . '"
5399 data-max-pages="' . esc_attr($this->pagination_max_pages) . '"
5400 data-arrow-bgcolor="' . esc_attr($arrow_bgcolor) . '">
5401 <div class="king-addons-middle-line"></div>';
5402 echo ('yes' === $this->timeline_fill)
5403 ? '<div class="king-addons-timeline-fill" data-layout="' . esc_attr($layout) . '"></div>'
5404 : '';
5405
5406 while ($this->my_query->have_posts()) {
5407 $this->my_query->the_post();
5408 $id = get_post_thumbnail_id();
5409 $this->src = Group_Control_Image_Size::get_attachment_image_src($id, 'king_addons_thumbnail_dynamic', $settings);
5410 $this->alt = get_post_meta($id, '_wp_attachment_image_alt', true);
5411 if (empty($this->alt)) {
5412 $this->alt = get_the_title($id);
5413 }
5414 $this->content_and_animation_alignment($layout, $countItem, $settings);
5415 $background_class = ($settings['content_layout'] === 'background') ? 'story-with-background' : '';
5416
5417 echo '<article class="king-addons-timeline-entry ' . esc_attr($this->content_alignment) . '" data-counter="' . esc_attr($countItem) . '">';
5418
5419 // Extra Label (date)
5420 if ('yes' === $settings['show_extra_label']) {
5421 echo '<time class="king-addons-extra-label"
5422 data-aos="' . esc_attr($this->animation) . '"
5423 data-aos-left="' . esc_attr($this->animation_loadmore_left) . '"
5424 data-aos-right="' . esc_attr($this->animation_loadmore_right) . '"
5425 data-animation-offset="' . esc_attr($settings['animation_offset']) . '"
5426 data-animation-duration="' . esc_attr($settings['aos_animation_duration']) . '">
5427 <span class="king-addons-label">' . esc_html(get_the_date($settings['date_format'])) . '</span>
5428 </time>';
5429 }
5430
5431 echo '<div class="king-addons-timeline-entry-inner">
5432 <div class="king-addons-main-line-icon king-addons-icon">';
5433 Icons_Manager::render_icon($settings['posts_icon'], ['aria-hidden' => 'true']);
5434 echo '</div>
5435 <div class="king-addons-story-info-vertical king-addons-data-wrap animated ' . esc_attr($background_class) . '"
5436 data-aos="' . esc_attr($this->animation) . '"
5437 data-aos-left="' . esc_attr($this->animation_loadmore_left) . '"
5438 data-aos-right="' . esc_attr($this->animation_loadmore_right) . '"
5439 data-animation-offset="' . esc_attr($settings['animation_offset']) . '"
5440 data-animation-duration="' . esc_attr($settings['aos_animation_duration']) . '">';
5441
5442 // IMAGE / OVERLAY
5443 if (($settings['content_layout'] === 'image-top' && !empty($this->src)) ||
5444 ('yes' === $settings['show_overlay'] && !empty($this->src))
5445 ) {
5446 echo '<div class="king-addons-animation-wrap king-addons-timeline-media">
5447 <img class="king-addons-thumbnail-image" alt="' . esc_attr($this->alt) . '" src="' . esc_url($this->src) . '">';
5448 if ('yes' === $settings['show_overlay'] && !empty(get_the_post_thumbnail_url())) {
5449 echo '<div class="king-addons-timeline-story-overlay ' . esc_attr($this->animation_class) . '">';
5450 if ('yes' === $settings['show_title'] && 'yes' === $settings['title_overlay']) {
5451 echo '<p class="king-addons-title-wrap"><a class="king-addons-title" href="' . esc_url(get_the_permalink()) . '">' . esc_html(get_the_title()) . '</a></p>';
5452 }
5453 if ('yes' === $settings['show_date'] && 'yes' === $settings['date_overlay']) {
5454 echo '<div class="king-addons-inner-date-label">' . esc_html(get_the_date($settings['date_format'])) . '</div>';
5455 }
5456 if (!empty(get_the_content()) && 'yes' === $settings['show_description'] && 'yes' === $settings['description_overlay']) {
5457 echo '<div class="king-addons-description">' . esc_html(wp_trim_words(get_the_content(), $settings['excerpt_count'])) . '</div>';
5458 }
5459 if ('yes' === $this->show_readmore && 'yes' === $settings['readmore_overlay']) {
5460 echo '<div class="king-addons-read-more-wrap"><a class="king-addons-read-more-button" href="' . esc_url(get_the_permalink()) . '">' . esc_html($settings['read_more_text']) . '</a></div>';
5461 }
5462 echo '</div>';
5463 }
5464 echo '</div>';
5465 }
5466
5467 // Non-Overlay
5468 $hasNonOverlayContent = (
5469 ('yes' === $settings['show_title'] && 'yes' !== $settings['title_overlay']) ||
5470 ('yes' === $settings['show_description'] && 'yes' !== $settings['description_overlay']) ||
5471 ('yes' === $settings['show_date'] && 'yes' !== $settings['date_overlay']) ||
5472 ('yes' === $this->show_readmore && 'yes' !== $settings['readmore_overlay'])
5473 );
5474
5475 if ($hasNonOverlayContent) {
5476 echo '<div class="king-addons-timeline-content-wrapper">';
5477 if ('yes' === $settings['show_title'] && 'yes' !== $settings['title_overlay']) {
5478 echo '<p class="king-addons-title-wrap"><a class="king-addons-title" href="' . esc_url(get_the_permalink()) . '">' . esc_html(get_the_title()) . '</a></p>';
5479 }
5480 if ('yes' === $settings['show_date'] && 'yes' !== $settings['date_overlay']) {
5481 echo '<div class="king-addons-inner-date-label">' . esc_html(get_the_date($settings['date_format'])) . '</div>';
5482 }
5483 if (!empty(get_the_content()) && 'yes' === $settings['show_description'] && 'yes' !== $settings['description_overlay']) {
5484 echo '<div class="king-addons-description">' . esc_html(wp_trim_words(get_the_content(), $settings['excerpt_count'])) . '</div>';
5485 }
5486 if ('yes' === $this->show_readmore && 'yes' !== $settings['readmore_overlay']) {
5487 echo '<div class="king-addons-read-more-wrap"><a class="king-addons-read-more-button" href="' . esc_url(get_the_permalink()) . '">' . esc_html($settings['read_more_text']) . '</a></div>';
5488 }
5489 echo '</div>';
5490 }
5491
5492 // IMAGE BOTTOM
5493 if ($settings['content_layout'] === 'image-bottom' && !empty($this->src)) {
5494 echo '<div class="king-addons-animation-wrap king-addons-timeline-media"><img class="king-addons-thumbnail-image" alt="' . esc_attr($this->alt) . '" src="' . esc_url($this->src) . '"></div>';
5495 }
5496 echo '</div></div></article>';
5497 $countItem++;
5498 }
5499 echo '</div></div>';
5500
5501 if (!($settings['posts_per_page'] >= wp_count_posts($settings['timeline_post_types'])->publish)) {
5502 $this->render_pagination($settings, $paged);
5503 }
5504 }
5505
5506 public function render_custom_horizontal_timeline($settings, $autoplay, $loop, $dir, $data, $slidesHeight, $swiper_speed, $swiper_delay, $swiper_pause_on_hover)
5507 {
5508 $this->horizontal_timeline_classes($settings);
5509 echo '<div class="king-addons-timeline-outer-container">
5510 <div class="king-addons-wrapper swiper ' . esc_attr($this->horizontal_inner_class) . '"
5511 dir="' . esc_attr($dir) . '"
5512 data-slidestoshow="' . esc_attr($this->slides_to_show) . '"
5513 data-autoplay="' . esc_attr($autoplay) . '"
5514 data-loop="' . esc_attr($loop) . '"
5515 data-swiper-speed="' . esc_attr($swiper_speed) . '"
5516 data-swiper-delay="' . esc_attr($swiper_delay) . '"
5517 data-swiper-poh="' . esc_attr($swiper_pause_on_hover) . '"
5518 data-swiper-space-between="' . esc_attr($settings['story_info_gutter']) . '">
5519 <div class="swiper-wrapper ' . esc_attr($this->horizontal_timeline_class) . '">';
5520
5521 if (is_array($data)) {
5522 foreach ($data as $index => $content) {
5523 if (!king_addons_freemius()->can_use_premium_code__premium_only() && $index === 4) {
5524 break;
5525 }
5526 $repeater_title_link = $content['repeater_title_link'] ?? '';
5527 if (!empty($repeater_title_link['url'])) {
5528 $this->add_link_attributes('repeater_title_link' . $this->item_url_count, $repeater_title_link);
5529 }
5530 $this->add_custom_horizontal_timeline_attributes($content, $settings, $index);
5531 $this->render_image_or_icon($content);
5532
5533 echo '<div class="swiper-slide ' . esc_attr($this->swiper_class) . ' ' . esc_attr($slidesHeight) . ' elementor-repeater-item-' . esc_attr($content['_id']) . '">';
5534
5535 // Extra label
5536 if ('yes' === $content['repeater_show_extra_label']) {
5537 if (!empty($this->story_date_label) || !empty($this->story_extra_label)) {
5538 echo '<div class="king-addons-extra-label">';
5539 if (!empty($this->story_date_label)) {
5540 echo '<span ' . $this->get_render_attribute_string($this->date_label_key) . '>' . esc_html($this->story_date_label) . '</span>';
5541 }
5542 if (!empty($this->story_extra_label)) {
5543 echo '<span ' . $this->get_render_attribute_string($this->extra_label_key) . '>' . wp_kses_post($this->story_extra_label) . '</span>';
5544 }
5545 echo '</div>';
5546 }
5547 }
5548
5549 echo '<div class="king-addons-main-line-icon king-addons-icon">';
5550 Icons_Manager::render_icon($content['repeater_story_icon'], ['aria-hidden' => 'true']);
5551 echo '</div>
5552 <div class="king-addons-story-info ' . esc_attr($this->background_class) . '">';
5553
5554 // IMAGE TOP
5555 if (($settings['content_layout'] === 'image-top' && !empty($this->image)) ||
5556 ($settings['content_layout'] === 'image-top' && !empty($content['repeater_youtube_video_url']))) {
5557 echo '<div class="king-addons-animation-wrap king-addons-timeline-media">';
5558 echo $this->image;
5559 if (!empty($content['repeater_youtube_video_url'])) {
5560 echo '<div class="king-addons-timeline-iframe-wrapper"> ' . $this->youtube_url($content) . ' </div>';
5561 }
5562 if ('yes' === $settings['show_overlay'] && (!empty($this->image) || !empty($content['repeater_youtube_video_url']))) {
5563 echo '<div class="king-addons-timeline-story-overlay ' . esc_attr($this->animation_class) . '">';
5564 if (!empty($this->timeline_story_title) && 'yes' === $settings['show_title'] && 'yes' === $settings['title_overlay']) {
5565 if (!empty($repeater_title_link['url'])) {
5566 echo '<p class="king-addons-title-wrap"><a ' . $this->get_render_attribute_string('repeater_title_link' . $this->item_url_count) . $this->get_render_attribute_string($this->title_key) . '>' . esc_html($this->timeline_story_title) . '</a></p>';
5567 } else {
5568 echo '<p class="king-addons-title-wrap"><span ' . $this->get_render_attribute_string($this->title_key) . '>' . esc_html($this->timeline_story_title) . '</span></p>';
5569 }
5570 }
5571 if (!empty($this->timeline_description) && 'yes' === $settings['show_description'] && 'yes' === $settings['description_overlay']) {
5572 echo '<div ' . $this->get_render_attribute_string($this->description_key) . '>' . wp_kses_post($this->timeline_description) . '</div>';
5573 }
5574 echo '</div>';
5575 }
5576 echo '</div>';
5577 }
5578
5579 // NON-OVERLAY TITLE & DESCRIPTION
5580 if (
5581 ('yes' === $settings['show_title'] && 'yes' !== $settings['title_overlay'] && !empty($content['repeater_story_title'])) ||
5582 ('yes' === $settings['show_description'] && 'yes' !== $settings['description_overlay'] && !empty($content['repeater_description']))
5583 ) {
5584 echo '<div class="king-addons-timeline-content-wrapper">';
5585 if (!empty($this->timeline_story_title) && 'yes' === $settings['show_title'] && 'yes' !== $settings['title_overlay']) {
5586 if (!empty($repeater_title_link['url'])) {
5587 echo '<p class="king-addons-title-wrap"><a ' . $this->get_render_attribute_string($this->title_key) . $this->get_render_attribute_string('repeater_title_link' . $this->item_url_count) . '>' . esc_html($this->timeline_story_title) . '</a></p>';
5588 } else {
5589 echo '<p class="king-addons-title-wrap"><span ' . $this->get_render_attribute_string($this->title_key) . '>' . esc_html($this->timeline_story_title) . '</span></p>';
5590 }
5591 }
5592 if (!empty($this->timeline_description) && 'yes' === $settings['show_description'] && 'yes' !== $settings['description_overlay']) {
5593 echo '<div ' . $this->get_render_attribute_string($this->description_key) . '>' . wp_kses_post($this->timeline_description) . '</div>';
5594 }
5595 if (!empty($content['repeater_youtube_video_url']) && $settings['content_layout'] !== 'image-top') {
5596 echo '<div class="king-addons-timeline-iframe-wrapper"> ' . $this->youtube_url($content) . ' </div>';
5597 }
5598 echo '</div>';
5599 }
5600
5601 // IMAGE BOTTOM
5602 if ($settings['content_layout'] === 'image-bottom' && !empty($this->image)) {
5603 echo '<div class="king-addons-animation-wrap king-addons-timeline-media">' . $this->image . '</div>';
5604 }
5605 echo '</div></div>';
5606 $this->item_url_count++;
5607 }
5608 }
5609 $this->king_addons_render_swiper_navigation($settings);
5610 echo '</div>';
5611 }
5612
5613 public function render_dynamic_horizontal_timeline($settings, $dir, $autoplay, $loop, $slidesHeight, $swiper_speed, $swiper_delay, $swiper_pause_on_hover)
5614 {
5615 wp_reset_postdata();
5616 $this->horizontal_timeline_classes($settings);
5617
5618 if (!$this->my_query->have_posts()) {
5619 echo '<div>' . esc_html($settings['query_not_found_text']) . '</div>';
5620 return;
5621 }
5622
5623 echo '<div class="king-addons-timeline-outer-container">
5624 <div class="king-addons-wrapper swiper ' . esc_attr($this->horizontal_inner_class) . '"
5625 dir="' . esc_attr($dir) . '"
5626 data-slidestoshow="' . esc_attr($this->slides_to_show) . '"
5627 data-autoplay="' . esc_attr($autoplay) . '"
5628 data-loop="' . esc_attr($loop) . '"
5629 data-swiper-speed="' . esc_attr($swiper_speed) . '"
5630 data-swiper-delay="' . esc_attr($swiper_delay) . '"
5631 data-swiper-poh="' . esc_attr($swiper_pause_on_hover) . '"
5632 data-swiper-space-between="' . esc_attr($settings['story_info_gutter']) . '">
5633 <div class="' . esc_attr($this->horizontal_timeline_class) . ' swiper-wrapper">';
5634
5635 while ($this->my_query->have_posts()) {
5636 $this->my_query->the_post();
5637 $id = get_post_thumbnail_id();
5638 $this->src = Group_Control_Image_Size::get_attachment_image_src($id, 'king_addons_thumbnail_dynamic', $settings);
5639 $this->alt = get_post_meta($id, '_wp_attachment_image_alt', true);
5640 if (empty($this->alt)) {
5641 $this->alt = get_the_title($id);
5642 }
5643 $background_class = ($settings['content_layout'] === 'background') ? 'story-with-background' : '';
5644
5645 echo '<div class="swiper-slide ' . esc_attr($this->swiper_class) . ' ' . esc_attr($slidesHeight) . '">
5646 <div class="king-addons-story-info ' . esc_attr($background_class) . '">';
5647
5648 if (($settings['content_layout'] === 'image-top' && !empty($this->src)) ||
5649 ('yes' === $settings['show_overlay'] && !empty($this->src))
5650 ) {
5651 echo '<div class="king-addons-animation-wrap king-addons-timeline-media">';
5652 if ($settings['content_layout'] === 'image-top') {
5653 echo '<img class="king-addons-thumbnail-image" src="' . esc_url($this->src) . '">';
5654 }
5655 if ('yes' === $settings['show_overlay'] && !empty(get_the_post_thumbnail_url())) {
5656 echo '<div class="king-addons-timeline-story-overlay ' . esc_attr($this->animation_class) . '">';
5657 if ('yes' === $settings['show_title'] && 'yes' === $settings['title_overlay']) {
5658 echo '<p class="king-addons-title-wrap"><a class="king-addons-title" href="' . esc_url(get_the_permalink()) . '">' . esc_html(get_the_title()) . '</a></p>';
5659 }
5660 if ('yes' === $settings['show_date'] && 'yes' === $settings['date_overlay']) {
5661 echo '<div class="king-addons-inner-date-label">' . esc_html(get_the_date($settings['date_format'])) . '</div>';
5662 }
5663 if (!empty(get_the_content()) && 'yes' === $settings['show_description'] && 'yes' === $settings['description_overlay']) {
5664 echo '<div class="king-addons-description">' . esc_html(wp_trim_words(get_the_content(), $settings['excerpt_count'])) . '</div>';
5665 }
5666 if ('yes' === $this->show_readmore && 'yes' === $settings['readmore_overlay']) {
5667 echo '<div class="king-addons-read-more-wrap"><a class="king-addons-read-more-button" href="' . esc_url(get_the_permalink()) . '">' . esc_html($settings['read_more_text']) . '</a></div>';
5668 }
5669 echo '</div>';
5670 }
5671 echo '</div>';
5672 }
5673
5674 // Non-overlay blocks
5675 $hasNonOverlayContent = (
5676 ('yes' === $settings['show_title'] && 'yes' !== $settings['title_overlay']) ||
5677 ('yes' === $settings['show_description'] && 'yes' !== $settings['description_overlay']) ||
5678 ('yes' === $settings['show_date'] && 'yes' !== $settings['date_overlay']) ||
5679 ('yes' === $this->show_readmore && 'yes' !== $settings['readmore_overlay'])
5680 );
5681
5682 if ($hasNonOverlayContent) {
5683 echo '<div class="king-addons-timeline-content-wrapper">';
5684 if ('yes' === $settings['show_title'] && 'yes' !== $settings['title_overlay']) {
5685 echo '<p class="king-addons-title-wrap"><a class="king-addons-title" href="' . esc_url(get_the_permalink()) . '">' . esc_html(get_the_title()) . '</a></p>';
5686 }
5687 if ('yes' === $settings['show_date'] && 'yes' !== $settings['date_overlay']) {
5688 echo '<div class="king-addons-inner-date-label">' . esc_html(get_the_date($settings['date_format'])) . '</div>';
5689 }
5690 if (!empty(get_the_content()) && 'yes' === $settings['show_description'] && 'yes' !== $settings['description_overlay']) {
5691 echo '<div class="king-addons-description">' . esc_html(wp_trim_words(get_the_content(), $settings['excerpt_count'])) . '</div>';
5692 }
5693 if ('yes' === $this->show_readmore && 'yes' !== $settings['readmore_overlay']) {
5694 echo '<div class="king-addons-read-more-wrap"><a class="king-addons-read-more-button" href="' . esc_url(get_the_permalink()) . '">' . esc_html($settings['read_more_text']) . '</a></div>';
5695 }
5696 echo '</div>';
5697 }
5698
5699 // IMAGE BOTTOM
5700 if ($settings['content_layout'] === 'image-bottom' && !empty($this->src)) {
5701 echo '<div class="king-addons-animation-wrap king-addons-timeline-media"><img class="king-addons-thumbnail-image" alt="' . esc_attr($this->alt) . '" src="' . esc_url($this->src) . '"></div>';
5702 }
5703 echo '</div>';
5704
5705 // Extra Label
5706 if ('yes' === $settings['show_extra_label']) {
5707 echo '<div class="king-addons-extra-label">
5708 <span class="king-addons-label">' . esc_html(get_the_date($settings['date_format'])) . '</span>
5709 </div>';
5710 }
5711 echo '<div class="king-addons-main-line-icon king-addons-icon">';
5712 Icons_Manager::render_icon($settings['posts_icon'], ['aria-hidden' => 'true']);
5713 echo '</div></div>';
5714 }
5715 $this->king_addons_render_swiper_navigation($settings);
5716 echo '</div>';
5717 }
5718
5719 public function add_option_query_source()
5720 {
5721 $post_types = [
5722 'post' => esc_html__('Posts', 'king-addons'),
5723 'page' => esc_html__('Pages', 'king-addons'),
5724 ];
5725
5726 $custom_post_types = Core::getCustomTypes('post');
5727 foreach ($custom_post_types as $slug => $title) {
5728 if ('product' === $slug || 'e-landing-page' === $slug) {
5729 continue;
5730 }
5731 if (!king_addons_freemius()->can_use_premium_code__premium_only()) {
5732 $post_types['pro-' . substr($slug, 0, 2)] = esc_html($title) . ' (Pro)';
5733 } else {
5734 $post_types[$slug] = esc_html($title);
5735 }
5736 }
5737
5738 $post_types['current'] = esc_html__('Current Query', 'king-addons');
5739 $post_types['pro-rl'] = esc_html__('Related Query (Pro)', 'king-addons');
5740 return $post_types;
5741 }
5742
5743 protected function render()
5744 {
5745 $settings = $this->get_settings_for_display();
5746 global $paged;
5747 $paged = 1;
5748 $this->my_query = ('dynamic' === $settings['timeline_content'])
5749 ? new WP_Query($this->get_main_query_args())
5750 : '';
5751
5752 $layout = $settings['timeline_layout'];
5753 $this->animation = $settings['timeline_animation'];
5754 $this->animation_loadmore_left = '';
5755 $this->animation_loadmore_right = '';
5756 $this->timeline_fill = $settings['timeline_fill'];
5757 $this->show_readmore = $settings['show_readmore'] ?? '';
5758 $data = $settings['timeline_repeater_list'];
5759 $loop = (!king_addons_freemius()->can_use_premium_code__premium_only() && !isset($settings['swiper_loop']))
5760 ? ''
5761 : $settings['swiper_loop'];
5762 $autoplay = (!king_addons_freemius()->can_use_premium_code__premium_only() && !isset($settings['swiper_autoplay']))
5763 ? ''
5764 : $settings['swiper_autoplay'];
5765 $swiper_delay = (!king_addons_freemius()->can_use_premium_code__premium_only() && !isset($settings['swiper_delay']))
5766 ? 0
5767 : $settings['swiper_delay'];
5768 $swiper_pause_on_hover = (!king_addons_freemius()->can_use_premium_code__premium_only() && !isset($settings['swiper_pause_on_hover']))
5769 ? ''
5770 : $settings['swiper_pause_on_hover'];
5771 $swiper_speed = $settings['swiper_speed'];
5772 $slidesHeight = $settings['equal_height_slides'];
5773 $this->pagination_type = $settings['pagination_type'] ?? '';
5774 $this->pagination_max_pages = $this->get_max_num_pages() ?: '';
5775 $arrow_bgcolor = $settings['triangle_bgcolor'];
5776
5777 $animation_settings = [
5778 'overlay_animation' => $settings['overlay_animation'],
5779 'overlay_animation_size' => $settings['overlay_animation_size'],
5780 'overlay_animation_timing' => $settings['overlay_animation_timing'],
5781 'overlay_animation_tr' => $settings['overlay_animation_tr'],
5782 ];
5783 $this->animation_class = $this->get_animation_class($animation_settings, 'overlay');
5784
5785 $dir = is_rtl() ? 'rtl' : '';
5786
5787 if ('one-sided' === $layout) {
5788 $this->timeline_layout = "king-addons-one-sided-timeline";
5789 $this->timeline_layout_wrapper = "king-addons-one-sided-wrapper";
5790 } elseif ('centered' === $layout) {
5791 $this->timeline_layout = 'king-addons-both-sided-timeline';
5792 $this->timeline_layout_wrapper = 'king-addons-centered';
5793 } elseif ('one-sided-left' === $layout) {
5794 $this->timeline_layout = "king-addons-one-sided-timeline-left";
5795 $this->timeline_layout_wrapper = "king-addons-one-sided-wrapper-left";
5796 } elseif ('horizontal' === $layout) {
5797 $this->timeline_layout = "king-addons-horizontal-timeline";
5798 $this->timeline_layout_wrapper = "king-addons-horizontal-wrapper";
5799 }
5800
5801 $countItem = $countItem ?? 0;
5802 $this->item_url_count = 0;
5803
5804 // Dynamic / Horizontal
5805 if ('dynamic' === $settings['timeline_content'] && ('horizontal' === $layout || 'horizontal-bottom' === $layout)) {
5806 $this->render_dynamic_horizontal_timeline($settings, $dir, $autoplay, $loop, $slidesHeight, $swiper_speed, $swiper_delay, $swiper_pause_on_hover);
5807 } // Custom / Horizontal
5808 elseif ('custom' === $settings['timeline_content'] && ('horizontal' === $layout || 'horizontal-bottom' === $layout)) {
5809 $this->render_custom_horizontal_timeline($settings, $autoplay, $loop, $dir, $data, $slidesHeight, $swiper_speed, $swiper_delay, $swiper_pause_on_hover);
5810 } // Dynamic / Vertical
5811 else {
5812 if ('dynamic' === $settings['timeline_content']) {
5813 $this->render_dynamic_vertical_timeline($settings, $arrow_bgcolor, $layout, $countItem, $paged);
5814 } else {
5815 $this->render_custom_vertical_timeline($layout, $settings, $data, $countItem);
5816 }
5817 }
5818 }
5819
5820
5821 }
5822
5823 new Timeline();