start_controls_section( 'section_detail', array( 'label' => esc_html__( 'Section Setting', 'accesspress-parallax' ), ) ); $this->add_control( 'section_title', array( 'label' => esc_html__( 'Title:', 'accesspress-parallax' ), 'type' => Controls_Manager::TEXT, 'label_block' => true, ) ); $this->add_control( 'section_percentage', array( 'label' => esc_html__( 'Percentage:', 'accesspress-parallax' ), 'type' => Controls_Manager::NUMBER, 'label_block' => true, 'min' => 0, 'max' => 100, 'step' => 5, ) ); $this->add_control( 'section_layout', array( 'label' => esc_html__( 'Section Layout:', 'accesspress-parallax' ), 'type' => Controls_Manager::SELECT, 'label_block' => true, 'default' => 'layout1', 'options' => array( 'layout1' => esc_html__('Layout 1','accesspress-parallax'), 'layout2' => esc_html__('Layout 2','accesspress-parallax'), ) ) ); $this->end_controls_section(); //styling tab $this->start_controls_section( 'section_general_style', [ 'label' => esc_html__( 'General Styles', 'accesspress-parallax' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'section_title_color', [ 'label' => esc_html__( 'Title Color', 'accesspress-parallax' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} h5.progress-title' => 'color: {{VALUE}};', ], ] ); $this->add_control( 'section_currency_color', [ 'label' => esc_html__( 'Percentage Color', 'accesspress-parallax' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .ap-progress-bar-percentage' => 'color: {{VALUE}};', ], ] ); $this->add_control( 'section_bar_color', [ 'label' => esc_html__( 'Bar Color', 'accesspress-parallax' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .ap-progress-bar-percentage' => 'background-color: {{VALUE}};', '{{WRAPPER}} .ap-progress-wrapper.layout1 .ap-progress-bar .ap-progress-bar-percentage .widget-percent' => 'background-color: {{VALUE}};', '{{WRAPPER}} .ap-progress-wrapper.layout1 .ap-progress-bar .ap-progress-bar-percentage .widget-percent:after' => 'border-right-color: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'section_title_typography', 'label' => esc_html__( 'Title Typography', 'accesspress-parallax' ), 'scheme' => Scheme_Typography::TYPOGRAPHY_4, 'selector' => '{{WRAPPER}} h5.progress-title, {{WRAPPER}} .widget-percent', ] ); $this->end_controls_section();//end for styling tab } /** * Render Accesspress_Parallax_Progress widget output on the frontend. * * Written in PHP and used to generate the final HTML. * * @access protected */ protected function render() { $settings = $this->get_settings(); $layout = isset( $settings[ 'section_layout' ] )? $settings[ 'section_layout' ] : 'layout1'; $this->add_render_attribute( 'ap-progress', 'class', 'ap-progress-section ' ); $title = isset( $settings[ 'section_title' ] )? $settings[ 'section_title' ] : ''; $percent = isset( $settings[ 'section_percentage' ] )? $settings[ 'section_percentage' ] : ''; ?>
get_render_attribute_string( 'ap-progress' ); ?>>
%