Add comments to a better code understanding

Signed-off-by: Fabio Teixeira <fabio1079@gmail.com>

Add comments to a better code understanding
Signed-off-by: Fabio Teixeira <fabio1079@gmail.com>
Fabio Teixeira
1 parent 59de989e
Showing 2 changed files with 65 additions and 41 deletions Show diff stats
plugins/communities_ratings/public/rate.js
plugins/communities_ratings/views/communities_ratings_plugin_profile/new_rating.html.erb
-(function($, undefined) {
+;(function($, undefined) {
   "use strict";
+  /*
+  * All global data that are used in the stars feature.
+  */
+  var DATA = {
+    selected_rate: undefined, // The actual selected star when the click on a star
+    MAXIMUM_STARS: 5, // (const) The maximum number of allowed stars
+    MINIMUM_STARS: 1, // (const) The minimum number of allowed stars
+    DATA_RATE_ATTRIBUTE: "data-star-rate" // (const) The data attribute with the star rate
+  }
+
+
+  /*
+  * Given a start rate, an end rate and the elements, it makes a regex that filter
+  * the elements by the given range and returns it.
+  */
   function star_filter(start, end, elements) {
     var test_regex = undefined;
+    // Verify if it is a valid range and makes its range regex: /[start-end]/
     if (end >= start) {
       test_regex = new RegExp("["+(start)+"-"+(end)+"]");
     } else {
+      // If the range is invalid, make a regex that will return no element
       test_regex = new RegExp("[]");
     }
+    // Filter the elements that are in the given range
     var result = elements.filter(function(i, element) {
-      var index = parseInt(element.getAttribute("data-star-index"));
+      var rate = parseInt(element.getAttribute(DATA.DATA_RATE_ATTRIBUTE));
-      return test_regex.test(index);
+      return test_regex.test(rate);
     });
     return result;
   }
-  
-  function set_star_hover_actions() {
-    var star_selected = undefined;
-    
-    $(".star-negative")
-      .on("mouseover", function() {
-        var index = parseInt(this.getAttribute("data-star-index"));
-        var previous_stars = undefined;
-
-        if (star_selected !== undefined) {
-          previous_stars = star_filter(star_selected+1, index, $(".star-negative"));
-        } else {
-          previous_stars = star_filter(0, index, $(".star-negative"));
-        }
-        previous_stars.switchClass("star-negative", "star-positive");
-      })
+  /*
+  * Show or hide the stars depending on the mouse position and the limit rate.
+  * Given the mouseover rate, the limit rate and the css classes to be swapped,
+  *
+  * it verify if the user already selected a star rate:
+  * If true:
+  *   It swap the css classes from the selected star up to the given limit rate
+  * If false:
+  *   It swap the css classes from the minimum rate up to the mouseover rate
+  */
+  function change_stars_class(rate_mouseover, limit_rate, remove_class, add_class) {
+    var previous_stars = undefined;
+
+    if (DATA.selected_rate !== undefined) {
+      previous_stars = star_filter(DATA.selected_rate+1, limit_rate, $("."+remove_class));
+    } else {
+      previous_stars = star_filter(DATA.MINIMUM_STARS, rate_mouseover, $("."+remove_class));
+    }
-      .on("mouseout", function() {
-        var index = parseInt(this.getAttribute("data-star-index"));
+    previous_stars.switchClass(remove_class, add_class);
+  }
-        var previous_stars = undefined;
-        if (star_selected !== undefined) {
-          previous_stars = star_filter(star_selected+1, 4, $(".star-positive"));
-        } else { 
-          previous_stars = star_filter(0, index, $(".star-positive"));
-        }
+  /*
+  * Sets the stars mouse events.
+  */
+  function set_star_hover_actions() {
+    $(".star-negative")
+      .on("mouseover", function() { // On mouse over, show the current rate star
+        var rate_mouseover = parseInt(this.getAttribute(DATA.DATA_RATE_ATTRIBUTE));
-        previous_stars.switchClass("star-positive", "star-negative");
+        change_stars_class(rate_mouseover, rate_mouseover, "star-negative", "star-positive");
       })
-      .on("click", function() { 
-        var index = parseInt(this.getAttribute("data-star-index"));
-        star_selected = index;
-      });
+      .on("mouseout", function() { // On mouse out, hide the stars
+        var rate_mouseover = parseInt(this.getAttribute(DATA.DATA_RATE_ATTRIBUTE));
+        change_stars_class(rate_mouseover, DATA.MAXIMUM_STARS, "star-positive", "star-negative");
+      })
+      .on("click", function() { // On mouse click, set the selected star rate
+        var rate_mouseover = parseInt(this.getAttribute(DATA.DATA_RATE_ATTRIBUTE));
+        DATA.selected_rate = rate_mouseover;
+      });
   }
-  
+
   $(document).ready(function() {
-   set_star_hover_actions();
-  }); 
+    set_star_hover_actions();
+  });
 }) (jQuery);
@@ -4,18 +4,17 @@
   <div>
     <div data-rate-url=<%= url_for controller: "communities_ratings_plugin_profile", :action => "rate" %>>
       <div class="star-container">
-        <div class="star-negative" data-star-index="0"></div>
-        <div class="star-negative" data-star-index="1"></div>
-        <div class="star-negative" data-star-index="2"></div>
-        <div class="star-negative" data-star-index="3"></div>
-        <div class="star-negative" data-star-index="4"></div>
+        <div class="star-negative" data-star-rate="1"></div>
+        <div class="star-negative" data-star-rate="2"></div>
+        <div class="star-negative" data-star-rate="3"></div>
+        <div class="star-negative" data-star-rate="4"></div>
+        <div class="star-negative" data-star-rate="5"></div>
       </div>
       <div class="star-action">
         <button><%= _("Rate") %></button>
       </div>
     </div>
-
     <div>
       <%= form_for :comments do |c| %>