PluginProbe
King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder / 51.1.37
King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder v51.1.37
51.1.83 51.1.82 51.1.81 51.1.79 51.1.78 51.1.77 51.1.76 51.1.74 51.1.75 51.1.65 51.1.64 51.1.63 trunk 51.1.14 51.1.2 51.1.35 51.1.36 51.1.37 51.1.38 51.1.39 51.1.44 51.1.45 51.1.46 51.1.47 51.1.49 All 37 releases
king-addons / includes / widgets / Smooth_Counter / Smooth_Counter.php

Smooth_Counter.php in King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder 51.1.37, at includes/widgets/Smooth_Counter/Smooth_Counter.php

550 lines 19.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php /** @noinspection SpellCheckingInspection, DuplicatedCode, PhpUnused */
2
3 namespace King_Addons;
4
5 use Elementor\Controls_Manager;
6 use Elementor\Group_Control_Background;
7 use Elementor\Group_Control_Border;
8 use Elementor\Group_Control_Box_Shadow;
9 use Elementor\Group_Control_Typography;
10 use Elementor\Widget_Base;
11
12 if (!defined('ABSPATH')) {
13 exit; // Exit if accessed directly.
14 }
15
16
17
18 class Smooth_Counter extends Widget_Base
19 {
20
21
22 public function get_name(): string
23 {
24 return 'king-addons-smooth-counter';
25 }
26
27 public function get_title(): string
28 {
29 return esc_html__('Smooth Counter', 'king-addons');
30 }
31
32 public function get_icon(): string
33 {
34 return 'king-addons-icon king-addons-smooth-counter';
35 }
36
37 public function get_script_depends(): array
38 {
39 return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-odometer-odometer'];
40 }
41
42 public function get_style_depends(): array
43 {
44 return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-odometer-minimal', KING_ADDONS_ASSETS_UNIQUE_KEY . '-smooth-counter-style'];
45 }
46
47 public function get_categories(): array
48 {
49 return ['king-addons'];
50 }
51
52 public function get_keywords(): array
53 {
54 return ['counter', 'odometer', 'smooth counter', 'flip countdown', 'flipping countdown', 'flipping', 'flip',
55 'countdown', 'clock', 'time', 'event',
56 'timer', 'classic', 'circle', 'rotate', 'flip clock', 'flip', 'rounded', '24', '12', 'day', 'daily', 'days',
57 'hour', 'hours', 'minute', 'minutes', 'second', 'seconds', 'counter', 'digits',
58 'flip-countdown', 'king addons', 'king', 'addons', 'kingaddons', 'king-addons'];
59 }
60
61 public function get_custom_help_url()
62 {
63 return 'mailto:bug@kingaddons.com?subject=Bug Report - King Addons&body=Please describe the issue';
64 }
65
66 protected function register_controls(): void
67 {
68
69 $this->start_controls_section(
70 'king_addons_smooth_counter_section',
71 [
72 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Smooth Counter', 'king-addons'),
73 'tab' => Controls_Manager::TAB_CONTENT
74 ]
75 );
76
77 $this->add_control(
78 'king_addons_smooth_counter_start',
79 [
80 'label' => esc_html__('Start Number', 'king-addons'),
81 'type' => Controls_Manager::NUMBER,
82 'step' => 0.01,
83 'default' => 100,
84 ]
85 );
86
87 $this->add_control(
88 'king_addons_smooth_counter_finish',
89 [
90 'label' => esc_html__('Finish Number', 'king-addons'),
91 'type' => Controls_Manager::NUMBER,
92 'step' => 0.01,
93 'default' => 999,
94 ]
95 );
96
97 $this->add_control(
98 'king_addons_smooth_counter_anim_duration',
99 [
100 'label' => esc_html__('Animation Speed', 'king-addons'),
101 'type' => Controls_Manager::NUMBER,
102 'min' => 50,
103 'step' => 50,
104 'default' => 600,
105 ]
106 );
107
108 $this->add_control(
109 'king_addons_smooth_counter_format',
110 array(
111 'label' => esc_html__('Format', 'king-addons'),
112 'type' => Controls_Manager::SELECT,
113 'options' => array(
114 '(,ddd)' => esc_html__('12,345,678', 'king-addons'),
115 '(,ddd).dd' => esc_html__('12,345,678.09', 'king-addons'),
116 '(.ddd),dd' => esc_html__('12.345.678,09', 'king-addons'),
117 '( ddd),dd' => esc_html__('12 345 678,09', 'king-addons'),
118 'd' => esc_html__('12345678', 'king-addons'),
119 ),
120 'default' => '(,ddd).dd',
121 )
122 );
123
124 $this->add_control(
125 'king_addons_smooth_counter_before_text',
126 [
127 'label' => esc_html__('Before Text/Symbol', 'king-addons'),
128 'type' => Controls_Manager::TEXT,
129 'separator' => 'before',
130 ]
131 );
132
133 $this->add_control(
134 'king_addons_smooth_counter_after_text',
135 [
136 'label' => esc_html__('After Text/Symbol', 'king-addons'),
137 'type' => Controls_Manager::TEXT,
138 ]
139 );
140
141 $this->add_control(
142 'king_addons_smooth_counter_title',
143 [
144 'label' => esc_html__('Title', 'king-addons'),
145 'type' => Controls_Manager::TEXT,
146 'separator' => 'before',
147 ]
148 );
149
150 $this->end_controls_section();
151
152 $this->start_controls_section(
153 'king_addons_smooth_counter_style_section_number',
154 [
155 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Number', 'king-addons'),
156 'tab' => Controls_Manager::TAB_STYLE,
157 ]
158 );
159
160 $this->add_group_control(
161 Group_Control_Typography::get_type(),
162 [
163 'name' => 'king_addons_smooth_counter_typography',
164 'selector' => '{{WRAPPER}} .king-addons-smooth-counter-number',
165 ]
166 );
167
168 $this->add_control(
169 'king_addons_smooth_counter_typography_color',
170 [
171 'label' => esc_html__('Color', 'king-addons'),
172 'type' => Controls_Manager::COLOR,
173 'default' => '#000000',
174 'selectors' => [
175 '{{WRAPPER}} .king-addons-smooth-counter-number' => 'color: {{VALUE}}',
176 ],
177 ]
178 );
179
180 $this->add_responsive_control(
181 'king_addons_smooth_counter_align_number',
182 [
183 'label' => esc_html__('Align', 'king-addons'),
184 'type' => Controls_Manager::SELECT,
185 'options' => [
186 'start' => esc_html__('Start', 'king-addons'),
187 'center' => esc_html__('Center', 'king-addons'),
188 'end' => esc_html__('End', 'king-addons'),
189 ],
190 'default' => 'center',
191 'selectors' => [
192 '{{WRAPPER}} .king-addons-smooth-counter-inner' => 'justify-content: {{VALUE}};'
193 ],
194 ]
195 );
196
197 $this->add_responsive_control(
198 'king_addons_smooth_counter_margin_number',
199 [
200 'label' => esc_html__('Margin', 'king-addons'),
201 'type' => Controls_Manager::DIMENSIONS,
202 'size_units' => ['px', '%'],
203 'default' => [
204 'top' => 0,
205 'right' => 0,
206 'bottom' => 0,
207 'left' => 0,
208 'unit' => 'px',
209 ],
210 'selectors' => [
211 '{{WRAPPER}} .king-addons-smooth-counter-number' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
212 ]
213 ]
214 );
215
216 $this->end_controls_section();
217
218 $this->start_controls_section(
219 'king_addons_smooth_counter_style_section_before_text',
220 [
221 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Before Text/Symbol', 'king-addons'),
222 'tab' => Controls_Manager::TAB_STYLE,
223 ]
224 );
225
226 $this->add_group_control(
227 Group_Control_Typography::get_type(),
228 [
229 'name' => 'king_addons_smooth_counter_typography_before_text',
230 'selector' => '{{WRAPPER}} .king-addons-smooth-counter-before-text',
231 ]
232 );
233
234 $this->add_control(
235 'king_addons_smooth_counter_typography_color_before_text',
236 [
237 'label' => esc_html__('Color', 'king-addons'),
238 'type' => Controls_Manager::COLOR,
239 'default' => '#000000',
240 'selectors' => [
241 '{{WRAPPER}} .king-addons-smooth-counter-before-text' => 'color: {{VALUE}}',
242 ],
243 ]
244 );
245
246 $this->add_responsive_control(
247 'king_addons_smooth_counter_margin_before_text',
248 [
249 'label' => esc_html__('Margin', 'king-addons'),
250 'type' => Controls_Manager::DIMENSIONS,
251 'size_units' => ['px', '%'],
252 'default' => [
253 'top' => 0,
254 'right' => 0,
255 'bottom' => 0,
256 'left' => 0,
257 'unit' => 'px',
258 ],
259 'selectors' => [
260 '{{WRAPPER}} .king-addons-smooth-counter-before-text' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
261 ]
262 ]
263 );
264
265 $this->end_controls_section();
266
267 $this->start_controls_section(
268 'king_addons_smooth_counter_style_section_after_text',
269 [
270 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('After Text/Symbol', 'king-addons'),
271 'tab' => Controls_Manager::TAB_STYLE,
272 ]
273 );
274
275 $this->add_group_control(
276 Group_Control_Typography::get_type(),
277 [
278 'name' => 'king_addons_smooth_counter_typography_after_text',
279 'selector' => '{{WRAPPER}} .king-addons-smooth-counter-after-text',
280 ]
281 );
282
283 $this->add_control(
284 'king_addons_smooth_counter_typography_color_after_text',
285 [
286 'label' => esc_html__('Color', 'king-addons'),
287 'type' => Controls_Manager::COLOR,
288 'default' => '#000000',
289 'selectors' => [
290 '{{WRAPPER}} .king-addons-smooth-counter-after-text' => 'color: {{VALUE}}',
291 ],
292 ]
293 );
294
295 $this->add_responsive_control(
296 'king_addons_smooth_counter_margin_after_text',
297 [
298 'label' => esc_html__('Margin', 'king-addons'),
299 'type' => Controls_Manager::DIMENSIONS,
300 'size_units' => ['px', '%'],
301 'default' => [
302 'top' => 0,
303 'right' => 0,
304 'bottom' => 0,
305 'left' => 0,
306 'unit' => 'px',
307 ],
308 'selectors' => [
309 '{{WRAPPER}} .king-addons-smooth-counter-after-text' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
310 ]
311 ]
312 );
313
314 $this->end_controls_section();
315
316 $this->start_controls_section(
317 'king_addons_smooth_counter_style_section_title',
318 [
319 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Title', 'king-addons'),
320 'tab' => Controls_Manager::TAB_STYLE,
321 ]
322 );
323
324 $this->add_group_control(
325 Group_Control_Typography::get_type(),
326 [
327 'name' => 'king_addons_smooth_counter_typography_title',
328 'selector' => '{{WRAPPER}} .king-addons-smooth-counter-title',
329 ]
330 );
331
332 $this->add_control(
333 'king_addons_smooth_counter_typography_color_title',
334 [
335 'label' => esc_html__('Color', 'king-addons'),
336 'type' => Controls_Manager::COLOR,
337 'default' => '#000000',
338 'selectors' => [
339 '{{WRAPPER}} .king-addons-smooth-counter-title' => 'color: {{VALUE}}',
340 ],
341 ]
342 );
343
344 $this->add_responsive_control(
345 'king_addons_smooth_counter_align_title',
346 [
347 'label' => esc_html__('Align', 'king-addons'),
348 'type' => Controls_Manager::SELECT,
349 'options' => [
350 'start' => esc_html__('Start', 'king-addons'),
351 'center' => esc_html__('Center', 'king-addons'),
352 'end' => esc_html__('End', 'king-addons'),
353 ],
354 'default' => 'center',
355 'selectors' => [
356 '{{WRAPPER}} .king-addons-smooth-counter-title' => 'text-align: {{VALUE}};'
357 ],
358 ]
359 );
360
361 $this->add_responsive_control(
362 'king_addons_smooth_counter_margin_title',
363 [
364 'label' => esc_html__('Margin', 'king-addons'),
365 'type' => Controls_Manager::DIMENSIONS,
366 'size_units' => ['px', '%'],
367 'default' => [
368 'top' => 0,
369 'right' => 0,
370 'bottom' => 0,
371 'left' => 0,
372 'unit' => 'px',
373 ],
374 'selectors' => [
375 '{{WRAPPER}} .king-addons-smooth-counter-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
376 ]
377 ]
378 );
379
380 $this->end_controls_section();
381
382 $this->start_controls_section(
383 'king_addons_smooth_counter_style_section',
384 [
385 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Whole Counter', 'king-addons'),
386 'tab' => Controls_Manager::TAB_STYLE,
387 ]
388 );
389
390 $this->add_group_control(
391 Group_Control_Background::get_type(),
392 [
393 'name' => 'king_addons_smooth_counter_background',
394 'types' => [ 'classic', 'gradient', 'video' ],
395 'selector' => '{{WRAPPER}} .king-addons-smooth-counter',
396 ]
397 );
398
399
400 $this->add_responsive_control(
401 'king_addons_smooth_counter_padding',
402 [
403 'label' => esc_html__('Padding', 'king-addons'),
404 'type' => Controls_Manager::DIMENSIONS,
405 'size_units' => ['px', '%'],
406 'default' => [
407 'top' => 0,
408 'right' => 0,
409 'bottom' => 0,
410 'left' => 0,
411 'unit' => 'px',
412 ],
413 'selectors' => [
414 '{{WRAPPER}} .king-addons-smooth-counter' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
415 ]
416 ]
417 );
418
419 $this->add_responsive_control(
420 'king_addons_smooth_counter_margin',
421 [
422 'label' => esc_html__('Margin', 'king-addons'),
423 'type' => Controls_Manager::DIMENSIONS,
424 'size_units' => ['px', '%'],
425 'default' => [
426 'top' => 0,
427 'right' => 0,
428 'bottom' => 0,
429 'left' => 0,
430 'unit' => 'px',
431 ],
432 'selectors' => [
433 '{{WRAPPER}} .king-addons-smooth-counter' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
434 ]
435 ]
436 );
437
438 $this->add_group_control(
439 Group_Control_Box_Shadow::get_type(),
440 [
441 'name' => 'king_addons_smooth_counter_box_shadow',
442 'selector' => '{{WRAPPER}} .king-addons-smooth-counter',
443 ]
444 );
445
446 $this->add_group_control(
447 Group_Control_Border::get_type(),
448 [
449 'name' => 'king_addons_smooth_counter_border',
450 'selector' => '{{WRAPPER}} .king-addons-smooth-counter',
451 'fields_options' => [
452 'border' => [
453 'default' => 'none',
454 ],
455 ],
456 ]
457 );
458
459 $this->add_responsive_control(
460 'king_addons_smooth_counter_border_radius',
461 [
462 'label' => esc_html__('Border Radius', 'king-addons'),
463 'type' => Controls_Manager::DIMENSIONS,
464 'size_units' => ['px', '%'],
465 'default' => [
466 'top' => 0,
467 'right' => 0,
468 'bottom' => 0,
469 'left' => 0,
470 'unit' => 'px',
471 ],
472 'selectors' => [
473 '{{WRAPPER}} .king-addons-smooth-counter' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
474 ]
475 ]
476 );
477
478
479
480
481 $this->end_controls_section();
482
483
484 }
485
486 protected function render(): void
487 {
488 $settings = $this->get_settings();
489 $id = $this->get_id();
490
491 echo '<div class="king-addons-smooth-counter">';
492
493 echo '<div class="king-addons-smooth-counter-inner">';
494 echo '<div class="king-addons-smooth-counter-before-text">';
495 echo wp_kses_post($settings['king_addons_smooth_counter_before_text']);
496 echo '</div>';
497 echo '<div class="king-addons-smooth-counter-number king-addons-smooth-counter-' . esc_attr($id) . '">' . esc_html($settings['king_addons_smooth_counter_start']) . '</div>';
498 echo '<div class="king-addons-smooth-counter-after-text">';
499 echo wp_kses_post($settings['king_addons_smooth_counter_after_text']);
500 echo '</div>';
501 echo '</div>';
502
503 echo '<div class="king-addons-smooth-counter-title">';
504 echo wp_kses_post($settings['king_addons_smooth_counter_title']);
505 echo '</div>';
506
507 echo '</div>';
508
509 $inline_js = "(function ($) {
510 function doSmoothCounter() {
511 let od = new Odometer({
512 el: document.querySelector('.king-addons-smooth-counter-" . esc_js($id) . "'),
513 value: " . esc_js($settings['king_addons_smooth_counter_start']) . ",
514 format: '" . esc_js($settings['king_addons_smooth_counter_format']) . "',
515 duration: " . esc_js($settings['king_addons_smooth_counter_anim_duration']) . ",
516 theme: 'minimal',
517 });
518 od.update(" . esc_js($settings['king_addons_smooth_counter_finish']) . ")
519 }
520
521 function onIntersection(entries, observer) {
522 entries.forEach(entry => {
523 if (entry.isIntersecting) {
524 doSmoothCounter();
525 observer.unobserve(entry.target); // Stop observing after the function is triggered
526 }
527 });
528 }
529
530 if (document.readyState === 'complete') {
531 let target = document.querySelector('.king-addons-smooth-counter-" . esc_js($id) . "');
532 if (target) {
533 let observer = new IntersectionObserver(onIntersection);
534 observer.observe(target);
535 }
536 } else {
537 document.addEventListener('DOMContentLoaded', function() {
538 let target = document.querySelector('.king-addons-smooth-counter-" . esc_js($id) . "');
539 if (target) {
540 let observer = new IntersectionObserver(onIntersection);
541 observer.observe(target);
542 }
543 });
544 }
545 })(jQuery);";
546
547 wp_print_inline_script_tag($inline_js);
548
549 }
550 }