add function resettable

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';
     }
-}
+}

README.md

@@ -98,6 +98,21 @@ or for a custom rating scale:
     ]);
     // ...
 ```
+to enable resettable:
+Reset resets the value to 0.
+
+![resettable](https://cloud.githubusercontent.com/assets/6400771/24266249/73591b78-1006-11e7-87b5-04937893ad2f.png)
+
+```php
+<?php
+    // ...
+    $builder->add('rating', RatingType::class, [
+    	//...
+    	'resettable' => true,
+    	//...
+    ]);
+    // ...
+```
 
 ###Display in a twig template using the rating filter
 ```

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,20 +24,20 @@
 }
 
 .rating div.star:before {
-    content:"\f006";
+    content:"\f005";
     padding-right:5px;
     color:#999;
 }
 
 .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;
-}
+}

Resources/public/js/rating.js

@@ -1,35 +1,35 @@
-$(function(){
-    var labelWasClicked = function labelWasClicked(){
+$(function () {
+    var labelWasClicked = function labelWasClicked() {
         var input = $(this).siblings().filter('input');
         if (input.attr('disabled')) {
             return;
         }
         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();
             selectedStar.addClass('star-full');
         }
     }
 
-    $('.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);
 
-});
+});

Resources/views/rating.html.twig

@@ -9,6 +9,9 @@
         {% for star in 1..stars %}
           <div id="rating_star_{{ stars - star + 1 }}" class="star" data-value="{{ stars - star + 1 }}"></div>
         {% endfor %}
+        {% if resettable %}
+        <div id="rating_star_reset" class="star-reset" data-value="0"></div>
+        {% endif %}
       </div>
     </div>
   {% endspaceless %}
@@ -27,4 +30,4 @@
         {%- endif -%}
     {%- endfor -%}
 {% endspaceless %}
-{% endblock rating_widget_container_attributes %}
+{% endblock rating_widget_container_attributes %}