counter.php (8834B)
1 <?php 2 namespace Elementor; 3 4 if ( ! defined( 'ABSPATH' ) ) { 5 exit; // Exit if accessed directly. 6 } 7 8 use Elementor\Core\Kits\Documents\Tabs\Global_Colors; 9 use Elementor\Core\Kits\Documents\Tabs\Global_Typography; 10 11 /** 12 * Elementor counter widget. 13 * 14 * Elementor widget that displays stats and numbers in an escalating manner. 15 * 16 * @since 1.0.0 17 */ 18 class Widget_Counter extends Widget_Base { 19 20 /** 21 * Get widget name. 22 * 23 * Retrieve counter widget name. 24 * 25 * @since 1.0.0 26 * @access public 27 * 28 * @return string Widget name. 29 */ 30 public function get_name() { 31 return 'counter'; 32 } 33 34 /** 35 * Get widget title. 36 * 37 * Retrieve counter widget title. 38 * 39 * @since 1.0.0 40 * @access public 41 * 42 * @return string Widget title. 43 */ 44 public function get_title() { 45 return esc_html__( 'Counter', 'elementor' ); 46 } 47 48 /** 49 * Get widget icon. 50 * 51 * Retrieve counter widget icon. 52 * 53 * @since 1.0.0 54 * @access public 55 * 56 * @return string Widget icon. 57 */ 58 public function get_icon() { 59 return 'eicon-counter'; 60 } 61 62 /** 63 * Retrieve the list of scripts the counter widget depended on. 64 * 65 * Used to set scripts dependencies required to run the widget. 66 * 67 * @since 1.3.0 68 * @access public 69 * 70 * @return array Widget scripts dependencies. 71 */ 72 public function get_script_depends() { 73 return [ 'jquery-numerator' ]; 74 } 75 76 /** 77 * Get widget keywords. 78 * 79 * Retrieve the list of keywords the widget belongs to. 80 * 81 * @since 2.1.0 82 * @access public 83 * 84 * @return array Widget keywords. 85 */ 86 public function get_keywords() { 87 return [ 'counter' ]; 88 } 89 90 /** 91 * Register counter widget controls. 92 * 93 * Adds different input fields to allow the user to change and customize the widget settings. 94 * 95 * @since 3.1.0 96 * @access protected 97 */ 98 protected function register_controls() { 99 $this->start_controls_section( 100 'section_counter', 101 [ 102 'label' => esc_html__( 'Counter', 'elementor' ), 103 ] 104 ); 105 106 $this->add_control( 107 'starting_number', 108 [ 109 'label' => esc_html__( 'Starting Number', 'elementor' ), 110 'type' => Controls_Manager::NUMBER, 111 'default' => 0, 112 'dynamic' => [ 113 'active' => true, 114 ], 115 ] 116 ); 117 118 $this->add_control( 119 'ending_number', 120 [ 121 'label' => esc_html__( 'Ending Number', 'elementor' ), 122 'type' => Controls_Manager::NUMBER, 123 'default' => 100, 124 'dynamic' => [ 125 'active' => true, 126 ], 127 ] 128 ); 129 130 $this->add_control( 131 'prefix', 132 [ 133 'label' => esc_html__( 'Number Prefix', 'elementor' ), 134 'type' => Controls_Manager::TEXT, 135 'dynamic' => [ 136 'active' => true, 137 ], 138 'default' => '', 139 'placeholder' => 1, 140 ] 141 ); 142 143 $this->add_control( 144 'suffix', 145 [ 146 'label' => esc_html__( 'Number Suffix', 'elementor' ), 147 'type' => Controls_Manager::TEXT, 148 'dynamic' => [ 149 'active' => true, 150 ], 151 'default' => '', 152 'placeholder' => esc_html__( 'Plus', 'elementor' ), 153 ] 154 ); 155 156 $this->add_control( 157 'duration', 158 [ 159 'label' => esc_html__( 'Animation Duration', 'elementor' ), 160 'type' => Controls_Manager::NUMBER, 161 'default' => 2000, 162 'min' => 100, 163 'step' => 100, 164 ] 165 ); 166 167 $this->add_control( 168 'thousand_separator', 169 [ 170 'label' => esc_html__( 'Thousand Separator', 'elementor' ), 171 'type' => Controls_Manager::SWITCHER, 172 'default' => 'yes', 173 'label_on' => esc_html__( 'Show', 'elementor' ), 174 'label_off' => esc_html__( 'Hide', 'elementor' ), 175 ] 176 ); 177 178 $this->add_control( 179 'thousand_separator_char', 180 [ 181 'label' => esc_html__( 'Separator', 'elementor' ), 182 'type' => Controls_Manager::SELECT, 183 'condition' => [ 184 'thousand_separator' => 'yes', 185 ], 186 'options' => [ 187 '' => 'Default', 188 '.' => 'Dot', 189 ' ' => 'Space', 190 ], 191 ] 192 ); 193 194 $this->add_control( 195 'title', 196 [ 197 'label' => esc_html__( 'Title', 'elementor' ), 198 'type' => Controls_Manager::TEXT, 199 'label_block' => true, 200 'dynamic' => [ 201 'active' => true, 202 ], 203 'default' => esc_html__( 'Cool Number', 'elementor' ), 204 'placeholder' => esc_html__( 'Cool Number', 'elementor' ), 205 ] 206 ); 207 208 $this->add_control( 209 'view', 210 [ 211 'label' => esc_html__( 'View', 'elementor' ), 212 'type' => Controls_Manager::HIDDEN, 213 'default' => 'traditional', 214 ] 215 ); 216 217 $this->end_controls_section(); 218 219 $this->start_controls_section( 220 'section_number', 221 [ 222 'label' => esc_html__( 'Number', 'elementor' ), 223 'tab' => Controls_Manager::TAB_STYLE, 224 ] 225 ); 226 227 $this->add_control( 228 'number_color', 229 [ 230 'label' => esc_html__( 'Text Color', 'elementor' ), 231 'type' => Controls_Manager::COLOR, 232 'global' => [ 233 'default' => Global_Colors::COLOR_PRIMARY, 234 ], 235 'selectors' => [ 236 '{{WRAPPER}} .elementor-counter-number-wrapper' => 'color: {{VALUE}};', 237 ], 238 ] 239 ); 240 241 $this->add_group_control( 242 Group_Control_Typography::get_type(), 243 [ 244 'name' => 'typography_number', 245 'global' => [ 246 'default' => Global_Typography::TYPOGRAPHY_PRIMARY, 247 ], 248 'selector' => '{{WRAPPER}} .elementor-counter-number-wrapper', 249 ] 250 ); 251 252 $this->add_group_control( 253 Group_Control_Text_Shadow::get_type(), 254 [ 255 'name' => 'number_shadow', 256 'selector' => '{{WRAPPER}} .elementor-counter-number-wrapper', 257 ] 258 ); 259 260 $this->end_controls_section(); 261 262 $this->start_controls_section( 263 'section_title', 264 [ 265 'label' => esc_html__( 'Title', 'elementor' ), 266 'tab' => Controls_Manager::TAB_STYLE, 267 ] 268 ); 269 270 $this->add_control( 271 'title_color', 272 [ 273 'label' => esc_html__( 'Text Color', 'elementor' ), 274 'type' => Controls_Manager::COLOR, 275 'global' => [ 276 'default' => Global_Colors::COLOR_SECONDARY, 277 ], 278 'selectors' => [ 279 '{{WRAPPER}} .elementor-counter-title' => 'color: {{VALUE}};', 280 ], 281 ] 282 ); 283 284 $this->add_group_control( 285 Group_Control_Typography::get_type(), 286 [ 287 'name' => 'typography_title', 288 'global' => [ 289 'default' => Global_Typography::TYPOGRAPHY_SECONDARY, 290 ], 291 'selector' => '{{WRAPPER}} .elementor-counter-title', 292 ] 293 ); 294 295 $this->add_group_control( 296 Group_Control_Text_Shadow::get_type(), 297 [ 298 'name' => 'title_shadow', 299 'selector' => '{{WRAPPER}} .elementor-counter-title', 300 ] 301 ); 302 303 $this->end_controls_section(); 304 } 305 306 /** 307 * Render counter widget output in the editor. 308 * 309 * Written as a Backbone JavaScript template and used to generate the live preview. 310 * 311 * @since 2.9.0 312 * @access protected 313 */ 314 protected function content_template() { 315 ?> 316 <# view.addRenderAttribute( 'counter-title', { 317 'class': 'elementor-counter-title' 318 } ); 319 320 view.addInlineEditingAttributes( 'counter-title' ); 321 #> 322 <div class="elementor-counter"> 323 <div class="elementor-counter-number-wrapper"> 324 <span class="elementor-counter-number-prefix">{{{ settings.prefix }}}</span> 325 <span class="elementor-counter-number" data-duration="{{ settings.duration }}" data-to-value="{{ settings.ending_number }}" data-delimiter="{{ settings.thousand_separator ? settings.thousand_separator_char || ',' : '' }}">{{{ settings.starting_number }}}</span> 326 <span class="elementor-counter-number-suffix">{{{ settings.suffix }}}</span> 327 </div> 328 <# if ( settings.title ) { 329 #><div {{{ view.getRenderAttributeString( 'counter-title' ) }}}>{{{ settings.title }}}</div><# 330 } #> 331 </div> 332 <?php 333 } 334 335 /** 336 * Render counter widget output on the frontend. 337 * 338 * Written in PHP and used to generate the final HTML. 339 * 340 * @since 1.0.0 341 * @access protected 342 */ 343 protected function render() { 344 $settings = $this->get_settings_for_display(); 345 346 $this->add_render_attribute( 'counter', [ 347 'class' => 'elementor-counter-number', 348 'data-duration' => $settings['duration'], 349 'data-to-value' => $settings['ending_number'], 350 'data-from-value' => $settings['starting_number'], 351 ] ); 352 353 if ( ! empty( $settings['thousand_separator'] ) ) { 354 $delimiter = empty( $settings['thousand_separator_char'] ) ? ',' : $settings['thousand_separator_char']; 355 $this->add_render_attribute( 'counter', 'data-delimiter', $delimiter ); 356 } 357 358 $this->add_render_attribute( 'counter-title', 'class', 'elementor-counter-title' ); 359 360 $this->add_inline_editing_attributes( 'counter-title' ); 361 ?> 362 <div class="elementor-counter"> 363 <div class="elementor-counter-number-wrapper"> 364 <span class="elementor-counter-number-prefix"><?php $this->print_unescaped_setting( 'prefix' ); ?></span> 365 <span <?php $this->print_render_attribute_string( 'counter' ); ?>><?php $this->print_unescaped_setting( 'starting_number' ); ?></span> 366 <span class="elementor-counter-number-suffix"><?php $this->print_unescaped_setting( 'suffix' ); ?></span> 367 </div> 368 <?php if ( $settings['title'] ) : ?> 369 <div <?php $this->print_render_attribute_string( 'counter-title' ); ?>><?php $this->print_unescaped_setting( 'title' ); ?></div> 370 <?php endif; ?> 371 </div> 372 <?php 373 } 374 }