startControlsSection( 'section_rating', [ 'label' => __('Rating'), ] ); $this->addControl( 'rating_scale', [ 'label' => __('Rating Scale'), 'type' => ControlsManager::SELECT, 'options' => [ '5' => '0-5', '10' => '0-10', ], 'default' => '5', ] ); $this->addControl( 'rating', [ 'label' => __('Rating'), 'type' => ControlsManager::NUMBER, 'min' => 0, 'max' => 10, 'step' => 0.1, 'default' => 5, 'dynamic' => [ // 'active' => true, ], ] ); $this->addControl( 'star_style', [ 'label' => __('Icon'), 'type' => ControlsManager::SELECT, 'options' => [ 'star_fontawesome' => 'Font Awesome', 'star_unicode' => 'Unicode', ], 'default' => 'star_fontawesome', 'render_type' => 'template', 'prefix_class' => 'elementor--star-style-', 'separator' => 'before', ] ); $this->addControl( 'unmarked_star_style', [ 'label' => __('Unmarked Style'), 'type' => ControlsManager::CHOOSE, 'options' => [ 'solid' => [ 'title' => __('Solid'), 'icon' => 'ceicon-star', ], 'outline' => [ 'title' => __('Outline'), 'icon' => 'ceicon-star-o', ], ], 'default' => 'solid', ] ); $this->addControl( 'title', [ 'label' => __('Title'), 'type' => ControlsManager::TEXT, 'separator' => 'before', 'dynamic' => [ 'active' => true, ], ] ); $this->addResponsiveControl( 'align', [ 'label' => __('Alignment'), 'type' => ControlsManager::CHOOSE, 'options' => [ 'left' => [ 'title' => __('Left'), 'icon' => 'eicon-text-align-left', ], 'center' => [ 'title' => __('Center'), 'icon' => 'eicon-text-align-center', ], 'right' => [ 'title' => __('Right'), 'icon' => 'eicon-text-align-right', ], 'justify' => [ 'title' => __('Justified'), 'icon' => 'eicon-text-align-justify', ], ], 'prefix_class' => 'elementor-star-rating%s--align-', 'selectors' => [ '{{WRAPPER}}' => 'text-align: {{VALUE}}', ], ] ); $this->endControlsSection(); $this->startControlsSection( 'section_title_style', [ 'label' => __('Title'), 'tab' => ControlsManager::TAB_STYLE, 'condition' => [ 'title!' => '', ], ] ); $this->addControl( 'title_color', [ 'label' => __('Text Color'), 'type' => ControlsManager::COLOR, 'scheme' => [ 'type' => SchemeColor::getType(), 'value' => SchemeColor::COLOR_3, ], 'selectors' => [ '{{WRAPPER}} .elementor-star-rating__title' => 'color: {{VALUE}}', ], ] ); $this->addGroupControl( GroupControlTypography::getType(), [ 'name' => 'title_typography', 'selector' => '{{WRAPPER}} .elementor-star-rating__title', 'scheme' => SchemeTypography::TYPOGRAPHY_3, ] ); $this->addGroupControl( GroupControlTextShadow::getType(), [ 'name' => 'title_shadow', 'selector' => '{{WRAPPER}} .elementor-star-rating__title', ] ); $this->addResponsiveControl( 'title_gap', [ 'label' => __('Gap'), 'type' => ControlsManager::SLIDER, 'range' => [ 'px' => [ 'min' => 0, 'max' => 50, ], ], 'selectors' => [ 'body:not(.lang-rtl) {{WRAPPER}}:not(.elementor-star-rating--align-justify) .elementor-star-rating__title' => 'margin-right: {{SIZE}}{{UNIT}}', 'body.lang-rtl {{WRAPPER}}:not(.elementor-star-rating--align-justify) .elementor-star-rating__title' => 'margin-left: {{SIZE}}{{UNIT}}', ], ] ); $this->endControlsSection(); $this->startControlsSection( 'section_stars_style', [ 'label' => __('Stars'), 'tab' => ControlsManager::TAB_STYLE, ] ); $this->addResponsiveControl( 'icon_size', [ 'label' => __('Size'), 'type' => ControlsManager::SLIDER, 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-star-rating' => 'font-size: {{SIZE}}{{UNIT}}', ], ] ); $this->addResponsiveControl( 'icon_space', [ 'label' => __('Spacing'), 'type' => ControlsManager::SLIDER, 'range' => [ 'px' => [ 'min' => 0, 'max' => 50, ], ], 'selectors' => [ 'body:not(.lang-rtl) {{WRAPPER}} .elementor-star-rating i:not(:last-of-type)' => 'margin-right: {{SIZE}}{{UNIT}}', 'body.lang-rtl {{WRAPPER}} .elementor-star-rating i:not(:last-of-type)' => 'margin-left: {{SIZE}}{{UNIT}}', ], ] ); $this->addControl( 'stars_color', [ 'label' => __('Color'), 'type' => ControlsManager::COLOR, 'selectors' => [ '{{WRAPPER}} .elementor-star-rating i:before' => 'color: {{VALUE}}', ], 'separator' => 'before', ] ); $this->addControl( 'stars_unmarked_color', [ 'label' => __('Unmarked Color'), 'type' => ControlsManager::COLOR, 'selectors' => [ '{{WRAPPER}} .elementor-star-rating i' => 'color: {{VALUE}}', ], ] ); $this->endControlsSection(); } /** * @since 2.3.0 */ protected function getRating() { $settings = $this->getSettingsForDisplay(); $rating_scale = (int) $settings['rating_scale']; $rating = (float) $settings['rating'] > $rating_scale ? $rating_scale : $settings['rating']; return [$rating, $rating_scale]; } /** * Print the actual stars and calculate their filling. * * Rating type is float to allow stars-count to be a fraction. * Floored-rating type is int, to represent the rounded-down stars count. * In the `for` loop, the index type is float to allow comparing with the rating value. * * @since 2.3.0 */ protected function renderStars($icon) { $rating_data = $this->getRating(); $rating = (float) $rating_data[0]; $floored_rating = floor($rating); $stars_html = ''; for ($stars = 1.0; $stars <= $rating_data[1]; ++$stars) { if ($stars <= $floored_rating) { $stars_html .= '' . $icon . ''; } elseif ($floored_rating + 1 === $stars && $rating !== $floored_rating) { $stars_html .= '' . $icon . ''; } else { $stars_html .= '' . $icon . ''; } } return $stars_html; } /** * @since 2.3.0 */ protected function render() { $settings = $this->getSettingsForDisplay(); $rating_data = $this->getRating(); $textual_rating = $rating_data[0] . '/' . $rating_data[1]; if ('star_fontawesome' === $settings['star_style']) { $icon = 'outline' === $settings['unmarked_star_style'] ? '' : ''; } elseif ('star_unicode' === $settings['star_style']) { $icon = 'outline' === $settings['unmarked_star_style'] ? '☆' : '★'; } $this->addRenderAttribute('icon_wrapper', [ 'class' => 'elementor-star-rating', 'title' => $textual_rating, ]); $schema_rating = '' . $textual_rating . ''; $stars_element = '