start_controls_section( "general_section", [ "label" => esc_html__( "General", 'classic-elementor-addons-pro' ), "tab" => Controls_Manager::TAB_CONTENT, "description" => esc_html__( "Default icon list options.", 'classic-elementor-addons-pro' ), ] ); $this->add_control( "line_distance", [ "type" => Controls_Manager::TEXT, "label" => esc_html__( "Event Line Distance", 'classic-elementor-addons-pro' ), "description" => esc_html__( "This is option for timeline event line distance. If you use timeline for years make distance volume low.", 'classic-elementor-addons-pro' ), "default" => "60", ] ); $this->end_controls_section(); //Timeline Section $this->start_controls_section( "timeline_section", [ "label" => esc_html__( "Timeline", 'classic-elementor-addons-pro' ), "tab" => Controls_Manager::TAB_CONTENT, "description" => esc_html__( "Timeline options available here.", 'classic-elementor-addons-pro' ), ] ); $repeater = new Repeater(); $repeater->add_control( "timeline_date", [ "type" => Controls_Manager::TEXT, "label" => esc_html__( "Timeline Date", 'classic-elementor-addons-pro' ), "description" => esc_html__( "Here you can put the timeline date. Must follow the date format dd/mm/yyyy. Example 16/01/2014", 'classic-elementor-addons-pro' ), "default" => "" ] ); $repeater->add_control( "timeline_separator", [ "type" => Controls_Manager::TEXT, "label" => esc_html__( "Timeline Separator Title", 'classic-elementor-addons-pro' ), "description" => esc_html__( "Here you can put the timeline separator title.", 'classic-elementor-addons-pro' ), "default" => "" ] ); $repeater->add_control( "timeline_title", [ "type" => Controls_Manager::TEXT, "label" => esc_html__( "Timeline Title", 'classic-elementor-addons-pro' ), "description" => esc_html__( "Here you can put the timeline title.", 'classic-elementor-addons-pro' ), "default" => "" ] ); $repeater->add_control( "timeline_subtitle", [ "type" => Controls_Manager::TEXT, "label" => esc_html__( "Timeline Sub Title", 'classic-elementor-addons-pro' ), "description" => esc_html__( "Here you can put the timeline sub title.", 'classic-elementor-addons-pro' ), "default" => "" ] ); $repeater->add_control( "tl_content", [ "type" => Controls_Manager::TEXTAREA, "label" => esc_html__( "Content", 'classic-elementor-addons-pro' ), "description" => esc_html__( "You can give the feature box content here. HTML allowed here.", 'classic-elementor-addons-pro' ), "default" => "" ] ); $this->add_control( "timeline_settings", [ "label" => esc_html__( "Timeline Setting", 'classic-elementor-addons-pro' ), "description" => esc_html__( "This is options for timeline.", 'classic-elementor-addons-pro' ), "type" => Controls_Manager::REPEATER, "fields" => $repeater->get_controls(), "default" => [ [ "timeline_title" => esc_html__( "History", 'classic-elementor-addons-pro' ), "timeline_date" => "01/01/2012", "timeline_separator"=> esc_html__( "01 Jan", 'classic-elementor-addons-pro' ), "timeline_subtitle" => esc_html__( "1st January, 2012", 'classic-elementor-addons-pro' ), "tl_content" => esc_html__( "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", 'classic-elementor-addons-pro' ), ] ], "title_field" => "{{{ timeline_title }}}", ] ); $this->end_controls_section(); // Style Timeline Section $this->start_controls_section( 'section_style_timeline', [ 'label' => __( 'Timeline', 'classic-elementor-addons-pro' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'timeline_color', [ 'label' => esc_html__( 'Timeline Color', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .timeline-wrapper' => 'color: {{VALUE}};' ] ] ); $this->add_control( 'bg_color', [ 'label' => esc_html__( 'Background Color', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .timeline-wrapper' => 'background-color: {{VALUE}};' ] ] ); $this->add_responsive_control( 'timeline_padding', [ 'label' => esc_html__( 'Padding', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::DIMENSIONS, 'selectors' => [ '{{WRAPPER}} .timeline-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ] ] ); $this->add_responsive_control( 'timeline_margin', [ 'label' => esc_html__( 'Margin', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::DIMENSIONS, 'selectors' => [ '{{WRAPPER}} .timeline-wrapper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ] ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'content_typography', 'selector' => '{{WRAPPER}} .timeline-wrapper' ] ); $this->add_control( 'timeline_options', [ 'label' => __( 'Timeline Date', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'timeline_line_color', [ 'label' => esc_html__( 'Line Color', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .timeline-wrapper .cd-horizontal-timeline .filling-line' => 'background-color: {{VALUE}};', ] ] ); $this->add_control( 'timeline_line_dot_color', [ 'label' => esc_html__( 'Line Dot Color', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .timeline-wrapper .cd-horizontal-timeline .events a.selected:after' => 'border-color: {{VALUE}}; background-color: {{VALUE}};', ] ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'times_typography', 'selector' => '{{WRAPPER}} .timeline-wrapper .timeline', ] ); $this->add_control( 'timeline_title', [ 'label' => __( 'Timeline Title', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'timeline_title_color', [ 'label' => esc_html__( 'Timeline Title Color', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .timeline-wrapper .events-content > ul > li > h2' => 'color: {{VALUE}};' ] ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'timeline_title_typography', 'selector' => '{{WRAPPER}} .timeline-wrapper .events-content > ul > li > h2', ] ); $this->add_control( 'timeline_subtitle', [ 'label' => __( 'Timeline Sub Title', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'timeline_subtitle_color', [ 'label' => esc_html__( 'Timeline Sub Title Color', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .timeline-wrapper .events-content > ul > li > em' => 'color: {{VALUE}};' ] ] ); $this->add_control( 'timeline_separator', [ 'label' => __( 'Timeline Separator', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'timeline_separator_color', [ 'label' => esc_html__( 'Timeline Separator Color', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .timeline-wrapper .events-wrapper .events a' => 'color: {{VALUE}};' ] ] ); $this->end_controls_section(); } /** * Render Timeline Slide widget output on the frontend. * * Written in PHP and used to generate the final HTML. * * @since 1.0.0 * @access protected */ protected function render() { $settings = $this->get_settings_for_display(); extract( $settings ); //Define Variables $class = isset( $extra_class ) && $extra_class != '' ? $extra_class : ''; $distance = isset( $line_distance ) && $line_distance != '' ? absint( $line_distance ) : '60'; echo '

'; // All Timeline Items $tl_items = isset( $timeline_settings ) ? $timeline_settings : array();// $tl_items is timeline items if( !empty( $tl_items ) ): $tl_header = $tl_slide = ''; $sel_stat = 0; foreach( $tl_items as $tlitem ) { //timeline_separator, timeline_title, timeline_subtitle, tl_content $tl_date = isset( $tlitem['timeline_date'] ) ? $tlitem['timeline_date'] : ''; $tl_separator = isset( $tlitem['timeline_separator'] ) ? $tlitem['timeline_separator'] : ''; $tl_title = isset( $tlitem['timeline_title'] ) ? $tlitem['timeline_title'] : ''; $tl_subtitle = isset( $tlitem['timeline_subtitle'] ) ? $tlitem['timeline_subtitle'] : ''; $tl_content = isset( $tlitem['tl_content'] ) ? $tlitem['tl_content'] : ''; $sel_class = ''; if( !$sel_stat ){ $sel_class = 'selected'; $sel_stat = 1; } $tl_header .= '

'; $tl_slide .= '

'. esc_html( $tl_title ) .'

'. esc_html( $tl_subtitle ) .'

'. wp_kses_post( $tl_content ) .'

'; } echo '

'; echo '

'. $tl_header .'

'. $tl_slide .'

'; echo '

'; endif; echo '

'; } }