Plugin Directory

source: borderless/trunk/modules/elementor/widgets/semi-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.8 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 Semi_Circular_Progress_Bar extends Widget_Base {
15       
16        public function get_name() {
17                return 'borderless-elementor-semi-circular-progress-bar';
18        }
19       
20        public function get_title() {
21                return esc_html__( 'Semi Circular Progress Bar', 'borderless');
22        }
23       
24        public function get_icon() {
25                return 'borderless-icon-semi-circular-progress-bar';
26        }
27       
28        public function get_categories() {
29                return [ 'borderless' ];
30        }
31
32        public function get_keywords()
33        {
34        return [
35                        'semi circular progress bar',
36                        'progress bar',
37                        'bar',
38                        'borderless',
39                        'borderless semi 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_elementor_section_semi_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_elementor_semi_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_elementor_semi_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_elementor_semi_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_elementor_section_semi_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_elementor_semi_circular_progress_bar_alignment',
149                [
150                        'label' => __('Alignment', 'borderless'),
151                        'type' => \Elementor\Controls_Manager::CHOOSE,
152                        'options' => [
153                                'borderless-elementor-semi-circular-progress-bar-alignment-left' => [
154                                        'title' => __('Left', 'borderless'),
155                                        'icon' => 'fa fa-align-left',
156                                ],
157                                'borderless-elementor-semi-circular-progress-bar-alignment-center' => [
158                                        'title' => __('Center', 'borderless'),
159                                        'icon' => 'fa fa-align-center',
160                                ],
161                                'borderless-elementor-semi-circular-progress-bar-alignment-right' => [
162                                        'title' => __('Right', 'borderless'),
163                                        'icon' => 'fa fa-align-right',
164                                ],
165                        ],
166                        'default' => 'borderless-elementor-semi-circular-progress-bar-alignment-center',
167                ]
168        );
169
170        $this->add_control(
171                'borderless_elementor_semi_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-semi-circular-progress-bar' => 'width: {{SIZE}}{{UNIT}}; height: calc({{SIZE}}{{UNIT}} / 2);',
189                        ],
190                        'separator' => 'before',
191                ]
192        );
193
194        $this->add_control(
195                'borderless_elementor_semi_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_elementor_semi_circular_progress_bar_stroke_color_style',
217                [
218                        'label' => __( 'Stroke Color Style', 'borderless' ),
219                        'type' => \Elementor\Controls_Manager::SELECT,
220                        'default' => 'borderless-elementor-semi-circular-progress-bar-stroke-solid-color',
221                        'options' => [
222                                'borderless-elementor-semi-circular-progress-bar-stroke-solid-color'  => __( 'Solid', 'borderless' ),
223                                'borderless-elementor-semi-circular-progress-bar-stroke-gradient-color' => __( 'Gradient', 'borderless' ),
224                        ],
225                ]
226        );
227
228        $this->add_control(
229                'borderless_elementor_semi_circular_progress_bar_stroke_color',
230                [
231                        'label' => __('Stroke Color', 'borderless'),
232                        'type' => Controls_Manager::COLOR,
233                        'default' => '#000',
234                        'condition' => [
235                                'borderless_elementor_semi_circular_progress_bar_stroke_color_style' => 'borderless-elementor-semi-circular-progress-bar-stroke-solid-color',
236                        ],
237                ]
238        );
239
240        $this->add_control(
241                'borderless_elementor_semi_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_elementor_semi_circular_progress_bar_stroke_color_style' => 'borderless-elementor-semi-circular-progress-bar-stroke-gradient-color',
248                        ],
249                ]
250        );
251
252        $this->add_control(
253                'borderless_elementor_semi_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_elementor_semi_circular_progress_bar_stroke_color_style' => 'borderless-elementor-semi-circular-progress-bar-stroke-gradient-color',
260                        ],
261                ]
262        );
263
264        $this->add_control(
265                'borderless_elementor_semi_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_elementor_semi_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_elementor_semi_circular_progress_bar_background_color',
296                [
297                        'label' => __('Background Color', 'borderless'),
298                        'type' => Controls_Manager::COLOR,
299                        'default' => '#fff',
300                        'selectors' => [
301                                '{{WRAPPER}} .borderless-elementor-semi-circular-progress-bar' => 'background-color: {{VALUE}}',
302                        ],
303                ]
304        );
305
306        $this->end_controls_section();
307
308        /*-----------------------------------------------------------------------------------*/
309        /*  *.  Typography - Style
310        /*-----------------------------------------------------------------------------------*/
311
312        $this->start_controls_section(
313                'borderless_section_circular_progress_bar_typography',
314                [
315                        'label' => __('Typography', 'borderless'),
316                        'tab' => Controls_Manager::TAB_STYLE,
317                ]
318        );
319
320        $this->add_group_control(
321                Group_Control_Typography::get_type(),
322                [
323                        'name' => 'borderless_elementor_semi_circular_progress_bar_title_typography',
324                        'label' => __('Title', 'borderless'),
325                        'global' => [
326                                'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
327                        ],
328                        'selector' => '{{WRAPPER}} .borderless-elementor-semi-circular-progress-bar .progressbar-text .borderless-elementor-semi-circular-progress-bar-title',
329                ]
330        );
331
332        $this->add_control(
333                'borderless_elementor_semi_circular_progress_bar_title_color',
334                [
335                        'label' => __('Title Color', 'borderless'),
336                        'type' => Controls_Manager::COLOR,
337                        'default' => '',
338                        'selectors' => [
339                                '{{WRAPPER}} .borderless-elementor-semi-circular-progress-bar .progressbar-text .borderless-elementor-semi-circular-progress-bar-title' => 'color: {{VALUE}}',
340                        ],
341                        'separator' => 'after',
342                ]
343        );
344
345        $this->add_group_control(
346                Group_Control_Typography::get_type(),
347                [
348                        'name' => 'borderless_elementor_semi_circular_progress_bar_counter_typography',
349                        'label' => __('Counter', 'borderless'),
350                        'global' => [
351                                'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
352                        ],
353                        'selector' => '{{WRAPPER}} .borderless-elementor-semi-circular-progress-bar .progressbar-text .borderless-elementor-semi-circular-progress-bar-counter-value',
354                ]
355        );
356
357        $this->add_control(
358                'borderless_elementor_semi_circular_progress_bar_counter_color',
359                [
360                        'label' => __('Counter Color', 'borderless'),
361                        'type' => Controls_Manager::COLOR,
362                        'default' => '',
363                        'separator' => 'after',
364                ]
365        );
366
367        $this->add_group_control(
368                Group_Control_Typography::get_type(),
369                [
370                        'name' => 'borderless_elementor_semi_circular_progress_bar_postfix_typography',
371                        'label' => __('Postfix', 'borderless'),
372                        'global' => [
373                                'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
374                        ],
375                        'selector' => '{{WRAPPER}} .borderless-elementor-semi-circular-progress-bar-counter-postfix',
376                ]
377        );
378
379        $this->add_control(
380                'borderless_elementor_semi_circular_progress_bar_postfix_color',
381                [
382                        'label' => __('Postfix Color', 'borderless'),
383                        'type' => Controls_Manager::COLOR,
384                        'default' => '',
385                        'selectors' => [
386                                '{{WRAPPER}} .borderless-elementor-semi-circular-progress-bar-counter-postfix' => 'color: {{VALUE}}',
387                        ],
388                ]
389        );
390
391        $this->end_controls_section();
392
393        }
394
395        /*-----------------------------------------------------------------------------------*/
396        /*  *.  Render
397        /*-----------------------------------------------------------------------------------*/
398       
399        protected function render() {
400                $settings = $this->get_settings_for_display();
401       
402                // Aplicar escaping aos estilos de cores da barra de progresso
403                if ($settings['borderless_elementor_semi_circular_progress_bar_stroke_color_style'] == 'borderless-elementor-semi-circular-progress-bar-stroke-solid-color') {
404                        $borderless_elementor_semi_circular_progress_bar_stroke_color_style = 'stroke_color_mode="solid" stroke_color="' . esc_attr($settings['borderless_elementor_semi_circular_progress_bar_stroke_color']) . '"';
405                } else {
406                        $borderless_elementor_semi_circular_progress_bar_stroke_color_style = 'stroke_color_mode="gradient" stroke_color="' . esc_attr($settings['borderless_elementor_semi_circular_progress_bar_stroke_color']) . '" stroke_color_from="' . esc_attr($settings['borderless_elementor_semi_circular_progress_bar_stroke_color_from']) . '" stroke_color_to="' . esc_attr($settings['borderless_elementor_semi_circular_progress_bar_stroke_color_to']) . '"';
407                }
408       
409                // Construção do HTML do widget com valores escapados
410                echo '<div class="borderless-elementor-semi-circular-progress-bar-widget ' . esc_attr($settings['borderless_elementor_semi_circular_progress_bar_alignment']) . '"><div class="borderless-elementor-semi-circular-progress-bar" title="' . esc_attr($settings['borderless_elementor_semi_circular_progress_bar_title']) . '" counter_value="' . esc_attr($settings['borderless_elementor_semi_circular_progress_bar_counter_value']['size']) . '" ' . $borderless_elementor_semi_circular_progress_bar_stroke_color_style . ' trail_color="' . esc_attr($settings['borderless_elementor_semi_circular_progress_bar_trail_color']) . '" counter_color="' . esc_attr($settings['borderless_elementor_semi_circular_progress_bar_counter_color']) . '" stroke_width="' . esc_attr($settings['borderless_elementor_semi_circular_progress_bar_stroke_width']['size']) . '" trail_width="' . esc_attr($settings['borderless_elementor_semi_circular_progress_bar_trail_width']['size']) . '" animation_duration="' . esc_attr($settings['borderless_elementor_semi_circular_progress_bar_animation_duration']['size']) . '"></div></div>';
411        }
412       
413       
414        protected function _content_template() {
415
416    }
417       
418       
419}
Note: See TracBrowser for help on using the repository browser.