Download as
Browse Code »

Commit c30779afee11a5758692757e686fbad7d08d5d2d

Authored by Fabio Teixeira
1 parent 59de989e
Exists in temp_ratings

Add comments to a better code understanding 

Signed-off-by: Fabio Teixeira <fabio1079@gmail.com>
Showing 2 changed files with 65 additions and 41 deletions   Show diff stats
plugins/communities_ratings/public/rate.js
  Diff comments   View file @c30779a
1   -(function($, undefined) {
  1 +;(function($, undefined) {
2 2 "use strict";
3 3  
  4 + /*
  5 + * All global data that are used in the stars feature.
  6 + */
  7 + var DATA = {
  8 + selected_rate: undefined, // The actual selected star when the click on a star
  9 + MAXIMUM_STARS: 5, // (const) The maximum number of allowed stars
  10 + MINIMUM_STARS: 1, // (const) The minimum number of allowed stars
  11 + DATA_RATE_ATTRIBUTE: "data-star-rate" // (const) The data attribute with the star rate
  12 + }
  13 +
  14 +
  15 + /*
  16 + * Given a start rate, an end rate and the elements, it makes a regex that filter
  17 + * the elements by the given range and returns it.
  18 + */
4 19 function star_filter(start, end, elements) {
5 20 var test_regex = undefined;
6 21  
  22 + // Verify if it is a valid range and makes its range regex: /[start-end]/
7 23 if (end >= start) {
8 24 test_regex = new RegExp("["+(start)+"-"+(end)+"]");
9 25 } else {
  26 + // If the range is invalid, make a regex that will return no element
10 27 test_regex = new RegExp("[]");
11 28 }
12 29  
  30 + // Filter the elements that are in the given range
13 31 var result = elements.filter(function(i, element) {
14   - var index = parseInt(element.getAttribute("data-star-index"));
  32 + var rate = parseInt(element.getAttribute(DATA.DATA_RATE_ATTRIBUTE));
15 33  
16   - return test_regex.test(index);
  34 + return test_regex.test(rate);
17 35 });
18 36  
19 37 return result;
20 38 }
21 39  
22   -
23   - function set_star_hover_actions() {
24   - var star_selected = undefined;
25   -
26   - $(".star-negative")
27   - .on("mouseover", function() {
28   - var index = parseInt(this.getAttribute("data-star-index"));
29   - var previous_stars = undefined;
30   -
31   - if (star_selected !== undefined) {
32   - previous_stars = star_filter(star_selected+1, index, $(".star-negative"));
33   - } else {
34   - previous_stars = star_filter(0, index, $(".star-negative"));
35   - }
36 40  
37   - previous_stars.switchClass("star-negative", "star-positive");
38   - })
  41 + /*
  42 + * Show or hide the stars depending on the mouse position and the limit rate.
  43 + * Given the mouseover rate, the limit rate and the css classes to be swapped,
  44 + *
  45 + * it verify if the user already selected a star rate:
  46 + * If true:
  47 + * It swap the css classes from the selected star up to the given limit rate
  48 + * If false:
  49 + * It swap the css classes from the minimum rate up to the mouseover rate
  50 + */
  51 + function change_stars_class(rate_mouseover, limit_rate, remove_class, add_class) {
  52 + var previous_stars = undefined;
  53 +
  54 + if (DATA.selected_rate !== undefined) {
  55 + previous_stars = star_filter(DATA.selected_rate+1, limit_rate, $("."+remove_class));
  56 + } else {
  57 + previous_stars = star_filter(DATA.MINIMUM_STARS, rate_mouseover, $("."+remove_class));
  58 + }
39 59  
40   - .on("mouseout", function() {
41   - var index = parseInt(this.getAttribute("data-star-index"));
  60 + previous_stars.switchClass(remove_class, add_class);
  61 + }
42 62  
43   - var previous_stars = undefined;
44 63  
45   - if (star_selected !== undefined) {
46   - previous_stars = star_filter(star_selected+1, 4, $(".star-positive"));
47   - } else {
48   - previous_stars = star_filter(0, index, $(".star-positive"));
49   - }
  64 + /*
  65 + * Sets the stars mouse events.
  66 + */
  67 + function set_star_hover_actions() {
  68 + $(".star-negative")
  69 + .on("mouseover", function() { // On mouse over, show the current rate star
  70 + var rate_mouseover = parseInt(this.getAttribute(DATA.DATA_RATE_ATTRIBUTE));
50 71  
51   - previous_stars.switchClass("star-positive", "star-negative");
  72 + change_stars_class(rate_mouseover, rate_mouseover, "star-negative", "star-positive");
52 73 })
53 74  
54   - .on("click", function() {
55   - var index = parseInt(this.getAttribute("data-star-index"));
56   - star_selected = index;
57   - });
  75 + .on("mouseout", function() { // On mouse out, hide the stars
  76 + var rate_mouseover = parseInt(this.getAttribute(DATA.DATA_RATE_ATTRIBUTE));
58 77  
  78 + change_stars_class(rate_mouseover, DATA.MAXIMUM_STARS, "star-positive", "star-negative");
  79 + })
59 80  
  81 + .on("click", function() { // On mouse click, set the selected star rate
  82 + var rate_mouseover = parseInt(this.getAttribute(DATA.DATA_RATE_ATTRIBUTE));
  83 + DATA.selected_rate = rate_mouseover;
  84 + });
60 85 }
61   -
  86 +
62 87  
63 88 $(document).ready(function() {
64   - set_star_hover_actions();
65   - });
  89 + set_star_hover_actions();
  90 + });
66 91 }) (jQuery);
... ...
plugins/communities_ratings/views/communities_ratings_plugin_profile/new_rating.html.erb
  Diff comments   View file @c30779a
... ... @@ -4,18 +4,17 @@
4 4 <div>
5 5 <div data-rate-url=<%= url_for controller: "communities_ratings_plugin_profile", :action => "rate" %>>
6 6 <div class="star-container">
7   - <div class="star-negative" data-star-index="0"></div>
8   - <div class="star-negative" data-star-index="1"></div>
9   - <div class="star-negative" data-star-index="2"></div>
10   - <div class="star-negative" data-star-index="3"></div>
11   - <div class="star-negative" data-star-index="4"></div>
  7 + <div class="star-negative" data-star-rate="1"></div>
  8 + <div class="star-negative" data-star-rate="2"></div>
  9 + <div class="star-negative" data-star-rate="3"></div>
  10 + <div class="star-negative" data-star-rate="4"></div>
  11 + <div class="star-negative" data-star-rate="5"></div>
12 12 </div>
13 13  
14 14 <div class="star-action">
15 15 <button><%= _("Rate") %></button>
16 16 </div>
17 17 </div>
18   -
19 18 <div>
20 19 <%= form_for :comments do |c| %>
21 20  
... ...