start_controls_section( "progress_section", [ "label" => esc_html__( "Progress", 'classic-elementor-addons-pro' ), "tab" => Controls_Manager::TAB_CONTENT, "description" => esc_html__( "Default blog options.", 'classic-elementor-addons-pro' ), ] ); $this->add_control( "title", [ "type" => Controls_Manager::TEXT, "label" => esc_html__( "Title", 'classic-elementor-addons-pro' ), "description" => esc_html__( "Here you put the circle progress title.", 'classic-elementor-addons-pro' ), "default" => esc_html__( "Progress", 'classic-elementor-addons-pro' ), ] ); $this->add_responsive_control( 'circle_val', [ 'label' => esc_html__( 'Progress %', 'classic-elementor-addons-pro' ), 'description' => esc_html__( 'Here you can place progress value. This value must be in 1 to 100. Example 70', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 70, ], 'range' => [ '%' => [ 'min' => 1, 'max' => 100, ], ] ] ); $this->add_control( "content", [ "type" => Controls_Manager::TEXTAREA, "label" => esc_html__( "Content", 'classic-elementor-addons-pro' ), "description" => esc_html__( "Here you put the progress content.", 'classic-elementor-addons-pro' ), "default" => "" ] ); $this->add_responsive_control( 'progress_size', [ 'label' => esc_html__( 'Progress Size', 'classic-elementor-addons-pro' ), "description" => esc_html__( "Here you can set circle progress size. Example 200.", 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'default' => [ 'size' => 200, ], 'range' => [ 'px' => [ 'min' => 10, 'max' => 600, 'step' => 10, ], ] ] ); $this->add_responsive_control( 'progress_thikness', [ 'label' => esc_html__( 'Progress Thickness', 'classic-elementor-addons-pro' ), "description" => esc_html__( "Here you can set circle progress thickness. Example 10.", 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'default' => [ 'size' => 10, ], 'range' => [ 'px' => [ 'min' => 1, 'max' => 50, 'step' => 1, ], ] ] ); $this->add_responsive_control( 'progress_duration', [ 'label' => esc_html__( 'Progress Duration', 'classic-elementor-addons-pro' ), "description" => esc_html__( "Here you can set circle progress animation duration. Example 1500.", 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'default' => [ 'size' => 1500, ], 'range' => [ 'px' => [ 'min' => 100, 'max' => 5000, 'step' => 50, ], ] ] ); $this->end_controls_section(); //Layouts Section $this->start_controls_section( "layouts_section", [ "label" => esc_html__( "Layouts", 'classic-elementor-addons-pro' ), "tab" => Controls_Manager::TAB_CONTENT, "description" => esc_html__( "Circle progress layout options here available.", 'classic-elementor-addons-pro' ), ] ); $this->add_responsive_control( 'alignment', [ 'label' => esc_html__( 'Alignment', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'left' => [ 'title' => esc_html__( 'Left', 'classic-elementor-addons-pro' ), 'icon' => 'eicon-text-align-left', ], 'center' => [ 'title' => esc_html__( 'Center', 'classic-elementor-addons-pro' ), 'icon' => 'eicon-text-align-center', ], 'right' => [ 'title' => esc_html__( 'Right', 'classic-elementor-addons-pro' ), 'icon' => 'eicon-text-align-right', ], 'justify' => [ 'title' => esc_html__( 'Justified', 'classic-elementor-addons-pro' ), 'icon' => 'eicon-text-align-justify', ], ], 'default' => 'center', 'selectors' => [ '{{WRAPPER}} .circle-progress-wrapper' => 'text-align: {{VALUE}};', ], ] ); $this->add_control( "circle_layout", [ "label" => esc_html__( "Layout", 'classic-elementor-addons-pro' ), "type" => Controls_Manager::SELECT, "default" => "default", "options" => [ "default" => esc_html__( "Default", 'classic-elementor-addons-pro' ), "classic" => esc_html__( "Classic", 'classic-elementor-addons-pro' ), "modern" => esc_html__( "Modern", 'classic-elementor-addons-pro' ), "classic-pro" => esc_html__( "Classic Pro", 'classic-elementor-addons-pro' ), ] ] ); $this->add_control( "progress_heading", [ "label" => esc_html__( "Post Heading Tag", 'classic-elementor-addons-pro' ), "type" => Controls_Manager::SELECT, "default" => "h3", "options" => [ "h1" => esc_html__( "h1", 'classic-elementor-addons-pro' ), "h2" => esc_html__( "h2", 'classic-elementor-addons-pro' ), "h3" => esc_html__( "h3", 'classic-elementor-addons-pro' ), "h4" => esc_html__( "h4", 'classic-elementor-addons-pro' ), "h5" => esc_html__( "h5", 'classic-elementor-addons-pro' ), "h6" => esc_html__( "h6", 'classic-elementor-addons-pro' ), ] ] ); $this->add_control( "circle_items", [ "label" => "Circle Progress Items", "description" => esc_html__( "This is settings for Circle Progress custom layout. here you can set your own layout. Drag and drop needed Circle Progress items to Enabled part.", 'classic-elementor-addons-pro' ), "type" => "dragdrop", "ddvalues" => [ "Enabled" => [ "circle" => esc_html__( "Circle", 'classic-elementor-addons-pro' ), "title" => esc_html__( "Title", 'classic-elementor-addons-pro' ) ], "disabled" => [ 'content' => esc_html__( 'Content', 'classic-elementor-addons-pro' ) ] ] ] ); $this->end_controls_section(); // Style Content Section $this->start_controls_section( 'section_style_general', [ 'label' => __( 'General', 'classic-elementor-addons-pro' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'progress_padding', [ 'label' => esc_html__( 'Padding', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::DIMENSIONS, 'selectors' => [ '{{WRAPPER}} .circle-progress-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ] ] ); $this->add_control( 'progress_margin', [ 'label' => esc_html__( 'Margin', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::DIMENSIONS, 'selectors' => [ '{{WRAPPER}} .circle-progress-wrapper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ] ] ); $this->start_controls_tabs( 'general_styles' ); $this->start_controls_tab( 'general_normal', [ 'label' => esc_html__( 'Normal', 'classic-elementor-addons-pro' ), ] ); $this->add_control( 'font_color', [ 'label' => esc_html__( 'Font Color', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .circle-progress-wrapper' => 'color: {{VALUE}};' ] ] ); $this->add_control( 'bg_color', [ 'label' => esc_html__( 'Background Color', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .circle-progress-wrapper' => 'background-color: {{VALUE}};' ] ] ); $this->add_control( "shadow_opt", [ "label" => esc_html__( "Box Shadow Enable", 'classic-elementor-addons-pro' ), "description" => esc_html__( "This is option for show box shadow on progress box hover.", 'classic-elementor-addons-pro' ), "type" => Controls_Manager::SWITCHER, "default" => "no" ] ); $this->add_control( "progress_box_shadow", [ "label" => esc_html__( "Box Shadow", 'classic-elementor-addons-pro' ), "description" => esc_html__( "This is option for show box shadow on progress box hover.", 'classic-elementor-addons-pro' ), "type" => Controls_Manager::BOX_SHADOW, 'condition' => [ 'shadow_opt' => 'yes', ], 'selectors' => [ '{{WRAPPER}} .circle-progress-wrapper' => 'box-shadow: {{HORIZONTAL}}px {{VERTICAL}}px {{BLUR}}px {{SPREAD}}px {{COLOR}} {{progress_box_shadow_pos.VALUE}};', ] ] ); $this->add_control( "progress_box_shadow_pos", [ 'label' => esc_html__( "Box Shadow Position", 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::SELECT, 'options' => [ ' ' => esc_html__( "Outline", 'classic-elementor-addons-pro' ), 'inset' => esc_html__( "Inset", 'classic-elementor-addons-pro' ), ], 'condition' => [ 'shadow_opt' => 'yes', ], 'default' => ' ', 'render_type' => 'ui', ] ); $this->end_controls_tab(); $this->start_controls_tab( 'general_hover', [ 'label' => esc_html__( 'Hover', 'classic-elementor-addons-pro' ), ] ); $this->add_control( 'font_hcolor', [ 'label' => esc_html__( 'Font Color', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .circle-progress-wrapper:hover' => 'color: {{VALUE}};' ] ] ); $this->add_control( 'bg_hcolor', [ 'label' => esc_html__( 'Background Color', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .circle-progress-wrapper:hover' => 'background-color: {{VALUE}};' ] ] ); $this->add_control( "shadow_hopt", [ "label" => esc_html__( "Box Shadow Enable", 'classic-elementor-addons-pro' ), "description" => esc_html__( "This is option for show box shadow on progress box hover.", 'classic-elementor-addons-pro' ), "type" => Controls_Manager::SWITCHER, "default" => "no" ] ); $this->add_control( "progress_hbox_shadow", [ "label" => esc_html__( "Hover Box Shadow", 'classic-elementor-addons-pro' ), "description" => esc_html__( "This is option for show box shadow on progress box hover.", 'classic-elementor-addons-pro' ), "type" => Controls_Manager::BOX_SHADOW, 'condition' => [ 'shadow_hopt' => 'yes', ], 'selectors' => [ '{{WRAPPER}} .circle-progress-wrapper:hover' => 'box-shadow: {{HORIZONTAL}}px {{VERTICAL}}px {{BLUR}}px {{SPREAD}}px {{COLOR}} {{progress_hbox_shadow_pos.VALUE}};', ] ] ); $this->add_control( "progress_hbox_shadow_pos", [ 'label' => esc_html__( "Box Shadow Position", 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::SELECT, 'options' => [ ' ' => esc_html__( "Outline", 'classic-elementor-addons-pro' ), 'inset' => esc_html__( "Inset", 'classic-elementor-addons-pro' ), ], 'condition' => [ 'shadow_hopt' => 'yes', ], 'default' => ' ', 'render_type' => 'ui', ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); // Style Progress Section $this->start_controls_section( 'section_style_progress', [ 'label' => __( 'Progress', 'classic-elementor-addons-pro' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( "circle_empty_color", [ "type" => Controls_Manager::COLOR, "label" => esc_html__( "Circle Empty Fill Color", 'classic-elementor-addons-pro' ), "description" => esc_html__( "Here you can put the circle empty fill color.", 'classic-elementor-addons-pro' ), "default" => "#e1e1e1" ] ); $this->add_control( "circle_start_color", [ "type" => Controls_Manager::COLOR, "label" => esc_html__( "Circle Start Color", 'classic-elementor-addons-pro' ), "description" => esc_html__( "Here you can put the circle fill start color.", 'classic-elementor-addons-pro' ), "default" => "#333333" ] ); $this->add_control( "circle_end_color", [ "type" => Controls_Manager::COLOR, "label" => esc_html__( "Circle End Color", 'classic-elementor-addons-pro' ), "description" => esc_html__( "Here you can put the circle fill end color. If you not giving end color, then circle take start color for end color.", 'classic-elementor-addons-pro' ), "default" => "" ] ); $this->add_responsive_control( 'progress_spacing', [ 'label' => esc_html__( 'Progress Bar Spacing', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 5, ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}} .circle-progress-wrapper .circle-progress-circle' => 'margin-bottom: {{SIZE}}{{UNIT}};', '(mobile){{WRAPPER}} .circle-progress-wrapper .circle-progress-circle' => 'margin-bottom: {{SIZE}}{{UNIT}};', ], ] ); $this->end_controls_section(); // Style Title Section $this->start_controls_section( 'section_style_title', [ 'label' => __( 'Title', 'classic-elementor-addons-pro' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->start_controls_tabs( 'title_colors' ); $this->start_controls_tab( 'title_colors_normal', [ 'label' => esc_html__( 'Normal', 'classic-elementor-addons-pro' ), ] ); $this->add_control( "title_color", [ "type" => Controls_Manager::COLOR, "label" => esc_html__( "Title Color", 'classic-elementor-addons-pro' ), "description" => esc_html__( "Here you can put the font color.", 'classic-elementor-addons-pro' ), "default" => "", 'selectors' => [ '{{WRAPPER}} .circle-progress-wrapper .circle-progress-title > *' => 'color: {{VALUE}};' ], ] ); $this->end_controls_tab(); $this->start_controls_tab( 'title_colors_hover', [ 'label' => esc_html__( 'Hover', 'classic-elementor-addons-pro' ), ] ); $this->add_control( "title_hcolor", [ "type" => Controls_Manager::COLOR, "label" => esc_html__( "Title Hover Color", 'classic-elementor-addons-pro' ), "description" => esc_html__( "Here you can put the font color.", 'classic-elementor-addons-pro' ), "default" => "", 'selectors' => [ '{{WRAPPER}} .circle-progress-wrapper:hover .circle-progress-title > *' => 'color: {{VALUE}};' ], ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->add_control( 'add_responsive_control', [ 'label' => esc_html__( 'Title Margin', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::DIMENSIONS, 'selectors' => [ '{{WRAPPER}} .circle-progress-wrapper .circle-progress-title > *' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ] ] ); $this->add_control( "title_text_trans", [ "label" => esc_html__( "Title Transform", 'classic-elementor-addons-pro' ), "type" => Controls_Manager::SELECT, "description" => esc_html__( "Set title text-transform property.", 'classic-elementor-addons-pro' ), "default" => "none", "options" => [ "none" => esc_html__( "Default", 'classic-elementor-addons-pro' ), "capitalize" => esc_html__( "Capitalized", 'classic-elementor-addons-pro' ), "uppercase" => esc_html__( "Upper Case", 'classic-elementor-addons-pro' ), "lowercase" => esc_html__( "Lower Case", 'classic-elementor-addons-pro' ) ], 'selectors' => [ '{{WRAPPER}} .circle-progress-wrapper .circle-progress-title > *' => 'text-transform: {{VALUE}};' ], ] ); $this->add_responsive_control( 'title_spacing', [ 'label' => esc_html__( 'Title Spacing', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 5, ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}} .circle-progress-wrapper .circle-progress-title' => 'margin-bottom: {{SIZE}}{{UNIT}};', '(mobile){{WRAPPER}} .circle-progress-wrapper .circle-progress-title' => 'margin-bottom: {{SIZE}}{{UNIT}};', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'title_typography', 'selector' => '{{WRAPPER}} .circle-progress-wrapper .circle-progress-title > *' ] ); $this->end_controls_section(); // Style Content Section $this->start_controls_section( 'section_style_content', [ 'label' => __( 'Content', 'classic-elementor-addons-pro' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_responsive_control( 'desc_spacing', [ 'label' => esc_html__( 'Description Spacing', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 5, ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}} .circle-progress-wrapper .circle-progress-content' => 'margin-bottom: {{SIZE}}{{UNIT}};', '(mobile){{WRAPPER}} .circle-progress-wrapper .circle-progress-content' => 'margin-bottom: {{SIZE}}{{UNIT}};', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'content_typography', 'selector' => '{{WRAPPER}} .circle-progress-wrapper .circle-progress-content' ] ); $this->end_controls_section(); } /** * Render Circle Progress widget output on the frontend. * * Written in PHP and used to generate the final HTML. * * @since 1.0.0 * @access protected */ public function render_content() { /** * Before widget render content. * * Fires before Elementor widget is being rendered. * * @since 1.0.0 * * @param Widget_Base $this The current widget. */ do_action( 'elementor/widget/before_render_content', $this ); ob_start(); $skin = $this->get_current_skin(); if ( $skin ) { $skin->set_parent( $this ); $skin->render(); } else { $this->render(); } $widget_content = ob_get_clean(); $settings = $this->get_settings_for_display(); extract( $settings ); $class = isset( $circle_layout ) && $circle_layout != '' ? ' circle-progress-style-' . $circle_layout : ''; ?>
get_settings_for_display(); extract( $settings ); //Define Variables $title = isset( $title ) && $title != '' ? $title : ''; $circle_val = isset( $circle_val ) && !empty( $circle_val ) ? $circle_val : ''; $heading = isset( $progress_heading ) && $progress_heading != '' ? $progress_heading : ''; $content = isset( $content ) && $content != '' ? $content : ''; $progress_size = isset( $progress_size ) && $progress_size != '' ? $progress_size : '200'; $progress_thikness = isset( $progress_thikness ) && $progress_thikness != '' ? $progress_thikness : '10'; $progress_duration = isset( $progress_duration ) && $progress_duration != '' ? $progress_duration : '1500'; $empty_color = isset( $circle_empty_color ) && $circle_empty_color != '' ? $circle_empty_color : '#e1e1e1'; $circle_start_color = isset( $circle_start_color ) && $circle_start_color != '' ? $circle_start_color : '#333333'; $circle_end_color = isset( $circle_end_color ) && $circle_end_color != '' ? $circle_end_color : ''; $default_items = array( "circle" => esc_html__( "Circle", 'classic-elementor-addons-pro' ), "title" => esc_html__( "Title", 'classic-elementor-addons-pro' ) ); $elemetns = isset( $circle_items ) && !empty( $circle_items ) ? json_decode( $circle_items, true ) : array( 'Enabled' => $default_items ); if( isset( $elemetns['Enabled'] ) ) : foreach( $elemetns['Enabled'] as $element => $value ){ switch( $element ){ case "circle": $progress_value = isset( $circle_val['size'] ) ? $circle_val['size'] : 10; $progress_size = isset( $progress_size['size'] ) ? $progress_size['size'] : 200; $progress_thikness = isset( $progress_thikness['size'] ) ? $progress_thikness['size'] : 10; $progress_duration = isset( $progress_duration['size'] ) ? $progress_duration['size'] : 1500; echo '
'; echo ''; echo '
'; break; case "title": echo '
'; echo '<'. esc_attr( $heading ) .'>'. esc_html( $title ) .''; echo '
'; break; case "content": echo '
'; echo esc_textarea( $content ); echo '
'; break; } } // foreach end endif; } }