elementor / includes / widgets / progress.php

progress.php in Elementor Website Builder – more than just a page builder 3.3.1, at includes/widgets/progress.php

426 lines 9.8 KB

Raw Download Zip

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 __( '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	/**
77	* Register progress widget controls.
78	*
79	* Adds different input fields to allow the user to change and customize the widget settings.
80	*
81	* @since 3.1.0
82	* @access protected
83	*/
84	protected function register_controls() {
85	$this->start_controls_section(
86	'section_progress',
87	[
88	'label' => __( 'Progress Bar', 'elementor' ),
89	]
90	);
91
92	$this->add_control(
93	'title',
94	[
95	'label' => __( 'Title', 'elementor' ),
96	'type' => Controls_Manager::TEXT,
97	'dynamic' => [
98	'active' => true,
99	],
100	'placeholder' => __( 'Enter your title', 'elementor' ),
101	'default' => __( 'My Skill', 'elementor' ),
102	'label_block' => true,
103	]
104	);
105
106	$this->add_control(
107	'progress_type',
108	[
109	'label' => __( 'Type', 'elementor' ),
110	'type' => Controls_Manager::SELECT,
111	'default' => '',
112	'options' => [
113	'' => __( 'Default', 'elementor' ),
114	'info' => __( 'Info', 'elementor' ),
115	'success' => __( 'Success', 'elementor' ),
116	'warning' => __( 'Warning', 'elementor' ),
117	'danger' => __( 'Danger', 'elementor' ),
118	],
119	]
120	);
121
122	$this->add_control(
123	'percent',
124	[
125	'label' => __( 'Percentage', 'elementor' ),
126	'type' => Controls_Manager::SLIDER,
127	'default' => [
128	'size' => 50,
129	'unit' => '%',
130	],
131	'dynamic' => [
132	'active' => true,
133	],
134	]
135	);
136
137	$this->add_control( 'display_percentage', [
138	'label' => __( 'Display Percentage', 'elementor' ),
139	'type' => Controls_Manager::SELECT,
140	'default' => 'show',
141	'options' => [
142	'show' => __( 'Show', 'elementor' ),
143	'hide' => __( 'Hide', 'elementor' ),
144	],
145	] );
146
147	$this->add_control(
148	'inner_text',
149	[
150	'label' => __( 'Inner Text', 'elementor' ),
151	'type' => Controls_Manager::TEXT,
152	'dynamic' => [
153	'active' => true,
154	],
155	'placeholder' => __( 'e.g. Web Designer', 'elementor' ),
156	'default' => __( 'Web Designer', 'elementor' ),
157	'label_block' => true,
158	]
159	);
160
161	$this->add_control(
162	'view',
163	[
164	'label' => __( 'View', 'elementor' ),
165	'type' => Controls_Manager::HIDDEN,
166	'default' => 'traditional',
167	]
168	);
169
170	$this->end_controls_section();
171
172	$this->start_controls_section(
173	'section_progress_style',
174	[
175	'label' => __( 'Progress Bar', 'elementor' ),
176	'tab' => Controls_Manager::TAB_STYLE,
177	]
178	);
179
180	$this->add_control(
181	'bar_color',
182	[
183	'label' => __( 'Color', 'elementor' ),
184	'type' => Controls_Manager::COLOR,
185	'global' => [
186	'default' => Global_Colors::COLOR_PRIMARY,
187	],
188	'selectors' => [
189	'{{WRAPPER}} .elementor-progress-wrapper .elementor-progress-bar' => 'background-color: {{VALUE}};',
190	],
191	]
192	);
193
194	$this->add_control(
195	'bar_bg_color',
196	[
197	'label' => __( 'Background Color', 'elementor' ),
198	'type' => Controls_Manager::COLOR,
199	'selectors' => [
200	'{{WRAPPER}} .elementor-progress-wrapper' => 'background-color: {{VALUE}};',
201	],
202	]
203	);
204
205	$this->add_control(
206	'bar_height',
207	[
208	'label' => __( 'Height', 'elementor' ),
209	'type' => Controls_Manager::SLIDER,
210	'selectors' => [
211	'{{WRAPPER}} .elementor-progress-bar' => 'height: {{SIZE}}{{UNIT}}; line-height: {{SIZE}}{{UNIT}};',
212	],
213	]
214	);
215
216	$this->add_control(
217	'bar_border_radius',
218	[
219	'label' => __( 'Border Radius', 'elementor' ),
220	'type' => Controls_Manager::SLIDER,
221	'size_units' => [ 'px', '%' ],
222	'selectors' => [
223	'{{WRAPPER}} .elementor-progress-wrapper' => 'border-radius: {{SIZE}}{{UNIT}}; overflow: hidden;',
224	],
225	]
226	);
227
228	$this->add_control(
229	'inner_text_heading',
230	[
231	'label' => __( 'Inner Text', 'elementor' ),
232	'type' => Controls_Manager::HEADING,
233	'separator' => 'before',
234	]
235	);
236
237	$this->add_control(
238	'bar_inline_color',
239	[
240	'label' => __( 'Color', 'elementor' ),
241	'type' => Controls_Manager::COLOR,
242	'selectors' => [
243	'{{WRAPPER}} .elementor-progress-bar' => 'color: {{VALUE}};',
244	],
245	]
246	);
247
248	$this->add_group_control(
249	Group_Control_Typography::get_type(),
250	[
251	'name' => 'bar_inner_typography',
252	'selector' => '{{WRAPPER}} .elementor-progress-bar',
253	'exclude' => [
254	'line_height',
255	],
256	]
257	);
258
259	$this->add_group_control(
260	Group_Control_Text_Shadow::get_type(),
261	[
262	'name' => 'bar_inner_shadow',
263	'selector' => '{{WRAPPER}} .elementor-progress-bar',
264	]
265	);
266
267	$this->end_controls_section();
268
269	$this->start_controls_section(
270	'section_title',
271	[
272	'label' => __( 'Title Style', 'elementor' ),
273	'tab' => Controls_Manager::TAB_STYLE,
274	]
275	);
276
277	$this->add_control(
278	'title_color',
279	[
280	'label' => __( 'Text Color', 'elementor' ),
281	'type' => Controls_Manager::COLOR,
282	'selectors' => [
283	'{{WRAPPER}} .elementor-title' => 'color: {{VALUE}};',
284	],
285	'global' => [
286	'default' => Global_Colors::COLOR_PRIMARY,
287	],
288	]
289	);
290
291	$this->add_group_control(
292	Group_Control_Typography::get_type(),
293	[
294	'name' => 'typography',
295	'selector' => '{{WRAPPER}} .elementor-title',
296	'global' => [
297	'default' => Global_Typography::TYPOGRAPHY_TEXT,
298	],
299	]
300	);
301
302	$this->add_group_control(
303	Group_Control_Text_Shadow::get_type(),
304	[
305	'name' => 'title_shadow',
306	'selector' => '{{WRAPPER}} .elementor-title',
307	]
308	);
309
310	$this->end_controls_section();
311	}
312
313	/**
314	* Render progress widget output on the frontend.
315	* Make sure value does no exceed 100%.
316	*
317	* Written in PHP and used to generate the final HTML.
318	*
319	* @since 1.0.0
320	* @access protected
321	*/
322	protected function render() {
323	$settings = $this->get_settings_for_display();
324
325	$progress_percentage = is_numeric( $settings['percent']['size'] ) ? $settings['percent']['size'] : '0';
326	if ( 100 < $progress_percentage ) {
327	$progress_percentage = 100;
328	}
329
330	$this->add_render_attribute( 'title', [
331	'class' => 'elementor-title',
332	]);
333
334	$this->add_inline_editing_attributes( 'title' );
335
336	$this->add_render_attribute( 'wrapper', [
337	'class' => 'elementor-progress-wrapper',
338	'role' => 'progressbar',
339	'aria-valuemin' => '0',
340	'aria-valuemax' => '100',
341	'aria-valuenow' => $progress_percentage,
342	'aria-valuetext' => $settings['inner_text'],
343	] );
344
345	if ( ! empty( $settings['progress_type'] ) ) {
346	$this->add_render_attribute( 'wrapper', 'class', 'progress-' . $settings['progress_type'] );
347	}
348
349	$this->add_render_attribute( 'progress-bar', [
350	'class' => 'elementor-progress-bar',
351	'data-max' => $progress_percentage,
352	] );
353
354	$this->add_render_attribute( 'inner_text', [
355	'class' => 'elementor-progress-text',
356	] );
357
358	$this->add_inline_editing_attributes( 'inner_text' );
359
360	if ( ! Utils::is_empty( $settings['title'] ) ) { ?>
361	<span <?php echo $this->get_render_attribute_string( 'title' ); ?>><?php echo $settings['title']; ?></span>
362	<?php } ?>
363
364	<div <?php echo $this->get_render_attribute_string( 'wrapper' ); ?>>
365	<div <?php echo $this->get_render_attribute_string( 'progress-bar' ); ?>>
366	<span <?php echo $this->get_render_attribute_string( 'inner_text' ); ?>><?php echo $settings['inner_text']; ?></span>
367	<?php if ( 'hide' !== $settings['display_percentage'] ) { ?>
368	<span class="elementor-progress-percentage"><?php echo $progress_percentage; ?>%</span>
369	<?php } ?>
370	</div>
371	</div>
372	<?php
373	}
374
375	/**
376	* Render progress widget output in the editor.
377	*
378	* Written as a Backbone JavaScript template and used to generate the live preview.
379	*
380	* @since 2.9.0
381	* @access protected
382	*/
383	protected function content_template() {
384	?>
385	<#
386	let progress_percentage = 0;
387	if ( ! isNaN( settings.percent.size ) ) {
388	progress_percentage = 100 < settings.percent.size ? 100 : settings.percent.size;
389	}
390
391	view.addRenderAttribute( 'title', {
392	'class': 'elementor-title'
393	} );
394
395	view.addInlineEditingAttributes( 'title' );
396
397	view.addRenderAttribute( 'progressWrapper', {
398	'class': [ 'elementor-progress-wrapper', 'progress-' + settings.progress_type ],
399	'role': 'progressbar',
400	'aria-valuemin': '0',
401	'aria-valuemax': '100',
402	'aria-valuenow': progress_percentage,
403	'aria-valuetext': settings.inner_text
404	} );
405
406	view.addRenderAttribute( 'inner_text', {
407	'class': 'elementor-progress-text'
408	} );
409
410	view.addInlineEditingAttributes( 'inner_text' );
411	#>
412	<# if ( settings.title ) { #>
413	<span {{{ view.getRenderAttributeString( 'title' ) }}}>{{{ settings.title }}}</span><#
414	} #>
415	<div {{{ view.getRenderAttributeString( 'progressWrapper' ) }}}>
416	<div class="elementor-progress-bar" data-max="{{ progress_percentage }}">
417	<span {{{ view.getRenderAttributeString( 'inner_text' ) }}}>{{{ settings.inner_text }}}</span>
418	<# if ( 'hide' !== settings.display_percentage ) { #>
419	<span class="elementor-progress-percentage">{{{ progress_percentage }}}%</span>
420	<# } #>
421	</div>
422	</div>
423	<?php
424	}
425	}
426