← All changes | includes/widgets/Smooth_Counter/Smooth_Counter.php +550 -0 51.1.2 → 51.1.83 View file →

		@@ -1,0 +1,550 @@
	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 = Core::displaySettings($this);
	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: " . Core::jsNumber($settings, 'king_addons_smooth_counter_start', 100) . ",
	514	+ format: '" . esc_js($settings['king_addons_smooth_counter_format']) . "',
	515	+ duration: " . Core::jsNumber($settings, 'king_addons_smooth_counter_anim_duration', 600) . ",
	516	+ theme: 'minimal',
	517	+ });
	518	+ od.update(" . Core::jsNumber($settings, 'king_addons_smooth_counter_finish', 999) . ")
	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	+}