← All changes | includes/widgets/progress.php +66 -181 4.2.0-dev2 → 3.22.2 View file →

		@@ -77,26 +77,8 @@
77	77	return false;
78	78	}
79	79
80	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	81	* Register progress widget controls.
100	82	*
101	83	* Adds different input fields to allow the user to change and customize the widget settings.
102	84	*
		@@ -148,22 +130,8 @@
148	130	]
149	131	);
150	132
151	133	$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	134	'progress_type',
167	135	[
168	136	'label' => esc_html__( 'Type', 'elementor' ),
169	137	'type' => Controls_Manager::SELECT,
		@@ -193,9 +161,8 @@
193	161	],
194	162	'dynamic' => [
195	163	'active' => true,
196	164	],
197		- 'separator' => 'before',
198	165	]
199	166	);
200	167
201	168	$this->add_control(
		@@ -206,11 +173,8 @@
206	173	'label_on' => esc_html__( 'Show', 'elementor' ),
207	174	'label_off' => esc_html__( 'Hide', 'elementor' ),
208	175	'return_value' => 'show',
209	176	'default' => 'show',
210		- 'condition' => [
211		- 'percent!' => '',
212		- ],
213	177	]
214	178	);
215	179
216	180	$this->add_control(
		@@ -223,9 +187,8 @@
223	187	],
224	188	'placeholder' => esc_html__( 'e.g. Web Designer', 'elementor' ),
225	189	'default' => esc_html__( 'Web Designer', 'elementor' ),
226	190	'label_block' => true,
227		- 'separator' => 'before',
228	191	]
229	192	);
230	193
231	194	$this->end_controls_section();
		@@ -238,70 +201,8 @@
238	201	]
239	202	);
240	203
241	204	$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	205	'bar_color',
305	206	[
306	207	'label' => esc_html__( 'Color', 'elementor' ),
307	208	'type' => Controls_Manager::COLOR,
		@@ -354,11 +255,8 @@
354	255	[
355	256	'label' => esc_html__( 'Inner Text', 'elementor' ),
356	257	'type' => Controls_Manager::HEADING,
357	258	'separator' => 'before',
358		- 'condition' => [
359		- 'inner_text!' => '',
360		- ],
361	259	]
362	260	);
363	261
364	262	$this->add_control(
		@@ -368,11 +266,8 @@
368	266	'type' => Controls_Manager::COLOR,
369	267	'selectors' => [
370	268	'{{WRAPPER}} .elementor-progress-bar' => 'color: {{VALUE}};',
371	269	],
372		- 'condition' => [
373		- 'inner_text!' => '',
374		- ],
375	270	]
376	271	);
377	272
378	273	$this->add_group_control(
		@@ -382,11 +277,8 @@
382	277	'selector' => '{{WRAPPER}} .elementor-progress-bar',
383	278	'exclude' => [
384	279	'line_height',
385	280	],
386		- 'condition' => [
387		- 'inner_text!' => '',
388		- ],
389	281	]
390	282	);
391	283
392	284	$this->add_group_control(
		@@ -393,14 +285,54 @@
393	285	Group_Control_Text_Shadow::get_type(),
394	286	[
395	287	'name' => 'bar_inner_shadow',
396	288	'selector' => '{{WRAPPER}} .elementor-progress-bar',
397		- 'condition' => [
398		- 'inner_text!' => '',
	289	+ ]
	290	+ );
	291	+
	292	+ $this->end_controls_section();
	293	+
	294	+ $this->start_controls_section(
	295	+ 'section_title',
	296	+ [
	297	+ 'label' => esc_html__( 'Title Style', 'elementor' ),
	298	+ 'tab' => Controls_Manager::TAB_STYLE,
	299	+ ]
	300	+ );
	301	+
	302	+ $this->add_control(
	303	+ 'title_color',
	304	+ [
	305	+ 'label' => esc_html__( 'Text Color', 'elementor' ),
	306	+ 'type' => Controls_Manager::COLOR,
	307	+ 'selectors' => [
	308	+ '{{WRAPPER}} .elementor-title' => 'color: {{VALUE}};',
399	309	],
	310	+ 'global' => [
	311	+ 'default' => Global_Colors::COLOR_PRIMARY,
	312	+ ],
400	313	]
401	314	);
402	315
	316	+ $this->add_group_control(
	317	+ Group_Control_Typography::get_type(),
	318	+ [
	319	+ 'name' => 'typography',
	320	+ 'selector' => '{{WRAPPER}} .elementor-title',
	321	+ 'global' => [
	322	+ 'default' => Global_Typography::TYPOGRAPHY_TEXT,
	323	+ ],
	324	+ ]
	325	+ );
	326	+
	327	+ $this->add_group_control(
	328	+ Group_Control_Text_Shadow::get_type(),
	329	+ [
	330	+ 'name' => 'title_shadow',
	331	+ 'selector' => '{{WRAPPER}} .elementor-title',
	332	+ ]
	333	+ );
	334	+
403	335	$this->end_controls_section();
404	336	}
405	337
406	338	/**
		@@ -426,28 +358,19 @@
426	358	$progress_percentage = 100;
427	359	}
428	360
429	361	if ( ! Utils::is_empty( $settings['title'] ) ) {
	362	+ $this->add_render_attribute(
	363	+ 'title',
	364	+ [
	365	+ 'class' => 'elementor-title',
	366	+ 'id' => $progressbar_id,
	367	+ ]
	368	+ );
430	369
431		- if ( 'yes' === $settings['title_display'] ) {
	370	+ $this->add_inline_editing_attributes( 'title' );
432	371
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		- }
	372	+ $this->add_render_attribute( 'wrapper', 'aria-labelledby', $progressbar_id );
450	373	}
451	374
452	375	$this->add_render_attribute(
453	376	'wrapper',
		@@ -479,17 +402,17 @@
479	402	$this->add_render_attribute( 'inner_text', 'class', 'elementor-progress-text' );
480	403
481	404	$this->add_inline_editing_attributes( 'inner_text' );
482	405
483		- if ( ! Utils::is_empty( $settings['title'] ) && 'yes' === $settings['title_display'] ) { ?>
	406	+ if ( ! Utils::is_empty( $settings['title'] ) ) { ?>
484	407	<<?php Utils::print_validated_html_tag( $settings['title_tag'] ); ?> <?php $this->print_render_attribute_string( 'title' ); ?>>
485		- <?php echo wp_kses_post( $settings['title'] ); ?>
	408	+ <?php $this->print_unescaped_setting( 'title' ); ?>
486	409	</<?php Utils::print_validated_html_tag( $settings['title_tag'] ); ?>>
487	410	<?php } ?>
488	411
489	412	<div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
490	413	<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>
	414	+ <span <?php $this->print_render_attribute_string( 'inner_text' ); ?>><?php $this->print_unescaped_setting( 'inner_text' ); ?></span>
492	415	<?php if ( 'show' === $settings['display_percentage'] ) { ?>
493	416	<span class="elementor-progress-percentage"><?php echo $progress_percentage; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>%</span>
494	417	<?php } ?>
495	418	</div>
		@@ -520,28 +443,19 @@
520	443	progress_percentage = 100 < settings.percent.size ? 100 : settings.percent.size;
521	444	}
522	445
523	446	if ( settings.title ) {
	447	+ view.addRenderAttribute(
	448	+ 'title',
	449	+ {
	450	+ 'class': 'elementor-title',
	451	+ 'id': progressbar_id,
	452	+ }
	453	+ );
524	454
525		- if ( 'yes' === settings.title_display ) {
	455	+ view.addInlineEditingAttributes( 'title' );
526	456
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		- }
	457	+ view.addRenderAttribute( 'wrapper', 'aria-labelledby', progressbar_id );
544	458	}
545	459
546	460	view.addRenderAttribute(
547	461	'progressWrapper',
		@@ -561,14 +475,14 @@
561	475	view.addRenderAttribute( 'inner_text', 'class', 'elementor-progress-text' );
562	476
563	477	view.addInlineEditingAttributes( 'inner_text' );
564	478	#>
565		- <# if ( settings.title && 'yes' === settings.title_display ) { #>
566		- <{{ title_tag }} {{{ view.getRenderAttributeString( 'title' ) }}}>{{ settings.title }}</{{ title_tag }}>
	479	+ <# if ( settings.title ) { #>
	480	+ <{{ title_tag }} {{{ view.getRenderAttributeString( 'title' ) }}}>{{{ settings.title }}}</{{ title_tag }}>
567	481	<# } #>
568	482	<div {{{ view.getRenderAttributeString( 'progressWrapper' ) }}}>
569	483	<div class="elementor-progress-bar" data-max="{{ progress_percentage }}">
570		- <span {{{ view.getRenderAttributeString( 'inner_text' ) }}}>{{ settings.inner_text }}</span>
	484	+ <span {{{ view.getRenderAttributeString( 'inner_text' ) }}}>{{{ settings.inner_text }}}</span>
571	485	<# if ( 'show' === settings.display_percentage ) { #>
572	486	<span class="elementor-progress-percentage">{{{ progress_percentage }}}%</span>
573	487	<# } #>
574	488	</div>
		@@ -573,35 +487,6 @@
573	487	<# } #>
574	488	</div>
575	489	</div>
576	490	<?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	491	}
607	492	}