← All changes | includes/widgets/progress.php +100 -279 4.2.1 → 3.7.4 View file →

		@@ -72,31 +72,9 @@
72	72	public function get_keywords() {
73	73	return [ 'progress', 'bar' ];
74	74	}
75	75
76		- protected function is_dynamic_content(): bool {
77		- return false;
78		- }
79		-
80	76	/**
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	77	* Register progress widget controls.
100	78	*
101	79	* Adds different input fields to allow the user to change and customize the widget settings.
102	80	*
		@@ -125,49 +103,13 @@
125	103	]
126	104	);
127	105
128	106	$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	107	'progress_type',
167	108	[
168	109	'label' => esc_html__( 'Type', 'elementor' ),
169	110	'type' => Controls_Manager::SELECT,
	111	+ 'default' => '',
170	112	'options' => [
171	113	'' => esc_html__( 'Default', 'elementor' ),
172	114	'info' => esc_html__( 'Info', 'elementor' ),
173	115	'success' => esc_html__( 'Success', 'elementor' ),
		@@ -173,13 +115,8 @@
173	115	'success' => esc_html__( 'Success', 'elementor' ),
174	116	'warning' => esc_html__( 'Warning', 'elementor' ),
175	117	'danger' => esc_html__( 'Danger', 'elementor' ),
176	118	],
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	119	]
183	120	);
184	121
185	122	$this->add_control(
		@@ -193,9 +130,8 @@
193	130	],
194	131	'dynamic' => [
195	132	'active' => true,
196	133	],
197		- 'separator' => 'before',
198	134	]
199	135	);
200	136
201	137	$this->add_control(
		@@ -201,15 +137,13 @@
201	137	$this->add_control(
202	138	'display_percentage',
203	139	[
204	140	'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',
	141	+ 'type' => Controls_Manager::SELECT,
209	142	'default' => 'show',
210		- 'condition' => [
211		- 'percent!' => '',
	143	+ 'options' => [
	144	+ 'show' => esc_html__( 'Show', 'elementor' ),
	145	+ 'hide' => esc_html__( 'Hide', 'elementor' ),
212	146	],
213	147	]
214	148	);
215	149
		@@ -223,12 +157,20 @@
223	157	],
224	158	'placeholder' => esc_html__( 'e.g. Web Designer', 'elementor' ),
225	159	'default' => esc_html__( 'Web Designer', 'elementor' ),
226	160	'label_block' => true,
227		- 'separator' => 'before',
228	161	]
229	162	);
230	163
	164	+ $this->add_control(
	165	+ 'view',
	166	+ [
	167	+ 'label' => esc_html__( 'View', 'elementor' ),
	168	+ 'type' => Controls_Manager::HIDDEN,
	169	+ 'default' => 'traditional',
	170	+ ]
	171	+ );
	172	+
231	173	$this->end_controls_section();
232	174
233	175	$this->start_controls_section(
234	176	'section_progress_style',
		@@ -238,70 +180,8 @@
238	180	]
239	181	);
240	182
241	183	$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	184	'bar_color',
305	185	[
306	186	'label' => esc_html__( 'Color', 'elementor' ),
307	187	'type' => Controls_Manager::COLOR,
		@@ -329,9 +209,8 @@
329	209	'bar_height',
330	210	[
331	211	'label' => esc_html__( 'Height', 'elementor' ),
332	212	'type' => Controls_Manager::SLIDER,
333		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
334	213	'selectors' => [
335	214	'{{WRAPPER}} .elementor-progress-bar' => 'height: {{SIZE}}{{UNIT}}; line-height: {{SIZE}}{{UNIT}};',
336	215	],
337	216	]
		@@ -341,9 +220,9 @@
341	220	'bar_border_radius',
342	221	[
343	222	'label' => esc_html__( 'Border Radius', 'elementor' ),
344	223	'type' => Controls_Manager::SLIDER,
345		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
	224	+ 'size_units' => [ 'px', '%', 'em' ],
346	225	'selectors' => [
347	226	'{{WRAPPER}} .elementor-progress-wrapper' => 'border-radius: {{SIZE}}{{UNIT}}; overflow: hidden;',
348	227	],
349	228	]
		@@ -354,11 +233,8 @@
354	233	[
355	234	'label' => esc_html__( 'Inner Text', 'elementor' ),
356	235	'type' => Controls_Manager::HEADING,
357	236	'separator' => 'before',
358		- 'condition' => [
359		- 'inner_text!' => '',
360		- ],
361	237	]
362	238	);
363	239
364	240	$this->add_control(
		@@ -368,11 +244,8 @@
368	244	'type' => Controls_Manager::COLOR,
369	245	'selectors' => [
370	246	'{{WRAPPER}} .elementor-progress-bar' => 'color: {{VALUE}};',
371	247	],
372		- 'condition' => [
373		- 'inner_text!' => '',
374		- ],
375	248	]
376	249	);
377	250
378	251	$this->add_group_control(
		@@ -382,11 +255,8 @@
382	255	'selector' => '{{WRAPPER}} .elementor-progress-bar',
383	256	'exclude' => [
384	257	'line_height',
385	258	],
386		- 'condition' => [
387		- 'inner_text!' => '',
388		- ],
389	259	]
390	260	);
391	261
392	262	$this->add_group_control(
		@@ -393,14 +263,54 @@
393	263	Group_Control_Text_Shadow::get_type(),
394	264	[
395	265	'name' => 'bar_inner_shadow',
396	266	'selector' => '{{WRAPPER}} .elementor-progress-bar',
397		- 'condition' => [
398		- 'inner_text!' => '',
	267	+ ]
	268	+ );
	269	+
	270	+ $this->end_controls_section();
	271	+
	272	+ $this->start_controls_section(
	273	+ 'section_title',
	274	+ [
	275	+ 'label' => esc_html__( 'Title Style', 'elementor' ),
	276	+ 'tab' => Controls_Manager::TAB_STYLE,
	277	+ ]
	278	+ );
	279	+
	280	+ $this->add_control(
	281	+ 'title_color',
	282	+ [
	283	+ 'label' => esc_html__( 'Text Color', 'elementor' ),
	284	+ 'type' => Controls_Manager::COLOR,
	285	+ 'selectors' => [
	286	+ '{{WRAPPER}} .elementor-title' => 'color: {{VALUE}};',
399	287	],
	288	+ 'global' => [
	289	+ 'default' => Global_Colors::COLOR_PRIMARY,
	290	+ ],
400	291	]
401	292	);
402	293
	294	+ $this->add_group_control(
	295	+ Group_Control_Typography::get_type(),
	296	+ [
	297	+ 'name' => 'typography',
	298	+ 'selector' => '{{WRAPPER}} .elementor-title',
	299	+ 'global' => [
	300	+ 'default' => Global_Typography::TYPOGRAPHY_TEXT,
	301	+ ],
	302	+ ]
	303	+ );
	304	+
	305	+ $this->add_group_control(
	306	+ Group_Control_Text_Shadow::get_type(),
	307	+ [
	308	+ 'name' => 'title_shadow',
	309	+ 'selector' => '{{WRAPPER}} .elementor-title',
	310	+ ]
	311	+ );
	312	+
403	313	$this->end_controls_section();
404	314	}
405	315
406	316	/**
		@@ -414,83 +324,51 @@
414	324	*/
415	325	protected function render() {
416	326	$settings = $this->get_settings_for_display();
417	327
418		- if ( empty( $settings['title'] ) && empty( $settings['percent']['size'] ) ) {
419		- return;
420		- }
421		-
422		- $progressbar_id = 'elementor-progress-bar-' . $this->get_id();
423		-
424	328	$progress_percentage = is_numeric( $settings['percent']['size'] ) ? $settings['percent']['size'] : '0';
425	329	if ( 100 < $progress_percentage ) {
426	330	$progress_percentage = 100;
427	331	}
428	332
429		- if ( ! Utils::is_empty( $settings['title'] ) ) {
	333	+ $this->add_render_attribute( 'title', [
	334	+ 'class' => 'elementor-title',
	335	+ ]);
430	336
431		- if ( 'yes' === $settings['title_display'] ) {
	337	+ $this->add_inline_editing_attributes( 'title' );
432	338
433		- $this->add_render_attribute(
434		- 'title',
435		- [
436		- 'class' => 'elementor-title',
437		- 'id' => $progressbar_id,
438		- ]
439		- );
	339	+ $this->add_render_attribute( 'wrapper', [
	340	+ 'class' => 'elementor-progress-wrapper',
	341	+ 'role' => 'progressbar',
	342	+ 'aria-valuemin' => '0',
	343	+ 'aria-valuemax' => '100',
	344	+ 'aria-valuenow' => $progress_percentage,
	345	+ 'aria-valuetext' => $settings['inner_text'],
	346	+ ] );
440	347
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	348	if ( ! empty( $settings['progress_type'] ) ) {
468	349	$this->add_render_attribute( 'wrapper', 'class', 'progress-' . $settings['progress_type'] );
469	350	}
470	351
471		- $this->add_render_attribute(
472		- 'progress-bar',
473		- [
474		- 'class' => 'elementor-progress-bar',
475		- 'data-max' => $progress_percentage,
476		- ]
477		- );
	352	+ $this->add_render_attribute( 'progress-bar', [
	353	+ 'class' => 'elementor-progress-bar',
	354	+ 'data-max' => $progress_percentage,
	355	+ ] );
478	356
479		- $this->add_render_attribute( 'inner_text', 'class', 'elementor-progress-text' );
	357	+ $this->add_render_attribute( 'inner_text', [
	358	+ 'class' => 'elementor-progress-text',
	359	+ ] );
480	360
481	361	$this->add_inline_editing_attributes( 'inner_text' );
482	362
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'] ); ?>>
	363	+ if ( ! Utils::is_empty( $settings['title'] ) ) { ?>
	364	+ <span <?php $this->print_render_attribute_string( 'title' ); ?>><?php $this->print_unescaped_setting( 'title' ); ?></span>
487	365	<?php } ?>
488	366
489	367	<div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
490	368	<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'] ) { ?>
	369	+ <span <?php $this->print_render_attribute_string( 'inner_text' ); ?>><?php $this->print_unescaped_setting( 'inner_text' ); ?></span>
	370	+ <?php if ( 'hide' !== $settings['display_percentage'] ) { ?>
493	371	<span class="elementor-progress-percentage"><?php echo $progress_percentage; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>%</span>
494	372	<?php } ?>
495	373	</div>
496	374	</div>
		@@ -507,101 +385,44 @@
507	385	*/
508	386	protected function content_template() {
509	387	?>
510	388	<#
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	389	let progress_percentage = 0;
519	390	if ( ! isNaN( settings.percent.size ) ) {
520	391	progress_percentage = 100 < settings.percent.size ? 100 : settings.percent.size;
521	392	}
522	393
523		- if ( settings.title ) {
	394	+ view.addRenderAttribute( 'title', {
	395	+ 'class': 'elementor-title'
	396	+ } );
524	397
525		- if ( 'yes' === settings.title_display ) {
	398	+ view.addInlineEditingAttributes( 'title' );
526	399
527		- view.addRenderAttribute(
528		- 'title',
529		- {
530		- 'class': 'elementor-title',
531		- 'id': progressbar_id,
532		- }
533		- );
	400	+ view.addRenderAttribute( 'progressWrapper', {
	401	+ 'class': [ 'elementor-progress-wrapper', 'progress-' + settings.progress_type ],
	402	+ 'role': 'progressbar',
	403	+ 'aria-valuemin': '0',
	404	+ 'aria-valuemax': '100',
	405	+ 'aria-valuenow': progress_percentage,
	406	+ 'aria-valuetext': settings.inner_text
	407	+ } );
534	408
535		- view.addInlineEditingAttributes( 'title' );
	409	+ view.addRenderAttribute( 'inner_text', {
	410	+ 'class': 'elementor-progress-text'
	411	+ } );
536	412
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	413	view.addInlineEditingAttributes( 'inner_text' );
564	414	#>
565		- <# if ( settings.title && 'yes' === settings.title_display ) { #>
566		- <{{ title_tag }} {{{ view.getRenderAttributeString( 'title' ) }}}>{{ settings.title }}</{{ title_tag }}>
567		- <# } #>
	415	+ <# if ( settings.title ) { #>
	416	+ <span {{{ view.getRenderAttributeString( 'title' ) }}}>{{{ settings.title }}}</span><#
	417	+ } #>
568	418	<div {{{ view.getRenderAttributeString( 'progressWrapper' ) }}}>
569	419	<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 ) { #>
	420	+ <span {{{ view.getRenderAttributeString( 'inner_text' ) }}}>{{{ settings.inner_text }}}</span>
	421	+ <# if ( 'hide' !== settings.display_percentage ) { #>
572	422	<span class="elementor-progress-percentage">{{{ progress_percentage }}}%</span>
573	423	<# } #>
574	424	</div>
575	425	</div>
576	426	<?php
577		- }
578		-
579		- public function render_markdown(): string {
580		- $settings = $this->get_settings_for_display();
581		- $title = Utils::html_to_plain_text( $settings['title'] ?? '' );
582		- $inner_text = Utils::html_to_plain_text( $settings['inner_text'] ?? '' );
583		- $percent = $settings['percent']['size'] ?? ( $settings['percent'] ?? '' );
584		-
585		- $parts = [];
586		-
587		- if ( ! empty( $title ) ) {
588		- $parts[] = $title;
589		- }
590		-
591		- if ( ! empty( $inner_text ) ) {
592		- $parts[] = $inner_text;
593		- }
594		-
595		- if ( empty( $parts ) && empty( $percent ) ) {
596		- return '';
597		- }
598		-
599		- $label = implode( ' - ', $parts );
600		-
601		- if ( ! empty( $percent ) ) {
602		- return ! empty( $label ) ? $label . ': ' . $percent . '%' : $percent . '%';
603		- }
604		-
605		- return $label;
606	427	}
607	428	}