king-addons / includes / widgets / Progress_Bar / Progress_Bar.php

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

1,350 lines 48.1 KB

Raw Download Zip

1	<?php
2
3	namespace King_Addons;
4
5	use Elementor\Controls_Manager;
6	use Elementor\Widget_Base;
7	use Elementor\Group_Control_Typography;
8	use Elementor\Group_Control_Background;
9	use Elementor\Group_Control_Box_Shadow;
10
11	if (!defined('ABSPATH')) {
12	exit; // Exit if accessed directly.
13	}
14
15
16
17	class Progress_Bar extends Widget_Base
18	{
19
20
21	public function get_name(): string
22	{
23	return 'king-addons-progress-bar';
24	}
25
26	public function get_title(): string
27	{
28	return esc_html__('Progress Bar', 'king-addons');
29	}
30
31	public function get_icon(): string
32	{
33	return 'king-addons-icon king-addons-progress-bar';
34	}
35
36	public function get_script_depends(): array
37	{
38	return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-jquerynumerator-jquerynumerator', KING_ADDONS_ASSETS_UNIQUE_KEY . '-progress-bar-script'];
39	}
40
41	public function get_style_depends(): array
42	{
43	return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-animation-timing', KING_ADDONS_ASSETS_UNIQUE_KEY . '-progress-bar-style'];
44	}
45
46	public function get_categories(): array
47	{
48	return ['king-addons'];
49	}
50
51	public function get_keywords(): array
52	{
53	return ['progress bar', 'bar', 'skill bar', 'skills bar', 'percentage bar', 'charts', 'chart', 'graph',
54	'bar chart', 'line', 'progress', 'king addons', 'king', 'addons', 'kingaddons', 'king-addons'];
55	}
56
57	public function get_custom_help_url()
58	{
59	return 'mailto:bug@kingaddons.com?subject=Bug Report - King Addons&body=Please describe the issue';
60	}
61
62	public function add_control_layout()
63	{
64	$this->add_control(
65	'layout',
66	[
67	'label' => esc_html__('Layout', 'king-addons'),
68	'type' => Controls_Manager::SELECT,
69	'default' => 'hr-line',
70	'options' => [
71	'circle' => esc_html__('Circle', 'king-addons'),
72	'hr-line' => esc_html__('Horizontal Line', 'king-addons'),
73	'pro-vr' => esc_html__('Vertical Line (Pro)', 'king-addons'),
74	],
75	'prefix_class' => 'king-addons-prbar-layout-',
76	'render_type' => 'template',
77	]
78	);
79	}
80
81	public function add_control_line_width()
82	{
83	}
84
85	public function add_control_prline_width()
86	{
87	}
88
89	public function add_control_stripe_switcher()
90	{
91	$this->add_control(
92	'stripe_switcher',
93	[
94	'label' => sprintf(__('Stripe Background %s', 'king-addons'), '<i class="eicon-pro-icon"></i>'),
95	'type' => Controls_Manager::SWITCHER,
96	'classes' => 'king-addons-pro-control no-distance'
97	]
98	);
99	}
100
101	public function add_control_stripe_anim()
102	{
103	}
104
105	public function add_control_anim_loop()
106	{
107	$this->add_control(
108	'anim_loop',
109	[
110	'label' => sprintf(__('Animation Loop %s', 'king-addons'), '<i class="eicon-pro-icon"></i>'),
111	'type' => Controls_Manager::SWITCHER,
112	'classes' => 'king-addons-pro-control no-distance',
113	'separator' => 'before',
114	]
115	);
116	}
117
118	public function add_control_anim_loop_delay()
119	{
120	}
121
122	protected function register_controls()
123	{
124
125	$this->start_controls_section(
126	'section_general',
127	[
128	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('General', 'king-addons'),
129	]
130	);
131
132	$this->add_control_layout();
133
134	Core::renderUpgradeProNotice($this, Controls_Manager::RAW_HTML, 'progress-bar', 'layout', ['pro-vr']);
135
136	$this->add_control(
137	'max_value',
138	[
139	'label' => esc_html__('Max Value', 'king-addons'),
140	'type' => Controls_Manager::NUMBER,
141	'default' => 100,
142	'min' => 0,
143	'step' => 1,
144	'separator' => 'before',
145	'dynamic' => [
146	'active' => true,
147	],
148	]
149	);
150
151	$this->add_control(
152	'counter_value',
153	[
154	'label' => esc_html__('Counter Value', 'king-addons'),
155	'type' => Controls_Manager::NUMBER,
156	'default' => 70,
157	'min' => 0,
158	'step' => 1,
159	'dynamic' => [
160	'active' => true,
161	],
162	]
163	);
164
165	$this->add_control(
166	'title',
167	[
168	'label' => esc_html__('Title', 'king-addons'),
169	'type' => Controls_Manager::TEXT,
170	'dynamic' => [
171	'active' => true,
172	],
173	'default' => 'Title',
174	'separator' => 'before',
175	]
176	);
177
178	$this->add_control(
179	'title_position',
180	[
181	'label' => esc_html__('Title Position', 'king-addons'),
182	'type' => Controls_Manager::SELECT,
183	'default' => 'inside',
184	'options' => [
185	'inside' => esc_html__('Inside', 'king-addons'),
186	'outside' => esc_html__('Outside', 'king-addons'),
187	],
188	'prefix_class' => 'king-addons-pbar-title-pos-',
189	'render_type' => 'template',
190	'condition' => [
191	'layout!' => 'vr-line',
192	],
193	]
194	);
195
196	$this->add_control(
197	'subtitle',
198	[
199	'label' => esc_html__('Subtitle', 'king-addons'),
200	'type' => Controls_Manager::TEXT,
201	'dynamic' => [
202	'active' => true,
203	],
204	'default' => '',
205	'separator' => 'before',
206	]
207	);
208
209	$this->add_control(
210	'counter_switcher',
211	[
212	'label' => esc_html__('Show Counter', 'king-addons'),
213	'type' => Controls_Manager::SWITCHER,
214	'default' => 'yes',
215	'separator' => 'before'
216	]
217	);
218
219	$this->add_control(
220	'counter_position',
221	[
222	'label' => esc_html__('Counter Position', 'king-addons'),
223	'type' => Controls_Manager::SELECT,
224	'default' => 'inside',
225	'options' => [
226	'inside' => esc_html__('Inside', 'king-addons'),
227	'outside' => esc_html__('Outside', 'king-addons'),
228	],
229	'prefix_class' => 'king-addons-pbar-counter-pos-',
230	'render_type' => 'template',
231	'condition' => [
232	'counter_switcher' => 'yes',
233	],
234	]
235	);
236
237	$this->add_control(
238	'counter_follow_line',
239	[
240	'label' => esc_html__('Follow Pr. Line', 'king-addons'),
241	'type' => Controls_Manager::SWITCHER,
242	'default' => 'yes',
243	'condition' => [
244	'counter_switcher' => 'yes',
245	'counter_position' => 'inside',
246	'layout' => 'hr-line',
247	],
248	]
249	);
250
251	$this->add_control(
252	'counter_prefix',
253	[
254	'label' => esc_html__('Counter Prefix', 'king-addons'),
255	'type' => Controls_Manager::TEXT,
256	'dynamic' => [
257	'active' => true,
258	],
259	'default' => '',
260	'condition' => [
261	'counter_switcher' => 'yes',
262	],
263	]
264	);
265
266	$this->add_control(
267	'counter_suffix',
268	[
269	'label' => esc_html__('Counter Suffix', 'king-addons'),
270	'type' => Controls_Manager::TEXT,
271	'dynamic' => [
272	'active' => true,
273	],
274	'default' => '%',
275	'condition' => [
276	'counter_switcher' => 'yes',
277	],
278	]
279	);
280
281	$this->add_control(
282	'counter_separator',
283	[
284	'label' => esc_html__('Show Thousand Separator', 'king-addons'),
285	'type' => Controls_Manager::SWITCHER,
286	'condition' => [
287	'counter_switcher' => 'yes',
288	],
289	]
290	);
291
292	$this->end_controls_section();
293
294	$this->start_controls_section(
295	'section_settings',
296	[
297	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Settings', 'king-addons'),
298	]
299	);
300
301	$this->add_responsive_control(
302	'circle_size',
303	[
304	'label' => esc_html__('Circle Size', 'king-addons'),
305	'type' => Controls_Manager::SLIDER,
306	'size_units' => ['px'],
307	'range' => [
308	'px' => [
309	'min' => 100,
310	'max' => 1000,
311	],
312	],
313	'default' => [
314	'unit' => 'px',
315	'size' => 200,
316	],
317	'widescreen_default' => [
318	'unit' => 'px',
319	'size' => 200,
320	],
321	'laptop_default' => [
322	'unit' => 'px',
323	'size' => 200,
324	],
325	'tablet_default' => [
326	'unit' => 'px',
327	'size' => 200,
328	],
329	'tablet_extra_default' => [
330	'unit' => 'px',
331	'size' => 200,
332	],
333	'mobile_extra_default' => [
334	'unit' => 'px',
335	'size' => 200,
336	],
337	'mobile_default' => [
338	'unit' => 'px',
339	'size' => 200,
340	],
341	'selectors' => [
342	'{{WRAPPER}} .king-addons-prbar-circle' => 'max-width: {{SIZE}}{{UNIT}};',
343	],
344	'render_type' => 'template',
345	'condition' => [
346	'layout' => 'circle',
347	],
348	]
349	);
350
351	$this->add_control_line_width();
352
353	$this->add_control_prline_width();
354
355	$this->add_responsive_control(
356	'line_size',
357	[
358	'label' => esc_html__('Line Size', 'king-addons'),
359	'type' => Controls_Manager::SLIDER,
360	'size_units' => ['px'],
361	'range' => [
362	'px' => [
363	'min' => 0,
364	'max' => 100,
365	],
366	],
367	'default' => [
368	'unit' => 'px',
369	'size' => 27,
370	],
371	'selectors' => [
372	'{{WRAPPER}} .king-addons-prbar-hr-line' => 'height: {{SIZE}}{{UNIT}};',
373	'{{WRAPPER}} .king-addons-prbar-vr-line' => 'width: {{SIZE}}{{UNIT}};',
374	],
375	'condition' => [
376	'layout!' => 'circle',
377	],
378	]
379	);
380
381	$this->add_responsive_control(
382	'vr_line_height',
383	[
384	'label' => esc_html__('Vertical Line Height', 'king-addons'),
385	'type' => Controls_Manager::SLIDER,
386	'size_units' => ['px'],
387	'range' => [
388	'px' => [
389	'min' => 0,
390	'max' => 1000,
391	],
392	],
393	'default' => [
394	'unit' => 'px',
395	'size' => 277,
396	],
397	'selectors' => [
398	'{{WRAPPER}} .king-addons-prbar-vr-line' => 'height: {{SIZE}}{{UNIT}};',
399	],
400	'condition' => [
401	'layout' => 'vr-line',
402	],
403	]
404	);
405
406	$this->add_control(
407	'anim_duration',
408	[
409	'label' => esc_html__('Animation Duration', 'king-addons'),
410	'type' => Controls_Manager::NUMBER,
411	'default' => 1,
412	'min' => 0,
413	'max' => 10,
414	'step' => 0.1,
415	'selectors' => [
416	'{{WRAPPER}} .king-addons-prbar-circle-prline' => '-webkit-transition-duration: {{VALUE}}s; transition-duration: {{VALUE}}s;',
417	'{{WRAPPER}} .king-addons-prbar-hr-line-inner' => '-webkit-transition-duration: {{VALUE}}s; transition-duration: {{VALUE}}s;',
418	'{{WRAPPER}} .king-addons-prbar-vr-line-inner' => '-webkit-transition-duration: {{VALUE}}s; transition-duration: {{VALUE}}s;',
419	],
420	'render_type' => 'template',
421	'separator' => 'before',
422	]
423	);
424
425	$this->add_control(
426	'anim_delay',
427	[
428	'label' => esc_html__('Animation Delay', 'king-addons'),
429	'type' => Controls_Manager::NUMBER,
430	'default' => 0,
431	'min' => 0,
432	'max' => 5,
433	'step' => 0.1,
434	'selectors' => [
435	'{{WRAPPER}} .king-addons-prbar-circle-prline' => '-webkit-transition-delay: {{VALUE}}s; transition-delay: {{VALUE}}s;',
436	'{{WRAPPER}} .king-addons-prbar-hr-line-inner' => '-webkit-transition-delay: {{VALUE}}s; transition-delay: {{VALUE}}s;',
437	'{{WRAPPER}} .king-addons-prbar-vr-line-inner' => '-webkit-transition-delay: {{VALUE}}s; transition-delay: {{VALUE}}s;',
438	],
439	'render_type' => 'template',
440	]
441	);
442
443	$this->add_control(
444	'anim_timing',
445	[
446	'label' => esc_html__('Animation Timing', 'king-addons'),
447	'type' => Controls_Manager::SELECT,
448	'options' => Core::getAnimationTimings(),
449	'default' => 'ease-default',
450	]
451	);
452
453	Core::renderUpgradeProNotice($this, Controls_Manager::RAW_HTML, 'progress-bar', 'anim_timing', ['pro-eio', 'pro-eiqd', 'pro-eicb', 'pro-eiqrt', 'pro-eiqnt', 'pro-eisn', 'pro-eiex', 'pro-eicr', 'pro-eibk', 'pro-eoqd', 'pro-eocb', 'pro-eoqrt', 'pro-eoqnt', 'pro-eosn', 'pro-eoex', 'pro-eocr', 'pro-eobk', 'pro-eioqd', 'pro-eiocb', 'pro-eioqrt', 'pro-eioqnt', 'pro-eiosn', 'pro-eioex', 'pro-eiocr', 'pro-eiobk']);
454
455	$this->add_control_anim_loop();
456
457	$this->add_control_anim_loop_delay();
458
459	$this->end_controls_section();
460
461	Core::renderProFeaturesSection($this, '', Controls_Manager::RAW_HTML, 'progress-bar', [
462	'Vertical Progress Bar',
463	'Stripe Background',
464	'Stripe Background Animation',
465	'Stripe Animation Direction',
466	'Advanced Animation Timing',
467	'Animation Loop',
468	]);
469
470	$this->start_controls_section(
471	'section_style_general',
472	[
473	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('General', 'king-addons'),
474	'tab' => Controls_Manager::TAB_STYLE,
475	]
476	);
477
478	$this->add_control(
479	'wrapper_section',
480	[
481	'label' => esc_html__('Wrapper', 'king-addons'),
482	'type' => Controls_Manager::HEADING,
483	'separator' => 'before',
484	'condition' => [
485	'counter_switcher' => 'yes',
486	],
487	]
488	);
489
490	$this->add_control(
491	'general_bg_color',
492	[
493	'label' => esc_html__('Background Color', 'king-addons'),
494	'type' => Controls_Manager::COLOR,
495	'default' => '#f4f4f4',
496	'selectors' => [
497	'{{WRAPPER}} .king-addons-prbar-circle-line' => 'fill: {{VALUE}}',
498	'{{WRAPPER}} .king-addons-prbar-hr-line' => 'background-color: {{VALUE}}',
499	'{{WRAPPER}} .king-addons-prbar-vr-line' => 'background-color: {{VALUE}}',
500	],
501	]
502	);
503
504	$this->add_control(
505	'circle_line_bg_color',
506	[
507	'label' => esc_html__('Inactive Line Color', 'king-addons'),
508	'type' => Controls_Manager::COLOR,
509	'default' => '#dddddd',
510	'selectors' => [
511	'{{WRAPPER}} .king-addons-prbar-circle-line' => 'stroke: {{VALUE}}',
512	],
513	'condition' => [
514	'layout' => 'circle',
515	],
516	]
517	);
518
519	$this->add_group_control(
520	Group_Control_Box_Shadow::get_type(),
521	[
522	'name' => 'general_box_shadow',
523	'label' => esc_html__('Box Shadow', 'king-addons'),
524	'selector' => '{{WRAPPER}} .king-addons-prbar-hr-line, {{WRAPPER}} .king-addons-prbar-vr-line, {{WRAPPER}} .king-addons-prbar-circle svg',
525	]
526	);
527
528	$this->add_control(
529	'general_border_type',
530	[
531	'label' => esc_html__('Border Type', 'king-addons'),
532	'type' => Controls_Manager::SELECT,
533	'options' => [
534	'none' => esc_html__('None', 'king-addons'),
535	'solid' => esc_html__('Solid', 'king-addons'),
536	'double' => esc_html__('Double', 'king-addons'),
537	'dotted' => esc_html__('Dotted', 'king-addons'),
538	'dashed' => esc_html__('Dashed', 'king-addons'),
539	'groove' => esc_html__('Groove', 'king-addons'),
540	],
541	'default' => 'none',
542	'selectors' => [
543	'{{WRAPPER}} .king-addons-prbar-hr-line' => 'border-style: {{VALUE}};',
544	'{{WRAPPER}} .king-addons-prbar-vr-line' => 'border-style: {{VALUE}};',
545	],
546	'condition' => [
547	'layout!' => 'circle'
548	]
549	]
550	);
551
552	$this->add_responsive_control(
553	'general_border_width',
554	[
555	'label' => esc_html__('Border Width', 'king-addons'),
556	'type' => Controls_Manager::DIMENSIONS,
557	'size_units' => ['px',],
558	'default' => [
559	'top' => 1,
560	'right' => 1,
561	'bottom' => 1,
562	'left' => 1,
563	],
564	'selectors' => [
565	'{{WRAPPER}} .king-addons-prbar-hr-line' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
566	'{{WRAPPER}} .king-addons-prbar-vr-line' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
567	],
568	'condition' => [
569	'general_border_type!' => 'none',
570	'layout!' => 'circle'
571	],
572	]
573	);
574
575	$this->add_control(
576	'general_border_color',
577	[
578	'label' => esc_html__('Border Color', 'king-addons'),
579	'type' => Controls_Manager::COLOR,
580	'default' => '#e5e5e5',
581	'selectors' => [
582	'{{WRAPPER}} .king-addons-prbar-hr-line' => 'border-color: {{VALUE}}',
583	'{{WRAPPER}} .king-addons-prbar-vr-line' => 'border-color: {{VALUE}}',
584	],
585	'condition' => [
586	'general_border_type!' => 'none',
587	'layout!' => 'circle'
588	],
589	]
590	);
591
592	$this->add_control(
593	'general_border_radius',
594	[
595	'label' => esc_html__('Border Radius', 'king-addons'),
596	'type' => Controls_Manager::DIMENSIONS,
597	'size_units' => ['px', '%'],
598	'selectors' => [
599	'{{WRAPPER}} .king-addons-prbar-hr-line' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
600	'{{WRAPPER}}.king-addons-prbar-prline-rounded-yes .king-addons-prbar-hr-line-inner' => 'border-top-right-radius: calc({{RIGHT}}{{UNIT}} - {{general_border_width.RIGHT}}{{general_border_width.UNIT}});border-bottom-right-radius: calc({{BOTTOM}}{{UNIT}} - {{general_border_width.BOTTOM}}{{general_border_width.UNIT}});',
601	'{{WRAPPER}} .king-addons-prbar-vr-line' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
602	'{{WRAPPER}}.king-addons-prbar-prline-rounded-yes .king-addons-prbar-vr-line-inner' => 'border-top-right-radius: calc({{RIGHT}}{{UNIT}} - {{general_border_width.RIGHT}}{{general_border_width.UNIT}});border-top-left-radius: calc({{TOP}}{{UNIT}} - {{general_border_width.TOP}}{{general_border_width.UNIT}});',
603	],
604	'default' => [
605	'top' => 5,
606	'right' => 5,
607	'bottom' => 5,
608	'left' => 5,
609	],
610	'condition' => [
611	'layout!' => 'circle',
612	],
613	]
614	);
615
616	$this->add_control(
617	'prline_section',
618	[
619	'label' => esc_html__('Progress Line', 'king-addons'),
620	'type' => Controls_Manager::HEADING,
621	'separator' => 'before',
622	]
623	);
624
625	$this->add_control(
626	'circle_prline_bg_type',
627	[
628	'label' => esc_html__('Background Type', 'king-addons'),
629	'type' => Controls_Manager::CHOOSE,
630	'label_block' => false,
631	'default' => 'color',
632	'options' => [
633	'color' => [
634	'title' => esc_html__('Classic', 'king-addons'),
635	'icon' => 'fa fa-paint-brush',
636	],
637	'gradient' => [
638	'title' => esc_html__('Gradient', 'king-addons'),
639	'icon' => 'fa fa-barcode',
640	],
641	],
642	'condition' => [
643	'layout' => 'circle',
644	],
645	]
646	);
647
648	$this->add_control(
649	'circle_prline_bg_color',
650	[
651	'label' => esc_html__('Background Color', 'king-addons'),
652	'type' => Controls_Manager::COLOR,
653	'default' => '#5B03FF',
654	'condition' => [
655	'circle_prline_bg_type' => 'color',
656	'layout' => 'circle',
657	],
658	]
659	);
660
661	$this->add_control(
662	'circle_prline_bg_color_a',
663	[
664	'label' => esc_html__('Background Color A', 'king-addons'),
665	'type' => Controls_Manager::COLOR,
666	'default' => '#61ce70',
667	'condition' => [
668	'circle_prline_bg_type' => 'gradient',
669	'layout' => 'circle',
670	],
671	]
672	);
673
674	$this->add_control(
675	'circle_prline_bg_color_b',
676	[
677	'label' => esc_html__('Background Color B', 'king-addons'),
678	'type' => Controls_Manager::COLOR,
679	'default' => '#4054b2',
680	'condition' => [
681	'circle_prline_bg_type' => 'gradient',
682	'layout' => 'circle',
683	],
684	]
685	);
686
687	$this->add_control(
688	'circle_prline_grad_angle',
689	[
690	'label' => esc_html__('Gradient Angle', 'king-addons'),
691	'type' => Controls_Manager::SLIDER,
692	'size_units' => ['px'],
693	'range' => [
694	'px' => [
695	'min' => 0,
696	'max' => 360,
697	],
698	],
699	'default' => [
700	'unit' => 'px',
701	'size' => 0,
702	],
703	'condition' => [
704	'circle_prline_bg_type' => 'gradient',
705	'layout' => 'circle',
706	],
707	]
708	);
709
710	$this->add_group_control(
711	Group_Control_Background::get_type(),
712	[
713	'name' => 'prline_bg_color',
714	'types' => ['classic', 'gradient'],
715	'fields_options' => [
716	'color' => [
717	'default' => '#5B03FF',
718	],
719	'background' => [
720	'default' => 'classic',
721	]
722	],
723	'selector' => '{{WRAPPER}} .king-addons-prbar-hr-line-inner, {{WRAPPER}} .king-addons-prbar-vr-line-inner',
724	'condition' => [
725	'layout!' => 'circle',
726	],
727	]
728	);
729
730	$this->add_control(
731	'prline_round',
732	[
733	'label' => esc_html__('Rounded Line', 'king-addons'),
734	'type' => Controls_Manager::SWITCHER,
735	'selectors' => [
736	'{{WRAPPER}} .king-addons-prbar-circle-prline' => 'stroke-linecap: round;',
737	],
738	'prefix_class' => 'king-addons-prbar-prline-rounded-',
739	'render_type' => 'template',
740	]
741	);
742
743	$this->add_control_stripe_switcher();
744
745	$this->add_control_stripe_anim();
746
747	$this->add_control(
748	'title_section',
749	[
750	'label' => esc_html__('Title', 'king-addons'),
751	'type' => Controls_Manager::HEADING,
752	'separator' => 'before',
753	'condition' => [
754	'title!' => '',
755	],
756	]
757	);
758
759	$this->add_control(
760	'title_color',
761	[
762	'label' => esc_html__('Color', 'king-addons'),
763	'type' => Controls_Manager::COLOR,
764	'default' => '#C7C6C6',
765	'selectors' => [
766	'{{WRAPPER}} .king-addons-prbar-title' => 'color: {{VALUE}}',
767	],
768	'condition' => [
769	'title!' => '',
770	],
771	]
772	);
773
774	$this->add_group_control(
775	Group_Control_Typography::get_type(),
776	[
777	'name' => 'title_typography',
778	'selector' => '{{WRAPPER}} .king-addons-prbar-title',
779	'condition' => [
780	'title!' => '',
781	],
782	]
783	);
784
785	$this->add_responsive_control(
786	'title_distance',
787	[
788	'label' => esc_html__('Distance', 'king-addons'),
789	'type' => Controls_Manager::SLIDER,
790	'size_units' => ['px'],
791	'range' => [
792	'px' => [
793	'min' => 0,
794	'max' => 50,
795	],
796	],
797	'default' => [
798	'unit' => 'px',
799	'size' => 0,
800	],
801	'selectors' => [
802	'{{WRAPPER}}.king-addons-prbar-layout-hr-line .king-addons-prbar-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
803	'{{WRAPPER}}.king-addons-prbar-layout-circle.king-addons-pbar-title-pos-inside .king-addons-prbar-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
804	'{{WRAPPER}}.king-addons-prbar-layout-circle.king-addons-pbar-title-pos-outside .king-addons-prbar-title' => 'margin-top: {{SIZE}}{{UNIT}};',
805	'{{WRAPPER}}.king-addons-prbar-layout-vr-line .king-addons-prbar-title' => 'margin-top: {{SIZE}}{{UNIT}};',
806	],
807	'condition' => [
808	'title!' => '',
809	],
810	]
811	);
812
813	$this->add_control(
814	'subtitle_section',
815	[
816	'label' => esc_html__('Subtitle', 'king-addons'),
817	'type' => Controls_Manager::HEADING,
818	'separator' => 'before',
819	'condition' => [
820	'subtitle!' => '',
821	],
822	]
823	);
824
825	$this->add_control(
826	'subtitle_color',
827	[
828	'label' => esc_html__('Color', 'king-addons'),
829	'type' => Controls_Manager::COLOR,
830	'default' => '#C7C6C6',
831	'selectors' => [
832	'{{WRAPPER}} .king-addons-prbar-subtitle' => 'color: {{VALUE}}',
833	],
834	'condition' => [
835	'subtitle!' => '',
836	],
837	]
838	);
839
840	$this->add_group_control(
841	Group_Control_Typography::get_type(),
842	[
843	'name' => 'subtitle_typography',
844	'selector' => '{{WRAPPER}} .king-addons-prbar-subtitle',
845	'condition' => [
846	'subtitle!' => '',
847	],
848	]
849	);
850
851	$this->add_responsive_control(
852	'subtitle_distance',
853	[
854	'label' => esc_html__('Distance', 'king-addons'),
855	'type' => Controls_Manager::SLIDER,
856	'size_units' => ['px'],
857	'range' => [
858	'px' => [
859	'min' => 0,
860	'max' => 50,
861	],
862	],
863	'default' => [
864	'unit' => 'px',
865	'size' => 12,
866	],
867	'selectors' => [
868	'{{WRAPPER}}.king-addons-prbar-layout-hr-line .king-addons-prbar-subtitle' => 'margin-bottom: {{SIZE}}{{UNIT}};',
869	'{{WRAPPER}}.king-addons-prbar-layout-circle.king-addons-pbar-title-pos-inside .king-addons-prbar-subtitle' => 'margin-bottom: {{SIZE}}{{UNIT}};',
870	'{{WRAPPER}}.king-addons-prbar-layout-circle.king-addons-pbar-title-pos-outside .king-addons-prbar-subtitle' => 'margin-top: {{SIZE}}{{UNIT}};',
871	'{{WRAPPER}}.king-addons-prbar-layout-vr-line .king-addons-prbar-subtitle' => 'margin-top: {{SIZE}}{{UNIT}};',
872	],
873	'condition' => [
874	'subtitle!' => '',
875	],
876	]
877	);
878
879	$this->add_control(
880	'counter_section',
881	[
882	'label' => esc_html__('Counter', 'king-addons'),
883	'type' => Controls_Manager::HEADING,
884	'separator' => 'before',
885	'condition' => [
886	'counter_switcher' => 'yes',
887	],
888	]
889	);
890
891	$this->add_control(
892	'counter_color',
893	[
894	'label' => esc_html__('Color', 'king-addons'),
895	'type' => Controls_Manager::COLOR,
896	'default' => '#C7C6C6',
897	'selectors' => [
898	'{{WRAPPER}} .king-addons-prbar-counter' => 'color: {{VALUE}}',
899	],
900	'condition' => [
901	'counter_switcher' => 'yes',
902	],
903	]
904	);
905
906	$this->add_group_control(
907	Group_Control_Typography::get_type(),
908	[
909	'name' => 'counter_typography',
910	'selector' => '{{WRAPPER}} .king-addons-prbar-counter',
911	'condition' => [
912	'counter_switcher' => 'yes',
913	],
914	]
915	);
916
917	$this->add_responsive_control(
918	'counter_distance',
919	[
920	'label' => esc_html__('Distance', 'king-addons'),
921	'type' => Controls_Manager::SLIDER,
922	'size_units' => ['px'],
923	'range' => [
924	'px' => [
925	'min' => 0,
926	'max' => 50,
927	],
928	],
929	'default' => [
930	'unit' => 'px',
931	'size' => 12,
932	],
933	'selectors' => [
934	'{{WRAPPER}}.king-addons-prbar-layout-hr-line .king-addons-prbar-counter' => 'margin-bottom: {{SIZE}}{{UNIT}};',
935	'{{WRAPPER}}.king-addons-prbar-layout-vr-line .king-addons-prbar-counter' => 'margin-bottom: {{SIZE}}{{UNIT}};',
936	'{{WRAPPER}}.king-addons-prbar-layout-circle.king-addons-pbar-counter-pos-outside .king-addons-prbar-counter' => 'margin-top: {{SIZE}}{{UNIT}};',
937	],
938	'condition' => [
939	'counter_switcher' => 'yes',
940	'counter_position!' => 'inside',
941	'layout!' => 'hr-line'
942	],
943	]
944	);
945
946	$this->add_control(
947	'counter_prefix_section',
948	[
949	'label' => esc_html__('Counter Prefix', 'king-addons'),
950	'type' => Controls_Manager::HEADING,
951	'separator' => 'before',
952	'condition' => [
953	'counter_switcher' => 'yes',
954	'counter_prefix!' => ''
955	],
956	]
957	);
958
959	$this->add_control(
960	'counter_prefix_vr_position',
961	[
962	'label' => esc_html__('Vertical Position', 'king-addons'),
963	'type' => Controls_Manager::CHOOSE,
964	'label_block' => false,
965	'options' => [
966	'top' => [
967	'title' => esc_html__('Top', 'king-addons'),
968	'icon' => 'eicon-v-align-top',
969	],
970	'middle' => [
971	'title' => esc_html__('Middle', 'king-addons'),
972	'icon' => 'eicon-v-align-middle',
973	],
974	'bottom' => [
975	'title' => esc_html__('Bottom', 'king-addons'),
976	'icon' => 'eicon-v-align-bottom',
977	],
978	],
979	'default' => 'middle',
980	'selectors_dictionary' => [
981	'top' => 'flex-start',
982	'middle' => 'center',
983	'bottom' => 'flex-end',
984	],
985	'selectors' => [
986	'{{WRAPPER}} .king-addons-prbar-counter-value-prefix' => '-webkit-align-self: {{VALUE}}; align-self: {{VALUE}};',
987	],
988	'condition' => [
989	'counter_switcher' => 'yes',
990	'counter_prefix!' => ''
991	],
992	]
993	);
994
995	$this->add_responsive_control(
996	'counter_prefix_size',
997	[
998	'label' => esc_html__('Font Size', 'king-addons'),
999	'type' => Controls_Manager::SLIDER,
1000	'size_units' => ['px'],
1001	'range' => [
1002	'px' => [
1003	'min' => 0,
1004	'max' => 100,
1005	],
1006	],
1007	'default' => [
1008	'unit' => 'px',
1009	'size' => 12,
1010	],
1011	'selectors' => [
1012	'{{WRAPPER}} .king-addons-prbar-counter-value-prefix' => 'font-size: {{SIZE}}{{UNIT}};',
1013	],
1014	'condition' => [
1015	'counter_switcher' => 'yes',
1016	'counter_prefix!' => ''
1017	],
1018	]
1019	);
1020
1021	$this->add_responsive_control(
1022	'counter_prefix_distance',
1023	[
1024	'label' => esc_html__('Distance', 'king-addons'),
1025	'type' => Controls_Manager::SLIDER,
1026	'size_units' => ['px'],
1027	'range' => [
1028	'px' => [
1029	'min' => 0,
1030	'max' => 25,
1031	],
1032	],
1033	'default' => [
1034	'unit' => 'px',
1035	'size' => 5,
1036	],
1037	'selectors' => [
1038	'{{WRAPPER}} .king-addons-prbar-counter-value-prefix' => 'margin-right: {{SIZE}}{{UNIT}};',
1039	],
1040	'condition' => [
1041	'counter_switcher' => 'yes',
1042	'counter_prefix!' => ''
1043	],
1044	]
1045	);
1046
1047	$this->add_control(
1048	'counter_suffix_section',
1049	[
1050	'label' => esc_html__('Counter Suffix', 'king-addons'),
1051	'type' => Controls_Manager::HEADING,
1052	'separator' => 'before',
1053	'condition' => [
1054	'counter_switcher' => 'yes',
1055	'counter_suffix!' => ''
1056	],
1057	]
1058	);
1059
1060	$this->add_control(
1061	'counter_suffix_vr_position',
1062	[
1063	'label' => esc_html__('Vertical Position', 'king-addons'),
1064	'type' => Controls_Manager::CHOOSE,
1065	'label_block' => false,
1066	'options' => [
1067	'top' => [
1068	'title' => esc_html__('Top', 'king-addons'),
1069	'icon' => 'eicon-v-align-top',
1070	],
1071	'middle' => [
1072	'title' => esc_html__('Middle', 'king-addons'),
1073	'icon' => 'eicon-v-align-middle',
1074	],
1075	'bottom' => [
1076	'title' => esc_html__('Bottom', 'king-addons'),
1077	'icon' => 'eicon-v-align-bottom',
1078	],
1079	],
1080	'default' => 'middle',
1081	'selectors_dictionary' => [
1082	'top' => 'flex-start',
1083	'middle' => 'center',
1084	'bottom' => 'flex-end',
1085	],
1086	'selectors' => [
1087	'{{WRAPPER}} .king-addons-prbar-counter-value-suffix' => '-webkit-align-self: {{VALUE}}; align-self: {{VALUE}};',
1088	],
1089	'condition' => [
1090	'counter_switcher' => 'yes',
1091	'counter_suffix!' => ''
1092	],
1093	]
1094	);
1095
1096	$this->add_responsive_control(
1097	'counter_suffix_size',
1098	[
1099	'label' => esc_html__('Font Size', 'king-addons'),
1100	'type' => Controls_Manager::SLIDER,
1101	'size_units' => ['px'],
1102	'range' => [
1103	'px' => [
1104	'min' => 0,
1105	'max' => 100,
1106	],
1107	],
1108	'default' => [
1109	'unit' => 'px',
1110	'size' => 12,
1111	],
1112	'selectors' => [
1113	'{{WRAPPER}} .king-addons-prbar-counter-value-suffix' => 'font-size: {{SIZE}}{{UNIT}};',
1114	],
1115	'condition' => [
1116	'counter_switcher' => 'yes',
1117	'counter_suffix!' => ''
1118	],
1119	]
1120	);
1121
1122	$this->add_responsive_control(
1123	'counter_suffix_distance',
1124	[
1125	'label' => esc_html__('Distance', 'king-addons'),
1126	'type' => Controls_Manager::SLIDER,
1127	'size_units' => ['px'],
1128	'range' => [
1129	'px' => [
1130	'min' => 0,
1131	'max' => 25,
1132	],
1133	],
1134	'default' => [
1135	'unit' => 'px',
1136	'size' => 5,
1137	],
1138	'selectors' => [
1139	'{{WRAPPER}} .king-addons-prbar-counter-value-suffix' => 'margin-left: {{SIZE}}{{UNIT}};',
1140	],
1141	'condition' => [
1142	'counter_switcher' => 'yes',
1143	'counter_suffix!' => ''
1144	],
1145	]
1146	);
1147
1148
1149
1150
1151	$this->end_controls_section();
1152
1153
1154
1155	}
1156
1157	protected function render_progress_bar_circle($percent)
1158	{
1159	$settings = $this->get_settings();
1160
1161	$circle_stocke_bg = $settings['circle_prline_bg_color'];
1162	$circle_size = $settings['circle_size']['size'];
1163	$circle_half_size = ($circle_size / 2);
1164	$circle_viewbox = sprintf('0 0 %1$s %1$s', $circle_size);
1165	$circle_line_width = king_addons_freemius()->can_use_premium_code__premium_only() ? $settings['line_width']['size'] : 15;
1166	$circle_prline_width = king_addons_freemius()->can_use_premium_code__premium_only() ? $settings['prline_width']['size'] : 15;
1167	/** @noinspection DuplicatedCode */
1168	$circle_radius = $circle_half_size - ($circle_prline_width / 2);
1169
1170	if ($circle_line_width > $circle_prline_width) {
1171	$circle_radius = $circle_half_size - ($circle_line_width / 2);
1172	}
1173
1174	if ($circle_prline_width > $circle_half_size) {
1175	$circle_radius = $circle_half_size / 2;
1176	$circle_prline_width = $circle_half_size;
1177	}
1178
1179	if ($circle_line_width > $circle_half_size) {
1180	$circle_radius = $circle_half_size / 2;
1181	$circle_line_width = $circle_half_size;
1182	}
1183
1184	$circle_perimeter = 2 * M_PI * $circle_radius;
1185	$circle_offset = $circle_perimeter - (($circle_perimeter / 100) * $percent);
1186
1187	$circle_options = [
1188	'circleSize' => $circle_size,
1189	'circleViewbox' => $circle_viewbox,
1190	'circleRadius' => $circle_radius,
1191	'circleLineWidth' => $circle_line_width,
1192	'circlePrlineWidth' => $circle_prline_width,
1193	'circleOffset' => $circle_offset,
1194	'circleDasharray' => $circle_perimeter,
1195	];
1196
1197	$this->add_render_attribute('king-addons-prbar-circle', [
1198	'class' => 'king-addons-prbar-circle',
1199	'data-circle-options' => wp_json_encode($circle_options),
1200	]);
1201
1202	?>
1203	<div <?php echo $this->get_render_attribute_string('king-addons-prbar-circle'); ?>>
1204	<svg class="king-addons-prbar-circle-svg" viewBox="<?php echo esc_attr($circle_viewbox); ?>">
1205	<?php if ('gradient' === $settings['circle_prline_bg_type']) : ?>
1206	<?php $circle_stocke_bg = 'url( #king-addons-prbar-circle-gradient-' . esc_attr($this->get_id()) . ' )'; ?>
1207	<linearGradient id="king-addons-prbar-circle-gradient-<?php echo esc_attr($this->get_id()); ?>"
1208	gradientTransform="rotate(<?php echo esc_html($settings['circle_prline_grad_angle']['size']); ?> 0.5 0.5)"
1209	gradientUnits="objectBoundingBox" x1="-0.5" y1="0.5" x2="1.5" y2="0.5">
1210	<stop offset="0%"
1211	stop-color="<?php echo esc_attr($settings['circle_prline_bg_color_a']); ?>"></stop>
1212	<stop offset="100%"
1213	stop-color="<?php echo esc_attr($settings['circle_prline_bg_color_b']); ?>"></stop>
1214	</linearGradient>
1215	<?php endif; ?>
1216	<circle class="king-addons-prbar-circle-line"
1217	cx="<?php echo esc_attr($circle_half_size); ?>"
1218	cy="<?php echo esc_attr($circle_half_size); ?>"
1219	r="<?php echo esc_attr($circle_radius); ?>"
1220	stroke-width="<?php echo esc_attr($circle_line_width); ?>"
1221	/>
1222	<circle class="king-addons-prbar-circle-prline king-addons-animation-timing-<?php echo esc_attr($settings['anim_timing']); ?>"
1223	cx="<?php echo esc_attr($circle_half_size); ?>"
1224	cy="<?php echo esc_attr($circle_half_size); ?>"
1225	r="<?php echo esc_attr($circle_radius); ?>"
1226	stroke="<?php echo esc_attr($circle_stocke_bg); ?>"
1227	fill="none"
1228	stroke-width="<?php echo esc_attr($circle_prline_width); ?>"
1229	style="stroke-dasharray: <?php echo esc_attr($circle_perimeter); ?>; stroke-dashoffset: <?php echo esc_attr($circle_perimeter); ?>;"
1230	/>
1231	</svg>
1232	<?php $this->render_progress_bar_content('inside'); ?>
1233	</div>
1234	<?php
1235
1236	$this->render_progress_bar_content('outside');
1237
1238	}
1239
1240	protected function render_progress_bar_content($position)
1241	{
1242	/** @noinspection DuplicatedCode */
1243	$settings = $this->get_settings();
1244	$is_counter = ('yes' === $settings['counter_switcher'] && $position === $settings['counter_position']);
1245	$is_title = ('' !== $settings['title'] && $position === $settings['title_position']);
1246	$is_subtitle = ('' !== $settings['subtitle'] && $position === $settings['title_position']);
1247	$do_follow = ('yes' === $this->get_settings_for_display('counter_follow_line') && 'inside' === $settings['counter_position']);
1248
1249	if (!$is_title && !$is_subtitle && !$is_counter) {
1250	return;
1251	}
1252
1253	echo '<div class="king-addons-prbar-content elementor-clearfix">';
1254
1255	if ($is_title \|\| $is_subtitle) {
1256	echo '<div class="king-addons-prbar-title-wrap">';
1257	if ($is_title) {
1258	echo '<div class="king-addons-prbar-title">' . esc_html($settings['title']) . '</div>';
1259	}
1260	if ($is_subtitle) {
1261	echo '<div class="king-addons-prbar-subtitle">' . esc_html($settings['subtitle']) . '</div>';
1262	}
1263	echo '</div>';
1264	}
1265
1266	if ($is_counter && !$do_follow) {
1267	$this->render_progress_bar_counter();
1268	}
1269
1270	echo '</div>';
1271	}
1272
1273	protected function render_progress_bar_counter()
1274	{
1275	$settings = $this->get_settings();
1276	?>
1277	<div class="king-addons-prbar-counter">
1278	<?php
1279	foreach (['counter_prefix' => 'value-prefix', 'counter_value' => 'value', 'counter_suffix' => 'value-suffix'] as $key => $class) {
1280	if (!empty($settings[$key])) {
1281	echo sprintf(
1282	'<span class="king-addons-prbar-counter-%s">%s</span>',
1283	esc_attr($class),
1284	$key === 'counter_value' ? '0' : esc_html($settings[$key])
1285	);
1286	}
1287	}
1288	?>
1289	</div>
1290	<?php
1291	}
1292
1293	protected function render_progress_bar_hr_line()
1294	{
1295	$settings = $this->get_settings();
1296
1297	$this->render_progress_bar_content('outside');
1298
1299	echo '<div class="king-addons-prbar-hr-line"><div class="king-addons-prbar-hr-line-inner king-addons-animation-timing-' . esc_attr($settings['anim_timing']) . '">';
1300
1301	if ('yes' === $this->get_settings_for_display('counter_follow_line') && 'inside' === $settings['counter_position']) {
1302	$this->render_progress_bar_counter();
1303	}
1304
1305	echo '</div>';
1306	$this->render_progress_bar_content('inside');
1307	echo '</div>';
1308	}
1309
1310	public function render_progress_bar_vr_line()
1311	{
1312	}
1313
1314	protected function render()
1315	{
1316	$settings = $this->get_settings_for_display();
1317	$counter_percent = round(($settings['counter_value'] / $settings['max_value']) * 100);
1318
1319	$this->add_render_attribute('king-addons-progress-bar', [
1320	'class' => 'king-addons-progress-bar',
1321	'data-options' => wp_json_encode([
1322	'counterValue' => $settings['counter_value'],
1323	'counterValuePercent' => $counter_percent,
1324	'counterSeparator' => $settings['counter_separator'],
1325	'animDuration' => $settings['anim_duration'] * 1000,
1326	'animDelay' => $settings['anim_delay'] * 1000,
1327	'loop' => $settings['anim_loop'] ?? '',
1328	'loopDelay' => $settings['anim_loop_delay'] ?? '',
1329	]),
1330	]);
1331
1332	$layout = (!king_addons_freemius()->can_use_premium_code__premium_only() && $settings['layout'] === 'pro-vr') ? 'hr-line' : $settings['layout'];
1333
1334	echo '<div ' . $this->get_render_attribute_string('king-addons-progress-bar') . '>';
1335
1336	switch ($layout) {
1337	case 'circle':
1338	$this->render_progress_bar_circle($counter_percent);
1339	break;
1340	case 'hr-line':
1341	$this->render_progress_bar_hr_line();
1342	break;
1343	case 'vr-line':
1344	$this->render_progress_bar_vr_line();
1345	break;
1346	}
1347
1348	echo '</div>';
1349	}
1350	}