Skip to content

Commit

Permalink
Merge branch 'main' into ED-11967-to-main
Browse files Browse the repository at this point in the history
  • Loading branch information
@davseve
davseve authored Sep 7, 2023
2 parents 2933d2f + 25fbdd0 commit 1fe84c6
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 29 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
80 changes: 64 additions & 16 deletions includes/widgets/rating.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,54 @@ 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}}',
],
]
);

$this->add_responsive_control(
'icon_gap',
[
'label' => esc_html__( 'Spacing', 'elementor' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'em' => [
'min' => 0,
'max' => 10,
'step' => 0.1,
],
'rem' => [
'min' => 0,
'max' => 10,
'step' => 0.1,
],
],
'size_units' => [ 'px', 'em', 'rem', 'vw', 'custom' ],
'selectors' => [
'{{WRAPPER}}' => '--e-rating-gap: {{SIZE}}{{UNIT}}',
],
]
);

$this->add_control(
'icon_color',
[
'label' => esc_html__( 'Color', 'elementor' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}}' => '--e-rating-icon-marked-color: {{VALUE}}',
],
'separator' => 'before',
]
);

$this->add_control(
'icon_unmasked_color',
[
'label' => esc_html__( 'Unmarked Color', 'elementor' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}}' => '--e-rating-icon-color: {{VALUE}}',
],
]
);
Expand Down Expand Up @@ -224,7 +271,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 +281,40 @@ 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 +347,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 1fe84c6

Please sign in to comment.