PluginProbe
Elementor Website Builder – more than just a page builder / 3.20.2
Elementor Website Builder – more than just a page builder v3.20.2
4.3.0-beta2 4.3.0-beta1 4.2.4 4.2.3 4.2.2 4.2.1 4.2.0 4.1.5 4.2.0-beta2 4.2.0-dev2 4.2.0-beta1 4.1.4 4.1.3 4.1.2 4.1.1 4.1.0 4.1.0-beta3 4.1.0-dev3 4.0.9 4.1.0-beta2 4.1.0-dev2 4.0.8 4.1.0-beta1 4.1.0-dev1 4.0.7 All 451 releases
← All changes | includes/widgets/counter.php +27 -365 4.1.43.20.2 View file →
@@ -86,31 +86,9 @@
86 86 public function get_keywords() {
87 87 return [ 'counter' ];
88 88 }
89 89
90 - protected function is_dynamic_content(): bool {
91 - return false;
92 - }
93 -
94 90 /**
95 - * Get style dependencies.
96 - *
97 - * Retrieve the list of style dependencies the widget requires.
98 - *
99 - * @since 3.24.0
100 - * @access public
101 - *
102 - * @return array Widget style dependencies.
103 - */
104 - public function get_style_depends(): array {
105 - return [ 'widget-counter' ];
106 - }
107 -
108 - public function has_widget_inner_wrapper(): bool {
109 - return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
110 - }
111 -
112 - /**
113 91 * Register counter widget controls.
114 92 *
115 93 * Adds different input fields to allow the user to change and customize the widget settings.
116 94 *
@@ -160,8 +138,9 @@
160 138 'ai' => [
161 139 'active' => false,
162 140 ],
163 141 'default' => '',
142 + 'placeholder' => 1,
164 143 ]
165 144 );
166 145
167 146 $this->add_control(
@@ -175,8 +154,9 @@
175 154 'ai' => [
176 155 'active' => false,
177 156 ],
178 157 'default' => '',
158 + 'placeholder' => esc_html__( 'Plus', 'elementor' ),
179 159 ]
180 160 );
181 161
182 162 $this->add_control(
@@ -224,269 +204,19 @@
224 204 [
225 205 'label' => esc_html__( 'Title', 'elementor' ),
226 206 'type' => Controls_Manager::TEXT,
227 207 'label_block' => true,
228 - 'separator' => 'before',
229 208 'dynamic' => [
230 209 'active' => true,
231 210 ],
232 211 'default' => esc_html__( 'Cool Number', 'elementor' ),
212 + 'placeholder' => esc_html__( 'Cool Number', 'elementor' ),
233 213 ]
234 214 );
235 215
236 - $this->add_control(
237 - 'title_tag',
238 - [
239 - 'label' => esc_html__( 'Title HTML Tag', 'elementor' ),
240 - 'type' => Controls_Manager::SELECT,
241 - 'options' => [
242 - 'h1' => 'H1',
243 - 'h2' => 'H2',
244 - 'h3' => 'H3',
245 - 'h4' => 'H4',
246 - 'h5' => 'H5',
247 - 'h6' => 'H6',
248 - 'div' => 'div',
249 - 'span' => 'span',
250 - 'p' => 'p',
251 - ],
252 - 'default' => 'div',
253 - 'condition' => [
254 - 'title!' => '',
255 - ],
256 - ]
257 - );
258 -
259 216 $this->end_controls_section();
260 217
261 218 $this->start_controls_section(
262 - 'section_counter_style',
263 - [
264 - 'label' => esc_html__( 'Counter', 'elementor' ),
265 - 'tab' => Controls_Manager::TAB_STYLE,
266 - ]
267 - );
268 -
269 - $this->add_responsive_control(
270 - 'title_position',
271 - [
272 - 'label' => esc_html__( 'Title Position', 'elementor' ),
273 - 'type' => Controls_Manager::CHOOSE,
274 - 'options' => [
275 - 'before' => [
276 - 'title' => esc_html__( 'Before', 'elementor' ),
277 - 'icon' => 'eicon-v-align-top',
278 - ],
279 - 'after' => [
280 - 'title' => esc_html__( 'After', 'elementor' ),
281 - 'icon' => 'eicon-v-align-bottom',
282 - ],
283 - 'start' => [
284 - 'title' => esc_html__( 'Start', 'elementor' ),
285 - 'icon' => 'eicon-h-align-left',
286 - ],
287 - 'end' => [
288 - 'title' => esc_html__( 'End', 'elementor' ),
289 - 'icon' => 'eicon-h-align-right',
290 - ],
291 - ],
292 - 'selectors_dictionary' => [
293 - 'before' => 'flex-direction: column;',
294 - 'after' => 'flex-direction: column-reverse;',
295 - 'start' => 'flex-direction: row;',
296 - 'end' => 'flex-direction: row-reverse;',
297 - ],
298 - 'selectors' => [
299 - '{{WRAPPER}} .elementor-counter' => '{{VALUE}}',
300 - ],
301 - 'classes' => 'elementor-control-start-end',
302 - 'condition' => [
303 - 'title!' => '',
304 - ],
305 - ]
306 - );
307 -
308 - $this->add_responsive_control(
309 - 'title_horizontal_alignment',
310 - [
311 - 'label' => esc_html__( 'Title Horizontal Alignment', 'elementor' ),
312 - 'type' => Controls_Manager::CHOOSE,
313 - 'options' => [
314 - 'start' => [
315 - 'title' => esc_html__( 'Start', 'elementor' ),
316 - 'icon' => 'eicon-h-align-left',
317 - ],
318 - 'center' => [
319 - 'title' => esc_html__( 'Center', 'elementor' ),
320 - 'icon' => 'eicon-h-align-center',
321 - ],
322 - 'end' => [
323 - 'title' => esc_html__( 'End', 'elementor' ),
324 - 'icon' => 'eicon-h-align-right',
325 - ],
326 - ],
327 - 'separator' => 'before',
328 - 'classes' => 'elementor-control-start-end',
329 - 'selectors' => [
330 - '{{WRAPPER}} .elementor-counter-title' => 'justify-content: {{VALUE}};',
331 - ],
332 - 'condition' => [
333 - 'title!' => '',
334 - ],
335 - ]
336 - );
337 -
338 - $this->add_responsive_control(
339 - 'title_vertical_alignment',
340 - [
341 - 'label' => esc_html__( 'Title Vertical Alignment', 'elementor' ),
342 - 'type' => Controls_Manager::CHOOSE,
343 - 'options' => [
344 - 'start' => [
345 - 'title' => esc_html__( 'Top', 'elementor' ),
346 - 'icon' => 'eicon-v-align-top',
347 - ],
348 - 'center' => [
349 - 'title' => esc_html__( 'Middle', 'elementor' ),
350 - 'icon' => 'eicon-v-align-middle',
351 - ],
352 - 'end' => [
353 - 'title' => esc_html__( 'Bottom', 'elementor' ),
354 - 'icon' => 'eicon-v-align-bottom',
355 - ],
356 - ],
357 - 'selectors' => [
358 - '{{WRAPPER}} .elementor-counter-title' => 'align-items: {{VALUE}};',
359 - ],
360 - 'condition' => [
361 - 'title!' => '',
362 - 'title_position' => [ 'start', 'end' ],
363 - ],
364 - ]
365 - );
366 -
367 - $this->add_responsive_control(
368 - 'title_gap',
369 - [
370 - 'label' => esc_html__( 'Title Gap', 'elementor' ),
371 - 'type' => Controls_Manager::SLIDER,
372 - 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
373 - 'selectors' => [
374 - '{{WRAPPER}} .elementor-counter' => 'gap: {{SIZE}}{{UNIT}};',
375 - ],
376 - 'condition' => [
377 - 'title!' => '',
378 - 'title_position' => [ '', 'before', 'after' ],
379 - ],
380 - ]
381 - );
382 -
383 - $this->add_responsive_control(
384 - 'number_position',
385 - [
386 - 'label' => esc_html__( 'Number Position', 'elementor' ),
387 - 'type' => Controls_Manager::CHOOSE,
388 - 'options' => [
389 - 'start' => [
390 - 'title' => esc_html__( 'Start', 'elementor' ),
391 - 'icon' => 'eicon-h-align-left',
392 - ],
393 - 'center' => [
394 - 'title' => esc_html__( 'Center', 'elementor' ),
395 - 'icon' => 'eicon-h-align-center',
396 - ],
397 - 'end' => [
398 - 'title' => esc_html__( 'End', 'elementor' ),
399 - 'icon' => 'eicon-h-align-right',
400 - ],
401 - 'stretch' => [
402 - 'title' => esc_html__( 'Stretch', 'elementor' ),
403 - 'icon' => 'eicon-grow',
404 - ],
405 - ],
406 - 'classes' => 'elementor-control-start-end',
407 - 'selectors_dictionary' => [
408 - 'start' => 'text-align: {{VALUE}}; --counter-prefix-grow: 0; --counter-suffix-grow: 1; --counter-number-grow: 0;',
409 - 'center' => 'text-align: {{VALUE}}; --counter-prefix-grow: 1; --counter-suffix-grow: 1; --counter-number-grow: 0;',
410 - 'end' => 'text-align: {{VALUE}}; --counter-prefix-grow: 1; --counter-suffix-grow: 0; --counter-number-grow: 0;',
411 - 'stretch' => '--counter-prefix-grow: 0; --counter-suffix-grow: 0; --counter-number-grow: 1;',
412 - ],
413 - 'selectors' => [
414 - '{{WRAPPER}} .elementor-counter-number-wrapper' => '{{VALUE}}',
415 - ],
416 - 'separator' => 'before',
417 - ]
418 - );
419 -
420 - $this->add_responsive_control(
421 - 'number_alignment',
422 - [
423 - 'label' => esc_html__( 'Number Alignment', 'elementor' ),
424 - 'type' => Controls_Manager::CHOOSE,
425 - 'options' => [
426 - 'start' => [
427 - 'title' => esc_html__( 'Start', 'elementor' ),
428 - 'icon' => 'eicon-text-align-left',
429 - ],
430 - 'center' => [
431 - 'title' => esc_html__( 'Center', 'elementor' ),
432 - 'icon' => 'eicon-text-align-center',
433 - ],
434 - 'end' => [
435 - 'title' => esc_html__( 'End', 'elementor' ),
436 - 'icon' => 'eicon-text-align-right',
437 - ],
438 - ],
439 - 'classes' => 'elementor-control-start-end',
440 - 'selectors' => [
441 - '{{WRAPPER}} .elementor-counter-number' => 'text-align: {{VALUE}};',
442 - ],
443 - 'condition' => [
444 - 'number_position' => 'stretch',
445 - ],
446 - ]
447 - );
448 -
449 - $this->add_responsive_control(
450 - 'number_gap',
451 - [
452 - 'label' => esc_html__( 'Number Gap', 'elementor' ),
453 - 'type' => Controls_Manager::SLIDER,
454 - 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
455 - 'selectors' => [
456 - '{{WRAPPER}} .elementor-counter-number-wrapper' => 'gap: {{SIZE}}{{UNIT}};',
457 - ],
458 - 'conditions' => [
459 - 'relation' => 'and',
460 - 'terms' => [
461 - [
462 - 'name' => 'number_position',
463 - 'operator' => '!==',
464 - 'value' => 'stretch',
465 - ],
466 - [
467 - 'relation' => 'or',
468 - 'terms' => [
469 - [
470 - 'name' => 'prefix',
471 - 'operator' => '!==',
472 - 'value' => '',
473 - ],
474 - [
475 - 'name' => 'suffix',
476 - 'operator' => '!==',
477 - 'value' => '',
478 - ],
479 - ],
480 - ],
481 - ],
482 - ],
483 - ]
484 - );
485 -
486 - $this->end_controls_section();
487 -
488 - $this->start_controls_section(
489 219 'section_number',
490 220 [
491 221 'label' => esc_html__( 'Number', 'elementor' ),
492 222 'tab' => Controls_Manager::TAB_STYLE,
@@ -540,11 +270,8 @@
540 270 'section_title',
541 271 [
542 272 'label' => esc_html__( 'Title', 'elementor' ),
543 273 'tab' => Controls_Manager::TAB_STYLE,
544 - 'condition' => [
545 - 'title!' => '',
546 - ],
547 274 ]
548 275 );
549 276
550 277 $this->add_control(
@@ -557,11 +284,8 @@
557 284 ],
558 285 'selectors' => [
559 286 '{{WRAPPER}} .elementor-counter-title' => 'color: {{VALUE}};',
560 287 ],
561 - 'condition' => [
562 - 'title!' => '',
563 - ],
564 288 ]
565 289 );
566 290
567 291 $this->add_group_control(
@@ -571,11 +295,8 @@
571 295 'global' => [
572 296 'default' => Global_Typography::TYPOGRAPHY_SECONDARY,
573 297 ],
574 298 'selector' => '{{WRAPPER}} .elementor-counter-title',
575 - 'condition' => [
576 - 'title!' => '',
577 - ],
578 299 ]
579 300 );
580 301
581 302 $this->add_group_control(
@@ -582,11 +303,8 @@
582 303 Group_Control_Text_Stroke::get_type(),
583 304 [
584 305 'name' => 'title_stroke',
585 306 'selector' => '{{WRAPPER}} .elementor-counter-title',
586 - 'condition' => [
587 - 'title!' => '',
588 - ],
589 307 ]
590 308 );
591 309
592 310 $this->add_group_control(
@@ -593,11 +311,8 @@
593 311 Group_Control_Text_Shadow::get_type(),
594 312 [
595 313 'name' => 'title_shadow',
596 314 'selector' => '{{WRAPPER}} .elementor-counter-title',
597 - 'condition' => [
598 - 'title!' => '',
599 - ],
600 315 ]
601 316 );
602 317
603 318 $this->end_controls_section();
@@ -612,47 +327,23 @@
612 327 * @access protected
613 328 */
614 329 protected function content_template() {
615 330 ?>
616 - <#
617 - view.addRenderAttribute( 'elementor-counter', 'class', 'elementor-counter' );
331 + <# view.addRenderAttribute( 'counter-title', {
332 + 'class': 'elementor-counter-title'
333 + } );
618 334
619 - view.addRenderAttribute( 'counter-number', 'class', 'elementor-counter-number-wrapper' );
620 -
621 - view.addRenderAttribute(
622 - 'counter',
623 - {
624 - 'class': 'elementor-counter-number',
625 - 'data-duration': settings.duration,
626 - 'data-to-value': settings.ending_number,
627 - 'data-from-value': settings.starting_number,
628 - }
629 - );
630 -
631 - if ( settings.thousand_separator ) {
632 - const delimiter = settings.thousand_separator_char ? settings.thousand_separator_char : ',';
633 - view.addRenderAttribute( 'counter', 'data-delimiter', delimiter );
634 - }
635 -
636 - view.addRenderAttribute( 'prefix', 'class', 'elementor-counter-number-prefix' );
637 -
638 - view.addRenderAttribute( 'suffix', 'class', 'elementor-counter-number-suffix' );
639 -
640 - view.addRenderAttribute( 'counter-title', 'class', 'elementor-counter-title' );
641 -
642 335 view.addInlineEditingAttributes( 'counter-title' );
643 -
644 - const titleTag = elementor.helpers.validateHTMLTag( settings.title_tag );
645 336 #>
646 - <div {{{ view.getRenderAttributeString( 'elementor-counter' ) }}}>
337 + <div class="elementor-counter">
338 + <div class="elementor-counter-number-wrapper">
339 + <span class="elementor-counter-number-prefix">{{{ settings.prefix }}}</span>
340 + <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>
341 + <span class="elementor-counter-number-suffix">{{{ settings.suffix }}}</span>
342 + </div>
647 343 <# if ( settings.title ) {
648 - #><{{ titleTag }} {{{ view.getRenderAttributeString( 'counter-title' ) }}}>{{{ elementor.helpers.sanitize( settings.title, { ALLOW_DATA_ATTR: false } ) }}}</{{ titleTag }}><#
344 + #><div {{{ view.getRenderAttributeString( 'counter-title' ) }}}>{{{ settings.title }}}</div><#
649 345 } #>
650 - <div {{{ view.getRenderAttributeString( 'counter-number' ) }}}>
651 - <span {{{ view.getRenderAttributeString( 'prefix' ) }}}>{{ settings.prefix }}</span>
652 - <span {{{ view.getRenderAttributeString( 'counter' ) }}}>{{ settings.starting_number }}</span>
653 - <span {{{ view.getRenderAttributeString( 'suffix' ) }}}>{{ settings.suffix }}</span>
654 - </div>
655 346 </div>
656 347 <?php
657 348 }
658 349
@@ -666,62 +357,33 @@
666 357 */
667 358 protected function render() {
668 359 $settings = $this->get_settings_for_display();
669 360
670 - $this->add_render_attribute( 'elementor-counter', 'class', 'elementor-counter' );
361 + $this->add_render_attribute( 'counter', [
362 + 'class' => 'elementor-counter-number',
363 + 'data-duration' => $settings['duration'],
364 + 'data-to-value' => $settings['ending_number'],
365 + 'data-from-value' => $settings['starting_number'],
366 + ] );
671 367
672 - $this->add_render_attribute( 'counter-number', 'class', 'elementor-counter-number-wrapper' );
673 -
674 - $this->add_render_attribute(
675 - 'counter',
676 - [
677 - 'class' => 'elementor-counter-number',
678 - 'data-duration' => $settings['duration'],
679 - 'data-to-value' => $settings['ending_number'],
680 - 'data-from-value' => $settings['starting_number'],
681 - ]
682 - );
683 -
684 368 if ( ! empty( $settings['thousand_separator'] ) ) {
685 369 $delimiter = empty( $settings['thousand_separator_char'] ) ? ',' : $settings['thousand_separator_char'];
686 370 $this->add_render_attribute( 'counter', 'data-delimiter', $delimiter );
687 371 }
688 372
689 - $this->add_render_attribute( 'prefix', 'class', 'elementor-counter-number-prefix' );
690 -
691 - $this->add_render_attribute( 'suffix', 'class', 'elementor-counter-number-suffix' );
692 -
693 373 $this->add_render_attribute( 'counter-title', 'class', 'elementor-counter-title' );
694 374
695 375 $this->add_inline_editing_attributes( 'counter-title' );
696 -
697 - $title_tag = Utils::validate_html_tag( $settings['title_tag'] );
698 376 ?>
699 - <div <?php $this->print_render_attribute_string( 'elementor-counter' ); ?>>
700 - <?php
701 - if ( $settings['title'] ) :
702 - ?><<?php Utils::print_validated_html_tag( $title_tag ); ?> <?php $this->print_render_attribute_string( 'counter-title' ); ?>><?php echo wp_kses_post( $this->get_settings_for_display( 'title' ) ); ?></<?php Utils::print_validated_html_tag( $title_tag ); ?>><?php
703 - endif;
704 - ?>
705 - <div <?php $this->print_render_attribute_string( 'counter-number' ); ?>>
706 - <span <?php $this->print_render_attribute_string( 'prefix' ); ?>><?php echo wp_kses_post( $settings['prefix'] ); ?></span>
707 - <span <?php $this->print_render_attribute_string( 'counter' ); ?>><?php echo wp_kses_post( $settings['starting_number'] ); ?></span>
708 - <span <?php $this->print_render_attribute_string( 'suffix' ); ?>><?php echo wp_kses_post( $settings['suffix'] ); ?></span>
377 + <div class="elementor-counter">
378 + <div class="elementor-counter-number-wrapper">
379 + <span class="elementor-counter-number-prefix"><?php $this->print_unescaped_setting( 'prefix' ); ?></span>
380 + <span <?php $this->print_render_attribute_string( 'counter' ); ?>><?php $this->print_unescaped_setting( 'starting_number' ); ?></span>
381 + <span class="elementor-counter-number-suffix"><?php $this->print_unescaped_setting( 'suffix' ); ?></span>
709 382 </div>
383 + <?php if ( $settings['title'] ) : ?>
384 + <div <?php $this->print_render_attribute_string( 'counter-title' ); ?>><?php $this->print_unescaped_setting( 'title' ); ?></div>
385 + <?php endif; ?>
710 386 </div>
711 387 <?php
712 - }
713 -
714 - public function render_markdown(): string {
715 - $settings = $this->get_settings_for_display();
716 - $number = $settings['ending_number'] ?? '';
717 - $prefix = $settings['prefix'] ?? '';
718 - $suffix = $settings['suffix'] ?? '';
719 - $title = Utils::html_to_plain_text( $settings['title'] ?? '' );
720 - $value = $prefix . $number . $suffix;
721 - if ( empty( $value ) && empty( $title ) ) {
722 - return '';
723 - }
724 - $parts = array_filter( [ $value, $title ] );
725 - return implode( ' - ', $parts );
726 388 }
727 389 }