Widget_Counter()
Elementor counter widget.
Description
Elementor widget that displays stats and numbers in an escalating manner.
Changelog
Version | Description |
---|---|
1.0.0 | Introduced. |
Methods
- _content_template — Render counter widget output in the editor.
- _register_controls — Register counter widget controls.
- get_categories — Get widget categories.
- get_icon — Get widget icon.
- get_keywords — Get widget keywords.
- get_name — Get widget name.
- get_script_depends — Retrieve the list of scripts the counter widget depended on.
- get_title — Get widget title.
- render — Render counter widget output on the frontend.
Source
includes/widgets/counter.php
class Widget_Counter extends Widget_Base { /** * Get widget name. * * Retrieve counter widget name. * * @since 1.0.0 * @access public * * @return string Widget name. */ public function get_name() { return 'counter'; } /** * Get widget title. * * Retrieve counter widget title. * * @since 1.0.0 * @access public * * @return string Widget title. */ public function get_title() { return __( 'Counter', 'elementor' ); } /** * Get widget icon. * * Retrieve counter widget icon. * * @since 1.0.0 * @access public * * @return string Widget icon. */ public function get_icon() { return 'eicon-counter'; } /** * Get widget categories. * * Retrieve the list of categories the counter widget belongs to. * * Used to determine where to display the widget in the editor. * * @since 1.0.0 * @access public * * @return array Widget categories. */ public function get_categories() { return [ 'general-elements' ]; } /** * Retrieve the list of scripts the counter widget depended on. * * Used to set scripts dependencies required to run the widget. * * @since 1.3.0 * @access public * * @return array Widget scripts dependencies. */ public function get_script_depends() { return [ 'jquery-numerator' ]; } /** * Register counter widget controls. * * Adds different input fields to allow the user to change and customize the widget settings. * * @since 1.0.0 * @access protected */ protected function _register_controls() { $this->start_controls_section( 'section_counter', [ 'label' => __( 'Counter', 'elementor' ), ] ); $this->add_control( 'starting_number', [ 'label' => __( 'Starting Number', 'elementor' ), 'type' => Controls_Manager::NUMBER, 'default' => 0, ] ); $this->add_control( 'ending_number', [ 'label' => __( 'Ending Number', 'elementor' ), 'type' => Controls_Manager::NUMBER, 'default' => 100, ] ); $this->add_control( 'prefix', [ 'label' => __( 'Number Prefix', 'elementor' ), 'type' => Controls_Manager::TEXT, 'default' => '', 'placeholder' => 1, ] ); $this->add_control( 'suffix', [ 'label' => __( 'Number Suffix', 'elementor' ), 'type' => Controls_Manager::TEXT, 'default' => '', 'placeholder' => __( 'Plus', 'elementor' ), ] ); $this->add_control( 'duration', [ 'label' => __( 'Animation Duration', 'elementor' ), 'type' => Controls_Manager::NUMBER, 'default' => 2000, 'min' => 100, 'step' => 100, ] ); $this->add_control( 'thousand_separator', [ 'label' => __( 'Thousand Separator', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'yes', 'label_on' => __( 'Show', 'elementor' ), 'label_off' => __( 'Hide', 'elementor' ), ] ); $this->add_control( 'title', [ 'label' => __( 'Title', 'elementor' ), 'type' => Controls_Manager::TEXT, 'label_block' => true, 'default' => __( 'Cool Number', 'elementor' ), 'placeholder' => __( 'Cool Number', 'elementor' ), ] ); $this->add_control( 'view', [ 'label' => __( 'View', 'elementor' ), 'type' => Controls_Manager::HIDDEN, 'default' => 'traditional', ] ); $this->end_controls_section(); $this->start_controls_section( 'section_number', [ 'label' => __( 'Number', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'number_color', [ 'label' => __( 'Text Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'scheme' => [ 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_1, ], 'selectors' => [ '{{WRAPPER}} .elementor-counter-number-wrapper' => 'color: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'typography_number', 'scheme' => Scheme_Typography::TYPOGRAPHY_1, 'selector' => '{{WRAPPER}} .elementor-counter-number-wrapper', ] ); $this->end_controls_section(); $this->start_controls_section( 'section_title', [ 'label' => __( 'Title', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'title_color', [ 'label' => __( 'Text Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'scheme' => [ 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_2, ], 'selectors' => [ '{{WRAPPER}} .elementor-counter-title' => 'color: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'typography_title', 'scheme' => Scheme_Typography::TYPOGRAPHY_2, 'selector' => '{{WRAPPER}} .elementor-counter-title', ] ); $this->end_controls_section(); } /** * Render counter widget output in the editor. * * Written as a Backbone JavaScript template and used to generate the live preview. * * @since 1.0.0 * @access protected */ protected function _content_template() { ?> <div class="elementor-counter"> <div class="elementor-counter-number-wrapper"> <span class="elementor-counter-number-prefix">{{{ settings.prefix }}}</span> <span class="elementor-counter-number" data-duration="{{ settings.duration }}" data-to-value="{{ settings.ending_number }}" data-delimiter="{{ settings.thousand_separator ? ',' : '' }}">{{{ settings.starting_number }}}</span> <span class="elementor-counter-number-suffix">{{{ settings.suffix }}}</span> </div> <# if ( settings.title ) { #><div class="elementor-counter-title">{{{ settings.title }}}</div><# } #> </div> <?php } /** * Render counter 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->get_settings(); $this->add_render_attribute( 'counter', [ 'class' => 'elementor-counter-number', 'data-duration' => $settings['duration'], 'data-to-value' => $settings['ending_number'], ] ); if ( ! empty( $settings['thousand_separator'] ) ) { $this->add_render_attribute( 'counter', 'data-delimiter', ',' ); } ?> <div class="elementor-counter"> <div class="elementor-counter-number-wrapper"> <span class="elementor-counter-number-prefix"><?php echo $settings['prefix']; ?></span> <span <?php echo $this->get_render_attribute_string( 'counter' ); ?>><?php echo $settings['starting_number']; ?></span> <span class="elementor-counter-number-suffix"><?php echo $settings['suffix']; ?></span> </div> <?php if ( $settings['title'] ) : ?> <div class="elementor-counter-title"><?php echo $settings['title']; ?></div> <?php endif; ?> </div> <?php } }