premium-progressbar.php — Premium Addons for Elementor – Powerful Elementor Templates & Widgets 4.1.0

premium-addons-for-elementor / widgets / premium-progressbar.php

premium-addons-for-elementor / widgets Last commit date

premium-progressbar.php

1137 lines

1	<?php
2
3	/**
4	* Premium Progress Bar.
5	*/
6	namespace PremiumAddons\Widgets;
7
8	// Elementor Classes.
9	use Elementor\Widget_Base;
10	use Elementor\Utils;
11	use Elementor\Controls_Manager;
12	use Elementor\Icons_Manager;
13	use Elementor\Repeater;
14	use Elementor\Scheme_Color;
15	use Elementor\Scheme_Typography;
16	use Elementor\Group_Control_Typography;
17	use Elementor\Group_Control_Background;
18	use Elementor\Group_Control_Border;
19
20	// PremiumAddons Classes.
21	use PremiumAddons\Includes\Helper_Functions;
22
23	if ( ! defined( 'ABSPATH' ) ) exit; // If this file is called directly, abort.
24
25	/**
26	* Class Premium_Progressbar
27	*/
28	class Premium_Progressbar extends Widget_Base {
29
30	public function get_name() {
31	return 'premium-addon-progressbar';
32	}
33
34	public function get_title() {
35	return sprintf( '%1$s %2$s', Helper_Functions::get_prefix(), __('Progress Bar', 'premium-addons-for-elementor') );
36	}
37
38	public function get_icon() {
39	return 'pa-progress-bar';
40	}
41
42	public function get_categories() {
43	return [ 'premium-elements' ];
44	}
45
46	public function get_style_depends() {
47	return [
48	'premium-addons'
49	];
50	}
51
52	public function get_script_depends() {
53	return [
54	'elementor-waypoints',
55	'lottie-js',
56	'premium-addons'
57	];
58	}
59
60	public function get_keywords() {
61	return ['circle', 'chart', 'line'];
62	}
63
64	public function get_custom_help_url() {
65	return 'https://premiumaddons.com/support/';
66	}
67
68	/**
69	* Register Testimonials controls.
70	*
71	* @since 1.0.0
72	* @access protected
73	*/
74	protected function _register_controls() {
75
76	$this->start_controls_section('premium_progressbar_labels',
77	[
78	'label' => __('Progress Bar Settings', 'premium-addons-for-elementor'),
79	]
80	);
81
82	$this->add_control('layout_type',
83	[
84	'label' => __('Type', 'premium-addons-for-elementor'),
85	'type' => Controls_Manager::SELECT,
86	'options' => [
87	'line' => __('Line', 'premium-addons-for-elementor'),
88	'circle' => __('Circle', 'premium-addons-for-elementor'),
89	'dots' => __('Dots', 'premium-addons-for-elementor'),
90	],
91	'default' =>'line',
92	'label_block' => true,
93	]
94	);
95
96	$this->add_responsive_control('dot_size',
97	[
98	'label' => __('Dot Size', 'premium-addons-for-elementor'),
99	'type' => Controls_Manager::SLIDER,
100	'range' => [
101	'px' => [
102	'min' => 1,
103	'max' => 60,
104	],
105	],
106	'default' => [
107	'size' => 25,
108	'unit' => 'px',
109	],
110	'condition' => [
111	'layout_type' => 'dots'
112	],
113	'render_type' => 'template',
114	'selectors' => [
115	'{{WRAPPER}} .progress-segment' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}',
116	],
117	]
118	);
119
120	$this->add_responsive_control('dot_spacing',
121	[
122	'label' => __('Spacing', 'premium-addons-for-elementor'),
123	'type' => Controls_Manager::SLIDER,
124	'range' => [
125	'px' => [
126	'min' => 1,
127	'max' => 10,
128	],
129	],
130	'default' => [
131	'size' => 8,
132	'unit' => 'px',
133	],
134	'condition' => [
135	'layout_type' => 'dots'
136	],
137	'render_type' => 'template',
138	'selectors' => [
139	'{{WRAPPER}} .progress-segment:not(:first-child):not(:last-child)' => 'margin-right: calc( {{SIZE}}{{UNIT}}/2 ); margin-left: calc( {{SIZE}}{{UNIT}}/2 )',
140	'{{WRAPPER}} .progress-segment:first-child' => 'margin-right: calc( {{SIZE}}{{UNIT}}/2 )',
141	'{{WRAPPER}} .progress-segment:last-child' => 'margin-left: calc( {{SIZE}}{{UNIT}}/2 )',
142	],
143	]
144	);
145
146	$this->add_control('circle_size',
147	[
148	'label' => __('Size', 'premium-addons-for-elementor'),
149	'type' => Controls_Manager::SLIDER,
150	'range' => [
151	'px' => [
152	'min' => 50,
153	'max' => 500,
154	'step' => 1,
155	],
156	],
157	'default' => [
158	'size' => 200,
159	],
160	'selectors' => [
161	'{{WRAPPER}} .premium-progressbar-circle-wrap' => 'width: {{SIZE}}px; height: {{SIZE}}px',
162	],
163	'condition' => [
164	'layout_type' => 'circle'
165	]
166	]
167	);
168
169	$this->add_control('premium_progressbar_select_label',
170	[
171	'label' => __('Labels', 'premium-addons-for-elementor'),
172	'type' => Controls_Manager::SELECT,
173	'default' =>'left_right_labels',
174	'options' => [
175	'left_right_labels' => __('Left & Right Labels', 'premium-addons-for-elementor'),
176	'more_labels' => __('Multiple Labels', 'premium-addons-for-elementor'),
177	],
178	'label_block' => true,
179	'condition' => [
180	'layout_type!' => 'circle'
181	]
182	]
183	);
184
185	$this->add_control('premium_progressbar_left_label',
186	[
187	'label' => __('Title', 'premium-addons-for-elementor'),
188	'type' => Controls_Manager::TEXT,
189	'dynamic' => [ 'active' => true ],
190	'default' => __('My Skill','premium-addons-for-elementor'),
191	'label_block' => true,
192	'condition' =>[
193	'premium_progressbar_select_label' => 'left_right_labels'
194	]
195	]
196	);
197
198	$this->add_control('premium_progressbar_right_label',
199	[
200	'label' => __('Percentage', 'premium-addons-for-elementor'),
201	'type' => Controls_Manager::TEXT,
202	'dynamic' => [ 'active' => true ],
203	'default' => __('50%','premium-addons-for-elementor'),
204	'label_block' => true,
205	'condition' =>[
206	'premium_progressbar_select_label' => 'left_right_labels',
207	'layout_type!' => 'circle'
208	]
209	]
210	);
211
212	$this->add_control('icon_type',
213	[
214	'label' => __( 'Icon Type', 'premium-addons-for-elementor' ),
215	'type' => Controls_Manager::SELECT,
216	'options' => [
217	'icon' => __('Icon', 'premium-addons-for-elementor'),
218	'image'=> __( 'Custom Image', 'premium-addons-for-elementor'),
219	'animation' => __('Lottie Animation', 'premium-addons-for-elementor'),
220	],
221	'default' => 'icon',
222	'condition' =>[
223	'layout_type' => 'circle'
224	]
225	]
226	);
227
228	$this->add_control('icon_select',
229	[
230	'label' => __( 'Select an Icon', 'premium-addons-for-elementor' ),
231	'type' => Controls_Manager::ICONS,
232	'condition' =>[
233	'icon_type' => 'icon',
234	'layout_type' => 'circle'
235	]
236	]
237	);
238
239	$this->add_control('image_upload',
240	[
241	'label' => __( 'Upload Image', 'premium-addons-for-elementor' ),
242	'type' => Controls_Manager::MEDIA,
243	'default' => [
244	'url' => Utils::get_placeholder_image_src(),
245	],
246	'condition' => [
247	'icon_type' => 'image',
248	'layout_type' => 'circle'
249	]
250	]
251	);
252
253	$this->add_control('lottie_url',
254	[
255	'label' => __( 'Animation JSON URL', 'premium-addons-for-elementor' ),
256	'type' => Controls_Manager::TEXT,
257	'dynamic' => [ 'active' => true ],
258	'description' => 'Get JSON code URL from <a href="https://lottiefiles.com/" target="_blank">here</a>',
259	'label_block' => true,
260	'condition' => [
261	'layout_type' => 'circle',
262	'icon_type' => 'animation',
263	]
264	]
265	);
266
267	$this->add_control('lottie_loop',
268	[
269	'label' => __('Loop','premium-addons-for-elementor'),
270	'type' => Controls_Manager::SWITCHER,
271	'return_value' => 'true',
272	'default' => 'true',
273	'condition' => [
274	'layout_type' => 'circle',
275	'icon_type' => 'animation',
276	]
277	]
278	);
279
280	$this->add_control('lottie_reverse',
281	[
282	'label' => __('Reverse','premium-addons-for-elementor'),
283	'type' => Controls_Manager::SWITCHER,
284	'return_value' => 'true',
285	'condition' => [
286	'layout_type' => 'circle',
287	'icon_type' => 'animation',
288	]
289	]
290	);
291
292	$this->add_responsive_control('icon_size',
293	[
294	'label' => __('Icon Size', 'premium-addons-for-elementor'),
295	'type' => Controls_Manager::SLIDER,
296	'condition' => [
297	'layout_type' => 'circle'
298	],
299	'default' => [
300	'unit' => 'px',
301	'size' => 30,
302	],
303	'selectors' => [
304	'{{WRAPPER}} .premium-progressbar-circle-content i' => 'font-size: {{SIZE}}px',
305	'{{WRAPPER}} .premium-progressbar-circle-content svg, {{WRAPPER}} .premium-progressbar-circle-content img' => 'width: {{SIZE}}px; height: {{SIZE}}px',
306	]
307	]
308	);
309
310	$this->add_control('show_percentage_value',
311	[
312	'label' => __('Show Percentage Value', 'premium-addons-for-elementor'),
313	'type' => Controls_Manager::SWITCHER,
314	'default' => 'yes',
315	'condition' => [
316	'layout_type' => 'circle'
317	]
318	]
319	);
320
321	$repeater = new REPEATER();
322
323	$repeater->add_control('text',
324	[
325	'label' => __( 'Label','premium-addons-for-elementor' ),
326	'type' => Controls_Manager::TEXT,
327	'dynamic' => [ 'active' => true ],
328	'label_block' => true,
329	'placeholder' => __( 'label','premium-addons-for-elementor' ),
330	'default' => __( 'label', 'premium-addons-for-elementor' ),
331	]
332	);
333
334	$repeater->add_control('number',
335	[
336	'label' => __( 'Percentage', 'premium-addons-for-elementor' ),
337	'dynamic' => [ 'active' => true ],
338	'type' => Controls_Manager::TEXT,
339	'default' => 50,
340	]
341	);
342
343	$this->add_control('premium_progressbar_multiple_label',
344	[
345	'label' => __('Label','premium-addons-for-elementor'),
346	'type' => Controls_Manager::REPEATER,
347	'default' => [
348	[
349	'text' => __( 'Label','premium-addons-for-elementor' ),
350	'number' => 50
351	]
352	],
353	'fields' => $repeater->get_controls(),
354	'condition' => [
355	'premium_progressbar_select_label' => 'more_labels',
356	'layout_type!' => 'circle'
357	]
358	]
359	);
360
361	$this->add_control('premium_progress_bar_space_percentage_switcher',
362	[
363	'label' => __('Enable Percentage', 'premium-addons-for-elementor'),
364	'type' => Controls_Manager::SWITCHER,
365	'default' => 'yes',
366	'description' => __('Enable percentage for labels','premium-addons-for-elementor'),
367	'condition' => [
368	'premium_progressbar_select_label'=>'more_labels',
369	'layout_type!' => 'circle'
370	]
371	]
372	);
373
374	$this->add_control('premium_progressbar_select_label_icon',
375	[
376	'label' => __('Labels Indicator', 'premium-addons-for-elementor'),
377	'type' => Controls_Manager::SELECT,
378	'default' =>'line_pin',
379	'options' => [
380	'' => __('None','premium-addons-for-elementor'),
381	'line_pin' => __('Pin', 'premium-addons-for-elementor'),
382	'arrow' => __('Arrow','premium-addons-for-elementor'),
383	],
384	'condition' =>[
385	'premium_progressbar_select_label' => 'more_labels',
386	'layout_type!' => 'circle'
387	]
388	]
389	);
390
391	$this->add_control('premium_progressbar_more_labels_align',
392	[
393	'label' => __('Labels Alignment','premuim-addons-for-elementor'),
394	'type' => Controls_Manager::CHOOSE,
395	'options' => [
396	'left' => [
397	'title'=> __( 'Left', 'premium-addons-for-elementor' ),
398	'icon' => 'fa fa-align-left',
399	],
400	'center' => [
401	'title'=> __( 'Center', 'premium-addons-for-elementor' ),
402	'icon' => 'fa fa-align-center',
403	],
404	'right' => [
405	'title'=> __( 'Right', 'premium-addons-for-elementor' ),
406	'icon' => 'fa fa-align-right',
407	],
408	],
409	'default' => 'center',
410	'condition' =>[
411	'premium_progressbar_select_label' => 'more_labels',
412	'layout_type!' => 'circle'
413	]
414	]
415	);
416
417	$this->add_control('premium_progressbar_progress_percentage',
418	[
419	'label' => __('Value', 'premium-addons-for-elementor'),
420	'type' => Controls_Manager::TEXT,
421	'dynamic' => [ 'active' => true ],
422	'default' => 50
423	]
424	);
425
426	$this->add_control('premium_progressbar_progress_style',
427	[
428	'label' => __('Style', 'premium-addons-for-elementor'),
429	'type' => Controls_Manager::SELECT,
430	'default' => 'solid',
431	'options' => [
432	'solid' => __('Solid', 'premium-addons-for-elementor'),
433	'stripped' => __('Striped', 'premium-addons-for-elementor'),
434	'gradient' => __('Animated Gradient', 'premium-addons-for-elementor'),
435	],
436	'condition' => [
437	'layout_type' => 'line'
438	]
439	]
440	);
441
442	$this->add_control('premium_progressbar_speed',
443	[
444	'label' => __('Speed (milliseconds)', 'premium-addons-for-elementor'),
445	'type' => Controls_Manager::NUMBER
446	]
447	);
448
449	$this->add_control('premium_progressbar_progress_animation',
450	[
451	'label' => __('Animated', 'premium-addons-for-elementor'),
452	'type' => Controls_Manager::SWITCHER,
453	'condition' => [
454	'premium_progressbar_progress_style' => 'stripped',
455	'layout_type' => 'line'
456	]
457	]
458	);
459
460	$this->add_control('gradient_colors',
461	[
462	'label' => __('Gradient Colors', 'premium-addons-for-elementor'),
463	'type' => Controls_Manager::TEXT,
464	'description' => __('Enter Colors separated with \' , \'.','premium-addons-for-elementor'),
465	'default' => '#6EC1E4,#54595F',
466	'label_block' => true,
467	'condition' => [
468	'layout_type' => 'line',
469	'premium_progressbar_progress_style' => 'gradient'
470	]
471	]
472	);
473
474	$this->end_controls_section();
475
476
477	$this->start_controls_section('premium_progressbar_progress_bar_settings',
478	[
479	'label' => __('Progress Bar', 'premium-addons-for-elementor'),
480	'tab' => Controls_Manager::TAB_STYLE,
481	]
482	);
483
484	$this->add_control('premium_progressbar_progress_bar_height',
485	[
486	'label' => __('Height', 'premium-addons-for-elementor'),
487	'type' => Controls_Manager::SLIDER,
488	'default' => [
489	'size' => 25,
490	],
491	'label_block' => true,
492	'selectors' => [
493	'{{WRAPPER}} .premium-progressbar-bar-wrap, {{WRAPPER}} .premium-progressbar-bar' => 'height: {{SIZE}}px;',
494	],
495	'condition' => [
496	'layout_type' => 'line'
497	]
498	]
499	);
500
501	$this->add_control('premium_progressbar_progress_bar_radius',
502	[
503	'label' => __('Border Radius', 'premium-addons-for-elementor'),
504	'type' => Controls_Manager::SLIDER,
505	'size_units' => ['px', '%', 'em'],
506	'range' => [
507	'px' => [
508	'min' => 0,
509	'max' => 60,
510	],
511	],
512	'selectors' => [
513	'{{WRAPPER}} .premium-progressbar-bar-wrap, {{WRAPPER}} .premium-progressbar-bar, {{WRAPPER}} .progress-segment' => 'border-radius: {{SIZE}}{{UNIT}};',
514	],
515	'condition' => [
516	'layout_type!' => 'circle'
517	]
518	]
519	);
520
521	$this->add_control('circle_border_width',
522	[
523	'label' => __('Border Width', 'premium-addons-for-elementor'),
524	'type' => Controls_Manager::SLIDER,
525	'selectors' => [
526	'{{WRAPPER}} .premium-progressbar-circle-base' => 'border-width: {{SIZE}}{{UNIT}}',
527	'{{WRAPPER}} .premium-progressbar-circle div' => 'border-width: {{SIZE}}{{UNIT}}',
528	],
529	'condition' => [
530	'layout_type' => 'circle'
531	]
532	]
533	);
534
535	$this->add_control('circle_base_border_color',
536	[
537	'label' => __('Border Color', 'premium-addons-for-elementor'),
538	'type' => Controls_Manager::COLOR,
539	'scheme' => [
540	'type' => Scheme_Color::get_type(),
541	'value' => Scheme_Color::COLOR_1,
542	],
543	'selectors' => [
544	'{{WRAPPER}} .premium-progressbar-circle-base' => 'border-color: {{VALUE}};',
545	],
546	'condition' => [
547	'layout_type' => 'circle'
548	]
549	]
550	);
551
552	$this->add_control('fill_colors_title',
553	[
554	'label' => __('Fill', 'premium-addons-for-elementor'),
555	'type' => Controls_Manager::HEADING,
556	]
557	);
558
559	$this->add_group_control(
560	Group_Control_Background::get_type(),
561	[
562	'name' => 'premium_progressbar_progress_color',
563	'types' => [ 'classic' , 'gradient' ],
564	'selector' => '{{WRAPPER}} .premium-progressbar-bar, {{WRAPPER}} .segment-inner',
565	'condition' => [
566	'layout_type!' => 'circle'
567	]
568	]
569	);
570
571	$this->add_control('circle_fill_color',
572	[
573	'label' => __('Select Color', 'premium-addons-for-elementor'),
574	'type' => Controls_Manager::COLOR,
575	'scheme' => [
576	'type' => Scheme_Color::get_type(),
577	'value' => Scheme_Color::COLOR_2,
578	],
579	'condition' => [
580	'layout_type' => 'circle'
581	],
582	'selectors' => [
583	'{{WRAPPER}} .premium-progressbar-circle div' => 'border-color: {{VALUE}};',
584	],
585	]
586	);
587
588	$this->add_control('base_colors_title',
589	[
590	'label' => __('Base', 'premium-addons-for-elementor'),
591	'type' => Controls_Manager::HEADING,
592	]
593	);
594
595	$this->add_group_control(
596	Group_Control_Background::get_type(),
597	[
598	'name' => 'premium_progressbar_background',
599	'types' => [ 'classic' , 'gradient' ],
600	'selector' => '{{WRAPPER}} .premium-progressbar-bar-wrap:not(.premium-progressbar-dots), {{WRAPPER}} .premium-progressbar-circle-base, {{WRAPPER}} .progress-segment',
601	]
602	);
603
604	$this->add_responsive_control('premium_progressbar_container_margin',
605	[
606	'label' => __('Margin', 'premium-addons-for-elementor'),
607	'type' => Controls_Manager::DIMENSIONS,
608	'size_units' => [ 'px', 'em', '%' ],
609	'selectors' => [
610	'{{WRAPPER}} .premium-progressbar-bar-wrap' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
611	],
612	'condition' => [
613	'layout_type!' => 'circle'
614	]
615	]
616	);
617
618	$this->end_controls_section();
619
620	$this->start_controls_section('premium_progressbar_labels_section',
621	[
622	'label' => __('Labels', 'premium-addons-for-elementor'),
623	'tab' => Controls_Manager::TAB_STYLE,
624	'condition' => [
625	'premium_progressbar_select_label' => 'left_right_labels'
626	]
627	]
628	);
629
630	$this->add_control('premium_progressbar_left_label_hint',
631	[
632	'label' => __('Title', 'premium-addons-for-elementor'),
633	'type' => Controls_Manager::HEADING,
634	]
635	);
636
637	$this->add_control('premium_progressbar_left_label_color',
638	[
639	'label' => __('Color', 'premium-addons-for-elementor'),
640	'type' => Controls_Manager::COLOR,
641	'scheme' => [
642	'type' => Scheme_Color::get_type(),
643	'value' => Scheme_Color::COLOR_1,
644	],
645	'selectors' => [
646	'{{WRAPPER}} .premium-progressbar-left-label' => 'color: {{VALUE}};',
647	]
648	]
649	);
650
651	$this->add_group_control(
652	Group_Control_Typography::get_type(),
653	[
654	'name' => 'left_label_typography',
655	'scheme' => Scheme_Typography::TYPOGRAPHY_1,
656	'selector' => '{{WRAPPER}} .premium-progressbar-left-label',
657	]
658	);
659
660	$this->add_responsive_control('premium_progressbar_left_label_margin',
661	[
662	'label' => __('Margin', 'premium-addons-for-elementor'),
663	'type' => Controls_Manager::DIMENSIONS,
664	'size_units' => [ 'px', 'em', '%' ],
665	'selectors' => [
666	'{{WRAPPER}} .premium-progressbar-left-label' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
667	]
668	]
669	);
670
671	$this->add_control('premium_progressbar_right_label_hint',
672	[
673	'label' => __('Percentage', 'premium-addons-for-elementor'),
674	'type' => Controls_Manager::HEADING,
675	'separator' => 'before'
676	]
677	);
678
679	$this->add_control('premium_progressbar_right_label_color',
680	[
681	'label' => __('Color', 'premium-addons-for-elementor'),
682	'type' => Controls_Manager::COLOR,
683	'scheme' => [
684	'type' => Scheme_Color::get_type(),
685	'value' => Scheme_Color::COLOR_1,
686	],
687	'selectors' => [
688	'{{WRAPPER}} .premium-progressbar-right-label' => 'color: {{VALUE}};',
689	]
690	]
691	);
692
693	$this->add_group_control(
694	Group_Control_Typography::get_type(),
695	[
696	'name' => 'right_label_typography',
697	'scheme' => Scheme_Typography::TYPOGRAPHY_1,
698	'selector' => '{{WRAPPER}} .premium-progressbar-right-label',
699	]
700	);
701
702	$this->add_responsive_control('premium_progressbar_right_label_margin',
703	[
704	'label' => __('Margin', 'premium-addons-for-elementor'),
705	'type' => Controls_Manager::DIMENSIONS,
706	'size_units' => [ 'px', 'em', '%' ],
707	'selectors' => [
708	'{{WRAPPER}} .premium-progressbar-right-label' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
709	]
710	]
711	);
712
713	$this->end_controls_section();
714
715	$this->start_controls_section('premium_progressbar_multiple_labels_section',
716	[
717	'label' => __('Multiple Labels', 'premium-addons-for-elementor'),
718	'tab' => Controls_Manager::TAB_STYLE,
719	'condition' =>[
720	'premium_progressbar_select_label' => 'more_labels'
721	]
722	]
723	);
724
725	$this->add_control('premium_progressbar_multiple_label_color',
726	[
727	'label' => __('Labels\' Color', 'premium-addons-for-elementor'),
728	'type' => Controls_Manager::COLOR,
729	'scheme' => [
730	'type' => Scheme_Color::get_type(),
731	'value' => Scheme_Color::COLOR_1,
732	],
733	'selectors' => [
734	'{{WRAPPER}} .premium-progressbar-center-label' => 'color: {{VALUE}};',
735	]
736	]
737	);
738
739	$this->add_group_control(
740	Group_Control_Typography::get_type(),
741	[
742	'label' => __('Labels\' Typography', 'premium-addons-for-elementor'),
743	'name' => 'more_label_typography',
744	'scheme' => Scheme_Typography::TYPOGRAPHY_1,
745	'selector' => '{{WRAPPER}} .premium-progressbar-center-label',
746	]
747	);
748
749	$this->add_control('premium_progressbar_value_label_color',
750	[
751	'label' => __('Percentage Color', 'premium-addons-for-elementor'),
752	'type' => Controls_Manager::COLOR,
753	'scheme' => [
754	'type' => Scheme_Color::get_type(),
755	'value' => Scheme_Color::COLOR_1,
756	],
757	'condition' =>[
758	'premium_progress_bar_space_percentage_switcher'=>'yes'
759	],
760	'selectors' => [
761	'{{WRAPPER}} .premium-progressbar-percentage' => 'color: {{VALUE}};',
762	]
763	]
764	);
765
766	$this->add_group_control(
767	Group_Control_Typography::get_type(),
768	[
769	'label' => __('Percentage Typography','premium-addons-for-elementor'),
770	'name' => 'percentage_typography',
771	'condition' =>[
772	'premium_progress_bar_space_percentage_switcher'=>'yes'
773	],
774	'scheme' => Scheme_Typography::TYPOGRAPHY_1,
775	'selector' => '{{WRAPPER}} .premium-progressbar-percentage',
776	]
777	);
778
779	$this->end_controls_section();
780
781	$this->start_controls_section('premium_progressbar_multiple_labels_arrow_section',
782	[
783	'label' => __('Arrow', 'premium-addons-for-elementor'),
784	'tab' => Controls_Manager::TAB_STYLE,
785	'condition' =>[
786	'premium_progressbar_select_label' => 'more_labels',
787	'premium_progressbar_select_label_icon' => 'arrow'
788	]
789	]
790	);
791
792	$this->add_control('premium_progressbar_arrow_color',
793	[
794	'label' => __('Color', 'premium_elementor'),
795	'type' => Controls_Manager::COLOR,
796	'scheme' => [
797	'type' => Scheme_Color::get_type(),
798	'value' => Scheme_Color::COLOR_1,
799	],
800	'condition' =>[
801	'premium_progressbar_select_label_icon' => 'arrow'
802	],
803	'selectors' => [
804	'{{WRAPPER}} .premium-progressbar-arrow' => 'color: {{VALUE}};'
805	]
806	]
807	);
808
809	$this->add_responsive_control('premium_arrow_size',
810	[
811	'label' => __('Size','premium-addons-for-elementor'),
812	'type' =>Controls_Manager::SLIDER,
813	'size_units' => ['px', "em"],
814	'condition' =>[
815	'premium_progressbar_select_label_icon' => 'arrow'
816	],
817	'selectors' => [
818	'{{WRAPPER}} .premium-progressbar-arrow' => 'border-width: {{SIZE}}{{UNIT}};'
819	]
820	]
821	);
822
823	$this->end_controls_section();
824
825	$this->start_controls_section('premium_progressbar_multiple_labels_pin_section',
826	[
827	'label' => __('Indicator', 'premium-addons-for-elementor'),
828	'tab' => Controls_Manager::TAB_STYLE,
829	'condition' =>[
830	'premium_progressbar_select_label' => 'more_labels',
831	'premium_progressbar_select_label_icon' => 'line_pin'
832	]
833	]
834	);
835
836	$this->add_control('premium_progressbar_line_pin_color',
837	[
838	'label' => __('Color', 'premium-addons-for-elementor'),
839	'type' => Controls_Manager::COLOR,
840	'scheme' => [
841	'type' => Scheme_Color::get_type(),
842	'value' => Scheme_Color::COLOR_2,
843	],
844	'condition' =>[
845	'premium_progressbar_select_label_icon' =>'line_pin'
846	],
847	'selectors' => [
848	'{{WRAPPER}} .premium-progressbar-pin' => 'border-color: {{VALUE}};'
849	]
850	]
851	);
852
853	$this->add_responsive_control('premium_pin_size',
854	[
855	'label' => __('Size','premium-addons-for-elementor'),
856	'type' =>Controls_Manager::SLIDER,
857	'size_units' => ['px', "em"],
858	'condition' =>[
859	'premium_progressbar_select_label_icon' => 'line_pin'
860	],
861	'selectors' => [
862	'{{WRAPPER}} .premium-progressbar-pin' => 'border-left-width: {{SIZE}}{{UNIT}};'
863	]
864	]
865	);
866
867	$this->add_responsive_control('premium_pin_height',
868	[
869	'label' => __('Height','premium-addons-for-elementor'),
870	'type' =>Controls_Manager::SLIDER,
871	'size_units' => ['px', "em"],
872	'condition' =>[
873	'premium_progressbar_select_label_icon' => 'line_pin'
874	],
875	'selectors' => [
876	'{{WRAPPER}} .premium-progressbar-pin' => 'height: {{SIZE}}{{UNIT}};'
877	]
878	]
879	);
880
881	$this->end_controls_section();
882
883	$this->start_controls_section('icon_style',
884	[
885	'label' => __('Icon', 'premium-addons-for-elementor'),
886	'tab' => Controls_Manager::TAB_STYLE,
887	'condition' => [
888	'layout_type' => 'circle'
889	]
890	]
891	);
892
893	$this->add_control('icon_color',
894	[
895	'label' => __('Color', 'premium-addons-for-elementor'),
896	'type' => Controls_Manager::COLOR,
897	'scheme' => [
898	'type' => Scheme_Color::get_type(),
899	'value' => Scheme_Color::COLOR_1,
900	],
901	'selectors' => [
902	'{{WRAPPER}} .premium-progressbar-circle-icon' => 'color: {{VALUE}};',
903	],
904	'condition' => [
905	'icon_type' => 'icon'
906	]
907	]
908	);
909
910	$this->add_control('icon_background_color',
911	[
912	'label' => __('Background Color', 'premium-addons-for-elementor'),
913	'type' => Controls_Manager::COLOR,
914	'selectors' => [
915	'{{WRAPPER}} .premium-progressbar-circle-icon' => 'background-color: {{VALUE}};',
916	],
917	'condition' => [
918	'icon_type!' => 'image'
919	]
920	]
921	);
922
923	$this->add_group_control(
924	Group_Control_Border::get_type(),
925	[
926	'name' => 'icon_border',
927	'selector' => '{{WRAPPER}} .premium-progressbar-circle-icon',
928	]
929	);
930
931	$this->add_responsive_control('icon_border_radius',
932	[
933	'label' => __('Border Radius', 'premium-addons-for-elementor'),
934	'type' => Controls_Manager::DIMENSIONS,
935	'size_units' => ['px', 'em', '%'],
936	'selectors' => [
937	'{{WRAPPER}} .premium-progressbar-circle-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}'
938	]
939	]
940	);
941
942	$this->add_responsive_control('icon_padding',
943	[
944	'label' => __('Padding', 'premium-addons-for-elementor'),
945	'type' => Controls_Manager::DIMENSIONS,
946	'size_units' => ['px', 'em', '%'],
947	'selectors' => [
948	'{{WRAPPER}} .premium-progressbar-circle-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
949	]
950	]
951	);
952
953	$this->end_controls_section();
954	}
955
956	/**
957	* Render Progress Bar widget output on the frontend.
958	*
959	* Written in PHP and used to generate the final HTML.
960	*
961	* @since 1.0.0
962	* @access protected
963	*/
964	protected function render() {
965
966	$settings = $this->get_settings_for_display();
967
968	$this->add_inline_editing_attributes('premium_progressbar_left_label');
969	$this->add_inline_editing_attributes('premium_progressbar_right_label');
970
971	$length = isset ( $settings['premium_progressbar_progress_percentage']['size'] ) ? $settings['premium_progressbar_progress_percentage']['size'] : $settings['premium_progressbar_progress_percentage'];
972
973	$style = $settings['premium_progressbar_progress_style'];
974	$type = $settings['layout_type'];
975
976	$progressbar_settings = [
977	'progress_length' => $length,
978	'speed' => !empty( $settings['premium_progressbar_speed'] ) ? $settings['premium_progressbar_speed'] : 1000,
979	'type' => $type,
980	];
981
982	if( 'dots' === $type ) {
983	$progressbar_settings['dot'] = $settings['dot_size']['size'];
984	$progressbar_settings['spacing'] = $settings['dot_spacing']['size'];
985	}
986
987	$this->add_render_attribute( 'progressbar', 'class', 'premium-progressbar-container' );
988
989	if( 'stripped' === $style ) {
990	$this->add_render_attribute( 'progressbar', 'class', 'premium-progressbar-striped' );
991	} elseif( 'gradient' === $style ) {
992	$this->add_render_attribute( 'progressbar', 'class', 'premium-progressbar-gradient' );
993	$progressbar_settings['gradient'] = $settings['gradient_colors'];
994	}
995
996	if( 'yes' === $settings['premium_progressbar_progress_animation'] ) {
997	$this->add_render_attribute( 'progressbar', 'class', 'premium-progressbar-active' );
998	}
999
1000	$this->add_render_attribute( 'progressbar', 'data-settings', wp_json_encode($progressbar_settings) );
1001
1002	if( 'circle' !== $type ) {
1003	$this->add_render_attribute( 'wrap', 'class', 'premium-progressbar-bar-wrap' );
1004
1005	if( 'dots' === $type ) {
1006	$this->add_render_attribute( 'wrap', 'class', 'premium-progressbar-dots' );
1007	}
1008
1009	} else {
1010	$this->add_render_attribute( 'wrap', 'class', 'premium-progressbar-circle-wrap' );
1011
1012	$icon_type = $settings['icon_type'];
1013
1014	if( 'animation' === $icon_type ) {
1015	$this->add_render_attribute( 'progress_lottie', [
1016	'class' => [
1017	'premium-progressbar-circle-icon',
1018	'premium-lottie-animation'
1019	],
1020	'data-lottie-url' => $settings['lottie_url'],
1021	'data-lottie-loop' => $settings['lottie_loop'],
1022	'data-lottie-reverse' => $settings['lottie_reverse']
1023	]);
1024	}
1025
1026	}
1027
1028	?>
1029
1030	<div <?php echo $this->get_render_attribute_string( 'progressbar' ); ?>>
1031
1032	<?php if ($settings['premium_progressbar_select_label'] === 'left_right_labels') :?>
1033	<p class="premium-progressbar-left-label"><span <?php echo $this->get_render_attribute_string('premium_progressbar_left_label'); ?>><?php echo $settings['premium_progressbar_left_label'];?></span></p>
1034	<p class="premium-progressbar-right-label"><span <?php echo $this->get_render_attribute_string('premium_progressbar_right_label'); ?>><?php echo $settings['premium_progressbar_right_label'];?></span></p>
1035	<?php endif;?>
1036
1037	<?php if ($settings['premium_progressbar_select_label'] === 'more_labels') : ?>
1038	<div class="premium-progressbar-container-label" style="position:relative;">
1039	<?php foreach($settings['premium_progressbar_multiple_label'] as $item){
1040	if( $this->get_settings('premium_progressbar_more_labels_align') === 'center' ) {
1041	if($settings['premium_progress_bar_space_percentage_switcher'] === 'yes'){
1042	if( $settings['premium_progressbar_select_label_icon'] === 'arrow' ) {
1043	echo '<div class ="premium-progressbar-multiple-label" style="left:'.$item['number'].'%;"><p class = "premium-progressbar-center-label" style="transform:translateX(-45%);">'.$item['text'].' <span class="premium-progressbar-percentage">'.$item['number'].'%</span></p><p class="premium-progressbar-arrow" style="left:'.$item['number'].'%; transform:translateX(50%);"></p></div>';
1044	} elseif($settings['premium_progressbar_select_label_icon'] === 'line_pin') {
1045	echo '<div class ="premium-progressbar-multiple-label" style="left:'.$item['number'].'%;"><p class = "premium-progressbar-center-label" style="transform:translateX(-45%);">'.$item['text'].' <span class="premium-progressbar-percentage">'.$item['number'].'%</span></p><p class="premium-progressbar-pin" style="left:'.$item['number'].'%; transform:translateX(50%);"></p></div>';
1046	} else {
1047	echo '<div class ="premium-progressbar-multiple-label" style="left:'.$item['number'].'%;"><p class = "premium-progressbar-center-label" style="transform:translateX(-45%);">'.$item['text'].' <span class="premium-progressbar-percentage">'.$item['number'].'%</span></p></div>';
1048	}
1049	} else{
1050	if($settings['premium_progressbar_select_label_icon'] === 'arrow') {
1051	echo '<div class ="premium-progressbar-multiple-label" style="left:'.$item['number'].'%;"><p class = "premium-progressbar-center-label" style="transform:translateX(-45%);">'.$item['text'].'</p><p class="premium-progressbar-arrow" style="left:'.$item['number'].'%; transform:translateX(50%);"></p></div>';
1052	} elseif( $settings['premium_progressbar_select_label_icon'] === 'line_pin') {
1053	echo '<div class ="premium-progressbar-multiple-label" style="left:'.$item['number'].'%;"><p class = "premium-progressbar-center-label" style="transform:translateX(-45%)">'.$item['text'].'</p><p class="premium-progressbar-pin" style="left:'.$item['number'].'%; transform:translateX(50%);"></p></div>';
1054	} else {
1055	echo '<div class ="premium-progressbar-multiple-label" style="left:'.$item['number'].'%;"><p class = "premium-progressbar-center-label" style="transform:translateX(-45%);">'.$item['text'].'</p></div>';
1056	}
1057	}
1058	} elseif($this->get_settings('premium_progressbar_more_labels_align') === 'left' ) {
1059	if($settings['premium_progress_bar_space_percentage_switcher'] === 'yes'){
1060	if($settings['premium_progressbar_select_label_icon'] === 'arrow') {
1061	echo '<div class ="premium-progressbar-multiple-label" style="left:'.$item['number'].'%;"><p class = "premium-progressbar-center-label" style="transform:translateX(-10%);">'.$item['text'].' <span class="premium-progressbar-percentage">'.$item['number'].'%</span></p><p class="premium-progressbar-arrow" style="left:'.$item['number'].'%; transform:translateX(50%);"></p></div>';
1062	} elseif($settings['premium_progressbar_select_label_icon'] === 'line_pin'){
1063	echo '<div class ="premium-progressbar-multiple-label" style="left:'.$item['number'].'%;"><p class = "premium-progressbar-center-label" style="transform:translateX(-2%);">'.$item['text'].' <span class="premium-progressbar-percentage">'.$item['number'].'%</span></p><p class="premium-progressbar-pin" style="left:'.$item['number'].'%; transform:translateX(50%);"></p></div>';
1064	} else {
1065	echo '<div class ="premium-progressbar-multiple-label" style="left:'.$item['number'].'%;"><p class = "premium-progressbar-center-label" style="transform:translateX(-2%);">'.$item['text'].' <span class="premium-progressbar-percentage">'.$item['number'].'%</span></p></div>';
1066	}
1067	} else{
1068	if($settings['premium_progressbar_select_label_icon'] === 'arrow') {
1069	echo '<div class ="premium-progressbar-multiple-label" style="left:'.$item['number'].'%;"><p class = "premium-progressbar-center-label" style="transform:translateX(-10%);">'.$item['text'].'</p><p class="premium-progressbar-arrow" style="left:'.$item['number'].'%; transform:translateX(50%);"></p></div>';
1070	} elseif($settings['premium_progressbar_select_label_icon'] === 'line_pin'){
1071	echo '<div class ="premium-progressbar-multiple-label" style="left:'.$item['number'].'%;"><p class = "premium-progressbar-center-label" style="transform:translateX(-2%);">'.$item['text'].'</p><p class="premium-progressbar-pin" style="left:'.$item['number'].'%; transform:translateX(50%);"></p></div>';
1072	} else {
1073	echo '<div class ="premium-progressbar-multiple-label" style="left:'.$item['number'].'%;"><p class = "premium-progressbar-center-label" style="transform:translateX(-2%);">'.$item['text'].'</p></div>';
1074	}
1075	}
1076	} else {
1077	if($settings['premium_progress_bar_space_percentage_switcher'] === 'yes'){
1078	if($settings['premium_progressbar_select_label_icon'] === 'arrow') {
1079	echo '<div class ="premium-progressbar-multiple-label" style="left:'.$item['number'].'%;"><p class = "premium-progressbar-center-label" style="transform:translateX(-82%);">'.$item['text'].' <span class="premium-progressbar-percentage">'.$item['number'].'%</span></p><p class="premium-progressbar-arrow" style="left:'.$item['number'].'%; transform:translateX(50%);"></p></div>';
1080	} elseif($settings['premium_progressbar_select_label_icon'] === 'line_pin'){
1081	echo '<div class ="premium-progressbar-multiple-label" style="left:'.$item['number'].'%;"><p class = "premium-progressbar-center-label" style="transform:translateX(-95%);">'.$item['text'].' <span class="premium-progressbar-percentage">'.$item['number'].'%</span></p><p class="premium-progressbar-pin" style="left:'.$item['number'].'%; transform:translateX(50%);"></p></div>';
1082	} else {
1083	echo '<div class ="premium-progressbar-multiple-label" style="left:'.$item['number'].'%;"><p class = "premium-progressbar-center-label" style="transform:translateX(-96%);">'.$item['text'].' <span class="premium-progressbar-percentage">'.$item['number'].'%</span></p></div>';
1084	}
1085	} else{
1086	if($settings['premium_progressbar_select_label_icon'] === 'arrow') {
1087	echo '<div class ="premium-progressbar-multiple-label" style="left:'.$item['number'].'%;"><p class = "premium-progressbar-center-label" style="transform:translateX(-71%);">'.$item['text'].'</p><p class="premium-progressbar-arrow" style="left:'.$item['number'].'%; transform:translateX(50%);"></p></div>';
1088	} elseif($settings['premium_progressbar_select_label_icon'] === 'line_pin'){
1089	echo '<div class ="premium-progressbar-multiple-label" style="left:'.$item['number'].'%;"><p class = "premium-progressbar-center-label" style="transform:translateX(-97%);">'.$item['text'].'</p><p class="premium-progressbar-pin" style="left:'.$item['number'].'%; transform:translateX(50%);"></p></div>';
1090	} else {
1091	echo '<div class ="premium-progressbar-multiple-label" style="left:'.$item['number'].'%;"><p class = "premium-progressbar-center-label" style="transform:translateX(-96%);">'.$item['text'].'</p></div>';
1092	}
1093	}
1094	}
1095
1096	} ?>
1097	</div>
1098	<?php endif; ?>
1099
1100	<div class="clearfix"></div>
1101	<div <?php echo $this->get_render_attribute_string( 'wrap' ); ?>>
1102	<?php if( 'line' === $type ) : ?>
1103	<div class="premium-progressbar-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
1104	<?php elseif( 'circle' === $type ): ?>
1105	<div class="premium-progressbar-circle-base"></div>
1106	<div class="premium-progressbar-circle">
1107	<div class="premium-progressbar-circle-left"></div>
1108	<div class="premium-progressbar-circle-right"></div>
1109	</div>
1110	<div class="premium-progressbar-circle-content">
1111	<?php if( !empty( $settings['icon_select']['value'] ) \|\| ! empty( $settings['image_upload']['url'] ) \|\| !empty( $settings['lottie_url'] ) ) : ?>
1112	<?php if('icon' === $icon_type ):
1113	Icons_Manager::render_icon( $settings['icon_select'], [ 'class'=> 'premium-progressbar-circle-icon', 'aria-hidden' => 'true' ] );
1114	elseif( 'image' === $icon_type ) : ?>
1115	<img class="premium-progressbar-circle-icon" src="<?php echo $settings['image_upload']['url']; ?>">
1116	<?php else: ?>
1117	<div <?php echo $this->get_render_attribute_string( 'progress_lottie' ); ?>></div>
1118	<?php endif;?>
1119	<?php endif; ?>
1120	<p class="premium-progressbar-left-label">
1121	<span <?php echo $this->get_render_attribute_string('premium_progressbar_left_label'); ?>>
1122	<?php echo $settings['premium_progressbar_left_label'];?>
1123	</span>
1124	</p>
1125	<?php if( 'yes' === $settings['show_percentage_value'] ) : ?>
1126	<p class="premium-progressbar-right-label">
1127	<span <?php echo $this->get_render_attribute_string('premium_progressbar_right_label'); ?>>0%</span>
1128	</p>
1129	<?php endif; ?>
1130	</div>
1131	<?php endif; ?>
1132	</div>
1133	</div>
1134
1135	<?php
1136	}
1137	}