Elep

<?php
namespace calmorCore\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Background;
use WP_Query;

// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

/**
 * Text Typing Effect
 *
 * Elementor widget for text typing effect.
 *
 * @since 1.7.0
 */
class calmor_progress extends Widget_Base {

public function get_name() {
        return 'calmor_progress';
    }

public function get_title() {
        return __( 'calmer Progress', 'calmor-core' );
    }

public function get_icon() {
        return 'eicon-device-desktop';
    }

public function get_categories() {
        return [ 'calmor-elements' ];
    }

public function get_style_depends() {
        return [ 'appart-style', 'owl-carousel' ];
    }

public function get_script_depends() {
        return [ 'owl-carousel' ];
    }

protected function _register_controls() {
      
        $progresss = new \Elementor\Repeater();

$this->start_controls_section(
            'progress_features_sec', [
                'label' => __( 'Progress Member', 'calmor-core' ),
            ]
        );
        $progresss->add_control(
            'progresss_title', [
                'label' => __( 'Progress Title', 'calmor-core' ),
                'type' => Controls_Manager::TEXT,
                'label_block' => true,
                'default' => 'WordPress Development'
            ]
        );

$progresss->add_control(
            'progresss_number', [
                'label' => __( 'Progress Number', 'calmor-core' ),
                'type' => Controls_Manager::TEXT,
                'label_block' => true,
                'default' => '50'
            ]
        );

$this->add_control(
            'feature_progresss', [
                'label' => __( 'progresss Info', 'calmor-core' ),
                'type' => Controls_Manager::REPEATER,
                'title_field' => '{{{ progresss_title }}}',
                'fields' => $progresss->get_controls(),
            ]
        );
    $this->end_controls_section();
    
    /**
    * Style Section
    */
    $this->start_controls_section(
        'style_sec_one',
        [
            'label' => __( 'Style Progress', 'calmor-core' ),
            'tab' => Controls_Manager::TAB_STYLE
        ]
    );
 
    $this->add_control(
        'text_color', [
            'label'     => esc_html__('Title Text Color', 'calmor-core'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => array(
                '{{WRAPPER}} h5.process_title' => 'color: {{VALUE}};',
            ),
        ]
    );
    $this->add_group_control(
        Group_Control_Typography::get_type(), [
            'name' => 'text_typo',
            'selector' => '
                {{WRAPPER}} h5.process_title',
        ]
    );

$this->add_control(
        'number_color', [
            'label'     => esc_html__('Number Color', 'calmor-core'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => array(
                '{{WRAPPER}} span.process_number' => 'color: {{VALUE}};',
            ),
        ]
    );
    $this->add_group_control(
        Group_Control_Typography::get_type(), [
            'name' => 'numbar_typo',
            'selector' => '
                {{WRAPPER}} span.process_number',
        ]
    );

$this->add_control(
        'bar_backgro_color', [
            'label'     => esc_html__('Bar Background Color', 'calmor-core'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => array(
                '{{WRAPPER}} .progress' => 'background: {{VALUE}};',
            ),
        ]
    );

$this->add_group_control(
        \Elementor\Group_Control_Border::get_type(),
        [
            'name' => 'prgrass_bar_border_button',
            'label' => esc_html__( 'Border', 'calmor-core' ),
            'selector' => '{{WRAPPER}} .progress',
        ]
    );

$this->add_responsive_control(
        'progress_border_radius_button',
        [
            'label'      => esc_html__('Border Radius', 'calmor-core'),
            'type'       => \Elementor\Controls_Manager::DIMENSIONS,
            'size_units' => ['px', 'em', '%'],
            'selectors'  => [
                '{{WRAPPER}} .progress' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
        ]
    );

$this->add_control(
        'bar_color', [
            'label'     => esc_html__('Progress Bar Color', 'calmor-core'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => array(
                '{{WRAPPER}} .progress-bar' => 'background-color: {{VALUE}};',
            ),
        ]
    ); 
    
    $this->add_group_control(
        Group_Control_Typography::get_type(), [
            'name' => 'bar_typo',
            'selector' => '
                {{WRAPPER}} .progress-bar',
        ]
    );
    $this->end_controls_section();
}
    
    protected function render() {
    $this->load_widget_script(); 
    $settings = $this->get_settings();
    $feature_progresss = isset($settings['feature_progresss']) ? $settings['feature_progresss'] : '';

?>
    <div class="line_progress_bar">
        <?php
            if ( is_array( $feature_progresss ) && count( $feature_progresss ) > 0 ) {
            $i=1;
            foreach ( $feature_progresss as $progress_list ) { 
        ?> 
            <div class="single_items wow fadeInLeft" data-wow-delay="0.7s">
                <div class="progress_content">
                    <h5 class='process_title'><?php echo $progress_list['progresss_title'];  ?></h5>
                    <span class='process_number'><?php echo $progress_list['progresss_number'];?>%</span>
                </div>
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="<?php echo $progress_list['progresss_number'];?>" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
        <?php
        }
        }
        ?>
    </div>
    
 <?php 
    }

public function load_widget_script(){
		if( \Elementor\Plugin::$instance->editor->is_edit_mode() === true  ) {
			?>
            <script>
                ( function( $ ){

//    Progress-bar....//
                    $('.single_items').each(function () {
                        $(this).waypoint(
                            function () {
                                var progressBar = $('.progress-bar');
                                progressBar.each(function (indx) {
                                    $(this).css('width', $(this).attr('aria-valuenow') + '%');
                                });
                            },
                            {
                                triggerOnce: true,
                                offset: 'bottom-in-view',
                            }
                        );
                    });

// end Slider Script
                })(jQuery);
            </script>
			<?php
		}
	}

}