start_controls_section( 'section_progress', [ 'label' => esc_html__( 'Progress Bar', 'elementor' ), ] ); $this->add_control( 'title', [ 'label' => esc_html__( 'Title', 'elementor' ), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, ], 'placeholder' => esc_html__( 'Enter your title', 'elementor' ), 'default' => esc_html__( 'My Skill', 'elementor' ), 'label_block' => true, ] ); $this->add_control( 'progress_type', [ 'label' => esc_html__( 'Type', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => [ '' => esc_html__( 'Default', 'elementor' ), 'info' => esc_html__( 'Info', 'elementor' ), 'success' => esc_html__( 'Success', 'elementor' ), 'warning' => esc_html__( 'Warning', 'elementor' ), 'danger' => esc_html__( 'Danger', 'elementor' ), ], ] ); $this->add_control( 'percent', [ 'label' => esc_html__( 'Percentage', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 50, 'unit' => '%', ], 'dynamic' => [ 'active' => true, ], ] ); $this->add_control( 'display_percentage', [ 'label' => esc_html__( 'Display Percentage', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'show', 'options' => [ 'show' => esc_html__( 'Show', 'elementor' ), 'hide' => esc_html__( 'Hide', 'elementor' ), ], ] ); $this->add_control( 'inner_text', [ 'label' => esc_html__( 'Inner Text', 'elementor' ), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, ], 'placeholder' => esc_html__( 'e.g. Web Designer', 'elementor' ), 'default' => esc_html__( 'Web Designer', 'elementor' ), 'label_block' => true, ] ); $this->add_control( 'view', [ 'label' => esc_html__( 'View', 'elementor' ), 'type' => Controls_Manager::HIDDEN, 'default' => 'traditional', ] ); $this->end_controls_section(); $this->start_controls_section( 'section_progress_style', [ 'label' => esc_html__( 'Progress Bar', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'bar_color', [ 'label' => esc_html__( 'Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'global' => [ 'default' => Global_Colors::COLOR_PRIMARY, ], 'selectors' => [ '{{WRAPPER}} .elementor-progress-wrapper .elementor-progress-bar' => 'background-color: {{VALUE}};', ], ] ); $this->add_control( 'bar_bg_color', [ 'label' => esc_html__( 'Background Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .elementor-progress-wrapper' => 'background-color: {{VALUE}};', ], ] ); $this->add_control( 'bar_height', [ 'label' => esc_html__( 'Height', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'selectors' => [ '{{WRAPPER}} .elementor-progress-bar' => 'height: {{SIZE}}{{UNIT}}; line-height: {{SIZE}}{{UNIT}};', ], ] ); $this->add_control( 'bar_border_radius', [ 'label' => esc_html__( 'Border Radius', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%' ], 'selectors' => [ '{{WRAPPER}} .elementor-progress-wrapper' => 'border-radius: {{SIZE}}{{UNIT}}; overflow: hidden;', ], ] ); $this->add_control( 'inner_text_heading', [ 'label' => esc_html__( 'Inner Text', 'elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'bar_inline_color', [ 'label' => esc_html__( 'Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .elementor-progress-bar' => 'color: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'bar_inner_typography', 'selector' => '{{WRAPPER}} .elementor-progress-bar', 'exclude' => [ 'line_height', ], ] ); $this->add_group_control( Group_Control_Text_Shadow::get_type(), [ 'name' => 'bar_inner_shadow', 'selector' => '{{WRAPPER}} .elementor-progress-bar', ] ); $this->end_controls_section(); $this->start_controls_section( 'section_title', [ 'label' => esc_html__( 'Title Style', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'title_color', [ 'label' => esc_html__( 'Text Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .elementor-title' => 'color: {{VALUE}};', ], 'global' => [ 'default' => Global_Colors::COLOR_PRIMARY, ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'typography', 'selector' => '{{WRAPPER}} .elementor-title', 'global' => [ 'default' => Global_Typography::TYPOGRAPHY_TEXT, ], ] ); $this->add_group_control( Group_Control_Text_Shadow::get_type(), [ 'name' => 'title_shadow', 'selector' => '{{WRAPPER}} .elementor-title', ] ); $this->end_controls_section(); } /** * Render progress widget output on the frontend. * Make sure value does no exceed 100%. * * 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(); $progress_percentage = is_numeric( $settings['percent']['size'] ) ? $settings['percent']['size'] : '0'; if ( 100 < $progress_percentage ) { $progress_percentage = 100; } $this->add_render_attribute( 'title', [ 'class' => 'elementor-title', ]); $this->add_inline_editing_attributes( 'title' ); $this->add_render_attribute( 'wrapper', [ 'class' => 'elementor-progress-wrapper', 'role' => 'progressbar', 'aria-valuemin' => '0', 'aria-valuemax' => '100', 'aria-valuenow' => $progress_percentage, 'aria-valuetext' => $settings['inner_text'], ] ); if ( ! empty( $settings['progress_type'] ) ) { $this->add_render_attribute( 'wrapper', 'class', 'progress-' . $settings['progress_type'] ); } $this->add_render_attribute( 'progress-bar', [ 'class' => 'elementor-progress-bar', 'data-max' => $progress_percentage, ] ); $this->add_render_attribute( 'inner_text', [ 'class' => 'elementor-progress-text', ] ); $this->add_inline_editing_attributes( 'inner_text' ); if ( ! Utils::is_empty( $settings['title'] ) ) { ?> print_render_attribute_string( 'title' ); ?>>print_unescaped_setting( 'title' ); ?>