'None', 'fade' => 'Fade', 'pro-fd' => 'Fade Down (Pro)', 'pro-fdl' => 'Fade Down Left (Pro)', 'pro-fdr' => 'Fade Down Right (Pro)', 'pro-fl' => 'Fade Left (Pro)', 'pro-fr' => 'Fade Right (Pro)', 'pro-fu' => 'Fade Up (Pro)', 'pro-ful' => 'Fade Up Left (Pro)', 'pro-fur' => 'Fade Up Right (Pro)', 'pro-fld' => 'Flip Down (Pro)', 'pro-fll' => 'Flip Left (Pro)', 'pro-flr' => 'Flip Right (Pro)', 'pro-flu' => 'Flip Up (Pro)', 'pro-sld' => 'Slide Down (Pro)', 'pro-sll' => 'Slide Left (Pro)', 'pro-slr' => 'Slide Right (Pro)', 'pro-slu' => 'Slide Up (Pro)', 'pro-zmi' => 'Zoom In (Pro)', 'pro-zmid' => 'Zoom In Down (Pro)', 'pro-zmil' => 'Zoom In Left (Pro)', 'pro-zmir' => 'Zoom In Right (Pro)', 'pro-zmiu' => 'Zoom In Up (Pro)', 'pro-zmo' => 'Zoom Out (Pro)', 'pro-zmod' => 'Zoom Out Down (Pro)', 'pro-zmol' => 'Zoom Out Left (Pro)', 'pro-zmor' => 'Zoom Out Right (Pro)', 'pro-zmou' => 'Zoom Out Up (Pro)', ]; } public function add_control_slides_to_show() { $this->add_control( 'slides_to_show', [ 'label' => esc_html__('Slides To Show', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'default' => '3', 'max' => '4', 'separator' => 'before', 'render_type' => 'template', 'condition' => [ 'timeline_layout' => [ 'horizontal', 'horizontal-bottom' ], ] ] ); } public function add_control_swiper_loop() { $this->add_control( 'swiper_loop', [ 'label' => sprintf(__('Loop %s', 'king-addons'), ''), 'type' => Controls_Manager::SWITCHER, 'separator' => 'before', 'classes' => 'king-addons-pro-control' ] ); } public function add_control_group_autoplay() { $this->add_control( 'swiper_autoplay', [ 'label' => sprintf(__('Autoplay %s', 'king-addons'), ''), 'type' => Controls_Manager::SWITCHER, 'separator' => 'before', 'classes' => 'king-addons-pro-control' ] ); } public function add_control_show_pagination() { $this->add_control( 'show_pagination', [ 'label' => sprintf(__('Show Pagination %s', 'king-addons'), ''), 'type' => Controls_Manager::SWITCHER, 'separator' => 'before', 'classes' => 'king-addons-pro-control' ] ); } public function add_control_posts_per_page() { $this->add_control( 'posts_per_page', [ 'label' => esc_html__('Posts Per Page', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'render_type' => 'template', 'default' => 3, 'max' => 4, 'min' => 0, 'label_block' => false, ] ); } protected function register_controls() { $this->start_controls_section( 'general_section', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Layout', 'king-addons'), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'timeline_content', [ 'label' => esc_html__('Timeline Content', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'custom', 'options' => [ 'custom' => esc_html__('Custom', 'king-addons'), 'dynamic' => esc_html__('Dynamic', 'king-addons') ], 'render_type' => 'template', ] ); $this->add_control( 'timeline_layout', [ 'label' => esc_html__('Layout', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'centered', 'options' => [ 'centered' => esc_html__('Zig-Zag', 'king-addons'), 'one-sided' => esc_html__('Line Left', 'king-addons'), 'one-sided-left' => esc_html__('Line Right', 'king-addons'), 'horizontal-bottom' => esc_html__('Line Top - Carousel', 'king-addons'), 'horizontal' => esc_html__('Line Bottom - Carousel', 'king-addons'), ], 'render_type' => 'template', ] ); $this->add_control( 'content_layout', [ 'label' => esc_html__('Media Position', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'image-top', 'options' => [ 'image-top' => esc_html__('Top', 'king-addons'), 'image-bottom' => esc_html__('Bottom', 'king-addons'), ], ] ); $this->add_group_control( Group_Control_Image_Size::get_type(), [ 'name' => 'king_addons_thumbnail_dynamic', 'default' => 'full', 'separator' => 'none', 'condition' => [ 'timeline_content' => 'dynamic' ] ] ); $this->add_control( 'date_format', [ 'label' => esc_html__('Date Format', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'F j, Y', 'options' => [ 'F j, Y' => esc_html(date('F j, Y')), 'Y-m-d' => esc_html(date('Y-m-d')), 'Y, M, D' => esc_html(date('Y, M, D')), 'm/d/Y' => esc_html(date('m/d/Y')), 'd/m/Y' => esc_html(date('d/m/Y')), 'j. F Y' => esc_html(date('j. F y')) ], 'condition' => [ 'timeline_content' => 'dynamic', ] ] ); $this->add_control( 'timeline_fill', [ 'label' => esc_html__('Main Line Fill', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'return_value' => 'yes', 'default' => 'yes', 'label_block' => false, 'render_type' => 'template', 'condition' => [ 'timeline_layout!' => ['horizontal', 'horizontal-bottom'] ] ] ); $this->add_control( 'posts_icon', [ 'label' => esc_html__('Main Line Icon', 'king-addons'), 'type' => Controls_Manager::ICONS, 'skin' => 'inline', 'label_block' => false, 'default' => [ 'value' => 'fab fa-apple', 'library' => 'solid', ], 'condition' => [ 'timeline_content' => 'dynamic' ] ] ); $this->add_control( 'show_extra_label', [ 'label' => esc_html__('Show Extra Label', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'return_value' => 'yes', 'default' => 'yes', 'label_block' => false, 'separator' => 'before', 'condition' => [ 'timeline_content' => 'dynamic' ] ] ); $this->add_control_slides_to_show(); if (!king_addons_freemius()->can_use_premium_code__premium_only()) { $this->add_control( 'slides_to_show_pro_notice', [ 'type' => Controls_Manager::RAW_HTML, 'raw' => 'More than 4 Slides are available
in the Pro version', 'content_classes' => 'king-addons-pro-notice', 'condition' => [ 'timeline_layout' => [ 'horizontal', 'horizontal-bottom' ], ] ] ); } $this->add_control( 'story_info_gutter', [ 'label' => esc_html__('Gutter', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'default' => 5, 'condition' => [ 'timeline_layout' => [ 'horizontal', 'horizontal-bottom' ], ] ] ); $this->add_control( 'equal_height_slides', [ 'label' => esc_html__('Equal Height Slides', 'king-addons'), 'description' => esc_html__('Make all slides the same height', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'return_value' => 'auto-height', 'default' => 'no', 'label_block' => false, 'render_type' => 'template', 'condition' => [ 'timeline_layout' => [ 'horizontal-bottom', 'horizontal' ], ] ] ); $this->add_control_swiper_loop(); $this->add_control_group_autoplay(); $this->add_control( 'swiper_speed', [ 'label' => esc_html__('Carousel Speed', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'min' => 0, 'max' => 5000, 'frontend_available' => true, 'default' => 500, 'condition' => [ 'timeline_layout' => ['horizontal', 'horizontal-bottom'] ] ] ); $this->add_control( 'swiper_nav_icon', [ 'label' => esc_html__('Carousel Icon', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'fas fa-angle-left', 'options' => [ 'fas fa-angle-left' => esc_html__('Angle', 'king-addons'), 'fas fa-angle-double-left' => esc_html__('Angle Double', 'king-addons'), 'fas fa-arrow-left' => esc_html__('Arrow', 'king-addons'), 'fas fa-arrow-alt-circle-left' => esc_html__('Arrow Circle', 'king-addons'), 'far fa-arrow-alt-circle-left' => esc_html__('Arrow Circle Alt', 'king-addons'), 'fas fa-long-arrow-alt-left' => esc_html__('Long Arrow', 'king-addons'), 'fas fa-chevron-left' => esc_html__('Chevron', 'king-addons'), ], 'condition' => [ 'timeline_layout' => ['horizontal', 'horizontal-bottom'], ], ] ); $this->add_control( 'timeline_animation', [ 'label' => esc_html__('Entrance Animation', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'fade', 'separator' => 'before', 'options' => $this->king_addons_aos_animation_array(), 'condition' => [ 'timeline_layout!' => [ 'horizontal', 'horizontal-bottom' ], ] ] ); Core::renderUpgradeProNotice($this, Controls_Manager::RAW_HTML, 'timeline', 'timeline_animation', [ 'pro-fu', 'pro-fd', 'pro-fl', 'pro-fr', 'pro-fur', 'pro-ful', 'pro-fdr', 'pro-fdl', 'pro-flu', 'pro-fld', 'pro-flr', 'pro-fll', 'pro-slu', 'pro-sll', 'pro-slr', 'pro-sld', 'pro-zmi', 'pro-zmo', 'pro-zmiu', 'pro-zmid', 'pro-zmil', 'pro-zmir', 'pro-zmou', 'pro-zmod', 'pro-zmol', 'pro-zmor', ]); $this->add_control( 'animation_offset', [ 'label' => esc_html__('Animation Offset', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'min' => 0, 'max' => 500, 'frontend_available' => true, 'default' => 150, 'condition' => [ 'timeline_layout!' => ['horizontal', 'horizontal-bottom'] ] ] ); $this->add_control( 'aos_animation_duration', [ 'label' => esc_html__('Animation Duration', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'min' => 0, 'max' => 2000, 'frontend_available' => true, 'default' => 600, 'condition' => [ 'timeline_layout!' => ['horizontal', 'horizontal-bottom'] ] ] ); $this->add_control_show_pagination(); $this->end_controls_section(); $this->start_controls_section( 'repeater_content_section', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Timeline Items', 'king-addons'), 'tab' => Controls_Manager::TAB_CONTENT, 'condition' => [ 'timeline_content' => 'custom' ] ] ); $repeater = new Repeater(); $repeater->start_controls_tabs( 'story_tabs' ); $repeater->start_controls_tab( 'content_tab', [ 'label' => esc_html__('Content', 'king-addons'), ] ); $repeater->add_control( 'main_line_label_heading', [ 'label' => esc_html__('Main Line Label', 'king-addons'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $repeater->add_control( 'repeater_show_year_label', [ 'label' => esc_html__('Show Label', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__('Show', 'king-addons'), 'label_off' => esc_html__('Hide', 'king-addons'), 'return_value' => 'yes', 'default' => 'no', ] ); $repeater->add_control( 'repeater_year', [ 'label' => esc_html__('Label Text', 'king-addons'), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, ], 'default' => '2022', 'condition' => [ 'repeater_show_year_label' => 'yes' ] ] ); $repeater->add_control( 'main_line_label_icon', [ 'label' => esc_html__('Main Line Icon', 'king-addons'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $repeater->add_control( 'repeater_story_icon', [ 'label' => esc_html__('Select Icon', 'king-addons'), 'type' => Controls_Manager::ICONS, 'skin' => 'inline', 'label_block' => false, 'default' => [ 'value' => 'fab fa-apple', 'library' => 'solid', ], ] ); $repeater->add_control( 'extra_label_heading', [ 'label' => esc_html__('Extra Label', 'king-addons'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $repeater->add_control( 'repeater_show_extra_label', [ 'label' => esc_html__('Show Extra Label', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'return_value' => 'yes', 'default' => 'yes', 'label_block' => false, ] ); $repeater->add_control( 'repeater_date_label', [ 'label' => esc_html__('Primary Label', 'king-addons'), 'label_block' => true, 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, ], 'default' => '01 Jan 2022', 'condition' => [ 'repeater_show_extra_label' => 'yes' ] ] ); $repeater->add_control( 'repeater_extra_label', [ 'label' => esc_html__('Secondary Label', 'king-addons'), 'label_block' => true, 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, ], 'default' => 'Secondary Label', 'condition' => [ 'repeater_show_extra_label' => 'yes' ] ] ); $repeater->add_control( 'repeater_media', [ 'label' => esc_html__('Display Media', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'image', 'options' => [ 'image' => esc_html__('Image', 'king-addons'), 'icon' => esc_html__('Icon', 'king-addons'), 'video' => esc_html__('Video', 'king-addons'), ], 'render_type' => 'template', 'separator' => 'before' ] ); $repeater->add_group_control( Group_Control_Image_Size::get_type(), [ 'name' => 'king_addons_thumbnail', 'default' => 'full', 'separator' => 'none', 'condition' => [ 'repeater_media' => 'image' ] ] ); $repeater->add_control( 'repeater_youtube_video_url', [ 'label' => esc_html__('Youtube Video Link', 'king-addons'), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, ], 'label_block' => true, 'default' => '', 'condition' => [ 'repeater_media' => 'video', ] ] ); $repeater->add_control( 'repeater_image', [ 'label' => esc_html__('Choose Image', 'king-addons'), 'type' => Controls_Manager::MEDIA, 'dynamic' => [ 'active' => true ], 'description' => esc_html__('Image Size will not work with default image', 'king-addons'), 'condition' => [ 'repeater_media' => 'image' ] ] ); $repeater->add_control( 'repeater_timeline_item_icon', [ 'label' => esc_html__('Media Icon', 'king-addons'), 'type' => Controls_Manager::ICONS, 'skin' => 'inline', 'label_block' => false, 'default' => [ 'value' => 'far fa-star', 'library' => 'solid', ], 'condition' => [ 'repeater_media' => 'icon' ] ] ); $repeater->add_control( 'repeater_story_title', [ 'label' => esc_html__('Item Title', 'king-addons'), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, ], 'default' => 'Timeline Story', 'label_block' => true, 'separator' => 'before' ] ); $repeater->add_control( 'repeater_title_link', [ 'label' => esc_html__('Item Title URL', 'king-addons'), 'type' => Controls_Manager::URL, 'dynamic' => [ 'active' => true, ], 'placeholder' => esc_html__('https://example.com', 'king-addons'), 'default' => [ 'url' => '', 'is_external' => true, 'nofollow' => true, 'custom_attributes' => '', ], ] ); $repeater->add_control( 'repeater_description', [ 'label' => esc_html__('Description', 'king-addons'), 'type' => Controls_Manager::WYSIWYG, 'default' => 'Add Description Here', ] ); $repeater->end_controls_tab(); $repeater->start_controls_tab( 'repeater_advanced_tab', [ 'label' => esc_html__('Style', 'king-addons'), ] ); $repeater->add_control( 'show_custom_styles', [ 'label' => esc_html__('Custom Colors', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'return_value' => 'yes', 'label_block' => false ] ); $repeater->add_control( 'item_main_styles', [ 'label' => esc_html__('Item', 'king-addons'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', 'condition' => [ 'show_custom_styles' => 'yes' ] ] ); $repeater->add_control( 'item_bg_color', [ 'label' => esc_html__('Background Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#FFF', 'selectors' => [ '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-story-info-vertical.king-addons-data-wrap' => 'background-color: {{VALUE}}', '{{WRAPPER}} .king-addons-horizontal-bottom-timeline {{CURRENT_ITEM}} .king-addons-story-info' => 'background-color: {{VALUE}}', '{{WRAPPER}} .king-addons-horizontal {{CURRENT_ITEM}} .king-addons-story-info' => 'background-color: {{VALUE}}' ], 'condition' => [ 'show_custom_styles' => 'yes' ] ] ); $repeater->add_control( 'repeater_story_border_color', [ 'label' => esc_html__('Border Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-story-info' => 'border-color: {{VALUE}} !important;', '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-left-aligned .king-addons-story-info-vertical' => 'border-color: {{VALUE}} !important;', '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-right-aligned .king-addons-story-info-vertical' => 'border-color: {{VALUE}} !important;', '{{WRAPPER}} {{CURRENT_ITEM}}.swiper-slide-line-top .king-addons-story-info:before' => 'border-bottom-color: {{VALUE}} !important;', '{{WRAPPER}} {{CURRENT_ITEM}}.swiper-slide-line-bottom .king-addons-story-info:before' => 'border-top-color: {{VALUE}} !important', '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-left-aligned .king-addons-story-info-vertical:after' => 'border-left-color: {{VALUE}} !important', '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;', '{{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;', ], 'default' => '#5B03FF', 'condition' => [ 'show_custom_styles' => 'yes' ] ] ); $repeater->add_control( 'repeater_triangle_color', [ 'label' => esc_html__('Triangle', 'king-addons'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', 'condition' => [ 'show_custom_styles' => 'yes' ] ] ); $repeater->add_control( 'repeater_triangle_bgcolor', [ 'label' => esc_html__('Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{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}}', '{{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}}', '{{WRAPPER}} .king-addons-wrapper {{CURRENT_ITEM}}.king-addons-right-aligned .king-addons-data-wrap:after' => 'border-right-color: {{VALUE}}', '{{WRAPPER}} .king-addons-horizontal {{CURRENT_ITEM}} .king-addons-story-info:before' => 'border-top-color: {{VALUE}} !important', '{{WRAPPER}} .king-addons-horizontal-bottom {{CURRENT_ITEM}} .king-addons-story-info:before' => 'border-bottom-color: {{VALUE}} !important', '{{WRAPPER}} .king-addons-wrapper {{CURRENT_ITEM}}.king-addons-left-aligned .king-addons-data-wrap:after' => 'border-left-color: {{VALUE}} !important', '{{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;', '{{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', ], 'default' => '#5B03FF', 'condition' => [ 'show_custom_styles' => 'yes' ] ] ); $repeater->add_control( 'repeater_media_styles', [ 'label' => esc_html__('Media', 'king-addons'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', 'condition' => [ 'show_custom_styles' => 'yes' ] ] ); $repeater->add_control( 'repeater_overlay_bgcolor', [ 'label' => esc_html__('Overlay Background Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper {{CURRENT_ITEM}} .king-addons-timeline-story-overlay' => 'background-color: {{VALUE}}', ], 'default' => '#0000005E', 'condition' => [ 'show_custom_styles' => 'yes' ] ] ); $repeater->add_control( 'repeater_media_item_border_color', [ 'label' => esc_html__('Border Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#E8E8E8', 'selectors' => [ '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-timeline-media' => 'border-color: {{VALUE}}', ], 'condition' => [ 'show_custom_styles' => 'yes' ] ] ); $repeater->add_control( 'repeater_item_content_styles', [ 'label' => esc_html__('Content', 'king-addons'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', 'condition' => [ 'show_custom_styles' => 'yes' ] ] ); $repeater->add_control( 'repeater_story_title_color', [ 'label' => esc_html__('Title Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-title' => 'color: {{VALUE}} !important;', ], 'default' => '#444444', 'condition' => [ 'show_custom_styles' => 'yes' ] ] ); $repeater->add_control( 'repeater_description_color', [ 'label' => esc_html__('Description Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper {{CURRENT_ITEM}} .king-addons-description' => 'color: {{VALUE}};', '{{WRAPPER}} .king-addons-wrapper {{CURRENT_ITEM}} .king-addons-description p' => 'color: {{VALUE}};' ], 'default' => '#333333', 'condition' => [ 'show_custom_styles' => 'yes' ] ] ); $repeater->add_control( 'item_content_border_color', [ 'label' => esc_html__('Border Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#E8E8E8', 'selectors' => [ '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-timeline-content-wrapper' => 'border-color: {{VALUE}}', ], 'condition' => [ 'show_custom_styles' => 'yes' ] ] ); $repeater->add_control( 'repeater_main_line_content_styles', [ 'label' => esc_html__('Main Line', 'king-addons'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', 'condition' => [ 'show_custom_styles' => 'yes' ] ] ); $repeater->add_control( 'repeater_timeline_icon_color', [ 'label' => esc_html__('Icon Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-icon i' => 'color: {{VALUE}}', '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-icon svg' => 'fill: {{VALUE}}' ], 'default' => '#000', 'condition' => [ 'show_custom_styles' => 'yes' ] ] ); $repeater->add_control( 'repeater_icon_timeline_fill_color', [ 'label' => esc_html__('Icon Fill Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#fff', 'selectors' => [ '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-change-border-color.king-addons-icon i' => 'color: {{VALUE}} !important;', '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-change-border-color.king-addons-icon svg' => 'fill: {{VALUE}} !important;', ], 'condition' => [ 'show_custom_styles' => 'yes' ] ] ); $repeater->add_control( 'repeater_timeline_icon_bg_color', [ 'label' => esc_html__('Icon Background Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper {{CURRENT_ITEM}} .king-addons-icon' => 'background-color: {{VALUE}} !important;', ], 'default' => '#FFFFF', 'condition' => [ 'show_custom_styles' => 'yes' ] ] ); $repeater->add_control( 'repeater_icon_timeline_background_fill_color', [ 'label' => esc_html__('Icon Background Fill Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#FFFFFF', 'selectors' => [ '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-change-border-color.king-addons-icon' => 'background-color: {{VALUE}} !important;', ], 'condition' => [ 'show_custom_styles' => 'yes' ], ] ); $repeater->add_control( 'repeater_icon_border_color', [ 'label' => esc_html__('Icon Border Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#000', 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper {{CURRENT_ITEM}} .king-addons-icon' => 'border-color: {{VALUE}}', ], 'condition' => [ 'show_custom_styles' => 'yes' ] ] ); $repeater->add_control( 'item_icon_styles', [ 'label' => esc_html__('Media Icon', 'king-addons'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', 'condition' => [ 'repeater_media' => 'icon', ], ] ); $repeater->add_control( 'repeater_timeline_item_icon_color', [ 'label' => esc_html__('Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-timeline-media i' => 'color: {{VALUE}}', '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-timeline-media svg' => 'fill: {{VALUE}}' ], 'condition' => [ 'repeater_media' => 'icon', ], 'default' => '#000', ] ); $repeater->add_control( 'repeater_timeline_item_icon_bgcolor', [ 'label' => esc_html__('Background Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-timeline-media' => 'background-color: {{VALUE}}', ], 'condition' => [ 'repeater_media' => 'icon', ], 'default' => '#FFF', ] ); $repeater->add_responsive_control( 'repeater_timeline_item_icon_size', [ 'label' => esc_html__('Size', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 0, 'max' => 600, ], ], 'default' => [ 'unit' => 'px', 'size' => 40, ], 'selectors' => [ '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-timeline-media i' => 'font-size: {{SIZE}}{{UNIT}};', '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-timeline-media svg' => 'width: {{SIZE}}{{UNIT}};', ], 'condition' => [ 'repeater_media' => 'icon', ] ] ); $repeater->add_responsive_control( 'repeater_timeline_item_icon_padding', [ 'label' => esc_html__('Padding', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px'], 'default' => [ 'top' => 20, 'right' => 20, 'bottom' => 20, 'left' => 20, ], 'selectors' => [ '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-timeline-media' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], 'condition' => [ 'repeater_media' => 'icon' ], ] ); $repeater->add_responsive_control( 'repeater_timeline_item_icon_alignment', [ 'label' => esc_html__('Align', 'king-addons'), 'type' => Controls_Manager::CHOOSE, 'label_block' => false, 'default' => 'center', 'options' => [ 'left' => [ 'title' => esc_html__('Start', 'king-addons'), 'icon' => 'eicon-text-align-left', ], 'center' => [ 'title' => esc_html__('Center', 'king-addons'), 'icon' => 'eicon-text-align-center', ], 'right' => [ 'title' => esc_html__('End', 'king-addons'), 'icon' => 'eicon-text-align-right', ], ], 'selectors' => [ '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-timeline-media i' => 'display: block; text-align: {{VALUE}};', '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-timeline-media svg' => 'text-align: {{VALUE}};' ], 'condition' => [ 'repeater_media' => 'icon' ] ] ); $repeater->end_controls_tab(); $repeater->end_controls_tabs(); $this->add_control( 'timeline_repeater_list', [ 'label' => esc_html__('Content', 'king-addons'), 'type' => Controls_Manager::REPEATER, 'fields' => $repeater->get_controls(), 'default' => [ [ 'repeater_story_title' => esc_html__('Timeline Item 1', 'king-addons'), 'repeater_description' => esc_html__('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima incidunt voluptates nemo.', 'king-addons'), 'repeater_year' => esc_html__('2023', 'king-addons'), 'repeater_date_label' => esc_html__('January 2023', 'king-addons'), 'repeater_extra_label' => esc_html__('Company Established', 'king-addons'), 'repeater_story_icon' => [ 'value' => 'far fa-star', 'library' => 'solid' ], 'repeater_show_year_label' => 'yes', 'repeater_image' => [ 'url' => Utils::get_placeholder_image_src(), 'id' => '', ], 'repeater_youtube_video_url' => '', 'item_bg_color' => '#f44771', 'repeater_triangle_bgcolor' => '#f44771', 'repeater_overlay_bgcolor' => '#0000005E', 'repeater_story_title_color' => '#FCFCFC', 'repeater_description_color' => '#ECECEC', 'repeater_timeline_icon_bg_color' => '', 'item_content_border_color' => '#E8E8E8', 'repeater_timeline_icon_color' => '#E8E8E8', 'repeater_icon_timeline_fill_color' => '#f44771', 'repeater_icon_timeline_background_fill_color' => '#FFFFFF', 'repeater_icon_border_color' => '#E8E8E8' ], [ 'repeater_story_title' => esc_html__('Timeline Item 2', 'king-addons'), 'repeater_description' => esc_html__('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima incidunt voluptates nemo.', 'king-addons'), 'repeater_year' => esc_html__('2023', 'king-addons'), 'repeater_date_label' => esc_html__('February 2023', 'king-addons'), 'repeater_extra_label' => esc_html__('New office in California', 'king-addons'), 'repeater_story_icon' => [ 'value' => 'fas fa-crown', 'library' => 'solid' ], 'repeater_image' => [ 'url' => Utils::get_placeholder_image_src(), 'id' => '', ], 'repeater_youtube_video_url' => '', 'item_bg_color' => '#f44771', 'repeater_triangle_bgcolor' => '#f44771', 'repeater_overlay_bgcolor' => '#0000005E', 'repeater_story_title_color' => '#FCFCFC', 'repeater_description_color' => '#ECECEC', 'repeater_timeline_icon_bg_color' => '', 'item_content_border_color' => '#E8E8E8', 'repeater_timeline_icon_color' => '#E8E8E8', 'repeater_icon_timeline_fill_color' => '#f44771', 'repeater_icon_timeline_background_fill_color' => '#FFFFFF', 'repeater_icon_border_color' => '#E8E8E8' ], [ 'repeater_story_title' => esc_html__('Timeline Item 3', 'king-addons'), 'repeater_description' => esc_html__('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima incidunt voluptates nemo.', 'king-addons'), 'repeater_year' => esc_html__('2023', 'king-addons'), 'repeater_date_label' => esc_html__('March 2023', 'king-addons'), 'repeater_extra_label' => esc_html__('First Product Launch', 'king-addons'), 'repeater_story_icon' => [ 'value' => 'fas fa-rocket', 'library' => 'solid' ], 'repeater_show_year_label' => 'yes', 'repeater_image' => [ 'url' => Utils::get_placeholder_image_src(), 'id' => '', ], 'repeater_youtube_video_url' => '', 'item_bg_color' => '#f44771', 'repeater_triangle_bgcolor' => '#f44771', 'repeater_overlay_bgcolor' => '#0000005E', 'repeater_story_title_color' => '#FCFCFC', 'repeater_description_color' => '#FDFDFD', 'item_content_border_color' => '#E8E8E8', 'repeater_timeline_icon_bg_color' => '', 'repeater_timeline_icon_color' => '#E8E8E8', 'repeater_icon_timeline_fill_color' => '#f44771', 'repeater_icon_timeline_background_fill_color' => '#FFFFFF', 'repeater_icon_border_color' => '#E8E8E8' ], [ 'repeater_story_title' => esc_html__('Timeline Item 4', 'king-addons'), 'repeater_description' => esc_html__('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima incidunt voluptates nemo.', 'king-addons'), 'repeater_year' => esc_html__('2023', 'king-addons'), 'repeater_date_label' => esc_html__('April 2023', 'king-addons'), 'repeater_extra_label' => esc_html__('Entering Stock Market', 'king-addons'), 'repeater_story_icon' => [ 'value' => 'fas fa-bolt', 'library' => 'solid' ], 'repeater_image' => [ 'url' => Utils::get_placeholder_image_src(), 'id' => '', ], 'repeater_youtube_video_url' => '', 'item_bg_color' => '#f44771', 'repeater_triangle_bgcolor' => '#f44771', 'repeater_overlay_bgcolor' => '#0000005E', 'repeater_story_title_color' => '#FCFCFC', 'repeater_description_color' => '#F3F3F3', 'item_content_border_color' => '#E8E8E8', 'repeater_timeline_icon_bg_color' => '', 'repeater_timeline_icon_color' => '#E8E8E8', 'repeater_icon_timeline_fill_color' => '#f44771', 'repeater_icon_timeline_background_fill_color' => '#FFFFFF', 'repeater_icon_border_color' => '#E8E8E8' ], ], 'title_field' => '{{ repeater_story_title }}', ] ); if (!king_addons_freemius()->can_use_premium_code__premium_only()) { $this->add_control( 'timeline_repeater_pro_notice', [ 'type' => Controls_Manager::RAW_HTML, 'raw' => 'More than 4 Slides are available
in the Pro version', 'content_classes' => 'king-addons-pro-notice', ] ); } $this->end_controls_section(); $post_types = $this->add_option_query_source(); $post_taxonomies = Core::getCustomTypes('tax', false); $this->start_controls_section( 'query_section', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Query', 'king-addons'), 'condition' => [ 'timeline_content' => 'dynamic', ] ] ); $this->add_control( 'timeline_post_types', [ 'label' => esc_html__('Post Type', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'post', 'label_block' => false, 'options' => $post_types, ] ); Core::renderUpgradeProNotice($this, Controls_Manager::RAW_HTML, 'timeline', 'timeline_post_types', ['pro-rl']); if (!king_addons_freemius()->can_use_premium_code__premium_only()) { $this->add_control( 'query_source_cpt_pro_notice', [ 'raw' => 'This option is available
in the Pro version', 'type' => Controls_Manager::RAW_HTML, 'content_classes' => 'king-addons-pro-notice', 'condition' => [ 'timeline_post_types!' => ['post', 'page', 'related', 'current', 'pro-rl'], ] ] ); } $this->add_control( 'query_selection', [ 'label' => esc_html__('Selection', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'dynamic', 'options' => [ 'dynamic' => esc_html__('Dynamic', 'king-addons'), 'manual' => esc_html__('Manual', 'king-addons'), ], 'condition' => [ 'timeline_post_types!' => ['current', 'related'], ], ] ); $this->add_control( 'query_tax_selection', [ 'label' => esc_html__('Selection Taxonomy', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'category', 'options' => $post_taxonomies, 'condition' => [ 'timeline_post_types' => 'related', ], ] ); foreach ($post_types as $slug => $title) { $this->add_control( 'query_manual_' . $slug, [ 'label' => esc_html__('Select ', 'king-addons') . $title, 'type' => 'king-addons-ajax-select2', 'options' => 'ajaxselect2/getPostsByPostType', 'query_slug' => $slug, 'multiple' => true, 'label_block' => true, 'condition' => [ 'timeline_post_types' => $slug, 'query_selection' => 'manual', ], 'separator' => 'before', ] ); } $this->add_control( 'query_author', [ 'label' => esc_html__('Authors', 'king-addons'), 'type' => 'king-addons-ajax-select2', 'options' => 'ajaxselect2/getUsers', 'multiple' => true, 'label_block' => true, 'separator' => 'before', 'condition' => [ 'timeline_post_types!' => ['current', 'related'], 'query_selection' => 'dynamic', ], ] ); foreach ($post_taxonomies as $slug => $title) { global $wp_taxonomies; $post_type = ''; if (isset($wp_taxonomies[$slug]->object_type[0])) { $post_type = $wp_taxonomies[$slug]->object_type[0]; } $this->add_control( 'query_taxonomy_' . $slug, [ 'label' => $title, 'type' => 'king-addons-ajax-select2', 'options' => 'ajaxselect2/getTaxonomies', 'query_slug' => $slug, 'multiple' => true, 'label_block' => true, 'condition' => [ 'timeline_post_types' => $post_type, 'query_selection' => 'dynamic', ], ] ); } foreach ($post_types as $slug => $title) { $this->add_control( 'query_exclude_' . $slug, [ 'label' => esc_html__('Exclude ', 'king-addons') . $title, 'type' => 'king-addons-ajax-select2', 'options' => 'ajaxselect2/getPostsByPostType', 'query_slug' => $slug, 'multiple' => true, 'label_block' => true, 'condition' => [ 'timeline_content' => 'dynamic', 'timeline_post_types' => $slug, 'timeline_post_types!' => ['current', 'related'], 'query_selection' => 'dynamic', ], ] ); } $this->add_control_posts_per_page(); if (!king_addons_freemius()->can_use_premium_code__premium_only()) { $this->add_control( 'posts_per_page_pro_notice', [ 'type' => Controls_Manager::RAW_HTML, 'raw' => 'More than 4 Posts are available
in the Pro version', 'content_classes' => 'king-addons-pro-notice', ] ); } $this->add_control( 'order_posts', [ 'label' => esc_html__('Order By', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'date', 'label_block' => false, 'options' => [ 'title' => esc_html__('Title', 'king-addons'), 'date' => esc_html__('Date', 'king-addons'), ], 'condition' => [ 'query_selection' => 'dynamic', ] ] ); $this->add_control( 'order_direction', [ 'label' => esc_html__('Order', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'DESC', 'label_block' => false, 'options' => [ 'ASC' => esc_html__('Ascending', 'king-addons'), 'DESC' => esc_html__('Descending', 'king-addons'), ], 'condition' => [ 'query_selection' => 'dynamic', ] ] ); $this->add_control( 'query_not_found_text', [ 'label' => esc_html__('Not Found Text', 'king-addons'), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, ], 'default' => 'No Posts Found!', 'condition' => [ ] ] ); $this->add_control( 'query_exclude_no_images', [ 'label' => esc_html__('Exclude Items without Thumbnail', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'return_value' => 'yes', 'label_block' => false ] ); $this->end_controls_section(); $this->start_controls_section( 'content_section', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Content', 'king-addons'), 'condition' => [ ] ] ); $this->add_responsive_control( 'content_alignment_left', [ 'label' => esc_html__('Content Align', 'king-addons'), 'type' => Controls_Manager::CHOOSE, 'label_block' => false, 'default' => 'center', 'options' => [ 'left' => [ 'title' => esc_html__('Left', 'king-addons'), 'icon' => 'eicon-text-align-left', ], 'center' => [ 'title' => esc_html__('Center', 'king-addons'), 'icon' => 'eicon-text-align-center', ], 'right' => [ 'title' => esc_html__('Right', 'king-addons'), 'icon' => 'eicon-text-align-right', ], ], 'selectors' => [ '{{WRAPPER}} .king-addons-story-info' => 'text-align: {{VALUE}};', '{{WRAPPER}} .king-addons-left-aligned .king-addons-story-info-vertical' => 'text-align: {{VALUE}};', '{{WRAPPER}} .king-addons-left-aligned .king-addons-title-wrap' => 'text-align: {{VALUE}};', '{{WRAPPER}} .king-addons-left-aligned .king-addons-description' => 'text-align: {{VALUE}};', '{{WRAPPER}} .king-addons-left-aligned .king-addons-inner-date-label' => 'text-align: {{VALUE}};', '{{WRAPPER}} .swiper-wrapper .king-addons-title-wrap' => 'text-align: {{VALUE}};', '{{WRAPPER}} .swiper-wrapper .king-addons-description' => 'text-align: {{VALUE}};', '{{WRAPPER}} .swiper-wrapper .king-addons-inner-date-label' => 'text-align: {{VALUE}};', '{{WRAPPER}} .king-addons-title-wrap' => 'text-align: {{VALUE}};', ], 'condition' => [ 'timeline_layout' => ['centered', 'one-sided-left', 'horizontal', 'horizontal-bottom'] ] ] ); $this->add_responsive_control( 'content_alignment', [ 'label' => esc_html__('Content Align (Right)', 'king-addons'), 'type' => Controls_Manager::CHOOSE, 'label_block' => false, 'default' => 'center', 'options' => [ 'left' => [ 'title' => esc_html__('Left', 'king-addons'), 'icon' => 'eicon-text-align-left', ], 'center' => [ 'title' => esc_html__('Center', 'king-addons'), 'icon' => 'eicon-text-align-center', ], 'right' => [ 'title' => esc_html__('Right', 'king-addons'), 'icon' => 'eicon-text-align-right', ], ], 'selectors' => [ '{{WRAPPER}} .king-addons-story-info' => 'text-align: {{VALUE}};', '{{WRAPPER}} .king-addons-right-aligned .king-addons-story-info-vertical' => 'text-align: {{VALUE}};', '{{WRAPPER}} .king-addons-right-aligned .king-addons-title-wrap' => 'text-align: {{VALUE}};', '{{WRAPPER}} .king-addons-right-aligned .king-addons-description' => 'text-align: {{VALUE}};', '{{WRAPPER}} .king-addons-right-aligned .king-addons-inner-date-label' => 'text-align: {{VALUE}};', '{{WRAPPER}} .king-addons-title-wrap' => 'text-align: {{VALUE}};', ], 'condition' => [ 'timeline_layout' => ['centered', 'one-sided'] ] ] ); $this->add_control( 'show_overlay', [ 'label' => esc_html__('Show Image Overlay', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'return_value' => 'yes', 'default' => 'no', 'label_block' => false, 'separator' => 'before', 'render_type' => 'template', 'condition' => [ 'content_layout' => 'image-top' ], ] ); $this->add_control( 'show_on_hover', [ 'label' => esc_html__('Show Items on Hover', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'return_value' => 'yes', 'label_block' => false, 'selectors_dictionary' => [ 'yes' => 'opacity: 0; transform: translateY(-50%); transition: all 0.5s ease', 'no' => 'visibility: visible;', ], 'selectors' => [ '{{WRAPPER}} .king-addons-story-info' => '{{VALUE}}', '{{WRAPPER}} .king-addons-horizontal-timeline .swiper-slide:hover .king-addons-story-info' => 'opacity: 1; transform: translateY(0%);' ], 'condition' => [ 'timeline_layout' => ['horizontal'] ] ] ); $this->add_control( 'show_title', [ 'label' => esc_html__('Show Title', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'return_value' => 'yes', 'default' => 'yes', 'label_block' => false, 'render_type' => 'template', 'separator' => 'before' ] ); $this->add_control( 'title_overlay', [ 'label' => esc_html__('Title Over Image', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'return_value' => 'yes', 'default' => 'no', 'label_block' => false, 'render_type' => 'template', 'condition' => [ 'show_overlay' => 'yes', 'content_layout' => 'image-top', 'show_title' => 'yes' ] ] ); $this->add_control( 'show_date', [ 'label' => esc_html__('Show Date', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'return_value' => 'yes', 'default' => 'yes', 'label_block' => false, 'render_type' => 'template', 'separator' => 'before', 'condition' => [ 'timeline_content' => 'dynamic' ] ] ); $this->add_control( 'date_overlay', [ 'label' => esc_html__('Date Over Image', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'return_value' => 'yes', 'default' => 'no', 'label_block' => false, 'condition' => [ 'show_overlay' => 'yes', 'content_layout' => 'image-top', 'timeline_content' => 'dynamic', 'show_date' => 'yes' ] ] ); $this->add_control( 'show_description', [ 'label' => esc_html__('Show Description', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'return_value' => 'yes', 'default' => 'yes', 'label_block' => false, 'render_type' => 'template', 'separator' => 'before', 'condition' => [ ] ] ); $this->add_control( 'description_overlay', [ 'label' => esc_html__('Description Over Image', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'return_value' => 'yes', 'default' => 'no', 'label_block' => false, 'condition' => [ 'show_overlay' => 'yes', 'content_layout' => 'image-top', 'show_description' => 'yes' ] ] ); $this->add_control( 'excerpt_count', [ 'label' => esc_html__('Excerpt Count', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'min' => 0, 'max' => 200, 'render_type' => 'template', 'frontend_available' => true, 'default' => 10, 'condition' => [ 'timeline_content' => 'dynamic', 'show_description' => 'yes' ] ] ); $this->add_control( 'show_readmore', [ 'label' => esc_html__('Show Read More', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'return_value' => 'yes', 'default' => 'yes', 'label_block' => false, 'render_type' => 'template', 'separator' => 'before', 'condition' => [ 'timeline_content' => ['dynamic'] ] ] ); $this->add_control( 'readmore_overlay', [ 'label' => esc_html__('Read More Over Image', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'return_value' => 'yes', 'default' => 'no', 'label_block' => false, 'render_type' => 'template', 'condition' => [ 'show_overlay' => 'yes', 'show_readmore' => 'yes', 'content_layout' => 'image-top', 'timeline_content' => ['dynamic'] ] ] ); $this->add_responsive_control( 'readmore_content_alignment_left', [ 'label' => esc_html__('Align', 'king-addons'), 'type' => Controls_Manager::CHOOSE, 'label_block' => false, 'default' => 'center', 'options' => [ 'left' => [ 'title' => esc_html__('Left', 'king-addons'), 'icon' => 'eicon-text-align-left', ], 'center' => [ 'title' => esc_html__('Center', 'king-addons'), 'icon' => 'eicon-text-align-center', ], 'right' => [ 'title' => esc_html__('Right', 'king-addons'), 'icon' => 'eicon-text-align-right', ], ], 'selectors' => [ '{{WRAPPER}} .king-addons-left-aligned .king-addons-read-more-wrap' => 'text-align: {{VALUE}};', '{{WRAPPER}} .king-addons-left-aligned .king-addons-read-more-button' => 'text-align: center;', '{{WRAPPER}} .swiper-wrapper .king-addons-read-more-wrap' => 'text-align: {{VALUE}};', '{{WRAPPER}} .swiper-wrapper .king-addons-read-more-button' => 'text-align: center;', ], 'condition' => [ 'show_readmore' => 'yes', 'timeline_content' => ['dynamic'], 'timeline_layout!' => 'one-sided', ] ] ); $this->add_responsive_control( 'readmore_content_alignment', [ 'label' => esc_html__('Align (Right)', 'king-addons'), 'type' => Controls_Manager::CHOOSE, 'label_block' => false, 'default' => 'center', 'options' => [ 'left' => [ 'title' => esc_html__('Left', 'king-addons'), 'icon' => 'eicon-text-align-left', ], 'center' => [ 'title' => esc_html__('Center', 'king-addons'), 'icon' => 'eicon-text-align-center', ], 'right' => [ 'title' => esc_html__('Right', 'king-addons'), 'icon' => 'eicon-text-align-right', ], ], 'selectors' => [ '{{WRAPPER}} .king-addons-right-aligned .king-addons-read-more-wrap' => 'text-align: {{VALUE}};', '{{WRAPPER}} .king-addons-right-aligned .king-addons-read-more-button' => 'text-align: center;', ], 'condition' => [ 'show_readmore' => 'yes', 'timeline_content' => ['dynamic'], 'timeline_layout' => ['centered', 'one-sided'] ] ] ); $this->add_control( 'read_more_text', [ 'label' => esc_html__('Read More', 'king-addons'), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, ], 'default' => 'Read More', 'condition' => [ 'show_readmore' => 'yes', 'timeline_content' => 'dynamic' ] ] ); $this->end_controls_section(); $this->start_controls_section( 'overlay_section', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Overlay', 'king-addons'), 'tab' => Controls_Manager::TAB_CONTENT, 'condition' => [ 'content_layout' => 'image-top', 'show_overlay' => 'yes' ] ] ); $this->add_control( 'overlay_width', [ 'label' => esc_html__('Width', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['%', 'px'], 'default' => [ 'unit' => '%', 'size' => 100, ], 'range' => [ '%' => [ 'min' => 0, 'max' => 100, ], 'px' => [ 'min' => 0, 'max' => 500, ], ], 'selectors' => [ '{{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);', ], ] ); $this->add_responsive_control( 'overlay_height', [ 'label' => esc_html__('Height', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['%', 'px'], 'default' => [ 'unit' => '%', 'size' => 100, ], 'range' => [ '%' => [ 'min' => 0, 'max' => 100, ], 'px' => [ 'min' => 0, 'max' => 500, ], ], 'selectors' => [ '{{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);', ], 'separator' => 'after', ] ); $this->add_responsive_control( 'overlay_content_alignment_vertical', [ 'label' => esc_html__('Content Vertical Align', 'king-addons'), 'type' => Controls_Manager::CHOOSE, 'label_block' => false, 'default' => 'center', 'options' => [ 'flex-start' => [ 'title' => esc_html__('Start', 'king-addons'), 'icon' => 'eicon-v-align-top', ], 'center' => [ 'title' => esc_html__('Center', 'king-addons'), 'icon' => 'eicon-v-align-middle', ], 'flex-end' => [ 'title' => esc_html__('End', 'king-addons'), 'icon' => 'eicon-v-align-bottom', ], ], 'selectors' => [ '{{WRAPPER}} .king-addons-timeline-story-overlay' => 'justify-content: {{VALUE}};', ], 'condition' => [ 'show_overlay' => 'yes', 'content_layout' => 'image-top' ] ] ); $this->add_responsive_control( 'overlay_content_alignment_horizontal', [ 'label' => esc_html__('Content Horizontal Align', 'king-addons'), 'type' => Controls_Manager::CHOOSE, 'label_block' => false, 'default' => 'center', 'options' => [ 'flex-start' => [ 'title' => esc_html__('Start', 'king-addons'), 'icon' => 'eicon-h-align-left', ], 'center' => [ 'title' => esc_html__('Center', 'king-addons'), 'icon' => 'eicon-h-align-center', ], 'flex-end' => [ 'title' => esc_html__('End', 'king-addons'), 'icon' => 'eicon-h-align-right', ], ], 'selectors' => [ '{{WRAPPER}} .king-addons-timeline-story-overlay p' => 'display: flex; justify-content: {{VALUE}};', '{{WRAPPER}} .king-addons-timeline-story-overlay div' => 'display: flex; justify-content: {{VALUE}};', ], 'condition' => [ 'show_overlay' => 'yes', 'content_layout' => 'image-top' ] ] ); $this->add_control( 'overlay_animation', [ 'label' => esc_html__('Select Animation', 'king-addons'), 'type' => 'king-addons-animations', 'default' => 'none', ] ); 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']); $this->add_control( 'overlay_animation_duration', [ 'label' => esc_html__('Animation Duration', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'default' => 0.3, 'min' => 0, 'max' => 5, 'step' => 0.1, 'selectors' => [ '{{WRAPPER}} .king-addons-timeline-story-overlay' => 'transition-duration: {{VALUE}}s;' ], 'condition' => [ 'overlay_animation!' => 'none', ], ] ); $this->add_control( 'overlay_animation_delay', [ 'label' => esc_html__('Animation Delay', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'default' => 0, 'min' => 0, 'max' => 5, 'step' => 0.1, 'selectors' => [ '{{WRAPPER}} .king-addons-animation-wrap:hover .king-addons-timeline-story-overlay' => 'transition-delay: {{VALUE}}s;' ], 'condition' => [ 'overlay_animation!' => 'none', ], ] ); $this->add_control( 'overlay_animation_size', [ 'label' => esc_html__('Animation Size', 'king-addons'), 'type' => Controls_Manager::SELECT, 'options' => [ 'small' => esc_html__('Small', 'king-addons'), 'medium' => esc_html__('Medium', 'king-addons'), 'large' => esc_html__('Large', 'king-addons'), ], 'default' => 'large', 'condition' => [ 'overlay_animation!' => 'none', ], ] ); $this->add_control( 'overlay_animation_timing', [ 'label' => esc_html__('Animation Timing', 'king-addons'), 'type' => Controls_Manager::SELECT, 'options' => Core::getAnimationTimings(), 'default' => 'ease-default', 'condition' => [ 'overlay_animation!' => 'none', ], ] ); $this->add_control( 'overlay_animation_tr', [ 'label' => esc_html__('Animation Transparency', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'default' => 'yes', 'return_value' => 'yes', 'condition' => [ 'overlay_animation!' => 'none', ], ] ); $this->end_controls_section(); $this->start_controls_section( 'pagination_section', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Pagination', 'king-addons'), 'tab' => Controls_Manager::TAB_CONTENT, 'condition' => [ 'timeline_content' => 'dynamic', 'timeline_layout' => ['centered', 'one-sided', 'one-sided-left'], 'show_pagination' => 'yes' ] ] ); $this->add_control( 'pagination_type', [ 'label' => esc_html__('Pagination Type', 'king-addons'), 'type' => Controls_Manager::SELECT, 'render_type' => 'template', 'default' => 'load-more', 'options' => [ 'load-more' => esc_html__('Load More'), 'infinite-scroll' => esc_html__('Infinite Scroll') ], 'condition' => [ 'show_pagination' => 'yes', ] ] ); $this->add_control( 'pagination_load_more_text', [ 'label' => esc_html__('Load More Text', 'king-addons'), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, ], 'default' => esc_html__('Load More', 'king-addons'), 'condition' => [ 'pagination_type' => 'load-more', ] ] ); $this->add_control( 'pagination_finish_text', [ 'label' => esc_html__('Finish Text', 'king-addons'), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, ], 'default' => 'End of Content.', 'condition' => [ 'pagination_type' => ['load-more', 'infinite-scroll'], ] ] ); $this->add_control( 'pagination_animation', [ 'label' => esc_html__('Select Animation', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'loader-1', 'options' => [ 'none' => esc_html__('None', 'king-addons'), 'loader-1' => esc_html__('Loader 1', 'king-addons'), 'loader-2' => esc_html__('Loader 2', 'king-addons'), 'loader-3' => esc_html__('Loader 3', 'king-addons'), 'loader-4' => esc_html__('Loader 4', 'king-addons'), 'loader-5' => esc_html__('Loader 5', 'king-addons'), 'loader-6' => esc_html__('Loader 6', 'king-addons'), ], 'condition' => [ 'pagination_type' => ['load-more', 'infinite-scroll'], 'timeline_layout' => ['centered', 'one-sided', 'one-sided-left'] ], ] ); $this->add_responsive_control( 'pagination_alignment', [ 'label' => esc_html__('Align', 'king-addons'), 'type' => Controls_Manager::CHOOSE, 'label_block' => false, 'default' => 'center', 'options' => [ 'left' => [ 'title' => esc_html__('Left', 'king-addons'), 'icon' => 'eicon-text-align-left', ], 'center' => [ 'title' => esc_html__('Center', 'king-addons'), 'icon' => 'eicon-text-align-center', ], 'right' => [ 'title' => esc_html__('Right', 'king-addons'), 'icon' => 'eicon-text-align-right', ], ], 'selectors' => [ '{{WRAPPER}} .king-addons-grid-pagination' => 'text-align: {{VALUE}};', '{{WRAPPER}} .king-addons-pagination-loading' => 'text-align: {{VALUE}};', ], 'condition' => [ 'timeline_content' => ['dynamic'], 'timeline_layout' => ['centered', 'one-sided'] ] ] ); $this->end_controls_section(); Core::renderProFeaturesSection($this, '', Controls_Manager::RAW_HTML, 'posts-timeline', [ 'Add Unlimited Custom Timeline Items', 'Unlimited Posts Per Page Option', 'Custom Post Types Support', 'Unlimited Slides to Show Option', 'Carousel Autoplay and Autoplay Speed', 'Pause on Hover', 'Advanced Pagination - Load More Button or Infinite Scroll Options', 'Advanced Entrance Animation Options' ]); $this->start_controls_section( 'content_styles_section', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Timeline Items', 'king-addons'), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'story_bgcolor', [ 'label' => esc_html__('Background Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper .king-addons-data-wrap' => 'background-color: {{VALUE}}', '{{WRAPPER}} .king-addons-horizontal .king-addons-story-info' => 'background-color: {{VALUE}}', '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-story-info' => 'background-color: {{VALUE}}', ], 'default' => '#FFF', ] ); $this->add_control( 'story_border_color', [ 'label' => esc_html__('Border Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .king-addons-story-info' => 'border-color: {{VALUE}} !important;', '{{WRAPPER}} .king-addons-story-info-vertical' => 'border-color: {{VALUE}} !important;', ], 'condition' => [ 'timeline_layout!' => 'centered' ], 'default' => '#5B03FF', ] ); $this->add_control( 'story_border_color_left', [ 'label' => esc_html__('Border Color (Left Aligned)', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .king-addons-left-aligned .king-addons-story-info-vertical' => 'border-color: {{VALUE}};', ], 'condition' => [ 'timeline_layout' => 'centered', ], 'default' => '#5B03FF', ] ); $this->add_control( 'story_border_color_right', [ 'label' => esc_html__('Border Color (Right Aligned)', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .king-addons-right-aligned .king-addons-story-info-vertical' => 'border-color: {{VALUE}} !important;', ], 'condition' => [ 'timeline_layout' => 'centered', ], 'default' => '#5B03FF', ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'timeline_item_shadow', 'selector' => '{{WRAPPER}} .king-addons-story-info', 'fields_options' => [ 'box_shadow_type' => [ 'default' => 'yes' ], 'box_shadow' => [ 'default' => [ 'horizontal' => 0, 'vertical' => 0, 'blur' => 20, 'spread' => 1, 'color' => 'rgba(0,0,0,0.1)' ] ] ], 'condition' => [ 'timeline_layout' => ['horizontal', 'horizontal-bottom'] ] ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'timeline_item_shadow_vertical', 'selector' => '{{WRAPPER}} .king-addons-story-info-vertical', 'fields_options' => [ 'box_shadow_type' => [ 'default' => 'yes' ], 'box_shadow' => [ 'default' => [ 'horizontal' => 0, 'vertical' => 0, 'blur' => 20, 'spread' => 1, 'color' => 'rgba(0,0,0,0.1)' ] ] ], 'condition' => [ 'timeline_layout' => ['centered', 'one-sided', 'one-sided-left'] ] ] ); $this->add_responsive_control( 'item_distance_from_line', [ 'label' => esc_html__('Distance From Line', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, ], ], 'devices' => ['desktop', 'tablet', 'mobile'], 'default' => [ 'size' => 40, 'unit' => 'px', ], 'tablet_default' => [ 'size' => 40, 'unit' => 'px', ], 'mobile_default' => [ 'size' => 15, 'unit' => 'px', ], 'selectors' => [ '{{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);', '{{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);', '{{WRAPPER}} .king-addons-centered .king-addons-left-aligned .king-addons-timeline-entry-inner .king-addons-data-wrap' => 'margin-right: {{SIZE}}px;', '{{WRAPPER}} .king-addons-centered .king-addons-right-aligned .king-addons-timeline-entry-inner .king-addons-data-wrap' => 'margin-left: {{SIZE}}px;', '{{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);', '{{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);', '{{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);', '{{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);', ], 'condition' => [ 'timeline_layout' => ['centered', 'one-sided', 'one-sided-left'] ], 'render_type' => 'template', 'separator' => 'before' ] ); $this->add_responsive_control( 'item_distance_vertical', [ 'label' => esc_html__('Vertical Distance', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 0, 'max' => 200, ], ], 'default' => [ 'unit' => 'px', 'size' => 40, ], 'selectors' => [ '{{WRAPPER}} .king-addons-timeline-centered .king-addons-year-wrap' => 'margin-bottom: {{SIZE}}px;', '{{WRAPPER}} .king-addons-timeline-centered .king-addons-timeline-entry' => 'margin-bottom: {{SIZE}}px;', ], 'condition' => [ 'timeline_layout' => ['centered', 'one-sided', 'one-sided-left'] ], 'render_type' => 'template', ] ); $this->add_responsive_control( 'timeline_item_position', [ 'type' => Controls_Manager::SLIDER, 'label' => esc_html__('Item Bottom Distance', 'king-addons'), 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 0, 'max' => 150, ] ], 'default' => [ 'unit' => 'px', 'size' => 50, ], 'selectors' => [ '{{WRAPPER}} .king-addons-story-info' => 'margin-bottom: calc({{SIZE}}{{UNIT}} + {{swiper_pagination_progressbar_bottom.SIZE}}{{swiper_pagination_progressbar_bottom.UNIT}}) !important;', ], 'condition' => [ 'timeline_layout' => ['horizontal'], 'equal_height_slides!' => 'auto-height', ], 'separator' => 'before' ] ); $this->add_responsive_control( 'timeline_item_position_equal_heights', [ 'type' => Controls_Manager::SLIDER, 'label' => esc_html__('Item Bottom Distance', 'king-addons'), 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 0, 'max' => 150, ] ], 'default' => [ 'unit' => 'px', 'size' => 50, ], 'selectors' => [ '{{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;' ], 'condition' => [ 'timeline_layout' => 'horizontal', 'equal_height_slides' => 'auto-height', ], 'separator' => 'before' ] ); $this->add_responsive_control( 'story_info_margin_top', [ 'label' => esc_html__('Item Top Distance', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'default' => [ 'unit' => 'px', 'size' => 50, ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 150, ], ], 'selectors' => [ '{{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;', '{{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' ], 'separator' => 'before', 'condition' => [ 'timeline_layout' => ['horizontal-bottom'], ], ] ); $this->add_responsive_control( 'story_padding', [ 'label' => esc_html__('Item Padding', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px'], 'default' => [ 'top' => 20, 'right' => 20, 'bottom' => 20, 'left' => 20, ], 'selectors' => [ '{{WRAPPER}} .king-addons-story-info' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', '{{WRAPPER}} .king-addons-data-wrap' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;', ], 'condition' => [ ], ] ); $this->add_responsive_control( 'story_container_padding', [ 'label' => esc_html__('Container Padding', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'description' => esc_html__('Apply this option to fix Box Shadow issue.', 'king-addons'), 'size_units' => ['px'], 'devices' => ['desktop', 'tablet', 'mobile'], 'default' => [ 'top' => 10, 'right' => 10, 'left' => 10, 'bottom' => 10, 'unit' => 'px' ], 'tablet_default' => [ 'top' => 10, 'right' => 10, 'left' => 10, 'bottom' => 10, 'unit' => 'px', ], 'mobile_default' => [ 'top' => 10, 'right' => 10, 'left' => 10, 'bottom' => 10, 'unit' => 'px', ], 'selectors' => [ '{{WRAPPER}} .king-addons-vertical' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', '{{WRAPPER}} .king-addons-wrapper .swiper-slide' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_control( 'timeline_item_border_type', [ 'label' => esc_html__('Border Type', 'king-addons'), 'type' => Controls_Manager::SELECT, 'options' => [ 'none' => esc_html__('None', 'king-addons'), 'solid' => esc_html__('Solid', 'king-addons'), 'double' => esc_html__('Double', 'king-addons'), 'dotted' => esc_html__('Dotted', 'king-addons'), 'dashed' => esc_html__('Dashed', 'king-addons'), 'groove' => esc_html__('Groove', 'king-addons'), ], 'default' => 'none', 'selectors' => [ '{{WRAPPER}} .king-addons-story-info' => 'border-style: {{VALUE}} !important;', '{{WRAPPER}} .king-addons-story-info-vertical' => 'border-style: {{VALUE}} !important;', ], 'separator' => 'before', ] ); $this->add_control( 'timeline_item_border_width', [ 'label' => esc_html__('Border Width', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px'], 'default' => [ 'top' => 1, 'right' => 1, 'bottom' => 1, 'left' => 1, ], 'selectors' => [ '{{WRAPPER}} .king-addons-story-info' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;', '{{WRAPPER}} .king-addons-story-info-vertical' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;', '{{WRAPPER}} .king-addons-horizontal-timeline .king-addons-story-info:before' => 'top: calc( 100% + {{BOTTOM}}{{UNIT}} ) !important;', '{{WRAPPER}} .king-addons-horizontal-bottom-timeline .king-addons-story-info:before' => 'bottom: calc( 100% + {{TOP}}{{UNIT}} ) !important;', '{{WRAPPER}} .king-addons-right-aligned .king-addons-story-info-vertical.king-addons-data-wrap:after' => 'right: calc( 100% + {{LEFT}}{{UNIT}} ) !important;', '{{WRAPPER}} .king-addons-left-aligned .king-addons-story-info-vertical.king-addons-data-wrap:after' => 'left: calc( 100% + {{LEFT}}{{UNIT}} ) !important;' ], 'condition' => [ 'timeline_layout!' => 'centered', 'timeline_item_border_type!' => 'none' ], ] ); $this->add_control( 'timeline_item_border_width_left', [ 'label' => esc_html__('Border Width (Left Aligned)', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px'], 'default' => [ 'top' => 1, 'right' => 1, 'bottom' => 1, 'left' => 1, ], 'selectors' => [ '{{WRAPPER}} .king-addons-story-info' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;', '{{WRAPPER}} .king-addons-story-info-vertical' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;', '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;', '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;', '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', ], 'condition' => [ 'timeline_layout' => 'centered', 'timeline_item_border_type!' => 'none' ] ] ); $this->add_control( 'timeline_item_border_width_right', [ 'label' => esc_html__('Border Width (Right Aligned)', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px'], 'default' => [ 'top' => 1, 'right' => 1, 'bottom' => 1, 'left' => 1, ], 'selectors' => [ '{{WRAPPER}} .king-addons-right-aligned .king-addons-story-info-vertical' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;', 'body[data-elementor-device-mode=desktop] {{WRAPPER}} .king-addons-right-aligned .king-addons-data-wrap:after' => 'right: calc( 100% + {{LEFT}}{{UNIT}} ) !important;', 'body[data-elementor-device-mode=tablet] {{WRAPPER}} .king-addons-right-aligned .king-addons-data-wrap:after' => 'right: calc( 100% + {{LEFT}}{{UNIT}} ) !important;', 'body[data-elementor-device-mode=mobile] {{WRAPPER}} .king-addons-right-aligned .king-addons-data-wrap:after' => 'right: calc( 100% + {{LEFT}}{{UNIT}} ) !important;', ], 'condition' => [ 'timeline_layout' => 'centered', 'timeline_item_border_type!' => 'none' ] ] ); $this->add_control( 'story_border_radius', [ 'label' => esc_html__('Border Radius', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px'], 'default' => [ 'top' => 5, 'right' => 5, 'bottom' => 5, 'left' => 5, ], 'selectors' => [ '{{WRAPPER}} .king-addons-story-info' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;', '{{WRAPPER}} .king-addons-story-info-vertical' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;', ], ] ); $this->end_controls_section(); $this->start_controls_section( 'media_style_section', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Media', 'king-addons'), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_responsive_control( 'width', [ 'label' => esc_html__('Image Width', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 100, 'unit' => '%', ], 'size_units' => ['%', 'px'], 'range' => [ '%' => [ 'min' => 10, 'max' => 100, ], 'px' => [ 'min' => 10, 'max' => 200, ], ], 'selectors' => [ '{{WRAPPER}} .king-addons-timeline-media' => 'width: {{SIZE}}{{UNIT}};', ], 'separator' => 'after', ] ); $this->add_control( 'media_item_border_color', [ 'label' => esc_html__('Border Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#E8E8E8', 'selectors' => [ '{{WRAPPER}} .king-addons-timeline-media' => 'border-color: {{VALUE}}', ], ] ); $this->add_control( 'media_item_border_type', [ 'label' => esc_html__('Border Type', 'king-addons'), 'type' => Controls_Manager::SELECT, 'options' => [ 'none' => esc_html__('None', 'king-addons'), 'solid' => esc_html__('Solid', 'king-addons'), 'double' => esc_html__('Double', 'king-addons'), 'dotted' => esc_html__('Dotted', 'king-addons'), 'dashed' => esc_html__('Dashed', 'king-addons'), 'groove' => esc_html__('Groove', 'king-addons'), ], 'default' => 'none', 'selectors' => [ '{{WRAPPER}} .king-addons-timeline-media' => 'border-style: {{VALUE}};', ], ] ); $this->add_responsive_control( 'media_item_border_width', [ 'label' => esc_html__('Border Width', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px'], 'default' => [ 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0, ], 'selectors' => [ '{{WRAPPER}} .king-addons-timeline-media' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], 'condition' => [ 'media_item_border_type!' => 'none' ] ] ); $this->add_control( 'media_item_radius', [ 'label' => esc_html__('Border Radius', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%'], 'default' => [ 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0, ], 'selectors' => [ '{{WRAPPER}} .king-addons-timeline-media' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'media_item_padding', [ 'label' => esc_html__('Padding', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px'], 'default' => [ 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0, ], 'selectors' => [ '{{WRAPPER}} .king-addons-timeline-media' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], 'separator' => 'before' ] ); $this->end_controls_section(); $this->start_controls_section( 'content_style_section', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Content', 'king-addons'), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ ], ] ); $this->add_control( 'item_content_border_color', [ 'label' => esc_html__('Border Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#E8E8E8', 'selectors' => [ '{{WRAPPER}} .king-addons-timeline-content-wrapper' => 'border-color: {{VALUE}}', ], ] ); $this->add_control( 'item_content_border_type', [ 'label' => esc_html__('Border Type', 'king-addons'), 'type' => Controls_Manager::SELECT, 'options' => [ 'none' => esc_html__('None', 'king-addons'), 'solid' => esc_html__('Solid', 'king-addons'), 'double' => esc_html__('Double', 'king-addons'), 'dotted' => esc_html__('Dotted', 'king-addons'), 'dashed' => esc_html__('Dashed', 'king-addons'), 'groove' => esc_html__('Groove', 'king-addons'), ], 'default' => 'none', 'selectors' => [ '{{WRAPPER}} .king-addons-timeline-content-wrapper' => 'border-style: {{VALUE}};', ], 'separator' => 'before', ] ); $this->add_responsive_control( 'item_content_border_width', [ 'label' => esc_html__('Border Width', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px'], 'default' => [ 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0, ], 'selectors' => [ '{{WRAPPER}} .king-addons-timeline-content-wrapper' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], 'condition' => [ 'item_content_border_type!' => 'none' ], 'separator' => 'before' ] ); $this->add_control( 'item_content_border_radius', [ 'label' => esc_html__('Border Radius', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%'], 'default' => [ 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0, ], 'selectors' => [ '{{WRAPPER}} .king-addons-timeline-content-wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden', ], ] ); $this->add_responsive_control( 'content_item_padding', [ 'label' => esc_html__('Padding', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px'], 'default' => [ 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0, ], 'selectors' => [ '{{WRAPPER}} .king-addons-timeline-content-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], 'separator' => 'before', ] ); $this->end_controls_section(); $this->start_controls_section( 'overlay_style_section', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Overlay', 'king-addons'), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'content_layout' => 'image-top', 'show_overlay' => 'yes' ], ] ); $this->add_control( 'overlay_bgcolor', [ 'label' => esc_html__('Background Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper .king-addons-timeline-story-overlay' => 'background-color: {{VALUE}}', ], 'default' => '#0000005E', ] ); $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'overlay_background', 'label' => esc_html__('Background', 'king-addons'), 'types' => ['classic', 'gradient', 'video'], 'selector' => '{{WRAPPER}} .king-addons-timeline-story-overlay', ] ); $this->add_control( 'overlay_border_radius', [ 'label' => esc_html__('Border Radius', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px'], 'default' => [ 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0, ], 'selectors' => [ '{{WRAPPER}} .king-addons-timeline-story-overlay' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;', ], ] ); $this->add_responsive_control( 'timeline_overlay_padding', [ 'label' => esc_html__('Overlay Padding', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px'], 'separator' => 'before', 'default' => [ 'top' => 25, 'right' => 25, 'bottom' => 25, 'left' => 25, ], 'selectors' => [ '{{WRAPPER}} .king-addons-timeline-story-overlay' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], 'condition' => [ 'show_overlay' => 'yes', 'content_layout' => 'image-top', ], ] ); $this->end_controls_section(); $this->start_controls_section( 'title_styles_section', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Title', 'king-addons'), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'story_title_color', [ 'label' => esc_html__('Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .king-addons-title' => 'color: {{VALUE}}', ], 'default' => '#444444', ] ); $this->add_control( 'story_title_bg_color', [ 'label' => esc_html__('Background Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper .king-addons-title-wrap' => 'background-color: {{VALUE}} !important', ], 'default' => '#FFFFFF00', ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'title_typography', 'label' => esc_html__('Typography', 'king-addons'), 'selector' => '{{WRAPPER}} .king-addons-wrapper .king-addons-title', ] ); $this->add_responsive_control( 'title_padding', [ 'label' => esc_html__('Padding', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px'], 'default' => [ 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0, ], 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper .king-addons-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;', ], 'separator' => 'before', ] ); $this->add_responsive_control( 'title_margin', [ 'label' => esc_html__('Margin', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px'], 'default' => [ 'top' => 10, 'right' => 0, 'bottom' => 0, 'left' => 0, ], 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper .king-addons-title-wrap' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;', ], 'separator' => 'before', ] ); $this->end_controls_section(); $this->start_controls_section( 'section_style_date', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Date', 'king-addons'), 'tab' => Controls_Manager::TAB_STYLE, 'show_label' => false, 'condition' => [ 'timeline_content' => 'dynamic' ] ] ); $this->add_control( 'date_color', [ 'label' => esc_html__('Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#9C9C9C', 'selectors' => [ '{{WRAPPER}} .king-addons-inner-date-label' => 'color: {{VALUE}}', ], ] ); $this->add_control( 'date_border_color', [ 'label' => esc_html__('Border Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#E8E8E8', 'selectors' => [ '{{WRAPPER}} .king-addons-inner-date-label' => 'border-color: {{VALUE}}', ] ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'date_typography', 'label' => esc_html__('Typography', 'king-addons'), 'selector' => '{{WRAPPER}} .king-addons-inner-date-label', 'fields_options' => [ 'typography' => [ 'default' => 'custom', ], 'font_weight' => [ 'default' => '300', ], 'font_family' => [ 'default' => 'Roboto', ], 'font_size' => [ 'default' => [ 'size' => '15', 'unit' => 'px', ] ] ] ] ); $this->add_control( 'date_border_type', [ 'label' => esc_html__('Border Type', 'king-addons'), 'type' => Controls_Manager::SELECT, 'options' => [ 'none' => esc_html__('None', 'king-addons'), 'solid' => esc_html__('Solid', 'king-addons'), 'double' => esc_html__('Double', 'king-addons'), 'dotted' => esc_html__('Dotted', 'king-addons'), 'dashed' => esc_html__('Dashed', 'king-addons'), 'groove' => esc_html__('Groove', 'king-addons'), ], 'default' => 'none', 'selectors' => [ '{{WRAPPER}} .king-addons-inner-date-label' => 'border-style: {{VALUE}};', ], 'separator' => 'before', ] ); $this->add_control( 'date_border_width', [ 'label' => esc_html__('Border Width', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px'], 'default' => [ 'top' => 1, 'right' => 1, 'bottom' => 1, 'left' => 1, ], 'selectors' => [ '{{WRAPPER}} .king-addons-inner-date-label' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], 'condition' => [ 'date_border_type!' => 'none', ], ] ); $this->add_responsive_control( 'date_margin', [ 'label' => esc_html__('Margin', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px'], 'default' => [ 'top' => 5, 'right' => 0, 'bottom' => 0, 'left' => 0, ], 'selectors' => [ '{{WRAPPER}} .king-addons-inner-date-label' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->end_controls_section(); $this->start_controls_section( 'description_styles_section', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Description', 'king-addons'), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'description_color', [ 'label' => esc_html__('Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper .king-addons-description' => 'color: {{VALUE}}', '{{WRAPPER}} .king-addons-wrapper .king-addons-description p' => 'color: {{VALUE}}' ], 'default' => '#808080', ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'description_typography_description', 'label' => esc_html__('Typography', 'king-addons'), 'selector' => '{{WRAPPER}} .king-addons-wrapper .king-addons-description', ] ); $this->add_control( 'timeline_list_types', [ 'label' => esc_html__('List Style', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'none', 'label_block' => false, 'description' => esc_html__('Apply this option for WYSIWYG lists', 'king-addons'), 'options' => [ 'none' => esc_html__('None', 'king-addons'), 'disc' => esc_html__('Disc', 'king-addons'), 'decimal' => esc_html__('Number', 'king-addons') ], 'prefix_class' => 'king-addons-list-style-', ] ); $this->add_responsive_control( 'description_margin', [ 'label' => esc_html__('Margin', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px'], 'default' => [ 'top' => 5, 'right' => 0, 'bottom' => 5, 'left' => 0, ], 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper .king-addons-description' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;', ], 'separator' => 'before', ] ); $this->end_controls_section(); $this->start_controls_section( 'readmore_styles_section', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Read More', 'king-addons'), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'timeline_content' => ['dynamic'] ] ] ); $this->start_controls_tabs( 'readmore_style_tabs' ); $this->start_controls_tab( 'readmore_style_normal_tab', [ 'label' => esc_html__('Normal', 'king-addons'), ] ); $this->add_control( 'readmore_color', [ 'label' => esc_html__('Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper .king-addons-read-more-button' => 'color: {{VAlUE}}', ], 'default' => '#fff', ] ); $this->add_control( 'readmore_bg_color', [ 'label' => esc_html__('Background Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper .king-addons-read-more-button' => 'background-color: {{VAlUE}}', ], 'default' => '#5B03FF', ] ); $this->add_control( 'readmore_border_color', [ 'label' => esc_html__('Border Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#E8E8E8', 'selectors' => [ '{{WRAPPER}} .king-addons-read-more-button' => 'border-color: {{VALUE}}', ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'read_more_box_shadow', 'selector' => '{{WRAPPER}} .king-addons-read-more-button', ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'readmore_typography', 'label' => esc_html__('Typography', 'king-addons'), 'selector' => '{{WRAPPER}} .king-addons-wrapper .king-addons-read-more-button', ] ); $this->add_control( 'read_more_transition_duration', [ 'label' => esc_html__('Transition Duration (seconds)', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'default' => 0.1, 'min' => 0, 'max' => 5, 'step' => 0.1, 'selectors' => [ '{{WRAPPER}} .king-addons-read-more-button' => 'transition-duration: {{VALUE}}s', ], 'separator' => 'before' ] ); $this->add_control( 'readmore_border_type', [ 'label' => esc_html__('Border Type', 'king-addons'), 'type' => Controls_Manager::SELECT, 'options' => [ 'none' => esc_html__('None', 'king-addons'), 'solid' => esc_html__('Solid', 'king-addons'), 'double' => esc_html__('Double', 'king-addons'), 'dotted' => esc_html__('Dotted', 'king-addons'), 'dashed' => esc_html__('Dashed', 'king-addons'), 'groove' => esc_html__('Groove', 'king-addons'), ], 'default' => 'none', 'selectors' => [ '{{WRAPPER}} .king-addons-read-more-button' => 'border-style: {{VALUE}};', ], 'separator' => 'before', ] ); $this->add_control( 'readmore_item_border_width', [ 'label' => esc_html__('Border Width', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px'], 'default' => [ 'top' => 1, 'right' => 1, 'bottom' => 1, 'left' => 1, ], 'selectors' => [ '{{WRAPPER}} .king-addons-read-more-button' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], 'condition' => [ 'readmore_border_type!' => 'none', ], 'render_type' => 'template' ] ); $this->add_responsive_control( 'readmore_padding', [ 'label' => esc_html__('Padding', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px'], 'default' => [ 'top' => 6, 'right' => 13, 'bottom' => 7, 'left' => 13, ], 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper .king-addons-read-more-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;', ], 'separator' => 'before', ] ); $this->add_responsive_control( 'readmore_margin', [ 'label' => esc_html__('Margin', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px'], 'default' => [ 'top' => 15, 'right' => 0, 'bottom' => 15, 'left' => 0, ], 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper .king-addons-read-more-wrap' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;', ], ] ); $this->add_control( 'readmore_border_radius', [ 'label' => esc_html__('Border Radius', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%'], 'default' => [ 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0, ], 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper .king-addons-read-more-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;', ], 'separator' => 'before', ] ); $this->end_controls_tab(); $this->start_controls_tab( 'style_hover_tab', [ 'label' => esc_html__('Hover', 'king-addons'), ] ); $this->add_control( 'readmore_color_hover', [ 'label' => esc_html__('Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper .king-addons-read-more-button:hover' => 'color: {{VAlUE}}', ], 'default' => '#ffffff', ] ); $this->add_control( 'readmore_bg_color_hover', [ 'label' => esc_html__('Background Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper .king-addons-read-more-button:hover' => 'background-color: {{VAlUE}}', ], 'default' => '#000000', ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); $this->start_controls_section( 'middle_line_styles_section', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Main Line', 'king-addons'), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'line_color', [ 'label' => esc_html__('Line Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper .king-addons-line::before' => 'background-color: {{VALUE}}', '{{WRAPPER}} .king-addons-wrapper .king-addons-middle-line' => 'background-color: {{VALUE}}', '{{WRAPPER}} .king-addons-wrapper .king-addons-timeline-centered .king-addons-year' => 'border-color: {{VALUE}}', '{{WRAPPER}} .king-addons-wrapper:before' => 'background-color: {{VALUE}}', '{{WRAPPER}} .king-addons-wrapper:after' => 'background-color: {{VALUE}}', '{{WRAPPER}} .king-addons-horizontal .king-addons-swiper-pagination.swiper-pagination-progressbar' => 'background-color: {{VALUE}}', '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-swiper-pagination.swiper-pagination-progressbar' => 'background-color: {{VALUE}}', '{{WRAPPER}} .king-addons-horizontal .king-addons-button-prev' => 'color: {{VALUE}}', '{{WRAPPER}} .king-addons-horizontal .king-addons-button-next' => 'color: {{VALUE}}', ], 'default' => '#D6D6D6', ] ); $this->add_control( 'swiper_progressbar_color', [ 'label' => esc_html__('Progress(Fill) Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .king-addons-horizontal .king-addons-swiper-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill' => 'background-color: {{VALUE}}', '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-swiper-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill' => 'background-color: {{VALUE}}', ], 'condition' => [ 'timeline_layout' => ['horizontal', 'horizontal-bottom'] ], 'default' => '#5B03FF', ] ); $this->add_control( 'timeline_fill_color', [ 'label' => esc_html__('Line Fill Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#5B03FF', 'selectors' => [ '{{WRAPPER}} .king-addons-timeline-fill' => 'background-color: {{VALUE}} !important;', '{{WRAPPER}} .king-addons-change-border-color' => 'border-color: {{VALUE}} !important;', '{{WRAPPER}} .king-addons-vertical:before' => 'background-color: {{VALUE}} !important;', '{{WRAPPER}} .king-addons-vertical:after' => 'background-color: {{VALUE}} !important;', ], 'condition' => [ 'timeline_layout!' => ['horizontal', 'horizontal-bottom'] ], ] ); $this->add_control( 'middle_line_width', [ 'label' => esc_html__('Line Width', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 1, 'max' => 50, ] ], 'default' => [ 'unit' => 'px', 'size' => 4, ], 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper .king-addons-middle-line' => 'width: {{SIZE}}px; transform: translate(-50%) !important', '{{WRAPPER}} .king-addons-wrapper .king-addons-timeline-fill' => 'width: {{SIZE}}px; transform: translate(-50%) !important;', '{{WRAPPER}} .king-addons-wrapper .king-addons-one-sided-timeline-left .king-addons-middle-line' => 'width: {{SIZE}}px; transform: translate(50%) !important;', '{{WRAPPER}} .king-addons-wrapper .king-addons-one-sided-timeline-left .king-addons-timeline-fill' => 'width: {{SIZE}}px; transform: translate(50%) !important;', '{{WRAPPER}} .king-addons-wrapper .king-addons-one-sided-timeline .king-addons-middle-line' => 'width: {{SIZE}}px; transform: translate(-50%) !important;', '{{WRAPPER}} .king-addons-wrapper .king-addons-one-sided-timeline .king-addons-timeline-fill' => 'width: {{SIZE}}px; transform: translate(-50%) !important;', ], 'condition' => [ 'timeline_layout' => ['centered', 'one-sided', 'one-sided-left'] ], 'separator' => 'before', ] ); $this->add_responsive_control( 'swiper_pagination_progressbar_height', [ 'type' => Controls_Manager::NUMBER, 'label' => esc_html__('Height', 'king-addons'), 'default' => 0.7, 'step' => 0.1, 'selectors' => [ '{{WRAPPER}} .king-addons-swiper-pagination.swiper-pagination-progressbar' => 'transform: scaleY({{SIZE}}) translateX(-50%);', ], 'separator' => 'before', 'condition' => [ 'timeline_layout' => ['horizontal-bottom', 'horizontal'] ], ] ); $this->add_responsive_control( 'swiper_pagination_progressbar_bottom', [ 'type' => Controls_Manager::SLIDER, 'label' => esc_html__('Bottom Distance', 'king-addons'), 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, ] ], 'default' => [ 'unit' => 'px', 'size' => 100, ], 'selectors' => [ '{{WRAPPER}} .king-addons-horizontal .king-addons-swiper-pagination.swiper-pagination-progressbar' => 'top: auto; bottom: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .king-addons-horizontal .king-addons-icon' => 'bottom: calc({{SIZE}}{{UNIT}} + 1px) !important;', '{{WRAPPER}} .king-addons-button-prev' => 'top: auto; bottom: calc({{SIZE}}{{UNIT}});', '{{WRAPPER}} .king-addons-button-next' => 'top: auto; bottom: calc({{SIZE}}{{UNIT}});', ], 'condition' => [ 'timeline_layout' => ['horizontal'] ], ] ); $this->add_responsive_control( 'swiper_pagination_progressbar_top', [ 'type' => Controls_Manager::SLIDER, 'label' => esc_html__('Top Distance', 'king-addons'), 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, ] ], 'default' => [ 'unit' => 'px', 'size' => 100, ], 'selectors' => [ '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-swiper-pagination.swiper-pagination-progressbar' => 'bottom: auto; top: {{SIZE}}{{UNIT}} !important', '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-icon' => 'position: absolute; top: calc({{SIZE}}{{UNIT}} + 1px) !important; left: 50%; transform: translate(-50%, -50%);', '{{WRAPPER}} .king-addons-button-prev' => 'bottom: auto; top: calc({{SIZE}}{{UNIT}} + 2px);', '{{WRAPPER}} .king-addons-button-next' => 'bottom: auto; top: calc({{SIZE}}{{UNIT}} + 2px);', ], 'condition' => [ 'timeline_layout' => ['horizontal-bottom'] ], ] ); $this->add_responsive_control( 'main_line_side_distance', [ 'type' => Controls_Manager::SLIDER, 'label' => esc_html__('Side Distance', 'king-addons'), 'description' => esc_html__('This option for Zig-Zag layout only works on mobile devices.', 'king-addons'), 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, ] ], 'devices' => ['desktop', 'tablet', 'mobile'], 'default' => [ 'size' => 100, 'unit' => 'px', ], 'tablet_default' => [ 'size' => 100, 'unit' => 'px', ], 'mobile_default' => [ 'size' => 50, 'unit' => 'px', ], 'selectors' => [ '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline .king-addons-year-label' => 'left: calc({{SIZE}}px/2);', '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline .king-addons-middle-line' => 'left: calc({{SIZE}}px/2);', '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline .king-addons-timeline-fill' => 'left: calc({{SIZE}}px/2);', '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline .king-addons-icon' => 'left: calc({{SIZE}}px/2);', '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline-left .king-addons-year-label' => 'right: calc({{SIZE}}px/2);', '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline-left .king-addons-middle-line' => 'right: calc({{SIZE}}px/2);', '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline-left .king-addons-timeline-fill' => 'right: calc({{SIZE}}px/2);', '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline-left .king-addons-icon' => 'right: calc({{SIZE}}px/2);', 'body[data-elementor-device-mode=mobile] {{WRAPPER}} .king-addons-both-sided-timeline .king-addons-year-label' => 'position: absolute; left: calc({{SIZE}}px/2);', 'body[data-elementor-device-mode=mobile] {{WRAPPER}} .king-addons-both-sided-timeline .king-addons-middle-line' => 'left: calc({{SIZE}}px/2);', 'body[data-elementor-device-mode=mobile] {{WRAPPER}} .king-addons-both-sided-timeline .king-addons-timeline-fill' => 'left: calc({{SIZE}}px/2);', '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;', ], 'render_type' => 'template', 'condition' => [ 'timeline_layout' => ['centered', 'one-sided', 'one-sided-left'] ], ] ); $this->end_controls_section(); $this->start_controls_section( 'year_label_section', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Main Line Label', 'king-addons'), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'timeline_content' => 'custom' ] ] ); $this->add_control( 'year_label_color', [ 'label' => esc_html__('Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper .king-addons-year' => 'color: {{VALUE}}', ], 'default' => '#222222', 'condition' => [ 'timeline_content' => ['custom'], ] ] ); $this->add_control( 'year_label_bgcolor', [ 'label' => esc_html__('Background Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper .king-addons-year' => 'background-color: {{VALUE}}', ], 'default' => '#fff', 'condition' => [ 'timeline_content' => ['custom'], ] ] ); $this->add_control( 'year_label_border_color', [ 'label' => esc_html__('Border Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper .king-addons-year.king-addons-year-label' => 'border-color: {{VALUE}}', ], 'default' => '#E0E0E0', 'condition' => [ 'timeline_content' => ['custom'], ] ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'year_typography', 'label' => esc_html__('Typography', 'king-addons'), 'selector' => '{{WRAPPER}} .king-addons-wrapper .king-addons-year', 'condition' => [ 'timeline_content' => ['custom'], ] ] ); $this->add_responsive_control( 'year_label_width', [ 'type' => Controls_Manager::SLIDER, 'label' => esc_html__('Width', 'king-addons'), 'size_units' => ['px'], 'default' => [ 'size' => 70, 'unit' => 'px' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, ] ], 'selectors' => [ '{{WRAPPER}} .king-addons-year-label' => 'width: {{SIZE}}{{UNIT}};', ], 'separator' => 'before', 'render_type' => 'template', ] ); $this->add_responsive_control( 'year_label_height', [ 'type' => Controls_Manager::SLIDER, 'label' => esc_html__('Height', 'king-addons'), 'size_units' => ['px'], 'default' => [ 'size' => 41, 'unit' => 'px' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, ] ], 'selectors' => [ '{{WRAPPER}} .king-addons-year-label' => 'height: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .king-addons-year-wrap' => 'height: {{SIZE}}{{UNIT}};', ], ] ); $this->add_control( 'year_label_border_type', [ 'label' => esc_html__('Border Type', 'king-addons'), 'type' => Controls_Manager::SELECT, 'options' => [ 'none' => esc_html__('None', 'king-addons'), 'solid' => esc_html__('Solid', 'king-addons'), 'double' => esc_html__('Double', 'king-addons'), 'dotted' => esc_html__('Dotted', 'king-addons'), 'dashed' => esc_html__('Dashed', 'king-addons'), 'groove' => esc_html__('Groove', 'king-addons'), ], 'default' => 'solid', 'selectors' => [ '{{WRAPPER}} .king-addons-year-label' => 'border-style: {{VALUE}};', ], 'separator' => 'before', ] ); $this->add_responsive_control( 'year_label_border_size', [ 'label' => esc_html__('Border Width', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 0, 'max' => 10, ], ], 'default' => [ 'unit' => 'px', 'size' => 3, ], 'selectors' => [ '{{WRAPPER}} .king-addons-year-label' => 'border-width: {{SIZE}}{{UNIT}};', ], 'condition' => [ 'year_label_border_type!' => 'none' ] ] ); $this->add_control( 'year_label_radius', [ 'label' => esc_html__('Border Radius', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%'], 'default' => [ 'top' => 5, 'right' => 5, 'bottom' => 5, 'left' => 5, ], 'selectors' => [ '{{WRAPPER}} .king-addons-year-label' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], 'separator' => 'before', ] ); $this->end_controls_section(); $this->start_controls_section( 'icon_styles_section', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Main Line Icon', 'king-addons'), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'icon_color', [ 'label' => esc_html__('Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .king-addons-icon i' => 'color: {{VALUE}};', '{{WRAPPER}} .king-addons-wrapper .king-addons-icon' => 'color: {{VALUE}};', '{{WRAPPER}} .king-addons-wrapper .king-addons-icon svg' => 'fill: {{VALUE}};', ], 'default' => '#666666', ] ); $this->add_control( 'icon_timeline_fill_color', [ 'label' => esc_html__('Fill Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#333333', 'selectors' => [ '{{WRAPPER}} .king-addons-change-border-color.king-addons-icon i' => 'color: {{VALUE}};', '{{WRAPPER}} .king-addons-change-border-color.king-addons-icon svg' => 'fill: {{VALUE}};', ], 'condition' => [ 'timeline_layout!' => ['horizontal', 'horizontal-bottom'] ], ] ); $this->add_control( 'icon_bgcolor', [ 'label' => esc_html__('Background Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper .king-addons-icon' => 'background-color: {{VALUE}}', ], 'default' => '#FFFFFF', ] ); $this->add_control( 'icon_timeline_background_fill_color', [ 'label' => esc_html__('Background Fill Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#FFFFFF', 'selectors' => [ '{{WRAPPER}} .king-addons-change-border-color.king-addons-icon' => 'background-color: {{VALUE}};', ], 'condition' => [ 'timeline_layout!' => ['horizontal', 'horizontal-bottom'] ], ] ); $this->add_control( 'icon_border_color', [ 'label' => esc_html__('Border Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#EAEAEA', 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper .king-addons-icon' => 'border-color: {{VALUE}}', ], ] ); $this->add_control( 'icon_transition_duration', [ 'label' => esc_html__('Transition Duration (seconds)', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'default' => 0.1, 'min' => 0, 'max' => 5, 'step' => 0.1, 'selectors' => [ '{{WRAPPER}} .king-addons-icon' => 'transition-duration: {{VALUE}}s', ], 'separator' => 'before' ] ); $this->add_responsive_control( 'icon_size', [ 'label' => esc_html__('Icon Size', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 10, 'max' => 100, ], ], 'default' => [ 'size' => 17, ], 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper .king-addons-icon i' => 'font-size: {{SIZE}}{{UNIT}} !important', '{{WRAPPER}} .king-addons-wrapper .king-addons-icon svg' => 'width: {{SIZE}}{{UNIT}} !important; height: {{SIZE}}{{UNIT}} !important;' ], 'separator' => 'before' ] ); $this->add_responsive_control( 'icon_bg_size', [ 'label' => esc_html__('Background Size', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'default' => [ 'unit' => 'px', 'size' => 45, ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper .king-addons-icon i' => 'display: block;', '{{WRAPPER}} .king-addons-wrapper .king-addons-icon' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}}; display: flex !important; justify-content: center !important; align-items: center !important;', ], 'render_type' => 'template', ] ); $this->add_control( 'icon_border_type', [ 'label' => esc_html__('Border Type', 'king-addons'), 'type' => Controls_Manager::SELECT, 'options' => [ 'none' => esc_html__('None', 'king-addons'), 'solid' => esc_html__('Solid', 'king-addons'), 'double' => esc_html__('Double', 'king-addons'), 'dotted' => esc_html__('Dotted', 'king-addons'), 'dashed' => esc_html__('Dashed', 'king-addons'), 'groove' => esc_html__('Groove', 'king-addons'), ], 'default' => 'solid', 'selectors' => [ '{{WRAPPER}} .king-addons-icon' => 'border-style: {{VALUE}}', ], 'separator' => 'before', ] ); $this->add_control( 'icon_border_width', [ 'label' => esc_html__('Border Width', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%'], 'default' => [ 'top' => 2, 'right' => 2, 'bottom' => 2, 'left' => 2, ], 'selectors' => [ '{{WRAPPER}} .king-addons-icon' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;', ], 'condition' => [ 'icon_border_type!' => 'none' ] ] ); $this->add_control( 'icon_border_radius', [ 'label' => esc_html__('Border Radius', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%'], 'default' => [ 'top' => 50, 'right' => 50, 'bottom' => 50, 'left' => 50, 'unit' => '%' ], 'selectors' => [ '{{WRAPPER}} .king-addons-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;', ], ] ); $this->end_controls_section(); $this->start_controls_section( 'label_styles_section', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Extra Label', 'king-addons'), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'show_extra_label' => 'yes', ] ] ); $this->add_control( 'extra_label_bg_color_dynamic', [ 'label' => esc_html__('Background Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .king-addons-extra-label' => 'background-color: {{VALUE}}', ], ] ); $this->add_responsive_control( 'label_bg_size', [ 'label' => esc_html__('Background Size', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'default' => [ 'unit' => 'px', 'size' => 180, ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 300, ], ], 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper .king-addons-extra-label' => 'width: {{SIZE}}{{UNIT}}; height: auto;', ], 'separator' => 'before', ] ); $this->add_responsive_control( 'label_right', [ 'label' => esc_html__('Label Distance', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 0, 'max' => 50, ], ], 'default' => [ 'unit' => 'px', 'size' => 25, ], 'selectors' => [ '{{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}})', '{{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}})', ], 'condition' => [ 'timeline_layout' => ['centered'], ] ] ); $this->add_responsive_control( 'label_padding', [ 'label' => esc_html__('Padding', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px'], 'default' => [ 'top' => 5, 'right' => 10, 'bottom' => 5, 'left' => 10, ], 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper .king-addons-extra-label' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;', ], 'separator' => 'before', ] ); $this->add_control( 'label_border_radius', [ 'label' => esc_html__('Border Radius', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%'], 'default' => [ 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0, ], 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper .king-addons-extra-label' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;', ], 'separator' => 'before', ] ); $this->add_control( 'label_section', [ 'label' => esc_html__('Primary Label', 'king-addons'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'date_label_color', [ 'label' => esc_html__('Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper span.king-addons-label' => 'color: {{VALUE}}', ], 'default' => '#5B03FF', ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'label_typography', 'label' => esc_html__('Typography', 'king-addons'), 'selector' => '{{WRAPPER}} .king-addons-extra-label span.king-addons-label', ] ); $this->add_control( 'secondary_label_section', [ 'label' => esc_html__('Secondary Label', 'king-addons'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', 'condition' => [ 'timeline_content' => 'custom' ] ] ); $this->add_control( 'secondary_label_color', [ 'label' => esc_html__('Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper span.king-addons-sub-label' => 'color: {{VALUE}}', ], 'condition' => [ 'timeline_content' => 'custom' ], 'default' => '#7A7A7A', ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'secondary_label_typography', 'label' => esc_html__('Typography', 'king-addons'), 'selector' => '{{WRAPPER}} .king-addons-wrapper span.king-addons-sub-label', 'condition' => [ 'timeline_content' => 'custom' ], ] ); $this->end_controls_section(); $this->start_controls_section( 'triangle_styles', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Triangle', 'king-addons'), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'triangle_bgcolor', [ 'label' => esc_html__('Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .king-addons-wrapper .king-addons-one-sided-timeline .king-addons-data-wrap:after' => 'border-right-color: {{icon_bgcolor}}', '{{WRAPPER}} .king-addons-wrapper .king-addons-one-sided-timeline-left .king-addons-data-wrap:after' => 'border-left-color: {{VALUE}}', '{{WRAPPER}} .king-addons-wrapper .king-addons-right-aligned .king-addons-data-wrap:after' => 'border-right-color: {{VALUE}}', '{{WRAPPER}} .king-addons-horizontal .king-addons-story-info:before' => 'border-top-color: {{VALUE}} !important', '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-story-info:before' => 'border-bottom-color: {{VALUE}} !important', '{{WRAPPER}} .king-addons-wrapper .king-addons-left-aligned .king-addons-data-wrap:after' => 'border-left-color: {{VALUE}}', '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;', '{{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;', ], 'default' => '#FFFFFF', 'render_type' => 'template' ] ); $this->add_responsive_control( 'story_triangle_size', [ 'label' => esc_html__('Size', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px'], 'default' => [ 'unit' => 'px', 'size' => 11, ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 25, ], ], 'selectors' => [ '{{WRAPPER}} .king-addons-horizontal .king-addons-story-info:before' => 'border-width: {{size}}{{UNIT}}; top: 100%; left: 50%; transform: translate(-50%);', '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-story-info:before' => 'border-width: {{size}}{{UNIT}}; bottom: 100%; left: 50%; transform: translate(-50%);', '{{WRAPPER}} .king-addons-one-sided-timeline .king-addons-data-wrap:after' => 'border-width: {{size}}{{UNIT}}; top: {{triangle_onesided_position_top.SIZE}}%; transform: translateY(-50%);', '{{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%);', '{{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%);', '{{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%);', ], 'separator' => 'before' ] ); $this->add_control( 'triangle_onesided_position_top', [ 'label' => esc_html__('Position Top', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['%', 'px'], 'range' => [ '%' => [ 'min' => 0, 'max' => 100, ], 'px' => [ 'min' => 0, 'max' => 150, ], ], 'default' => [ 'unit' => '%', 'size' => 30, ], 'selectors' => [ '{{WRAPPER}} .king-addons-one-sided-timeline .king-addons-data-wrap:after' => 'top: {{size}}{{UNIT}}; transform: translateY(-50%) !important;', '{{WRAPPER}} .king-addons-one-sided-timeline-left .king-addons-data-wrap:after' => 'top: {{size}}{{UNIT}}; transform: translateY(-50%) !important;', '{{WRAPPER}} .king-addons-one-sided-timeline .king-addons-icon' => 'position: absolute; top: {{size}}{{UNIT}}; transform: translate(-50%, -50%) !important;', '{{WRAPPER}} .king-addons-one-sided-timeline-left .king-addons-icon' => 'position: absolute; top: {{size}}{{UNIT}}; transform: translate(50%,-50%) !important;', ], 'condition' => [ 'timeline_layout' => ['one-sided', 'one-sided-left'] ], 'render_type' => 'template', ] ); $this->add_control( 'arrow_bothsided_position_top', [ 'label' => esc_html__('Position Top', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['%', 'px'], 'range' => [ '%' => [ 'min' => 0, 'max' => 100, ], 'px' => [ 'min' => 0, 'max' => 150, ], ], 'default' => [ 'size' => 30, 'unit' => '%', ], 'selectors' => [ '{{WRAPPER}} .king-addons-timeline-centered .king-addons-data-wrap:after' => 'top: {{size}}{{UNIT}}; transform: translateY(-50%) !important;', '{{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;', '{{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;', '{{WRAPPER}} .king-addons-timeline-centered .king-addons-left-aligned .king-addons-icon' => 'position: absolute; top: {{size}}{{UNIT}}; transform: translate(-50%, -50%) !important;', '{{WRAPPER}} .king-addons-timeline-centered .king-addons-extra-label' => 'top: {{size}}{{UNIT}};', '{{WRAPPER}} .king-addons-centered .king-addons-one-sided-timeline .king-addons-data-wrap:after' => 'top: {{size}}{{UNIT}}; transform: translateY(-50%) !important;', ], 'condition' => [ 'timeline_layout' => ['centered'] ], 'render_type' => 'template' ] ); $this->end_controls_section(); $this->start_controls_section( 'navigation_button_styles', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Navigation', 'king-addons'), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'timeline_layout' => ['horizontal', 'horizontal-bottom'] ] ] ); $this->start_controls_tabs( 'navigation_style_tabs' ); $this->start_controls_tab( 'navigation_style_normal_tab', [ 'label' => esc_html__('Normal', 'king-addons'), ] ); $this->add_control( 'navigation_button_bg_color', [ 'label' => esc_html__('Background Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .king-addons-button-prev' => 'background-color: {{VALUE}}', '{{WRAPPER}} .king-addons-button-next' => 'background-color: {{VALUE}}', ], 'condition' => [ 'timeline_layout' => ['horizontal', 'horizontal-bottom'] ] ] ); $this->add_control( 'navigation_button_color', [ 'label' => esc_html__('Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#5B03FF', 'selectors' => [ '{{WRAPPER}} .king-addons-button-prev i' => 'color: {{VALUE}}', '{{WRAPPER}} .king-addons-button-next i' => 'color: {{VALUE}}', '{{WRAPPER}} .king-addons-button-prev svg' => 'fill: {{VALUE}}; cursor: pointer; z-index: 11;', '{{WRAPPER}} .king-addons-button-next svg' => 'fill: {{VALUE}}; cursor: pointer; z-index: 11;', ], 'condition' => [ 'timeline_layout' => ['horizontal', 'horizontal-bottom'] ] ] ); $this->add_control( 'navigation_transition_duration', [ 'label' => esc_html__('Transition Duration (seconds)', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'default' => 0.1, 'min' => 0, 'max' => 5, 'step' => 0.1, 'selectors' => [ '{{WRAPPER}} .king-addons-button-prev' => 'transition-duration: {{VALUE}}s', '{{WRAPPER}} .king-addons-button-next' => 'transition-duration: {{VALUE}}s', '{{WRAPPER}} .king-addons-button-prev i' => 'transition-duration: {{VALUE}}s', '{{WRAPPER}} .king-addons-button-next i' => 'transition-duration: {{VALUE}}s', '{{WRAPPER}} .king-addons-button-prev svg' => 'transition-duration: {{VALUE}}s', '{{WRAPPER}} .king-addons-button-next svg' => 'transition-duration: {{VALUE}}s', ], 'separator' => 'before' ] ); $this->add_responsive_control( 'navigation_icon_size', [ 'label' => esc_html__('Icon Size', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 10, 'max' => 100, ], ], 'default' => [ 'unit' => 'px', 'size' => 40, ], 'selectors' => [ '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-next' => 'font-size: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-prev' => 'font-size: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .king-addons-horizontal .king-addons-button-next' => 'font-size: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .king-addons-horizontal .king-addons-button-prev' => 'font-size: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-next svg' => 'width: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-prev svg' => 'width: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .king-addons-horizontal .king-addons-button-next svg' => 'width: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .king-addons-horizontal .king-addons-button-prev svg' => 'width: {{SIZE}}{{UNIT}};', ], 'separator' => 'before', ] ); $this->add_responsive_control( 'navigation_icon_bg_size', [ 'label' => esc_html__('Box Size', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 20, 'max' => 100, ], ], 'default' => [ 'unit' => 'px', 'size' => 40, ], 'selectors' => [ '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-next' => 'width: {{SIZE}}{{UNIT}}; text-align: center; height: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-prev' => 'width: {{SIZE}}{{UNIT}}; text-align: center; height: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .king-addons-horizontal .king-addons-button-next' => 'width: {{SIZE}}{{UNIT}}; text-align: center; height: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .king-addons-horizontal .king-addons-button-prev' => 'width: {{SIZE}}{{UNIT}}; text-align: center; height: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .king-addons-horizontal .king-addons-button-next i' => 'width: {{SIZE}}{{UNIT}}; text-align: center; line-height: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .king-addons-horizontal .king-addons-button-prev i' => 'width: {{SIZE}}{{UNIT}}; text-align: center; line-height: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .king-addons-horizontal .king-addons-button-next svg' => ' text-align: center; line-height: 1.5;', '{{WRAPPER}} .king-addons-horizontal .king-addons-button-prev svg' => ' text-align: center; line-height: 1.5;', '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-next i' => 'width: {{SIZE}}{{UNIT}}; text-align: center; line-height: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-prev i' => 'width: {{SIZE}}{{UNIT}}; text-align: center; line-height: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-next svg' => 'text-align: center; line-height: 1.5;', '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-prev svg' => 'text-align: center; line-height: 1.5;', '{{WRAPPER}} .king-addons-swiper-pagination.swiper-pagination-progressbar' => 'width: calc(100% - ({{SIZE}}px + 15px)*2);', '{{WRAPPER}} .king-addons-horizontal-bottom.swiper' => 'margin-left: {{SIZE}}px; margin-right: {{SIZE}}px;', '{{WRAPPER}} .king-addons-horizontal.swiper' => 'margin-left: {{SIZE}}px; margin-right: {{SIZE}}px;', ], 'render_type' => 'template' ] ); $this->end_controls_tab(); $this->start_controls_tab( 'navigation_style_hover_tab', [ 'label' => esc_html__('Hover', 'king-addons'), ] ); $this->add_control( 'navigation_button_bg_color_hover', [ 'label' => esc_html__('Background Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .king-addons-button-prev:hover' => 'background-color: {{VALUE}}; cursor: pointer;', '{{WRAPPER}} .king-addons-button-next:hover' => 'background-color: {{VALUE}}; cursor: pointer;', ], 'condition' => [ 'timeline_layout' => ['horizontal', 'horizontal-bottom'] ] ] ); $this->add_control( 'navigation_button_color_hover', [ 'label' => esc_html__('Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#605BE1', 'selectors' => [ '{{WRAPPER}} .king-addons-button-prev:hover i' => 'color: {{VALUE}}; cursor: pointer; z-index: 11;', '{{WRAPPER}} .king-addons-button-next:hover i' => 'color: {{VALUE}}; cursor: pointer; z-index: 11;', '{{WRAPPER}} .king-addons-button-prev:hover svg' => 'fill: {{VALUE}}; cursor: pointer; z-index: 11;', '{{WRAPPER}} .king-addons-button-next:hover svg' => 'fill: {{VALUE}}; cursor: pointer; z-index: 11;', ], 'condition' => [ 'timeline_layout' => ['horizontal', 'horizontal-bottom'] ] ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); $this->start_controls_section( 'section_style_pagination', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Pagination', 'king-addons'), 'tab' => Controls_Manager::TAB_STYLE, 'show_label' => false, 'condition' => [ 'timeline_content' => 'dynamic', 'timeline_layout' => ['centered', 'one-sided', 'one-sided-left'] ], ] ); $this->start_controls_tabs('tabs_grid_pagination_style'); $this->start_controls_tab( 'tab_grid_pagination_normal', [ 'label' => esc_html__('Normal', 'king-addons'), ] ); $this->add_control( 'pagination_color', [ 'label' => esc_html__('Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#ffffff', 'selectors' => [ '{{WRAPPER}} .king-addons-grid-pagination a' => 'color: {{VALUE}}', '{{WRAPPER}} .king-addons-grid-pagination svg' => 'fill: {{VALUE}}', '{{WRAPPER}} .king-addons-grid-pagination > div > span' => 'color: {{VALUE}}', '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-disabled-arrow' => 'color: {{VALUE}}', ], 'condition' => [ 'timeline_layout' => ['centered', 'one-sided', 'one-sided-left'] ] ] ); $this->add_control( 'pagination_bg_color', [ 'label' => esc_html__('Background Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#5B03FF', 'selectors' => [ '{{WRAPPER}} .king-addons-grid-pagination a' => 'background-color: {{VALUE}}', '{{WRAPPER}} .king-addons-grid-pagination > div > span' => 'background-color: {{VALUE}}', '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-disabled-arrow' => 'background-color: {{VALUE}}', '{{WRAPPER}} .king-addons-pagination-finish' => 'color: {{VALUE}}', ] ] ); $this->add_control( 'pagination_border_color', [ 'label' => esc_html__('Border Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#E8E8E8', 'selectors' => [ '{{WRAPPER}} .king-addons-grid-pagination a' => 'border-color: {{VALUE}}', '{{WRAPPER}} .king-addons-grid-pagination > div > span' => 'border-color: {{VALUE}}', '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-disabled-arrow' => 'border-color: {{VALUE}}', ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'pagination_box_shadow', 'selector' => '{{WRAPPER}} .king-addons-grid-pagination a, {{WRAPPER}} .king-addons-grid-pagination > div > span', ] ); $this->add_control( 'pagination_loader_color', [ 'label' => esc_html__('Loader Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#5B03FF', 'selectors' => [ '{{WRAPPER}} .king-addons-double-bounce .king-addons-child' => 'background-color: {{VALUE}}', '{{WRAPPER}} .king-addons-wave .king-addons-rect' => 'background-color: {{VALUE}}', '{{WRAPPER}} .king-addons-spinner-pulse' => 'background-color: {{VALUE}}', '{{WRAPPER}} .king-addons-chasing-dots .king-addons-child' => 'background-color: {{VALUE}}', '{{WRAPPER}} .king-addons-three-bounce .king-addons-child' => 'background-color: {{VALUE}}', '{{WRAPPER}} .king-addons-fading-circle .king-addons-circle:before' => 'background-color: {{VALUE}}', ], 'condition' => [ 'pagination_type' => ['load-more', 'infinite-scroll'] ] ] ); $this->end_controls_tab(); $this->start_controls_tab( 'tab_grid_pagination_hover', [ 'label' => esc_html__('Hover', 'king-addons'), ] ); $this->add_control( 'pagination_color_hr', [ 'label' => esc_html__('Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#ffffff', 'selectors' => [ '{{WRAPPER}} .king-addons-grid-pagination a:hover' => 'color: {{VALUE}}', '{{WRAPPER}} .king-addons-grid-pagination a:hover svg' => 'fill: {{VALUE}}', '{{WRAPPER}} .king-addons-grid-pagination > div > span:not(.king-addons-disabled-arrow):hover' => 'color: {{VALUE}}', '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-grid-current-page' => 'color: {{VALUE}}', ], ] ); $this->add_control( 'pagination_bg_color_hr', [ 'label' => esc_html__('Background Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#4D02D8', 'selectors' => [ '{{WRAPPER}} .king-addons-grid-pagination a:hover' => 'background-color: {{VALUE}}', '{{WRAPPER}} .king-addons-grid-pagination > div > span:not(.king-addons-disabled-arrow):hover' => 'background-color: {{VALUE}}', '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-grid-current-page' => 'background-color: {{VALUE}}', ] ] ); $this->add_control( 'pagination_border_color_hr', [ 'label' => esc_html__('Border Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#E8E8E8', 'selectors' => [ '{{WRAPPER}} .king-addons-grid-pagination a:hover' => 'border-color: {{VALUE}}', '{{WRAPPER}} .king-addons-grid-pagination > div > span:not(.king-addons-disabled-arrow):hover' => 'border-color: {{VALUE}}', '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-grid-current-page' => 'border-color: {{VALUE}}', ] ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'pagination_box_shadow_hr', 'selector' => '{{WRAPPER}} .king-addons-grid-pagination a:hover, {{WRAPPER}} .king-addons-grid-pagination > div > span:not(.king-addons-disabled-arrow):hover', 'separator' => 'after', ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->add_control( 'pagination_transition_duration', [ 'label' => esc_html__('Transition Duration (seconds)', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'default' => 0.1, 'min' => 0, 'max' => 5, 'step' => 0.1, 'selectors' => [ '{{WRAPPER}} .king-addons-grid-pagination a' => 'transition-duration: {{VALUE}}s', '{{WRAPPER}} .king-addons-grid-pagination svg' => 'transition-duration: {{VALUE}}s', '{{WRAPPER}} .king-addons-grid-pagination > div > span' => 'transition-duration: {{VALUE}}s', ], 'separator' => 'after', ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'loadmore_typography', 'label' => esc_html__('Typography', 'king-addons'), 'selector' => '{{WRAPPER}} .king-addons-load-more-btn', ] ); $this->add_control( 'pagination_border_type', [ 'label' => esc_html__('Border Type', 'king-addons'), 'type' => Controls_Manager::SELECT, 'options' => [ 'none' => esc_html__('None', 'king-addons'), 'solid' => esc_html__('Solid', 'king-addons'), 'double' => esc_html__('Double', 'king-addons'), 'dotted' => esc_html__('Dotted', 'king-addons'), 'dashed' => esc_html__('Dashed', 'king-addons'), 'groove' => esc_html__('Groove', 'king-addons'), ], 'default' => 'none', 'selectors' => [ '{{WRAPPER}} .king-addons-grid-pagination a' => 'border-style: {{VALUE}};', '{{WRAPPER}} .king-addons-grid-pagination > div > span' => 'border-style: {{VALUE}};', '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-grid-current-page' => 'border-style: {{VALUE}};', '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-disabled-arrow' => 'border-style: {{VALUE}}', ], 'separator' => 'before', ] ); $this->add_control( 'pagination_border_width', [ 'label' => esc_html__('Border Width', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px'], 'default' => [ 'top' => 1, 'right' => 1, 'bottom' => 1, 'left' => 1, ], 'selectors' => [ '{{WRAPPER}} .king-addons-grid-pagination a' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', '{{WRAPPER}} .king-addons-grid-pagination > div > span' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-grid-current-page' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-disabled-arrow' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], 'condition' => [ 'pagination_border_type!' => 'none', ], ] ); $this->add_responsive_control( 'pagination_distance_from_grid', [ 'label' => esc_html__('Distance From Timeline', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, ], ], 'default' => [ 'unit' => 'px', 'size' => 25, ], 'selectors' => [ '{{WRAPPER}} .king-addons-grid-pagination' => 'margin-top: {{SIZE}}{{UNIT}};', ], 'separator' => 'before' ] ); $this->add_responsive_control( 'pagination_padding', [ 'label' => esc_html__('Padding', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px'], 'default' => [ 'top' => 8, 'right' => 20, 'bottom' => 8, 'left' => 20, ], 'selectors' => [ '{{WRAPPER}} .king-addons-grid-pagination a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', '{{WRAPPER}} .king-addons-grid-pagination > div > span' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-disabled-arrow' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-grid-current-page' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'pagination_wrapper_padding', [ 'label' => esc_html__('Wrapper Padding', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px'], 'default' => [ 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0, ], 'selectors' => [ '{{WRAPPER}} .king-addons-grid-pagination' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_control( 'pagination_radius', [ 'label' => esc_html__('Border Radius', 'king-addons'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%'], 'default' => [ 'top' => 3, 'right' => 3, 'bottom' => 3, 'left' => 3, ], 'selectors' => [ '{{WRAPPER}} .king-addons-grid-pagination a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', '{{WRAPPER}} .king-addons-grid-pagination > div > span' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-grid-current-page' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], 'separator' => 'before', ] ); $this->end_controls_section(); } public function get_tax_query_args() { $settings = $this->get_settings(); $tax_query = []; if ('related' === $settings['timeline_post_types']) { $tax_query[] = [ 'taxonomy' => $settings['query_tax_selection'], 'field' => 'term_id', 'terms' => wp_get_object_terms( get_the_ID(), $settings['query_tax_selection'], ['fields' => 'ids'] ), ]; } else { foreach (get_object_taxonomies($settings['timeline_post_types']) as $tax) { $term_setting = $settings['query_taxonomy_' . $tax] ?? []; if (!empty($term_setting)) { $tax_query[] = [ 'taxonomy' => $tax, 'field' => 'id', 'terms' => $term_setting, ]; } } } return $tax_query; } public function get_main_query_args() { $settings = $this->get_settings(); $author = !empty($settings['query_author']) ? implode(',', $settings['query_author']) : ''; $paged = get_query_var('paged') ?: (get_query_var('page') ?: 1); $posts_per_page = !king_addons_freemius()->can_use_premium_code__premium_only() && $settings['posts_per_page'] > 4 ? 4 : ($settings['posts_per_page'] ?: 4); $args = [ 'post_type' => $settings['timeline_post_types'], 'tax_query' => $this->get_tax_query_args(), 'post__not_in' => $settings['query_exclude_' . $settings['timeline_post_types']] ?? '', 'posts_per_page' => $posts_per_page, 'orderby' => $settings['order_posts'], 'order' => $settings['order_direction'], 'author' => $author, 'paged' => $paged, ]; if ('yes' === $settings['query_exclude_no_images']) { $args['meta_key'] = '_thumbnail_id'; } // Overwrite main query args if manual selection if ('manual' === $settings['query_selection']) { $post_ids = $settings['query_manual_' . $settings['timeline_post_types']] ?? ['']; $args = [ 'post_type' => $settings['timeline_post_types'], 'post__in' => $post_ids, 'posts_per_page' => $posts_per_page, 'orderby' => '', 'paged' => $paged, ]; } return $args; } public function get_max_num_pages() { $query = new WP_Query($this->get_main_query_args()); $max_num_pages = (int)ceil($query->max_num_pages); wp_reset_postdata(); return $max_num_pages; } /** @noinspection PhpMissingFieldTypeInspection */ public $content_alignment = ''; public function content_and_animation_alignment($layout, $countItem, $settings) { // Default alignment $this->content_alignment = ($layout === 'one-sided-left') ? 'king-addons-left-aligned' : 'king-addons-right-aligned'; // Special case for centered if ($layout === 'centered') { if ($countItem % 2 === 0) { $this->content_alignment = 'king-addons-left-aligned'; } // Handle swapping animations if (preg_match('/right/i', $settings['timeline_animation'])) { if ('king-addons-left-aligned' === $this->content_alignment) { $this->animation = preg_match('/right/i', $settings['timeline_animation']) ? str_replace('right', 'left', $settings['timeline_animation']) : $settings['timeline_animation']; } else { $this->animation = preg_match('/left/i', $settings['timeline_animation']) ? str_replace('left', 'right', $settings['timeline_animation']) : $settings['timeline_animation']; } } if (preg_match('/left/i', $settings['timeline_animation'])) { if ('king-addons-left-aligned' === $this->content_alignment) { $this->animation = preg_match('/left/i', $settings['timeline_animation']) ? str_replace('left', 'right', $settings['timeline_animation']) : $settings['timeline_animation']; } elseif ('king-addons-right-aligned' === $this->content_alignment) { $this->animation = preg_match('/right/i', $settings['timeline_animation']) ? str_replace('right', 'left', $settings['timeline_animation']) : $settings['timeline_animation']; } } } // Handle animation for load more if (preg_match('/right/i', $settings['timeline_animation'])) { $this->animation_loadmore_left = preg_match('/right/i', $settings['timeline_animation']) ? str_replace('right', 'left', $settings['timeline_animation']) : $settings['timeline_animation']; $this->animation_loadmore_right = preg_match('/left/i', $settings['timeline_animation']) ? str_replace('left', 'right', $settings['timeline_animation']) : $settings['timeline_animation']; } elseif (preg_match('/left/i', $settings['timeline_animation'])) { $this->animation_loadmore_left = preg_match('/left/i', $settings['timeline_animation']) ? str_replace('left', 'right', $settings['timeline_animation']) : $settings['timeline_animation']; $this->animation_loadmore_right = preg_match('/right/i', $settings['timeline_animation']) ? str_replace('right', 'left', $settings['timeline_animation']) : $settings['timeline_animation']; } } public function add_custom_horizontal_timeline_attributes($content, $settings, $index) { $this->timeline_description = $content['repeater_description']; $this->story_date_label = esc_html($content['repeater_date_label']); $this->story_extra_label = esc_html($content['repeater_extra_label']); $this->timeline_story_title = wp_kses_post($content['repeater_story_title']); $this->thumbnail_size = $content['king_addons_thumbnail_size']; $this->thumbnail_custom_dimension = $content['king_addons_thumbnail_custom_dimension']; $this->show_year_label = esc_html($content['repeater_show_year_label']); $this->timeline_year = esc_html($content['repeater_year']); $this->title_key = $this->get_repeater_setting_key('repeater_story_title', 'timeline_repeater_list', $index); $this->year_key = $this->get_repeater_setting_key('repeater_year', 'timeline_repeater_list', $index); $this->date_label_key = $this->get_repeater_setting_key('repeater_date_label', 'timeline_repeater_list', $index); $this->extra_label_key = $this->get_repeater_setting_key('repeater_extra_label', 'timeline_repeater_list', $index); $this->description_key = $this->get_repeater_setting_key('repeater_description', 'timeline_repeater_list', $index); $this->background_image = ($settings['content_layout'] === 'background') ? $content['repeater_image']['url'] : ''; $this->background_class = ($settings['content_layout'] === 'background') ? 'story-with-background' : ''; $this->add_inline_editing_attributes($this->title_key, 'none'); $this->add_inline_editing_attributes($this->year_key, 'none'); $this->add_inline_editing_attributes($this->date_label_key, 'none'); $this->add_inline_editing_attributes($this->extra_label_key, 'none'); $this->add_inline_editing_attributes($this->description_key, 'advanced'); $this->add_render_attribute($this->title_key, ['class' => 'king-addons-title']); $this->add_render_attribute($this->year_key, ['class' => 'king-addons-year-label king-addons-year']); $this->add_render_attribute($this->date_label_key, ['class' => 'king-addons-label']); $this->add_render_attribute($this->extra_label_key, ['class' => 'king-addons-sub-label']); $this->add_render_attribute($this->description_key, ['class' => 'king-addons-description']); } public function render_image_or_icon($content) { $img_id = $content['repeater_image']['id'] ?? ''; $img_url = $content['repeater_image']['url'] ?? ''; $icon = $content['repeater_timeline_item_icon'] ?? ''; if (!empty($img_id)) { if ($this->thumbnail_size === 'custom') { $size = [$this->thumbnail_custom_dimension['width'], $this->thumbnail_custom_dimension['height']]; $this->image = wp_get_attachment_image($img_id, $size, true); } else { $this->image = wp_get_attachment_image($img_id, $this->thumbnail_size, true); } } elseif (!empty($img_url)) { $this->image = ''; } elseif (!empty($icon)) { ob_start(); Icons_Manager::render_icon($icon, ['aria-hidden' => 'true']); $this->image = ob_get_clean(); } else { $this->image = ''; } } public function king_addons_render_swiper_navigation($settings) { echo '
' . Core::getIcon($settings['swiper_nav_icon'], '') . '
' . Core::getIcon($settings['swiper_nav_icon'], '') . '
'; } public function render_pagination($settings, $paged) { } public function get_animation_class($data, $object) { $class = ''; $anim = $data[$object . '_animation'] ?? 'none'; if ('none' !== $anim) { $class .= ' king-addons-' . $object . '-' . $anim; $class .= ' king-addons-anim-size-' . $data[$object . '_animation_size']; $class .= ' king-addons-animation-timing-' . $data[$object . '_animation_timing']; if ('yes' === $data[$object . '_animation_tr']) { $class .= ' king-addons-anim-transparency'; } } return $class; } public static function youtube_url($story_settings) { $url = $story_settings['repeater_youtube_video_url'] ?? ''; $media = ''; if (!empty($url)) { preg_match( '%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $url, $matches ); if (!empty($matches[1])) { $id = $matches[1]; $media = ''; } else { $media = __("Wrong URL", "king-addons-addons"); } } return $media; } public function horizontal_timeline_classes($settings) { $this->slides_to_show = $settings['slides_to_show'] ?? 2; if (!king_addons_freemius()->can_use_premium_code__premium_only() && $this->slides_to_show > 4) { $this->slides_to_show = 4; } $horizontal_class = ''; if ($settings['timeline_layout'] === 'horizontal') { $horizontal_class = 'king-addons-horizontal-wrapper'; } elseif ($settings['timeline_layout'] === 'horizontal-bottom') { $horizontal_class = 'king-addons-horizontal-bottom-wrapper'; } $this->horizontal_inner_class = ($horizontal_class === 'king-addons-horizontal-wrapper') ? 'king-addons-horizontal' : 'king-addons-horizontal-bottom'; $this->horizontal_timeline_class = ($this->horizontal_inner_class === 'king-addons-horizontal') ? 'king-addons-horizontal-timeline' : 'king-addons-horizontal-bottom-timeline'; $this->swiper_class = ($this->horizontal_timeline_class === 'king-addons-horizontal-timeline') ? 'swiper-slide-line-bottom' : 'swiper-slide-line-top'; } public function render_custom_vertical_timeline($layout, $settings, $data, $countItem) { echo '
'; echo ('yes' === $this->timeline_fill) ? '
' : ''; foreach ($data as $index => $content) { if (!king_addons_freemius()->can_use_premium_code__premium_only() && $index === 4) { break; } $repeater_title_link = $content['repeater_title_link'] ?? ''; /** @noinspection PhpIllegalStringOffsetInspection */ if (!empty($repeater_title_link['url'])) { $this->add_link_attributes('repeater_title_link' . $this->item_url_count, $repeater_title_link); } $this->content_and_animation_alignment($layout, $countItem, $settings); $this->render_image_or_icon($content); $background_class = ($settings['content_layout'] === 'background') ? 'story-with-background' : ''; if ($content['repeater_show_year_label'] === 'yes') { echo ' ' . esc_html($content['repeater_year']) . ' '; } echo '
'; if ('yes' === $content['repeater_show_extra_label']) { if (!empty($content['repeater_date_label']) || !empty($content['repeater_extra_label'])) { echo ''; } } echo '
'; Icons_Manager::render_icon($content['repeater_story_icon'], ['aria-hidden' => 'true']); echo '
'; // IMAGE TOP if ($settings['content_layout'] === 'image-top' && (!empty($this->image) || !empty($content['repeater_youtube_video_url']))) { echo '
' . $this->image; if (!empty($content['repeater_youtube_video_url'])) { echo '
' . $this->youtube_url($content) . '
'; } if ('yes' === $settings['show_overlay'] && (!empty($this->image) || !empty($content['repeater_youtube_video_url']))) { echo '
'; if (!empty($content['repeater_story_title']) && 'yes' === $settings['show_title'] && 'yes' === $settings['title_overlay']) { /** @noinspection PhpIllegalStringOffsetInspection */ if (!empty($repeater_title_link['url'])) { echo '

get_render_attribute_string('repeater_title_link' . $this->item_url_count) . ' class="king-addons-title">' . esc_html($content['repeater_story_title']) . '

'; } else { echo '

' . esc_html($content['repeater_story_title']) . '

'; } } if (!empty($content['repeater_description']) && 'yes' === $settings['show_description'] && 'yes' === $settings['description_overlay']) { echo '
' . wp_kses_post($content['repeater_description']) . '
'; } echo '
'; } echo '
'; } // NON-OVERLAY TITLE & DESCRIPTION if ( ('yes' !== $settings['title_overlay'] && 'yes' === $settings['show_title'] && !empty($content['repeater_story_title'])) || ('yes' !== $settings['description_overlay'] && 'yes' === $settings['show_description'] && !empty($content['repeater_description'])) ) { echo '
'; if (!empty($content['repeater_story_title']) && 'yes' === $settings['show_title'] && 'yes' !== $settings['title_overlay']) { /** @noinspection PhpIllegalStringOffsetInspection */ if (!empty($repeater_title_link['url'])) { echo '

get_render_attribute_string('repeater_title_link' . $this->item_url_count) . ' class="king-addons-title">' . esc_html($content['repeater_story_title']) . '

'; } else { echo '

' . esc_html($content['repeater_story_title']) . '

'; } } if (!empty($content['repeater_description']) && 'yes' === $settings['show_description'] && 'yes' !== $settings['description_overlay']) { echo '
' . wp_kses_post($content['repeater_description']) . '
'; } echo '
'; if (!empty($content['repeater_youtube_video_url']) && $settings['content_layout'] !== 'image-top') { echo '
' . $this->youtube_url($content) . '
'; } echo '
'; } // IMAGE BOTTOM if ($settings['content_layout'] === 'image-bottom' && !empty($this->image)) { echo '
' . $this->image . '
'; } echo '
'; $countItem++; $this->item_url_count++; } echo '
'; } public function render_dynamic_vertical_timeline($settings, $arrow_bgcolor, $layout, $countItem, $paged) { $layout_settings = ['pagination_type' => $settings['pagination_type']]; $this->add_render_attribute('grid-settings', ['data-settings' => wp_json_encode($layout_settings)]); wp_reset_postdata(); if (!$this->my_query->have_posts()) { echo '
' . esc_html($settings['query_not_found_text']) . '
'; return; } echo '
'; echo ('yes' === $this->timeline_fill) ? '
' : ''; while ($this->my_query->have_posts()) { $this->my_query->the_post(); $id = get_post_thumbnail_id(); $this->src = Group_Control_Image_Size::get_attachment_image_src($id, 'king_addons_thumbnail_dynamic', $settings); $this->alt = get_post_meta($id, '_wp_attachment_image_alt', true); if (empty($this->alt)) { $this->alt = get_the_title($id); } $this->content_and_animation_alignment($layout, $countItem, $settings); $background_class = ($settings['content_layout'] === 'background') ? 'story-with-background' : ''; echo '
'; // Extra Label (date) if ('yes' === $settings['show_extra_label']) { echo ''; } echo '
'; Icons_Manager::render_icon($settings['posts_icon'], ['aria-hidden' => 'true']); echo '
'; // IMAGE / OVERLAY if (($settings['content_layout'] === 'image-top' && !empty($this->src)) || ('yes' === $settings['show_overlay'] && !empty($this->src)) ) { echo '
' . esc_attr($this->alt) . ''; if ('yes' === $settings['show_overlay'] && !empty(get_the_post_thumbnail_url())) { echo '
'; if ('yes' === $settings['show_title'] && 'yes' === $settings['title_overlay']) { echo '

' . esc_html(get_the_title()) . '

'; } if ('yes' === $settings['show_date'] && 'yes' === $settings['date_overlay']) { echo '
' . esc_html(get_the_date($settings['date_format'])) . '
'; } if (!empty(get_the_content()) && 'yes' === $settings['show_description'] && 'yes' === $settings['description_overlay']) { echo '
' . esc_html(wp_trim_words(get_the_content(), $settings['excerpt_count'])) . '
'; } if ('yes' === $this->show_readmore && 'yes' === $settings['readmore_overlay']) { echo '
' . esc_html($settings['read_more_text']) . '
'; } echo '
'; } echo '
'; } // Non-Overlay $hasNonOverlayContent = ( ('yes' === $settings['show_title'] && 'yes' !== $settings['title_overlay']) || ('yes' === $settings['show_description'] && 'yes' !== $settings['description_overlay']) || ('yes' === $settings['show_date'] && 'yes' !== $settings['date_overlay']) || ('yes' === $this->show_readmore && 'yes' !== $settings['readmore_overlay']) ); if ($hasNonOverlayContent) { echo '
'; if ('yes' === $settings['show_title'] && 'yes' !== $settings['title_overlay']) { echo '

' . esc_html(get_the_title()) . '

'; } if ('yes' === $settings['show_date'] && 'yes' !== $settings['date_overlay']) { echo '
' . esc_html(get_the_date($settings['date_format'])) . '
'; } if (!empty(get_the_content()) && 'yes' === $settings['show_description'] && 'yes' !== $settings['description_overlay']) { echo '
' . esc_html(wp_trim_words(get_the_content(), $settings['excerpt_count'])) . '
'; } if ('yes' === $this->show_readmore && 'yes' !== $settings['readmore_overlay']) { echo '
' . esc_html($settings['read_more_text']) . '
'; } echo '
'; } // IMAGE BOTTOM if ($settings['content_layout'] === 'image-bottom' && !empty($this->src)) { echo '
' . esc_attr($this->alt) . '
'; } echo '
'; $countItem++; } echo '
'; if (!($settings['posts_per_page'] >= wp_count_posts($settings['timeline_post_types'])->publish)) { $this->render_pagination($settings, $paged); } } public function render_custom_horizontal_timeline($settings, $autoplay, $loop, $dir, $data, $slidesHeight, $swiper_speed, $swiper_delay, $swiper_pause_on_hover) { $this->horizontal_timeline_classes($settings); echo '
'; if (is_array($data)) { foreach ($data as $index => $content) { if (!king_addons_freemius()->can_use_premium_code__premium_only() && $index === 4) { break; } $repeater_title_link = $content['repeater_title_link'] ?? ''; if (!empty($repeater_title_link['url'])) { $this->add_link_attributes('repeater_title_link' . $this->item_url_count, $repeater_title_link); } $this->add_custom_horizontal_timeline_attributes($content, $settings, $index); $this->render_image_or_icon($content); echo '
'; // Extra label if ('yes' === $content['repeater_show_extra_label']) { if (!empty($this->story_date_label) || !empty($this->story_extra_label)) { echo '
'; if (!empty($this->story_date_label)) { echo 'get_render_attribute_string($this->date_label_key) . '>' . esc_html($this->story_date_label) . ''; } if (!empty($this->story_extra_label)) { echo 'get_render_attribute_string($this->extra_label_key) . '>' . wp_kses_post($this->story_extra_label) . ''; } echo '
'; } } echo '
'; Icons_Manager::render_icon($content['repeater_story_icon'], ['aria-hidden' => 'true']); echo '
'; // IMAGE TOP if (($settings['content_layout'] === 'image-top' && !empty($this->image)) || ($settings['content_layout'] === 'image-top' && !empty($content['repeater_youtube_video_url']))) { echo '
'; echo $this->image; if (!empty($content['repeater_youtube_video_url'])) { echo '
' . $this->youtube_url($content) . '
'; } if ('yes' === $settings['show_overlay'] && (!empty($this->image) || !empty($content['repeater_youtube_video_url']))) { echo '
'; if (!empty($this->timeline_story_title) && 'yes' === $settings['show_title'] && 'yes' === $settings['title_overlay']) { if (!empty($repeater_title_link['url'])) { echo '

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) . '

'; } else { echo '

get_render_attribute_string($this->title_key) . '>' . esc_html($this->timeline_story_title) . '

'; } } if (!empty($this->timeline_description) && 'yes' === $settings['show_description'] && 'yes' === $settings['description_overlay']) { echo '
get_render_attribute_string($this->description_key) . '>' . wp_kses_post($this->timeline_description) . '
'; } echo '
'; } echo '
'; } // NON-OVERLAY TITLE & DESCRIPTION if ( ('yes' === $settings['show_title'] && 'yes' !== $settings['title_overlay'] && !empty($content['repeater_story_title'])) || ('yes' === $settings['show_description'] && 'yes' !== $settings['description_overlay'] && !empty($content['repeater_description'])) ) { echo '
'; if (!empty($this->timeline_story_title) && 'yes' === $settings['show_title'] && 'yes' !== $settings['title_overlay']) { if (!empty($repeater_title_link['url'])) { echo '

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) . '

'; } else { echo '

get_render_attribute_string($this->title_key) . '>' . esc_html($this->timeline_story_title) . '

'; } } if (!empty($this->timeline_description) && 'yes' === $settings['show_description'] && 'yes' !== $settings['description_overlay']) { echo '
get_render_attribute_string($this->description_key) . '>' . wp_kses_post($this->timeline_description) . '
'; } if (!empty($content['repeater_youtube_video_url']) && $settings['content_layout'] !== 'image-top') { echo '
' . $this->youtube_url($content) . '
'; } echo '
'; } // IMAGE BOTTOM if ($settings['content_layout'] === 'image-bottom' && !empty($this->image)) { echo '
' . $this->image . '
'; } echo '
'; $this->item_url_count++; } } $this->king_addons_render_swiper_navigation($settings); echo '
'; } public function render_dynamic_horizontal_timeline($settings, $dir, $autoplay, $loop, $slidesHeight, $swiper_speed, $swiper_delay, $swiper_pause_on_hover) { wp_reset_postdata(); $this->horizontal_timeline_classes($settings); if (!$this->my_query->have_posts()) { echo '
' . esc_html($settings['query_not_found_text']) . '
'; return; } echo '
'; while ($this->my_query->have_posts()) { $this->my_query->the_post(); $id = get_post_thumbnail_id(); $this->src = Group_Control_Image_Size::get_attachment_image_src($id, 'king_addons_thumbnail_dynamic', $settings); $this->alt = get_post_meta($id, '_wp_attachment_image_alt', true); if (empty($this->alt)) { $this->alt = get_the_title($id); } $background_class = ($settings['content_layout'] === 'background') ? 'story-with-background' : ''; echo '
'; if (($settings['content_layout'] === 'image-top' && !empty($this->src)) || ('yes' === $settings['show_overlay'] && !empty($this->src)) ) { echo '
'; if ($settings['content_layout'] === 'image-top') { echo ''; } if ('yes' === $settings['show_overlay'] && !empty(get_the_post_thumbnail_url())) { echo '
'; if ('yes' === $settings['show_title'] && 'yes' === $settings['title_overlay']) { echo '

' . esc_html(get_the_title()) . '

'; } if ('yes' === $settings['show_date'] && 'yes' === $settings['date_overlay']) { echo '
' . esc_html(get_the_date($settings['date_format'])) . '
'; } if (!empty(get_the_content()) && 'yes' === $settings['show_description'] && 'yes' === $settings['description_overlay']) { echo '
' . esc_html(wp_trim_words(get_the_content(), $settings['excerpt_count'])) . '
'; } if ('yes' === $this->show_readmore && 'yes' === $settings['readmore_overlay']) { echo '
' . esc_html($settings['read_more_text']) . '
'; } echo '
'; } echo '
'; } // Non-overlay blocks $hasNonOverlayContent = ( ('yes' === $settings['show_title'] && 'yes' !== $settings['title_overlay']) || ('yes' === $settings['show_description'] && 'yes' !== $settings['description_overlay']) || ('yes' === $settings['show_date'] && 'yes' !== $settings['date_overlay']) || ('yes' === $this->show_readmore && 'yes' !== $settings['readmore_overlay']) ); if ($hasNonOverlayContent) { echo '
'; if ('yes' === $settings['show_title'] && 'yes' !== $settings['title_overlay']) { echo '

' . esc_html(get_the_title()) . '

'; } if ('yes' === $settings['show_date'] && 'yes' !== $settings['date_overlay']) { echo '
' . esc_html(get_the_date($settings['date_format'])) . '
'; } if (!empty(get_the_content()) && 'yes' === $settings['show_description'] && 'yes' !== $settings['description_overlay']) { echo '
' . esc_html(wp_trim_words(get_the_content(), $settings['excerpt_count'])) . '
'; } if ('yes' === $this->show_readmore && 'yes' !== $settings['readmore_overlay']) { echo '
' . esc_html($settings['read_more_text']) . '
'; } echo '
'; } // IMAGE BOTTOM if ($settings['content_layout'] === 'image-bottom' && !empty($this->src)) { echo '
' . esc_attr($this->alt) . '
'; } echo '
'; // Extra Label if ('yes' === $settings['show_extra_label']) { echo '
' . esc_html(get_the_date($settings['date_format'])) . '
'; } echo '
'; Icons_Manager::render_icon($settings['posts_icon'], ['aria-hidden' => 'true']); echo '
'; } $this->king_addons_render_swiper_navigation($settings); echo '
'; } public function add_option_query_source() { $post_types = [ 'post' => esc_html__('Posts', 'king-addons'), 'page' => esc_html__('Pages', 'king-addons'), ]; $custom_post_types = Core::getCustomTypes('post'); foreach ($custom_post_types as $slug => $title) { if ('product' === $slug || 'e-landing-page' === $slug) { continue; } if (!king_addons_freemius()->can_use_premium_code__premium_only()) { $post_types['pro-' . substr($slug, 0, 2)] = esc_html($title) . ' (Pro)'; } else { $post_types[$slug] = esc_html($title); } } $post_types['current'] = esc_html__('Current Query', 'king-addons'); $post_types['pro-rl'] = esc_html__('Related Query (Pro)', 'king-addons'); return $post_types; } protected function render() { $settings = $this->get_settings_for_display(); global $paged; $paged = 1; $this->my_query = ('dynamic' === $settings['timeline_content']) ? new WP_Query($this->get_main_query_args()) : ''; $layout = $settings['timeline_layout']; $this->animation = $settings['timeline_animation']; $this->animation_loadmore_left = ''; $this->animation_loadmore_right = ''; $this->timeline_fill = $settings['timeline_fill']; $this->show_readmore = $settings['show_readmore'] ?? ''; $data = $settings['timeline_repeater_list']; $loop = (!king_addons_freemius()->can_use_premium_code__premium_only() && !isset($settings['swiper_loop'])) ? '' : $settings['swiper_loop']; $autoplay = (!king_addons_freemius()->can_use_premium_code__premium_only() && !isset($settings['swiper_autoplay'])) ? '' : $settings['swiper_autoplay']; $swiper_delay = (!king_addons_freemius()->can_use_premium_code__premium_only() && !isset($settings['swiper_delay'])) ? 0 : $settings['swiper_delay']; $swiper_pause_on_hover = (!king_addons_freemius()->can_use_premium_code__premium_only() && !isset($settings['swiper_pause_on_hover'])) ? '' : $settings['swiper_pause_on_hover']; $swiper_speed = $settings['swiper_speed']; $slidesHeight = $settings['equal_height_slides']; $this->pagination_type = $settings['pagination_type'] ?? ''; $this->pagination_max_pages = $this->get_max_num_pages() ?: ''; $arrow_bgcolor = $settings['triangle_bgcolor']; $animation_settings = [ 'overlay_animation' => $settings['overlay_animation'], 'overlay_animation_size' => $settings['overlay_animation_size'], 'overlay_animation_timing' => $settings['overlay_animation_timing'], 'overlay_animation_tr' => $settings['overlay_animation_tr'], ]; $this->animation_class = $this->get_animation_class($animation_settings, 'overlay'); $dir = is_rtl() ? 'rtl' : ''; if ('one-sided' === $layout) { $this->timeline_layout = "king-addons-one-sided-timeline"; $this->timeline_layout_wrapper = "king-addons-one-sided-wrapper"; } elseif ('centered' === $layout) { $this->timeline_layout = 'king-addons-both-sided-timeline'; $this->timeline_layout_wrapper = 'king-addons-centered'; } elseif ('one-sided-left' === $layout) { $this->timeline_layout = "king-addons-one-sided-timeline-left"; $this->timeline_layout_wrapper = "king-addons-one-sided-wrapper-left"; } elseif ('horizontal' === $layout) { $this->timeline_layout = "king-addons-horizontal-timeline"; $this->timeline_layout_wrapper = "king-addons-horizontal-wrapper"; } $countItem = $countItem ?? 0; $this->item_url_count = 0; // Dynamic / Horizontal if ('dynamic' === $settings['timeline_content'] && ('horizontal' === $layout || 'horizontal-bottom' === $layout)) { $this->render_dynamic_horizontal_timeline($settings, $dir, $autoplay, $loop, $slidesHeight, $swiper_speed, $swiper_delay, $swiper_pause_on_hover); } // Custom / Horizontal elseif ('custom' === $settings['timeline_content'] && ('horizontal' === $layout || 'horizontal-bottom' === $layout)) { $this->render_custom_horizontal_timeline($settings, $autoplay, $loop, $dir, $data, $slidesHeight, $swiper_speed, $swiper_delay, $swiper_pause_on_hover); } // Dynamic / Vertical else { if ('dynamic' === $settings['timeline_content']) { $this->render_dynamic_vertical_timeline($settings, $arrow_bgcolor, $layout, $countItem, $paged); } else { $this->render_custom_vertical_timeline($layout, $settings, $data, $countItem); } } } } new Timeline();