start_controls_section( 'progressbar', [ 'label' => esc_html__('Progress Bars', 'business-roy'), ] ); $repeater = new Repeater(); $repeater->add_control( 'progressbar_title', [ 'label' => esc_html__('Title', 'business-roy'), 'type' => Controls_Manager::TEXT, 'label_block' => true, 'default' => esc_html__('Web Designer', 'business-roy'), ] ); $repeater->add_control( 'title_html_tag', [ 'label' => esc_html__('Title HTML Tag', 'business-roy'), 'type' => Controls_Manager::SELECT, 'default' => 'span', 'options' => [ 'h1' => esc_html__('H1', 'business-roy'), 'h2' => esc_html__('H2', 'business-roy'), 'h3' => esc_html__('H3', 'business-roy'), 'h4' => esc_html__('H4', 'business-roy'), 'h5' => esc_html__('H5', 'business-roy'), 'h6' => esc_html__('H6', 'business-roy'), 'div' => esc_html__('div', 'business-roy'), 'span' => esc_html__('span', 'business-roy'), 'p' => esc_html__('p', 'business-roy') ], ] ); $repeater->add_control( 'progressbar_percentage',[ 'label' => esc_html__( 'Percentage', 'business-roy' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => '90', 'unit' => '%', ], ] ); $repeater->add_control( 'display_percentage',[ 'label' => esc_html__( 'Display Percentage', 'business-roy' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Show', 'business-roy' ), 'label_off' => esc_html__( 'Hide', 'business-roy' ), 'return_value' => 'show', 'default' => 'show', ] ); $repeater->add_control( 'progress_item_color',[ 'label' => esc_html__( 'Color', 'business-roy' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} {{CURRENT_ITEM}} .iktheme-progress-bar-length' => 'background-color: {{VALUE}};', ], ] ); $this->add_control( 'progressbar_block', [ 'label' => esc_html__('Progress Bars Items', 'business-roy'), 'type' => Controls_Manager::REPEATER, 'fields' => $repeater->get_controls(), 'default' => [ [ 'progressbar_title' => esc_html__('Web Designer', 'business-roy'), 'progressbar_percentage' => 80, 'display_percentage' => 'show', 'progress_item_color' => '#000000' ], [ 'progressbar_title' => esc_html__('WordPress', 'business-roy'), 'progressbar_percentage' => 90, 'display_percentage' => 'show', 'progress_item_color' => '#07F4D2' ], [ 'progressbar_title' => esc_html__('HTML Design', 'business-roy'), 'progressbar_percentage' => 55, 'display_percentage' => 'show', 'progress_item_color' => '#4E9D06' ], [ 'progressbar_title' => esc_html__('Planning', 'business-roy'), 'progressbar_percentage' => 97, 'display_percentage' => 'show', 'progress_item_color' => '#8224e3' ], ], 'title_field' => '{{{ progressbar_title }}}', ] ); $this->end_controls_section(); $this->start_controls_section( 'progressbar_settings', [ 'label' => esc_html__('Settings', 'business-roy'), ] ); $this->add_responsive_control( 'progressbar_spacing', [ 'label' => esc_html__('Space Progress Bar Item', 'business-roy'), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', 'em', 'rem', 'vw', 'custom' ], 'range' => [ 'rem' => [ 'min' => 0, 'max' => 10, 'step' => 1, ] ], 'default' => [ 'unit' => 'rem', 'size' => '', ], 'selectors' => [ '{{WRAPPER}} .iktheme-progress-bar-wrapper' => 'gap: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'progressbar_spacing_content', [ 'label' => esc_html__('Space Content', 'business-roy'), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', 'em', 'rem', 'vw', 'custom' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, 'step' => 1, ] ], 'default' => [ 'unit' => 'px', 'size' => '5', ], 'selectors' => [ '{{WRAPPER}} .iktheme-progress-item' => 'gap: {{SIZE}}{{UNIT}};', ], ] ); $this->end_controls_section(); $this->start_controls_section( 'section_progress_style',[ 'label' => esc_html__( 'Progress Bar', 'business-roy' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'progress_color',[ 'label' => esc_html__( 'Color', 'business-roy' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .iktheme-progress-bar-length' => 'background-color: {{VALUE}};', ], ] ); $this->add_control( 'progress_bg_color',[ 'label' => esc_html__( 'Background Color', 'business-roy' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .iktheme-progress-bar' => 'background-color: {{VALUE}};', ], ] ); $this->add_responsive_control( 'progress_height',[ 'label' => esc_html__( 'Height', 'business-roy' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', 'em', 'rem', 'custom' ], 'selectors' => [ '{{WRAPPER}} .iktheme-progress-bar' => 'height: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'progress_border_radius',[ 'label' => esc_html__( 'Border Radius', 'business-roy' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ], 'selectors' => [ '{{WRAPPER}} .iktheme-progress-bar' => 'border-radius: {{SIZE}}{{UNIT}};', ], ] ); $this->add_control( 'inner_text_heading',[ 'label' => esc_html__( 'Percentage Text', 'business-roy' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'progress_inline_color',[ 'label' => esc_html__( 'Color', 'business-roy' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .iktheme-progress-bar-length span' => 'color: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(),[ 'name' => 'progress_inner_typography', 'selector' => '{{WRAPPER}} .iktheme-progress-bar-length span', 'exclude' => [ 'line_height', ], ] ); $this->end_controls_section(); $this->start_controls_section( 'title_style', [ 'label' => esc_html__('Title', 'business-roy'), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'progress_title_color', [ 'label' => esc_html__('Color', 'business-roy'), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .iktheme-progress-title' => 'color: {{VALUE}}', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'progress_title_typography', 'label' => esc_html__('Typography', 'business-roy'), 'selector' => '{{WRAPPER}} .iktheme-progress-title', ] ); $this->add_group_control( Group_Control_Text_Stroke::get_type(),[ 'name' => 'progress_title_stroke', 'selector' => '{{WRAPPER}} .iktheme-progress-title', ] ); $this->add_group_control( Group_Control_Text_Shadow::get_type(),[ 'name' => 'progress_title_shadow', 'selector' => '{{WRAPPER}} .iktheme-progress-title', ] ); $this->end_controls_section(); } /** Render Layout */ protected function render() { $settings = $this->get_settings_for_display(); $progressbars = $settings['progressbar_block']; $wrapper_tag = 'div'; $this->add_render_attribute('wrapper', 'class', [ 'iktheme-progress-bar-wrapper', ] ); $this->add_render_attribute( 'title', 'class', ['iktheme-progress-title'] ); ?> < print_render_attribute_string( 'wrapper' ); ?>> $progressbar) { $title_tag = Utils::validate_html_tag( $progressbar['title_html_tag'] ); ?>
< print_render_attribute_string( 'title' ); ?>> >
>