From c30779afee11a5758692757e686fbad7d08d5d2d Mon Sep 17 00:00:00 2001 From: Fabio Teixeira Date: Fri, 3 Jul 2015 15:26:02 -0300 Subject: [PATCH] Add comments to a better code understanding --- plugins/communities_ratings/public/rate.js | 95 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------------- plugins/communities_ratings/views/communities_ratings_plugin_profile/new_rating.html.erb | 11 +++++------ 2 files changed, 65 insertions(+), 41 deletions(-) diff --git a/plugins/communities_ratings/public/rate.js b/plugins/communities_ratings/public/rate.js index 20abbb4..84c9ce9 100644 --- a/plugins/communities_ratings/public/rate.js +++ b/plugins/communities_ratings/public/rate.js @@ -1,66 +1,91 @@ -(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); diff --git a/plugins/communities_ratings/views/communities_ratings_plugin_profile/new_rating.html.erb b/plugins/communities_ratings/views/communities_ratings_plugin_profile/new_rating.html.erb index 143d92c..df100fd 100644 --- a/plugins/communities_ratings/views/communities_ratings_plugin_profile/new_rating.html.erb +++ b/plugins/communities_ratings/views/communities_ratings_plugin_profile/new_rating.html.erb @@ -4,18 +4,17 @@
"rate" %>>
-
-
-
-
-
+
+
+
+
+
-
<%= form_for :comments do |c| %> -- libgit2 0.21.2