diff --git a/Form/RatingType.php b/Form/RatingType.php index 9ecc036..344999d 100644 --- a/Form/RatingType.php +++ b/Form/RatingType.php @@ -14,7 +14,8 @@ class RatingType extends AbstractType public function buildView(FormView $view, FormInterface $form, array $options) { $view->vars = array_replace($view->vars, [ - 'stars' => $options['stars'] + 'stars' => $options['stars'], + 'resettable' => $options['resettable'] ]); } @@ -26,6 +27,7 @@ public function configureOptions(OptionsResolver $resolver) ], 'scale' => 1, 'stars' => 5, + 'resettable' => false, ]); } @@ -38,4 +40,4 @@ public function getName() { return 'rating'; } -} \ No newline at end of file +} diff --git a/README.md b/README.md index debaa1b..4c5168d 100644 --- a/README.md +++ b/README.md @@ -98,6 +98,21 @@ or for a custom rating scale: ]); // ... ``` +to enable resettable: +Reset resets the value to 0. + + + +```php +add('rating', RatingType::class, [ + //... + 'resettable' => true, + //... + ]); + // ... +``` ###Display in a twig template using the rating filter ``` diff --git a/Resources/public/css/rating.css b/Resources/public/css/rating.css index c841efb..2443176 100644 --- a/Resources/public/css/rating.css +++ b/Resources/public/css/rating.css @@ -12,9 +12,8 @@ } .rating div.star { - font-family:FontAwesome; - font-weight:normal; - font-style:normal; + font-family:"Font Awesome 5 Pro"; + font-weight:400; font-size: 25px; display:inline-block; position: relative; @@ -25,7 +24,7 @@ } .rating div.star:before { - content:"\f006"; + content:"\f005"; padding-right:5px; color:#999; } @@ -33,12 +32,12 @@ .rating div.star:hover:before,.rating div.star:hover~div.star:before { content:"\f005"; color:#e3cf7a; + font-weight:900; } .rating div.star-full { - font-family:FontAwesome; - font-weight:normal; - font-style:normal; + font-family:"Font Awesome 5 Pro"; + font-weight:900; font-size: 25px; display:inline-block; position: relative; @@ -51,7 +50,7 @@ } .rating div.star-empty { - font-family:FontAwesome; + font-family:"Font Awesome 5 Pro"; font-weight:normal; font-style:normal; font-size: 25px; @@ -60,11 +59,35 @@ } .rating div.star-empty:before { - content:"\f006"; + content:"\f005"; padding-right:5px; color:#999; } +.rating div.star-reset { + font-family:"Font Awesome 5 Pro"; + font-weight:normal; + font-style:normal; + font-size: 25px; + display:inline-block; + position: relative; +} + +.rating div.star-reset:hover { + cursor:pointer; +} + +.rating div.star-reset:before { + content:"\f05e"; + padding-right:5px; + color:#999; +} + +.rating div.star-reset:hover:before,.rating div.star-reset:hover~div.star-reset:before { + content:"\f05e"; + color:#990000; +} + .rating div.fa-norm { font-size: 1em; } @@ -89,4 +112,4 @@ .rating div.fa-5x { font-size: 5em; -} \ No newline at end of file +} diff --git a/Resources/public/js/rating.js b/Resources/public/js/rating.js index 825ce67..44a5053 100644 --- a/Resources/public/js/rating.js +++ b/Resources/public/js/rating.js @@ -1,5 +1,5 @@ -$(function(){ - var labelWasClicked = function labelWasClicked(){ +$(function () { + var labelWasClicked = function labelWasClicked() { var input = $(this).siblings().filter('input'); if (input.attr('disabled')) { return; @@ -7,20 +7,20 @@ $(function(){ input.val($(this).attr('data-value')); } - var turnToStar = function turnToStar(){ + var turnToStar = function turnToStar() { if ($(this).find('input').attr('disabled')) { return; } - var labels = $(this).find('div'); + var labels = $(this).find('div').filter(':not(#rating_star_reset)'); labels.removeClass(); labels.addClass('star'); } - var turnStarBack = function turnStarBack(){ + var turnStarBack = function turnStarBack() { var rating = parseInt($(this).find('input').val()); if (rating > 0) { - var selectedStar = $(this).children().filter('#rating_star_'+rating) - var prevLabels = $(selectedStar).nextAll(); + var selectedStar = $(this).children().filter('#rating_star_' + rating); + var prevLabels = $(selectedStar).nextAll().filter(':not(#rating_star_reset)'); prevLabels.removeClass(); prevLabels.addClass('star-full'); selectedStar.removeClass(); @@ -28,8 +28,8 @@ $(function(){ } } - $('.star, .rating-well').click(labelWasClicked); + $('.star, .star-reset, .rating-well').click(labelWasClicked); $('.rating-well').each(turnStarBack); - $('.rating-well').hover(turnToStar,turnStarBack); + $('.rating-well').hover(turnToStar, turnStarBack); -}); \ No newline at end of file +}); diff --git a/Resources/views/rating.html.twig b/Resources/views/rating.html.twig index 7045516..fec9e81 100644 --- a/Resources/views/rating.html.twig +++ b/Resources/views/rating.html.twig @@ -9,6 +9,9 @@ {% for star in 1..stars %}
{% endfor %} + {% if resettable %} + + {% endif %} {% endspaceless %} @@ -27,4 +30,4 @@ {%- endif -%} {%- endfor -%} {% endspaceless %} -{% endblock rating_widget_container_attributes %} \ No newline at end of file +{% endblock rating_widget_container_attributes %}