Skip to content

Commit

Permalink
Internal: Update 'star' to 'icon' references inside the rating widget…
Browse files Browse the repository at this point in the history 
… [ED-12064] (elementor#23688)

## PR Checklist
<!-- 
Please check if your PR fulfills the following requirements:
**Filling out the template is required.** Any pull request that does not
include enough information to be reviewed in a timely manner may be
closed at the maintainers' discretion.
 -->
- [ ] The commit message follows our guidelines:
https://github.com/elementor/elementor/blob/master/.github/CONTRIBUTING.md


## PR Type
What kind of change does this PR introduce?
<!-- Please check the one that applies to this PR using "x" with no
spaces eg: [x]. -->
- [ ] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## Summary

This PR can be summarized in the following changelog entry:

*

## Description
An explanation of what is done in this PR

*

## Test instructions
This PR can be tested by following these steps:

*

## Quality assurance

- [ ] I have tested this code to the best of my abilities
- [ ] I have added unittests to verify the code works as intended
- [ ] Docs have been added / updated (for bug fixes / features)

Fixes #
  • Loading branch information
@hein-obox
hein-obox authored Sep 6, 2023
1 parent ef0040b commit b83dd2a
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 31 deletions.
26 changes: 13 additions & 13 deletions assets/dev/scss/frontend/widgets/rating.scss
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
.elementor-widget-rating {
--e-rating-gap: 0px;
--e-rating-star-font-size: 16px;
--e-rating-star-color: #{$gray-mouse};
--e-rating-star-marked-color: #{$orange};
--e-rating-star-marked-width: 100%;
--e-rating-icon-font-size: 16px;
--e-rating-icon-color: #{$gray-mouse};
--e-rating-icon-marked-color: #{$orange};
--e-rating-icon-marked-width: 100%;
--e-rating-justify-content: flex-start;

.e-rating {
Expand All @@ -17,14 +17,14 @@
width: fit-content;
}

.e-star {
.e-icon {
position: relative;

&-wrapper {

&.e-star-marked {
--e-rating-star-color: var(--e-rating-star-marked-color);
width: var(--e-rating-star-marked-width);
&.e-icon-marked {
--e-rating-icon-color: var(--e-rating-icon-marked-color);
width: var(--e-rating-icon-marked-width);
position: absolute;
z-index: $first-layer;
height: 100%;
Expand All @@ -39,14 +39,14 @@
}

i {
font-size: var(--e-rating-star-font-size);
color: var(--e-rating-star-color);
font-size: var(--e-rating-icon-font-size);
color: var(--e-rating-icon-color);
}

svg {
width: var(--e-rating-star-font-size);
height: var(--e-rating-star-font-size);
fill: var(--e-rating-star-color);
width: var(--e-rating-icon-font-size);
height: var(--e-rating-icon-font-size);
fill: var(--e-rating-icon-color);
}
}
}
Expand Down
36 changes: 18 additions & 18 deletions includes/widgets/rating.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ private function add_style_tab() {
],
'size_units' => [ 'px', 'em', 'rem', 'vw', 'custom' ],
'selectors' => [
'{{WRAPPER}}' => '--e-rating-star-font-size: {{SIZE}}{{UNIT}}',
'{{WRAPPER}}' => '--e-rating-icon-font-size: {{SIZE}}{{UNIT}}',
],
]
);
Expand Down Expand Up @@ -96,7 +96,7 @@ private function add_style_tab() {
'label' => esc_html__( 'Color', 'elementor' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}}' => '--e-rating-star-marked-color: {{VALUE}}',
'{{WRAPPER}}' => '--e-rating-icon-marked-color: {{VALUE}}',
],
'separator' => 'before',
]
Expand All @@ -108,7 +108,7 @@ private function add_style_tab() {
'label' => esc_html__( 'Unmarked Color', 'elementor' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}}' => '--e-rating-star-color: {{VALUE}}',
'{{WRAPPER}}' => '--e-rating-icon-color: {{VALUE}}',
],
]
);
Expand Down Expand Up @@ -224,7 +224,7 @@ protected function get_rating_scale(): int {
return intval( $this->get_settings_for_display( 'rating_scale' )['size'] );
}

protected function get_star_marked_width( $star_index ): string {
protected function get_icon_marked_width( $icon_index ): string {
$initial_value = $this->get_rating_scale();
$rating_value = $this->get_rating_value();

Expand All @@ -234,39 +234,39 @@ protected function get_star_marked_width( $star_index ): string {

$width = '0%';

if ( $rating_value >= $star_index ) {
if ( $rating_value >= $icon_index ) {
$width = '100%';
} elseif ( intval( ceil( $rating_value ) ) === $star_index ) {
$width = ( $rating_value - ( $star_index - 1 ) ) * 100 . '%';
} elseif ( intval( ceil( $rating_value ) ) === $icon_index ) {
$width = ( $rating_value - ( $icon_index - 1 ) ) * 100 . '%';
}

return $width;
}

protected function get_star_markup(): string {
protected function get_icon_markup(): string {
$icon = $this->get_settings_for_display( 'rating_icon' );
$rating_scale = $this->get_rating_scale();

ob_start();

for ( $index = 1; $index <= $rating_scale; $index++ ) {
$this->add_render_attribute( 'star_marked_' . $index, [
'class' => 'e-star-wrapper e-star-marked',
$this->add_render_attribute( 'icon_marked_' . $index, [
'class' => 'e-icon-wrapper e-icon-marked',
] );

$star_marked_width = $this->get_star_marked_width( $index );
$icon_marked_width = $this->get_icon_marked_width( $index );

if ( '100%' !== $star_marked_width ) {
$this->add_render_attribute( 'star_marked_' . $index, [
'style' => '--e-rating-star-marked-width: ' . $star_marked_width . ';',
if ( '100%' !== $icon_marked_width ) {
$this->add_render_attribute( 'icon_marked_' . $index, [
'style' => '--e-rating-icon-marked-width: ' . $icon_marked_width . ';',
] );
}
?>
<div class="e-star">
<div <?php $this->print_render_attribute_string( 'star_marked_' . $index ); ?>>
<div class="e-icon">
<div <?php $this->print_render_attribute_string( 'icon_marked_' . $index ); ?>>
<?php echo Icons_Manager::try_get_icon_html( $icon, [ 'aria-hidden' => 'true' ] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<div class="e-star-wrapper e-star-unmarked">
<div class="e-icon-wrapper e-icon-unmarked">
<?php echo Icons_Manager::try_get_icon_html( $icon, [ 'aria-hidden' => 'true' ] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
</div>
Expand Down Expand Up @@ -299,7 +299,7 @@ protected function render() {
<meta itemprop="worstRating" content="0">
<meta itemprop="bestRating" content="<?php echo $this->get_rating_scale(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>">
<div <?php $this->print_render_attribute_string( 'widget_wrapper' ); ?>>
<?php echo $this->get_star_markup(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<?php echo $this->get_icon_markup(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
</div>
<?php
Expand Down

0 comments on commit b83dd2a

Please sign in to comment.