elementor / includes / widgets / star-rating.php

star-rating.php in Elementor Website Builder – more than just a page builder 3.33.0-dev1, at includes/widgets/star-rating.php

562 lines 13.4 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 star rating widget.
13	*
14	* Elementor widget that displays star rating.
15	*
16	* @since 2.3.0
17	*/
18	class Widget_Star_Rating extends Widget_Base {
19
20	/**
21	* Get widget name.
22	*
23	* Retrieve star rating widget name.
24	*
25	* @since 2.3.0
26	* @access public
27	*
28	* @return string Widget name.
29	*/
30	public function get_name() {
31	return 'star-rating';
32	}
33
34	/**
35	* Get widget title.
36	*
37	* Retrieve star rating widget title.
38	*
39	* @since 2.3.0
40	* @access public
41	*
42	* @return string Widget title.
43	*/
44	public function get_title() {
45	return esc_html__( 'Star Rating', 'elementor' );
46	}
47
48	/**
49	* Get widget icon.
50	*
51	* Retrieve star rating widget icon.
52	*
53	* @since 2.3.0
54	* @access public
55	*
56	* @return string Widget icon.
57	*/
58	public function get_icon() {
59	return 'eicon-rating';
60	}
61
62	/**
63	* Get widget keywords.
64	*
65	* Retrieve the list of keywords the widget belongs to.
66	*
67	* @since 2.3.0
68	* @access public
69	*
70	* @return array Widget keywords.
71	*/
72	public function get_keywords() {
73	return [ 'star', 'rating', 'rate', 'review' ];
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-star-rating' ];
92	}
93
94	/**
95	* Hide widget from panel.
96	*
97	* Hide the star rating widget from the panel.
98	*
99	* @since 3.17.0
100	* @return bool
101	*/
102	public function show_in_panel(): bool {
103	return false;
104	}
105
106	public function has_widget_inner_wrapper(): bool {
107	return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
108	}
109
110	/**
111	* Register star rating widget controls.
112	*
113	* Adds different input fields to allow the user to change and customize the widget settings.
114	*
115	* @since 3.1.0
116	* @access protected
117	*/
118	protected function register_controls() {
119	$this->start_controls_section(
120	'section_rating',
121	[
122	'label' => esc_html__( 'Star Rating', 'elementor' ),
123	]
124	);
125
126	if ( Plugin::$instance->widgets_manager->get_widget_types( 'rating' ) ) {
127	$this->add_deprecation_message(
128	'3.17.0',
129	esc_html__(
130	'You are currently editing a Star Rating widget in its old version. Drag a new Rating widget onto your page to use a newer version, providing better capabilities.',
131	'elementor'
132	),
133	'rating'
134	);
135	}
136
137	$this->add_control(
138	'rating_scale',
139	[
140	'label' => esc_html__( 'Rating Scale', 'elementor' ),
141	'type' => Controls_Manager::SELECT,
142	'options' => [
143	'5' => '0-5',
144	'10' => '0-10',
145	],
146	'default' => '5',
147	]
148	);
149
150	$this->add_control(
151	'rating',
152	[
153	'label' => esc_html__( 'Rating', 'elementor' ),
154	'type' => Controls_Manager::NUMBER,
155	'min' => 0,
156	'max' => 10,
157	'step' => 0.1,
158	'default' => 5,
159	'dynamic' => [
160	'active' => true,
161	],
162	]
163	);
164
165	$this->add_control(
166	'star_style',
167	[
168	'label' => esc_html__( 'Icon', 'elementor' ),
169	'type' => Controls_Manager::SELECT,
170	'options' => [
171	'star_fontawesome' => 'Font Awesome',
172	'star_unicode' => 'Unicode',
173	],
174	'default' => 'star_fontawesome',
175	'render_type' => 'template',
176	'prefix_class' => 'elementor--star-style-',
177	'separator' => 'before',
178	]
179	);
180
181	$this->add_control(
182	'unmarked_star_style',
183	[
184	'label' => esc_html__( 'Unmarked Style', 'elementor' ),
185	'type' => Controls_Manager::CHOOSE,
186	'options' => [
187	'solid' => [
188	'title' => esc_html__( 'Solid', 'elementor' ),
189	'icon' => 'eicon-star',
190	],
191	'outline' => [
192	'title' => esc_html__( 'Outline', 'elementor' ),
193	'icon' => 'eicon-star-o',
194	],
195	],
196	'default' => 'solid',
197	]
198	);
199
200	$this->add_control(
201	'title',
202	[
203	'label' => esc_html__( 'Title', 'elementor' ),
204	'type' => Controls_Manager::TEXT,
205	'separator' => 'before',
206	'dynamic' => [
207	'active' => true,
208	],
209	]
210	);
211
212	$start = is_rtl() ? 'right' : 'left';
213	$end = ! is_rtl() ? 'right' : 'left';
214
215	$this->add_responsive_control(
216	'align',
217	[
218	'label' => esc_html__( 'Alignment', 'elementor' ),
219	'type' => Controls_Manager::CHOOSE,
220	'options' => [
221	'start' => [
222	'title' => esc_html__( 'Start', 'elementor' ),
223	'icon' => "eicon-text-align-$start",
224	],
225	'center' => [
226	'title' => esc_html__( 'Center', 'elementor' ),
227	'icon' => 'eicon-text-align-center',
228	],
229	'end' => [
230	'title' => esc_html__( 'End', 'elementor' ),
231	'icon' => "eicon-text-align-$end",
232	],
233	'justify' => [
234	'title' => esc_html__( 'Justified', 'elementor' ),
235	'icon' => 'eicon-text-align-justify',
236	],
237	],
238	'classes_dictionary' => [
239	'left' => is_rtl() ? 'end' : 'start',
240	'right' => is_rtl() ? 'start' : 'end',
241	],
242	'selectors_dictionary' => [
243	'left' => is_rtl() ? 'end' : 'start',
244	'right' => is_rtl() ? 'start' : 'end',
245	],
246	'prefix_class' => 'elementor-star-rating%s--align-',
247	'selectors' => [
248	'{{WRAPPER}}' => 'text-align: {{VALUE}}',
249	],
250	]
251	);
252
253	$this->end_controls_section();
254
255	$this->start_controls_section(
256	'section_title_style',
257	[
258	'label' => esc_html__( 'Title', 'elementor' ),
259	'tab' => Controls_Manager::TAB_STYLE,
260	'condition' => [
261	'title!' => '',
262	],
263	]
264	);
265
266	$this->add_control(
267	'title_color',
268	[
269	'label' => esc_html__( 'Text Color', 'elementor' ),
270	'type' => Controls_Manager::COLOR,
271	'global' => [
272	'default' => Global_Colors::COLOR_TEXT,
273	],
274	'selectors' => [
275	'{{WRAPPER}} .elementor-star-rating__title' => 'color: {{VALUE}}',
276	],
277	]
278	);
279
280	$this->add_group_control(
281	Group_Control_Typography::get_type(),
282	[
283	'name' => 'title_typography',
284	'selector' => '{{WRAPPER}} .elementor-star-rating__title',
285	'global' => [
286	'default' => Global_Typography::TYPOGRAPHY_TEXT,
287	],
288	]
289	);
290
291	$this->add_group_control(
292	Group_Control_Text_Shadow::get_type(),
293	[
294	'name' => 'title_shadow',
295	'selector' => '{{WRAPPER}} .elementor-star-rating__title',
296	]
297	);
298
299	$this->add_responsive_control(
300	'title_gap',
301	[
302	'label' => esc_html__( 'Gap', 'elementor' ),
303	'type' => Controls_Manager::SLIDER,
304	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
305	'range' => [
306	'px' => [
307	'max' => 50,
308	],
309	'em' => [
310	'min' => 0,
311	'max' => 5,
312	],
313	'rem' => [
314	'min' => 0,
315	'max' => 5,
316	],
317	],
318	'selectors' => [
319	'{{WRAPPER}}:not(.elementor-star-rating--align-justify) .elementor-star-rating__title' => 'margin-inline-end: {{SIZE}}{{UNIT}}',
320	],
321	]
322	);
323
324	$this->end_controls_section();
325
326	$this->start_controls_section(
327	'section_stars_style',
328	[
329	'label' => esc_html__( 'Stars', 'elementor' ),
330	'tab' => Controls_Manager::TAB_STYLE,
331	]
332	);
333
334	$this->add_responsive_control(
335	'icon_size',
336	[
337	'label' => esc_html__( 'Size', 'elementor' ),
338	'type' => Controls_Manager::SLIDER,
339	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
340	'range' => [
341	'px' => [
342	'max' => 100,
343	],
344	'em' => [
345	'min' => 0,
346	'max' => 10,
347	],
348	'rem' => [
349	'min' => 0,
350	'max' => 10,
351	],
352	],
353	'selectors' => [
354	'{{WRAPPER}} .elementor-star-rating' => 'font-size: {{SIZE}}{{UNIT}}',
355	],
356	]
357	);
358
359	$this->add_responsive_control(
360	'icon_space',
361	[
362	'label' => esc_html__( 'Spacing', 'elementor' ),
363	'type' => Controls_Manager::SLIDER,
364	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
365	'range' => [
366	'px' => [
367	'max' => 50,
368	],
369	'em' => [
370	'min' => 0,
371	'max' => 5,
372	],
373	'rem' => [
374	'min' => 0,
375	'max' => 5,
376	],
377	],
378	'selectors' => [
379	'{{WRAPPER}} .elementor-star-rating i:not(:last-of-type)' => 'margin-inline-end: {{SIZE}}{{UNIT}}',
380	],
381	]
382	);
383
384	$this->add_control(
385	'stars_color',
386	[
387	'label' => esc_html__( 'Color', 'elementor' ),
388	'type' => Controls_Manager::COLOR,
389	'selectors' => [
390	'{{WRAPPER}} .elementor-star-rating i:before' => 'color: {{VALUE}}',
391	],
392	'separator' => 'before',
393	]
394	);
395
396	$this->add_control(
397	'stars_unmarked_color',
398	[
399	'label' => esc_html__( 'Unmarked Color', 'elementor' ),
400	'type' => Controls_Manager::COLOR,
401	'selectors' => [
402	'{{WRAPPER}} .elementor-star-rating i' => 'color: {{VALUE}}',
403	],
404	]
405	);
406
407	$this->end_controls_section();
408	}
409
410	/**
411	* @since 2.3.0
412	* @access protected
413	*/
414	protected function get_rating() {
415	$settings = $this->get_settings_for_display();
416	$rating_scale = (int) $settings['rating_scale'];
417	$rating = (float) $settings['rating'] > $rating_scale ? $rating_scale : $settings['rating'];
418
419	return [ $rating, $rating_scale ];
420	}
421
422	/**
423	* Print the actual stars and calculate their filling.
424	*
425	* Rating type is float to allow stars-count to be a fraction.
426	* Floored-rating type is int, to represent the rounded-down stars count.
427	* In the `for` loop, the index type is float to allow comparing with the rating value.
428	*
429	* @since 2.3.0
430	* @access protected
431	*/
432	protected function render_stars( $icon ) {
433	$rating_data = $this->get_rating();
434	$rating = (float) $rating_data[0];
435	$floored_rating = floor( $rating );
436	$stars_html = '';
437
438	for ( $stars = 1.0; $stars <= $rating_data[1]; $stars++ ) {
439	if ( $stars <= $floored_rating ) {
440	$stars_html .= '<i class="elementor-star-full" aria-hidden="true">' . $icon . '</i>';
441	} elseif ( $floored_rating + 1 === $stars && $rating !== $floored_rating ) {
442	$stars_html .= '<i class="elementor-star-' . ( $rating - $floored_rating ) * 10 . '" aria-hidden="true">' . $icon . '</i>';
443	} else {
444	$stars_html .= '<i class="elementor-star-empty" aria-hidden="true">' . $icon . '</i>';
445	}
446	}
447
448	return $stars_html;
449	}
450
451	/**
452	* @since 2.3.0
453	* @access protected
454	*/
455	protected function render() {
456	$settings = $this->get_settings_for_display();
457	$rating_data = $this->get_rating();
458	$textual_rating = sprintf(
459	/* translators: 1: Rating value. 2: Rating scale. */
460	esc_html__( 'Rated %1$s out of %2$s', 'elementor' ),
461	$rating_data[0],
462	$rating_data[1]
463	);
464	$icon = '';
465
466	if ( 'star_fontawesome' === $settings['star_style'] ) {
467	if ( 'outline' === $settings['unmarked_star_style'] ) {
468	$icon = '';
469	}
470	} elseif ( 'star_unicode' === $settings['star_style'] ) {
471	$icon = '★';
472
473	if ( 'outline' === $settings['unmarked_star_style'] ) {
474	$icon = '☆';
475	}
476	}
477
478	$this->add_render_attribute( 'icon_wrapper', [
479	'class' => 'elementor-star-rating',
480	'itemtype' => 'http://schema.org/Rating',
481	'itemscope' => '',
482	'itemprop' => 'reviewRating',
483	] );
484	?>
485	<div class="elementor-star-rating__wrapper">
486	<?php if ( ! Utils::is_empty( $settings['title'] ) ) : ?>
487	<div class="elementor-star-rating__title"><?php echo esc_html( $settings['title'] ); ?></div>
488	<?php endif; ?>
489	<div <?php $this->print_render_attribute_string( 'icon_wrapper' ); ?>>
490	<?php echo $this->render_stars( $icon ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
491	<span itemprop="ratingValue" class="elementor-screen-only"><?php echo esc_html( $textual_rating ); ?></span>
492	</div>
493	</div>
494	<?php
495	}
496
497	/**
498	* @since 2.9.0
499	* @access protected
500	*/
501	protected function content_template() {
502	?>
503	<#
504	var getRating = function() {
505	var ratingScale = parseInt( settings.rating_scale, 10 ),
506	rating = settings.rating > ratingScale ? ratingScale : settings.rating;
507
508	return [ rating, ratingScale ];
509	},
510	ratingData = getRating(),
511	rating = ratingData[0],
512	textualRating = 'Rated ' + ratingData[0] + ' out of ' + ratingData[1],
513	renderStars = function( icon ) {
514	var starsHtml = '',
515	flooredRating = Math.floor( rating );
516
517	for ( var stars = 1; stars <= ratingData[1]; stars++ ) {
518	if ( stars <= flooredRating ) {
519	starsHtml += '<i class="elementor-star-full" aria-hidden="true">' + icon + '</i>';
520	} else if ( flooredRating + 1 === stars && rating !== flooredRating ) {
521	starsHtml += '<i class="elementor-star-' + ( rating - flooredRating ).toFixed( 1 ) * 10 + '" aria-hidden="true">' + icon + '</i>';
522	} else {
523	starsHtml += '<i class="elementor-star-empty" aria-hidden="true">' + icon + '</i>';
524	}
525	}
526
527	return starsHtml;
528	},
529	icon = '';
530
531	if ( 'star_fontawesome' === settings.star_style ) {
532	if ( 'outline' === settings.unmarked_star_style ) {
533	icon = '';
534	}
535	} else if ( 'star_unicode' === settings.star_style ) {
536	icon = '★';
537
538	if ( 'outline' === settings.unmarked_star_style ) {
539	icon = '☆';
540	}
541	}
542
543	view.addRenderAttribute( 'iconWrapper', 'class', 'elementor-star-rating' );
544	view.addRenderAttribute( 'iconWrapper', 'itemtype', 'http://schema.org/Rating' );
545	view.addRenderAttribute( 'iconWrapper', 'itemscope', '' );
546	view.addRenderAttribute( 'iconWrapper', 'itemprop', 'reviewRating' );
547
548	var stars = renderStars( icon );
549	#>
550	<div class="elementor-star-rating__wrapper">
551	<# if ( ! _.isEmpty( settings.title ) ) { #>
552	<div class="elementor-star-rating__title">{{ settings.title }}</div>
553	<# } #>
554	<div {{{ view.getRenderAttributeString( 'iconWrapper' ) }}} >
555	{{{ stars }}}
556	<span itemprop="ratingValue" class="elementor-screen-only">{{ textualRating }}</span>
557	</div>
558	</div>
559	<?php
560	}
561	}
562