Diff: STRATO-apps/wordpress_03/app/wp-content/plugins/elementor/includes/widgets/progress.php
Keine Baseline-Datei – Diff nur gegen leer.
1
-
1
+
<?php
2
+
namespace Elementor;
3
+
4
+
if ( ! defined( 'ABSPATH' ) ) {
5
+
exit; // Exit if accessed directly.
6
+
}
7
+
8
+
use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
9
+
use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
10
+
11
+
/**
12
+
* Elementor progress widget.
13
+
*
14
+
* Elementor widget that displays an escalating progress bar.
15
+
*
16
+
* @since 1.0.0
17
+
*/
18
+
class Widget_Progress extends Widget_Base {
19
+
20
+
/**
21
+
* Get widget name.
22
+
*
23
+
* Retrieve progress widget name.
24
+
*
25
+
* @since 1.0.0
26
+
* @access public
27
+
*
28
+
* @return string Widget name.
29
+
*/
30
+
public function get_name() {
31
+
return 'progress';
32
+
}
33
+
34
+
/**
35
+
* Get widget title.
36
+
*
37
+
* Retrieve progress widget title.
38
+
*
39
+
* @since 1.0.0
40
+
* @access public
41
+
*
42
+
* @return string Widget title.
43
+
*/
44
+
public function get_title() {
45
+
return esc_html__( 'Progress Bar', 'elementor' );
46
+
}
47
+
48
+
/**
49
+
* Get widget icon.
50
+
*
51
+
* Retrieve progress widget icon.
52
+
*
53
+
* @since 1.0.0
54
+
* @access public
55
+
*
56
+
* @return string Widget icon.
57
+
*/
58
+
public function get_icon() {
59
+
return 'eicon-skill-bar';
60
+
}
61
+
62
+
/**
63
+
* Get widget keywords.
64
+
*
65
+
* Retrieve the list of keywords the widget belongs to.
66
+
*
67
+
* @since 2.1.0
68
+
* @access public
69
+
*
70
+
* @return array Widget keywords.
71
+
*/
72
+
public function get_keywords() {
73
+
return [ 'progress', 'bar' ];
74
+
}
75
+
76
+
protected function is_dynamic_content(): bool {
77
+
return false;
78
+
}
79
+
80
+
/**
81
+
* Get style dependencies.
82
+
*
83
+
* Retrieve the list of style dependencies the widget requires.
84
+
*
85
+
* @since 3.24.0
86
+
* @access public
87
+
*
88
+
* @return array Widget style dependencies.
89
+
*/
90
+
public function get_style_depends(): array {
91
+
return [ 'widget-progress' ];
92
+
}
93
+
94
+
public function has_widget_inner_wrapper(): bool {
95
+
return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
96
+
}
97
+
98
+
/**
99
+
* Register progress widget controls.
100
+
*
101
+
* Adds different input fields to allow the user to change and customize the widget settings.
102
+
*
103
+
* @since 3.1.0
104
+
* @access protected
105
+
*/
106
+
protected function register_controls() {
107
+
$this->start_controls_section(
108
+
'section_progress',
109
+
[
110
+
'label' => esc_html__( 'Progress Bar', 'elementor' ),
111
+
]
112
+
);
113
+
114
+
$this->add_control(
115
+
'title',
116
+
[
117
+
'label' => esc_html__( 'Title', 'elementor' ),
118
+
'type' => Controls_Manager::TEXT,
119
+
'dynamic' => [
120
+
'active' => true,
121
+
],
122
+
'placeholder' => esc_html__( 'Enter your title', 'elementor' ),
123
+
'default' => esc_html__( 'My Skill', 'elementor' ),
124
+
'label_block' => true,
125
+
]
126
+
);
127
+
128
+
$this->add_control(
129
+
'title_tag',
130
+
[
131
+
'label' => esc_html__( 'Title HTML Tag', 'elementor' ),
132
+
'type' => Controls_Manager::SELECT,
133
+
'options' => [
134
+
'h1' => 'H1',
135
+
'h2' => 'H2',
136
+
'h3' => 'H3',
137
+
'h4' => 'H4',
138
+
'h5' => 'H5',
139
+
'h6' => 'H6',
140
+
'div' => 'div',
141
+
'span' => 'span',
142
+
'p' => 'p',
143
+
],
144
+
'default' => 'span',
145
+
'condition' => [
146
+
'title!' => '',
147
+
],
148
+
]
149
+
);
150
+
151
+
$this->add_control(
152
+
'title_display',
153
+
[
154
+
'label' => esc_html__( 'Display Title', 'elementor' ),
155
+
'type' => Controls_Manager::SWITCHER,
156
+
'label_on' => esc_html__( 'Show', 'elementor' ),
157
+
'label_off' => esc_html__( 'Hide', 'elementor' ),
158
+
'default' => 'yes',
159
+
'condition' => [
160
+
'title!' => '',
161
+
],
162
+
]
163
+
);
164
+
165
+
$this->add_control(
166
+
'progress_type',
167
+
[
168
+
'label' => esc_html__( 'Type', 'elementor' ),
169
+
'type' => Controls_Manager::SELECT,
170
+
'options' => [
171
+
'' => esc_html__( 'Default', 'elementor' ),
172
+
'info' => esc_html__( 'Info', 'elementor' ),
173
+
'success' => esc_html__( 'Success', 'elementor' ),
174
+
'warning' => esc_html__( 'Warning', 'elementor' ),
175
+
'danger' => esc_html__( 'Danger', 'elementor' ),
176
+
],
177
+
'default' => '',
178
+
'condition' => [
179
+
'progress_type!' => '', // a workaround to hide the control, unless it's in use (not default).
180
+
],
181
+
'separator' => 'before',
182
+
]
183
+
);
184
+
185
+
$this->add_control(
186
+
'percent',
187
+
[
188
+
'label' => esc_html__( 'Percentage', 'elementor' ),
189
+
'type' => Controls_Manager::SLIDER,
190
+
'default' => [
191
+
'size' => 50,
192
+
'unit' => '%',
193
+
],
194
+
'dynamic' => [
195
+
'active' => true,
196
+
],
197
+
'separator' => 'before',
198
+
]
199
+
);
200
+
201
+
$this->add_control(
202
+
'display_percentage',
203
+
[
204
+
'label' => esc_html__( 'Display Percentage', 'elementor' ),
205
+
'type' => Controls_Manager::SWITCHER,
206
+
'label_on' => esc_html__( 'Show', 'elementor' ),
207
+
'label_off' => esc_html__( 'Hide', 'elementor' ),
208
+
'return_value' => 'show',
209
+
'default' => 'show',
210
+
'condition' => [
211
+
'percent!' => '',
212
+
],
213
+
]
214
+
);
215
+
216
+
$this->add_control(
217
+
'inner_text',
218
+
[
219
+
'label' => esc_html__( 'Inner Text', 'elementor' ),
220
+
'type' => Controls_Manager::TEXT,
221
+
'dynamic' => [
222
+
'active' => true,
223
+
],
224
+
'placeholder' => esc_html__( 'e.g. Web Designer', 'elementor' ),
225
+
'default' => esc_html__( 'Web Designer', 'elementor' ),
226
+
'label_block' => true,
227
+
'separator' => 'before',
228
+
]
229
+
);
230
+
231
+
$this->end_controls_section();
232
+
233
+
$this->start_controls_section(
234
+
'section_progress_style',
235
+
[
236
+
'label' => esc_html__( 'Progress Bar', 'elementor' ),
237
+
'tab' => Controls_Manager::TAB_STYLE,
238
+
]
239
+
);
240
+
241
+
$this->add_control(
242
+
'title_heading',
243
+
[
244
+
'label' => esc_html__( 'Title', 'elementor' ),
245
+
'type' => Controls_Manager::HEADING,
246
+
'condition' => [
247
+
'title!' => '',
248
+
],
249
+
]
250
+
);
251
+
252
+
$this->add_control(
253
+
'title_color',
254
+
[
255
+
'label' => esc_html__( 'Text Color', 'elementor' ),
256
+
'type' => Controls_Manager::COLOR,
257
+
'selectors' => [
258
+
'{{WRAPPER}} .elementor-title' => 'color: {{VALUE}};',
259
+
],
260
+
'global' => [
261
+
'default' => Global_Colors::COLOR_PRIMARY,
262
+
],
263
+
'condition' => [
264
+
'title!' => '',
265
+
],
266
+
]
267
+
);
268
+
269
+
$this->add_group_control(
270
+
Group_Control_Typography::get_type(),
271
+
[
272
+
'name' => 'typography',
273
+
'selector' => '{{WRAPPER}} .elementor-title',
274
+
'global' => [
275
+
'default' => Global_Typography::TYPOGRAPHY_TEXT,
276
+
],
277
+
'condition' => [
278
+
'title!' => '',
279
+
],
280
+
]
281
+
);
282
+
283
+
$this->add_group_control(
284
+
Group_Control_Text_Shadow::get_type(),
285
+
[
286
+
'name' => 'title_shadow',
287
+
'selector' => '{{WRAPPER}} .elementor-title',
288
+
'condition' => [
289
+
'title!' => '',
290
+
],
291
+
]
292
+
);
293
+
294
+
$this->add_control(
295
+
'percentage_heading',
296
+
[
297
+
'label' => esc_html__( 'Percentage', 'elementor' ),
298
+
'type' => Controls_Manager::HEADING,
299
+
'separator' => 'before',
300
+
]
301
+
);
302
+
303
+
$this->add_control(
304
+
'bar_color',
305
+
[
306
+
'label' => esc_html__( 'Color', 'elementor' ),
307
+
'type' => Controls_Manager::COLOR,
308
+
'global' => [
309
+
'default' => Global_Colors::COLOR_PRIMARY,
310
+
],
311
+
'selectors' => [
312
+
'{{WRAPPER}} .elementor-progress-wrapper .elementor-progress-bar' => 'background-color: {{VALUE}};',
313
+
],
314
+
]
315
+
);
316
+
317
+
$this->add_control(
318
+
'bar_bg_color',
319
+
[
320
+
'label' => esc_html__( 'Background Color', 'elementor' ),
321
+
'type' => Controls_Manager::COLOR,
322
+
'selectors' => [
323
+
'{{WRAPPER}} .elementor-progress-wrapper' => 'background-color: {{VALUE}};',
324
+
],
325
+
]
326
+
);
327
+
328
+
$this->add_control(
329
+
'bar_height',
330
+
[
331
+
'label' => esc_html__( 'Height', 'elementor' ),
332
+
'type' => Controls_Manager::SLIDER,
333
+
'size_units' => [ 'px', 'em', 'rem', 'custom' ],
334
+
'selectors' => [
335
+
'{{WRAPPER}} .elementor-progress-bar' => 'height: {{SIZE}}{{UNIT}}; line-height: {{SIZE}}{{UNIT}};',
336
+
],
337
+
]
338
+
);
339
+
340
+
$this->add_control(
341
+
'bar_border_radius',
342
+
[
343
+
'label' => esc_html__( 'Border Radius', 'elementor' ),
344
+
'type' => Controls_Manager::SLIDER,
345
+
'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
346
+
'selectors' => [
347
+
'{{WRAPPER}} .elementor-progress-wrapper' => 'border-radius: {{SIZE}}{{UNIT}}; overflow: hidden;',
348
+
],
349
+
]
350
+
);
351
+
352
+
$this->add_control(
353
+
'inner_text_heading',
354
+
[
355
+
'label' => esc_html__( 'Inner Text', 'elementor' ),
356
+
'type' => Controls_Manager::HEADING,
357
+
'separator' => 'before',
358
+
'condition' => [
359
+
'inner_text!' => '',
360
+
],
361
+
]
362
+
);
363
+
364
+
$this->add_control(
365
+
'bar_inline_color',
366
+
[
367
+
'label' => esc_html__( 'Color', 'elementor' ),
368
+
'type' => Controls_Manager::COLOR,
369
+
'selectors' => [
370
+
'{{WRAPPER}} .elementor-progress-bar' => 'color: {{VALUE}};',
371
+
],
372
+
'condition' => [
373
+
'inner_text!' => '',
374
+
],
375
+
]
376
+
);
377
+
378
+
$this->add_group_control(
379
+
Group_Control_Typography::get_type(),
380
+
[
381
+
'name' => 'bar_inner_typography',
382
+
'selector' => '{{WRAPPER}} .elementor-progress-bar',
383
+
'exclude' => [
384
+
'line_height',
385
+
],
386
+
'condition' => [
387
+
'inner_text!' => '',
388
+
],
389
+
]
390
+
);
391
+
392
+
$this->add_group_control(
393
+
Group_Control_Text_Shadow::get_type(),
394
+
[
395
+
'name' => 'bar_inner_shadow',
396
+
'selector' => '{{WRAPPER}} .elementor-progress-bar',
397
+
'condition' => [
398
+
'inner_text!' => '',
399
+
],
400
+
]
401
+
);
402
+
403
+
$this->end_controls_section();
404
+
}
405
+
406
+
/**
407
+
* Render progress widget output on the frontend.
408
+
* Make sure value does no exceed 100%.
409
+
*
410
+
* Written in PHP and used to generate the final HTML.
411
+
*
412
+
* @since 1.0.0
413
+
* @access protected
414
+
*/
415
+
protected function render() {
416
+
$settings = $this->get_settings_for_display();
417
+
418
+
if ( empty( $settings['title'] ) && empty( $settings['percent']['size'] ) ) {
419
+
return;
420
+
}
421
+
422
+
$progressbar_id = 'elementor-progress-bar-' . $this->get_id();
423
+
424
+
$progress_percentage = is_numeric( $settings['percent']['size'] ) ? $settings['percent']['size'] : '0';
425
+
if ( 100 < $progress_percentage ) {
426
+
$progress_percentage = 100;
427
+
}
428
+
429
+
if ( ! Utils::is_empty( $settings['title'] ) ) {
430
+
431
+
if ( 'yes' === $settings['title_display'] ) {
432
+
433
+
$this->add_render_attribute(
434
+
'title',
435
+
[
436
+
'class' => 'elementor-title',
437
+
'id' => $progressbar_id,
438
+
]
439
+
);
440
+
441
+
$this->add_inline_editing_attributes( 'title' );
442
+
443
+
$this->add_render_attribute( 'wrapper', 'aria-labelledby', $progressbar_id );
444
+
445
+
} else {
446
+
447
+
$this->add_render_attribute( 'wrapper', 'aria-label', $settings['title'] );
448
+
449
+
}
450
+
}
451
+
452
+
$this->add_render_attribute(
453
+
'wrapper',
454
+
[
455
+
'class' => 'elementor-progress-wrapper',
456
+
'role' => 'progressbar',
457
+
'aria-valuemin' => '0',
458
+
'aria-valuemax' => '100',
459
+
'aria-valuenow' => $progress_percentage,
460
+
]
461
+
);
462
+
463
+
if ( ! empty( $settings['inner_text'] ) ) {
464
+
$this->add_render_attribute( 'wrapper', 'aria-valuetext', "{$progress_percentage}% ({$settings['inner_text']})" );
465
+
}
466
+
467
+
if ( ! empty( $settings['progress_type'] ) ) {
468
+
$this->add_render_attribute( 'wrapper', 'class', 'progress-' . $settings['progress_type'] );
469
+
}
470
+
471
+
$this->add_render_attribute(
472
+
'progress-bar',
473
+
[
474
+
'class' => 'elementor-progress-bar',
475
+
'data-max' => $progress_percentage,
476
+
]
477
+
);
478
+
479
+
$this->add_render_attribute( 'inner_text', 'class', 'elementor-progress-text' );
480
+
481
+
$this->add_inline_editing_attributes( 'inner_text' );
482
+
483
+
if ( ! Utils::is_empty( $settings['title'] ) && 'yes' === $settings['title_display'] ) { ?>
484
+
<<?php Utils::print_validated_html_tag( $settings['title_tag'] ); ?> <?php $this->print_render_attribute_string( 'title' ); ?>>
485
+
<?php echo wp_kses_post( $settings['title'] ); ?>
486
+
</<?php Utils::print_validated_html_tag( $settings['title_tag'] ); ?>>
487
+
<?php } ?>
488
+
489
+
<div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
490
+
<div <?php $this->print_render_attribute_string( 'progress-bar' ); ?>>
491
+
<span <?php $this->print_render_attribute_string( 'inner_text' ); ?>><?php echo wp_kses_post( $settings['inner_text'] ); ?></span>
492
+
<?php if ( 'show' === $settings['display_percentage'] ) { ?>
493
+
<span class="elementor-progress-percentage"><?php echo $progress_percentage; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>%</span>
494
+
<?php } ?>
495
+
</div>
496
+
</div>
497
+
<?php
498
+
}
499
+
500
+
/**
501
+
* Render progress widget output in the editor.
502
+
*
503
+
* Written as a Backbone JavaScript template and used to generate the live preview.
504
+
*
505
+
* @since 2.9.0
506
+
* @access protected
507
+
*/
508
+
protected function content_template() {
509
+
?>
510
+
<#
511
+
if ( '' === settings.title && '' === settings.percent.size ) {
512
+
return;
513
+
}
514
+
515
+
const title_tag = elementor.helpers.validateHTMLTag( settings.title_tag );
516
+
const progressbar_id = 'elementor-progress-bar-<?php echo esc_attr( $this->get_id() ); ?>';
517
+
518
+
let progress_percentage = 0;
519
+
if ( ! isNaN( settings.percent.size ) ) {
520
+
progress_percentage = 100 < settings.percent.size ? 100 : settings.percent.size;
521
+
}
522
+
523
+
if ( settings.title ) {
524
+
525
+
if ( 'yes' === settings.title_display ) {
526
+
527
+
view.addRenderAttribute(
528
+
'title',
529
+
{
530
+
'class': 'elementor-title',
531
+
'id': progressbar_id,
532
+
}
533
+
);
534
+
535
+
view.addInlineEditingAttributes( 'title' );
536
+
537
+
view.addRenderAttribute( 'progressWrapper', 'aria-labelledby', progressbar_id );
538
+
539
+
} else {
540
+
541
+
view.addRenderAttribute( 'progressWrapper', 'aria-label', settings.title );
542
+
543
+
}
544
+
}
545
+
546
+
view.addRenderAttribute(
547
+
'progressWrapper',
548
+
{
549
+
'class': [ 'elementor-progress-wrapper', 'progress-' + settings.progress_type ],
550
+
'role': 'progressbar',
551
+
'aria-valuemin': '0',
552
+
'aria-valuemax': '100',
553
+
'aria-valuenow': progress_percentage,
554
+
}
555
+
);
556
+
557
+
if ( '' !== settings.inner_text ) {
558
+
view.addRenderAttribute( 'progressWrapper', 'aria-valuetext', progress_percentage + '% (' + settings.inner_text + ')' );
559
+
}
560
+
561
+
view.addRenderAttribute( 'inner_text', 'class', 'elementor-progress-text' );
562
+
563
+
view.addInlineEditingAttributes( 'inner_text' );
564
+
#>
565
+
<# if ( settings.title && 'yes' === settings.title_display ) { #>
566
+
<{{ title_tag }} {{{ view.getRenderAttributeString( 'title' ) }}}>{{ settings.title }}</{{ title_tag }}>
567
+
<# } #>
568
+
<div {{{ view.getRenderAttributeString( 'progressWrapper' ) }}}>
569
+
<div class="elementor-progress-bar" data-max="{{ progress_percentage }}">
570
+
<span {{{ view.getRenderAttributeString( 'inner_text' ) }}}>{{ settings.inner_text }}</span>
571
+
<# if ( 'show' === settings.display_percentage ) { #>
572
+
<span class="elementor-progress-percentage">{{{ progress_percentage }}}%</span>
573
+
<# } #>
574
+
</div>
575
+
</div>
576
+
<?php
577
+
}
578
+
}
579
+