Plugin Directory

source: borderless/trunk/modules/elementor/widgets/circular-progress-bar.php

Last change on this file was 3132733, checked in by visualmodo, 8 months ago

1.5.5 - Aug 08 2024

  • Improvements - Elementor widgets code.
  • Property svn:eol-style set to native
File size: 12.7 KB
Line 
1<?php
2
3namespace Borderless\Widgets;
4
5if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
6
7use \Elementor\Controls_Manager;
8use \Elementor\Group_Control_Background;
9use \Elementor\Group_Control_Box_Shadow;
10use \Elementor\Group_Control_Typography;
11use \Elementor\Core\Kits\Documents\Tabs\Global_Typography;
12use \Elementor\Widget_Base;
13
14class Circular_Progress_Bar extends Widget_Base {
15       
16        public function get_name() {
17                return 'borderless-elementor-circular-progress-bar';
18        }
19       
20        public function get_title() {
21                return esc_html__( 'Circular Progress Bar', 'borderless');
22        }
23       
24        public function get_icon() {
25                return 'borderless-icon-circular-progress-bar';
26        }
27       
28        public function get_categories() {
29                return [ 'borderless' ];
30        }
31
32        public function get_keywords()
33        {
34        return [
35                        'circular progress bar',
36                        'progress bar',
37                        'bar',
38                        'borderless',
39                        'borderless circular progress bar',
40                        'borderless progress bar',
41                        'borderless bar'
42                ];
43    }
44
45        public function get_custom_help_url()
46        {
47        return 'https://wpborderless.com/';
48    }
49
50        public function get_style_depends() {
51                return 
52                        [ 
53                                'borderless-elementor-style'
54                        ];
55        }
56       
57        public function get_script_depends() {
58                return 
59                        [ 
60                                'borderless-elementor-appear-script',
61                                'borderless-elementor-progressbar-script'
62                        ];
63        }
64       
65        protected function _register_controls() {
66
67
68                /*-----------------------------------------------------------------------------------*/
69                /*  *.  Layout
70                /*-----------------------------------------------------------------------------------*/
71
72                $this->start_controls_section(
73                        'borderless_section_circular_progress_bar_layout',
74                        [
75                                'label' => esc_html__( 'Layout', 'borderless' ),
76                                'tab' => Controls_Manager::TAB_CONTENT,
77                        ]
78                );
79
80                $this->add_control(
81                        'borderless_circular_progress_bar_title',
82                        [
83                                'label' => esc_html__( 'Title', 'borderless'),
84                                'type' => Controls_Manager::TEXT,
85                'dynamic' => [
86                    'active' => true,
87                ],
88                        ]
89                );
90
91                $this->add_control(
92                        'borderless_circular_progress_bar_counter_value',
93                        [
94                                'label' => esc_html__( 'Counter Value', 'borderless'),
95                                'type' => Controls_Manager::SLIDER,
96                                'size_units' => ['%'],
97                                        'range' => [
98                                                '%' => [
99                                                'min' => 1,
100                                                'max' => 100,
101                                        ],
102                                ],
103                                'default' => [
104                                        'unit' => '%',
105                                        'size' => 50,
106                                ],
107                                'separator' => 'before',
108                        ]
109                );
110
111                $this->add_control(
112            'borderless_circular_progress_bar_animation_duration',
113            [
114                'label' => __('Animation Duration', 'borderless'),
115                'type' => Controls_Manager::SLIDER,
116                'size_units' => ['px'],
117                'range' => [
118                    'px' => [
119                        'min' => 1000,
120                        'max' => 10000,
121                        'step' => 100,
122                    ],
123                ],
124                'default' => [
125                    'unit' => 'px',
126                    'size' => 1500,
127                ],
128                'separator' => 'before',
129            ]
130        );
131
132                $this->end_controls_section();
133
134
135        /*-----------------------------------------------------------------------------------*/
136        /*  *.  Layout - Style
137        /*-----------------------------------------------------------------------------------*/
138
139        $this->start_controls_section(
140                'borderless_section_circular_progress_bar_styles_general',
141                [
142                        'label' => esc_html__( 'General', 'borderless'),
143                        'tab' => Controls_Manager::TAB_STYLE
144                ]
145        );
146
147        $this->add_control(
148                'borderless_circular_progress_bar_alignment',
149                [
150                        'label' => __('Alignment', 'borderless'),
151                        'type' => \Elementor\Controls_Manager::CHOOSE,
152                        'options' => [
153                                'borderless-circular-progress-bar-alignment-left' => [
154                                        'title' => __('Left', 'borderless'),
155                                        'icon' => 'fa fa-align-left',
156                                ],
157                                'borderless-circular-progress-bar-alignment-center' => [
158                                        'title' => __('Center', 'borderless'),
159                                        'icon' => 'fa fa-align-center',
160                                ],
161                                'borderless-circular-progress-bar-alignment-right' => [
162                                        'title' => __('Right', 'borderless'),
163                                        'icon' => 'fa fa-align-right',
164                                ],
165                        ],
166                        'default' => 'borderless-circular-progress-bar-alignment-center',
167                ]
168        );
169
170        $this->add_control(
171                'borderless_circular_progress_bar_size',
172                [
173                        'label' => __('Size', 'borderless'),
174                        'type' => Controls_Manager::SLIDER,
175                        'size_units' => ['px'],
176                        'range' => [
177                                'px' => [
178                                        'min' => 50,
179                                        'max' => 500,
180                                        'step' => 1,
181                                ],
182                        ],
183                        'default' => [
184                                'unit' => 'px',
185                                'size' => 200,
186                        ],
187                        'selectors' => [
188                                '{{WRAPPER}} .borderless-elementor-circular-progress-bar' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
189                        ],
190                        'separator' => 'before',
191                ]
192        );
193
194        $this->add_control(
195                'borderless_circular_progress_bar_stroke_width',
196                [
197                        'label' => __('Stroke Width', 'borderless'),
198                        'type' => Controls_Manager::SLIDER,
199                        'size_units' => ['px'],
200                        'range' => [
201                                'px' => [
202                                        'min' => 0,
203                                        'max' => 100,
204                                        'step' => 1,
205                                ],
206                        ],
207                        'default' => [
208                                'unit' => 'px',
209                                'size' => 12,
210                        ],
211                        'separator' => 'before',
212                ]
213        );
214
215        $this->add_control(
216                'borderless_circular_progress_bar_stroke_color_style',
217                [
218                        'label' => __( 'Stroke Color Style', 'borderless' ),
219                        'type' => \Elementor\Controls_Manager::SELECT,
220                        'default' => 'borderless-elementor-circular-progress-bar-stroke-solid-color',
221                        'options' => [
222                                'borderless-elementor-circular-progress-bar-stroke-solid-color'  => __( 'Solid', 'borderless' ),
223                                'borderless-elementor-circular-progress-bar-stroke-gradient-color' => __( 'Gradient', 'borderless' ),
224                        ],
225                ]
226        );
227
228        $this->add_control(
229                'borderless_circular_progress_bar_stroke_color',
230                [
231                        'label' => __('Stroke Color', 'borderless'),
232                        'type' => Controls_Manager::COLOR,
233                        'default' => '#000',
234                        'condition' => [
235                                'borderless_circular_progress_bar_stroke_color_style' => 'borderless-elementor-circular-progress-bar-stroke-solid-color',
236                        ],
237                ]
238        );
239
240        $this->add_control(
241                'borderless_circular_progress_bar_stroke_color_from',
242                [
243                        'label' => __('Stroke Color From', 'borderless'),
244                        'type' => Controls_Manager::COLOR,
245                        'default' => '#000',
246                        'condition' => [
247                                'borderless_circular_progress_bar_stroke_color_style' => 'borderless-elementor-circular-progress-bar-stroke-gradient-color',
248                        ],
249                ]
250        );
251
252        $this->add_control(
253                'borderless_circular_progress_bar_stroke_color_to',
254                [
255                        'label' => __('Stroke Color To', 'borderless'),
256                        'type' => Controls_Manager::COLOR,
257                        'default' => '#000',
258                        'condition' => [
259                                'borderless_circular_progress_bar_stroke_color_style' => 'borderless-elementor-circular-progress-bar-stroke-gradient-color',
260                        ],
261                ]
262        );
263
264        $this->add_control(
265                'borderless_circular_progress_bar_trail_width',
266                [
267                        'label' => __('Trail Width', 'borderless'),
268                        'type' => Controls_Manager::SLIDER,
269                        'size_units' => ['px'],
270                        'range' => [
271                                'px' => [
272                                        'min' => 0,
273                                        'max' => 100,
274                                        'step' => 1,
275                                ],
276                        ],
277                        'default' => [
278                                'unit' => 'px',
279                                'size' => 12,
280                        ],
281                        'separator' => 'before',
282                ]
283        );
284
285        $this->add_control(
286                'borderless_circular_progress_bar_trail_color',
287                [
288                        'label' => __('Trail Color', 'borderless'),
289                        'type' => Controls_Manager::COLOR,
290                        'default' => '#eee',
291                ]
292        );
293
294        $this->add_control(
295                'borderless_circular_progress_bar_shape',
296                [
297                        'label' => __( 'Shape', 'borderless' ),
298                        'type' => \Elementor\Controls_Manager::SELECT,
299                        'default' => 'borderless-elementor-circular-progress-bar--round',
300                        'options' => [
301                                'borderless-elementor-circular-progress-bar--square'  => __( 'Square', 'borderless' ),
302                                'borderless-elementor-circular-progress-bar--round' => __( 'Round', 'borderless' ),
303                        ],
304                        'separator' => 'before',
305                ]
306        );     
307
308        $this->add_control(
309                'borderless_circular_progress_bar_background_color',
310                [
311                        'label' => __('Background Color', 'borderless'),
312                        'type' => Controls_Manager::COLOR,
313                        'default' => '#fff',
314                        'selectors' => [
315                                '{{WRAPPER}} .borderless-elementor-circular-progress-bar' => 'background-color: {{VALUE}}',
316                        ],
317                ]
318        );
319
320        $this->add_group_control(
321                Group_Control_Box_Shadow::get_type(),
322                [
323                        'name' => 'borderless_circular_progress_bar_box_shadow',
324                        'label' => __('Box Shadow', 'borderless'),
325                        'selector' => '{{WRAPPER}} .borderless-elementor-circular-progress-bar',
326                        'separator' => 'before',
327                ]
328        );
329
330        $this->end_controls_section();
331
332        /*-----------------------------------------------------------------------------------*/
333        /*  *.  Typography - Style
334        /*-----------------------------------------------------------------------------------*/
335
336        $this->start_controls_section(
337                'borderless_section_circular_progress_bar_typography',
338                [
339                        'label' => __('Typography', 'borderless'),
340                        'tab' => Controls_Manager::TAB_STYLE,
341                ]
342        );
343
344        $this->add_group_control(
345                Group_Control_Typography::get_type(),
346                [
347                        'name' => 'borderless_circular_progress_bar_title_typography',
348                        'label' => __('Title', 'borderless'),
349                        'global'   => [
350                                'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
351                        ],
352                        'selector' => '{{WRAPPER}} .borderless-elementor-circular-progress-bar .progressbar-text .borderless-elementor-circular-progress-bar-title',
353                ]
354        );
355
356        $this->add_control(
357                'borderless_circular_progress_bar_title_color',
358                [
359                        'label' => __('Title Color', 'borderless'),
360                        'type' => Controls_Manager::COLOR,
361                        'default' => '',
362                        'selectors' => [
363                                '{{WRAPPER}} .borderless-elementor-circular-progress-bar .progressbar-text .borderless-elementor-circular-progress-bar-title' => 'color: {{VALUE}}',
364                        ],
365                        'separator' => 'after',
366                ]
367        );
368
369        $this->add_group_control(
370                Group_Control_Typography::get_type(),
371                [
372                        'name' => 'borderless_circular_progress_bar_counter_typography',
373                        'label' => __('Counter', 'borderless'),
374                        'global'   => [
375                                'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
376                        ],
377                        'selector' => '{{WRAPPER}} .borderless-elementor-circular-progress-bar .progressbar-text .borderless-elementor-circular-progress-bar-counter-value',
378                ]
379        );
380
381        $this->add_control(
382                'borderless_circular_progress_bar_counter_color',
383                [
384                        'label' => __('Counter Color', 'borderless'),
385                        'type' => Controls_Manager::COLOR,
386                        'default' => '',
387                        'separator' => 'after',
388                ]
389        );
390
391        $this->add_group_control(
392                Group_Control_Typography::get_type(),
393                [
394                        'name' => 'borderless_circular_progress_bar_postfix_typography',
395                        'label' => __('Postfix', 'borderless'),
396                        'global'   => [
397                                'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
398                        ],
399                        'selector' => '{{WRAPPER}} .borderless-elementor-circular-progress-bar-counter-postfix',
400                ]
401        );
402
403        $this->add_control(
404                'borderless_circular_progress_bar_postfix_color',
405                [
406                        'label' => __('Postfix Color', 'borderless'),
407                        'type' => Controls_Manager::COLOR,
408                        'default' => '',
409                        'selectors' => [
410                                '{{WRAPPER}} .borderless-elementor-circular-progress-bar-counter-postfix' => 'color: {{VALUE}}',
411                        ],
412                ]
413        );
414
415        $this->end_controls_section();
416
417        }
418
419        /*-----------------------------------------------------------------------------------*/
420        /*  *.  Render
421        /*-----------------------------------------------------------------------------------*/
422       
423        protected function render() {
424        $settings = $this->get_settings_for_display();
425
426        if ($settings['borderless_circular_progress_bar_stroke_color_style'] == 'borderless-elementor-circular-progress-bar-stroke-solid-color' ) {
427            $borderless_circular_progress_bar_stroke_color_style = 'stroke_color_mode="solid" stroke_color="'.esc_attr($settings['borderless_circular_progress_bar_stroke_color']).'"';
428
429        } else {
430            $borderless_circular_progress_bar_stroke_color_style = 'stroke_color_mode="gradient" stroke_color="'.esc_attr($settings['borderless_circular_progress_bar_stroke_color']).'" stroke_color_from="'.esc_attr($settings['borderless_circular_progress_bar_stroke_color_from']).'" stroke_color_to="'.esc_attr($settings['borderless_circular_progress_bar_stroke_color_to']).'"';
431        }
432
433        echo'<div class="borderless-elementor-circular-progress-bar-widget '.esc_attr($settings['borderless_circular_progress_bar_alignment']).'"><div class="borderless-elementor-circular-progress-bar '.esc_attr($settings['borderless_circular_progress_bar_shape']).'" title="'.esc_attr($settings['borderless_circular_progress_bar_title']).'" counter_value="'.esc_attr($settings['borderless_circular_progress_bar_counter_value']['size']).'" '.$borderless_circular_progress_bar_stroke_color_style.' trail_color="'.esc_attr($settings['borderless_circular_progress_bar_trail_color']).'" counter_color="'.esc_attr($settings['borderless_circular_progress_bar_counter_color']).'" stroke_width="'.esc_attr($settings['borderless_circular_progress_bar_stroke_width']['size']).'" trail_width="'.esc_attr($settings['borderless_circular_progress_bar_trail_width']['size']).'" animation_duration="'.esc_attr($settings['borderless_circular_progress_bar_animation_duration']['size']).'">
434        </div></div>';
435
436    }
437       
438        protected function _content_template() {
439
440    }
441       
442       
443}
Note: See TracBrowser for help on using the repository browser.