startControlsSection( 'section_progress', [ 'label' => __('Progress Bar'), ] ); $this->addControl( 'title', [ 'label' => __('Title'), 'type' => ControlsManager::TEXT, 'dynamic' => [ 'active' => true, ], 'placeholder' => __('Enter your title'), 'default' => __('My Skill'), 'label_block' => true, ] ); $this->addControl( 'progress_type', [ 'label' => __('Type'), 'type' => ControlsManager::SELECT, 'default' => '', 'options' => [ '' => __('Default'), 'info' => __('Info'), 'success' => __('Success'), 'warning' => __('Warning'), 'danger' => __('Danger'), ], ] ); $this->addControl( 'percent', [ 'label' => __('Percentage'), 'type' => ControlsManager::SLIDER, 'default' => [ 'size' => 50, 'unit' => '%', ], 'label_block' => true, ] ); $this->addControl('display_percentage', [ 'label' => __('Display Percentage'), 'type' => ControlsManager::SELECT, 'default' => 'show', 'options' => [ 'show' => __('Show'), 'hide' => __('Hide'), ], ]); $this->addControl( 'inner_text', [ 'label' => __('Inner Text'), 'type' => ControlsManager::TEXT, 'dynamic' => [ 'active' => true, ], 'placeholder' => __('e.g. Web Designer'), 'default' => __('Web Designer'), 'label_block' => true, ] ); $this->addControl( 'view', [ 'label' => __('View'), 'type' => ControlsManager::HIDDEN, 'default' => 'traditional', ] ); $this->endControlsSection(); $this->startControlsSection( 'section_progress_style', [ 'label' => __('Progress Bar'), 'tab' => ControlsManager::TAB_STYLE, ] ); $this->addControl( 'bar_color', [ 'label' => __('Color'), 'type' => ControlsManager::COLOR, 'scheme' => [ 'type' => SchemeColor::getType(), 'value' => SchemeColor::COLOR_1, ], 'selectors' => [ '{{WRAPPER}} .elementor-progress-wrapper .elementor-progress-bar' => 'background-color: {{VALUE}};', ], ] ); $this->addControl( 'bar_bg_color', [ 'label' => __('Background Color'), 'type' => ControlsManager::COLOR, 'selectors' => [ '{{WRAPPER}} .elementor-progress-wrapper' => 'background-color: {{VALUE}};', ], ] ); $this->addControl( 'bar_inline_color', [ 'label' => __('Inner Text Color'), 'type' => ControlsManager::COLOR, 'selectors' => [ '{{WRAPPER}} .elementor-progress-bar' => 'color: {{VALUE}};', ], ] ); $this->endControlsSection(); $this->startControlsSection( 'section_title', [ 'label' => __('Title Style'), 'tab' => ControlsManager::TAB_STYLE, ] ); $this->addControl( 'title_color', [ 'label' => __('Text Color'), 'type' => ControlsManager::COLOR, 'selectors' => [ '{{WRAPPER}} .elementor-title' => 'color: {{VALUE}};', ], 'scheme' => [ 'type' => SchemeColor::getType(), 'value' => SchemeColor::COLOR_1, ], ] ); $this->addGroupControl( GroupControlTypography::getType(), [ 'name' => 'typography', 'selector' => '{{WRAPPER}} .elementor-title', 'scheme' => SchemeTypography::TYPOGRAPHY_3, ] ); $this->addGroupControl( GroupControlTextShadow::getType(), [ 'name' => 'title_shadow', 'selector' => '{{WRAPPER}} .elementor-title', ] ); $this->endControlsSection(); } /** * Render progress 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->getSettingsForDisplay(); $this->addRenderAttribute('wrapper', [ 'class' => 'elementor-progress-wrapper', 'role' => 'progressbar', 'aria-valuemin' => '0', 'aria-valuemax' => '100', 'aria-valuenow' => $settings['percent']['size'], 'aria-valuetext' => $settings['inner_text'], ]); if (!empty($settings['progress_type'])) { $this->addRenderAttribute('wrapper', 'class', 'progress-' . $settings['progress_type']); } $this->addRenderAttribute('progress-bar', [ 'class' => 'elementor-progress-bar', 'data-max' => $settings['percent']['size'], ]); $this->addRenderAttribute('inner_text', [ 'class' => 'elementor-progress-text', ]); $this->addInlineEditingAttributes('inner_text'); ?> = $settings['title'] ?>