Adjust javascript to rated communities

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

Adjust javascript to rated communities
Signed-off-by: Fabio Teixeira <fabio1079@gmail.com> Signed-off-by: Tallys Martins <tallysmartins@gmail.com>
Fabio Teixeira
1 parent c30779af
Showing 4 changed files with 96 additions and 11 deletions Show diff stats
plugins/communities_ratings/controllers/communities_ratings_plugin_profile_controller.rb
plugins/communities_ratings/public/rate.js
plugins/communities_ratings/style.css
plugins/communities_ratings/views/communities_ratings_plugin_profile/new_rating.html.erb
@@ -28,6 +28,13 @@ class CommunitiesRatingsPluginProfileController &lt; ProfileController
   end
   def new_rating
+    community_rating = get_community_rating(user, profile)
+    @actual_rate_value = if community_rating.value
+                           community_rating.value
+                         else
+                           0
+                         end
+
   end
   private
@@ -5,10 +5,21 @@
   * 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
+    selected_rate: 0, // The actual selected star when the user 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
+    DATA_RATE_ATTRIBUTE: "data-star-rate", // (const) The data attribute with the star rate
+    NOT_SELECTED_VALUE: 0 // (const) The value when there is no selected rate
+  }
+
+
+  /*
+  * Prepare the global data that are variable.
+  * If the user already rated the community, set the selected_rate as the rated value
+  */
+  function set_global_data() {
+    var selected_rate = parseInt($("#selected-star-rate").val());
+    DATA.selected_rate = selected_rate;
   }
@@ -42,7 +53,7 @@
   * 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:
+  * 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:
@@ -51,7 +62,8 @@
   function change_stars_class(rate_mouseover, limit_rate, remove_class, add_class) {
     var previous_stars = undefined;
-    if (DATA.selected_rate !== undefined) {
+    // The default not selected rate value is 0 and minimum is 1.
+    if (DATA.selected_rate >= DATA.MINIMUM_STARS) {
       previous_stars = star_filter(DATA.selected_rate+1, limit_rate, $("."+remove_class));
     } else {
       previous_stars = star_filter(DATA.MINIMUM_STARS, rate_mouseover, $("."+remove_class));
@@ -65,7 +77,7 @@
   * Sets the stars mouse events.
   */
   function set_star_hover_actions() {
-    $(".star-negative")
+    $(".star-negative, .star-positive")
       .on("mouseover", function() { // On mouse over, show the current rate star
         var rate_mouseover = parseInt(this.getAttribute(DATA.DATA_RATE_ATTRIBUTE));
@@ -85,7 +97,62 @@
   }
+  /*
+  * Display a message to the user if there is no star selected when he/she
+  * clicks on the rate button
+  */
+  function not_selected_rate_action(notice_element) {
+    var notice = $("#empty-star-notice").val();
+    notice_element.html(notice);
+  }
+
+
+  /*
+  * Send the user rate to the server when he/she clicks on the rate button
+  */
+  function selected_rate_action(notice_element) {
+    var profile = $("#community-profile").val();
+
+    $.ajax({
+      url: "/profile/"+profile+"/plugin/communities_ratings/rate",
+      type: "POST",
+      data: {
+        value: DATA.selected_rate
+      },
+      success: function(response) {
+        notice_element.html(response.message);
+      }
+    });
+  }
+
+
+  /*
+  * Set the rate button actions. It verify if the user selected a rate.
+  * If true:
+  *  Call selected_rate_action to send the rate data.
+  * If false:
+  *  Call not_selected_rate_action to display a error message to the user
+  */
+  function set_rate_button_action() {
+    $("#star-rate-action").on("click", function() {
+      var star_notice = $(".star-notice");
+      star_notice.removeClass("star-hide");
+
+      if (DATA.selected_rate !== DATA.NOT_SELECTED_VALUE) {
+        selected_rate_action(star_notice);
+      } else {
+        not_selected_rate_action(star_notice);
+      }
+    });
+  }
+
+
+  /*
+  * When the page DOM is ready, set all the stars events
+  */
   $(document).ready(function() {
+    set_global_data();
     set_star_hover_actions();
+    set_rate_button_action();
   });
 }) (jQuery);
@@ -20,3 +20,6 @@
   background-image: url('public/images/star-positive.png');
 }
+.star-hide {
+  display: none;
+}
 \ No newline at end of file
+<input type="hidden" id="community-profile" value="<%= @profile.identifier  %>">
+<input type="hidden" id="empty-star-notice" value="<%= _("At least one star must be selected") %>">
+<input type="hidden" id="selected-star-rate" value="<%= @actual_rate_value %>">
+
+<div class="star-notice star-hide"></div>
+
 <div>
   <div></div>
   <div>
     <div data-rate-url=<%= url_for controller: "communities_ratings_plugin_profile", :action => "rate" %>>
       <div class="star-container">
-        <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>
+        <% (1..5).each do |rate_number| %>
+          <% if rate_number <= @actual_rate_value %>
+            <div class="star-positive" data-star-rate="<%= rate_number %>"></div>
+          <% else %>
+            <div class="star-negative" data-star-rate="<%= rate_number %>"></div>
+          <% end %>
+        <% end %>
       </div>
       <div class="star-action">
-        <button><%= _("Rate") %></button>
+        <button id="star-rate-action"><%= _("Rate") %></button>
       </div>
     </div>
     <div>
	@@ -28,6 +28,13 @@ class CommunitiesRatingsPluginProfileController < ProfileController		@@ -28,6 +28,13 @@ class CommunitiesRatingsPluginProfileController < ProfileController
28	end	28	end
29		29
30	def new_rating	30	def new_rating
		31	+ community_rating = get_community_rating(user, profile)
		32	+ @actual_rate_value = if community_rating.value
		33	+ community_rating.value
		34	+ else
		35	+ 0
		36	+ end
		37	+
31	end	38	end
32		39
33	private	40	private
	@@ -5,10 +5,21 @@		@@ -5,10 +5,21 @@
5	* All global data that are used in the stars feature.	5	* All global data that are used in the stars feature.
6	*/	6	*/
7	var DATA = {	7	var DATA = {
8	- selected_rate: undefined, // The actual selected star when the click on a star	8	+ selected_rate: 0, // The actual selected star when the user click on a star
9	MAXIMUM_STARS: 5, // (const) The maximum number of allowed stars	9	MAXIMUM_STARS: 5, // (const) The maximum number of allowed stars
10	MINIMUM_STARS: 1, // (const) The minimum 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	11	+ DATA_RATE_ATTRIBUTE: "data-star-rate", // (const) The data attribute with the star rate
		12	+ NOT_SELECTED_VALUE: 0 // (const) The value when there is no selected rate
		13	+ }
		14	+
		15	+
		16	+ /*
		17	+ * Prepare the global data that are variable.
		18	+ * If the user already rated the community, set the selected_rate as the rated value
		19	+ */
		20	+ function set_global_data() {
		21	+ var selected_rate = parseInt($("#selected-star-rate").val());
		22	+ DATA.selected_rate = selected_rate;
12	}	23	}
13		24
14		25
	@@ -42,7 +53,7 @@		@@ -42,7 +53,7 @@
42	* Show or hide the stars depending on the mouse position and the limit rate.	53	* 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,	54	* Given the mouseover rate, the limit rate and the css classes to be swapped,
44	*	55	*
45	- * it verify if the user already selected a star rate:	56	+ * It verify if the user already selected a star rate:
46	* If true:	57	* If true:
47	* It swap the css classes from the selected star up to the given limit rate	58	* It swap the css classes from the selected star up to the given limit rate
48	* If false:	59	* If false:
	@@ -51,7 +62,8 @@		@@ -51,7 +62,8 @@
51	function change_stars_class(rate_mouseover, limit_rate, remove_class, add_class) {	62	function change_stars_class(rate_mouseover, limit_rate, remove_class, add_class) {
52	var previous_stars = undefined;	63	var previous_stars = undefined;
53		64
54	- if (DATA.selected_rate !== undefined) {	65	+ // The default not selected rate value is 0 and minimum is 1.
		66	+ if (DATA.selected_rate >= DATA.MINIMUM_STARS) {
55	previous_stars = star_filter(DATA.selected_rate+1, limit_rate, $("."+remove_class));	67	previous_stars = star_filter(DATA.selected_rate+1, limit_rate, $("."+remove_class));
56	} else {	68	} else {
57	previous_stars = star_filter(DATA.MINIMUM_STARS, rate_mouseover, $("."+remove_class));	69	previous_stars = star_filter(DATA.MINIMUM_STARS, rate_mouseover, $("."+remove_class));
	@@ -65,7 +77,7 @@		@@ -65,7 +77,7 @@
65	* Sets the stars mouse events.	77	* Sets the stars mouse events.
66	*/	78	*/
67	function set_star_hover_actions() {	79	function set_star_hover_actions() {
68	- $(".star-negative")	80	+ $(".star-negative, .star-positive")
69	.on("mouseover", function() { // On mouse over, show the current rate star	81	.on("mouseover", function() { // On mouse over, show the current rate star
70	var rate_mouseover = parseInt(this.getAttribute(DATA.DATA_RATE_ATTRIBUTE));	82	var rate_mouseover = parseInt(this.getAttribute(DATA.DATA_RATE_ATTRIBUTE));
71		83
	@@ -85,7 +97,62 @@		@@ -85,7 +97,62 @@
85	}	97	}
86		98
87		99
		100	+ /*
		101	+ * Display a message to the user if there is no star selected when he/she
		102	+ * clicks on the rate button
		103	+ */
		104	+ function not_selected_rate_action(notice_element) {
		105	+ var notice = $("#empty-star-notice").val();
		106	+ notice_element.html(notice);
		107	+ }
		108	+
		109	+
		110	+ /*
		111	+ * Send the user rate to the server when he/she clicks on the rate button
		112	+ */
		113	+ function selected_rate_action(notice_element) {
		114	+ var profile = $("#community-profile").val();
		115	+
		116	+ $.ajax({
		117	+ url: "/profile/"+profile+"/plugin/communities_ratings/rate",
		118	+ type: "POST",
		119	+ data: {
		120	+ value: DATA.selected_rate
		121	+ },
		122	+ success: function(response) {
		123	+ notice_element.html(response.message);
		124	+ }
		125	+ });
		126	+ }
		127	+
		128	+
		129	+ /*
		130	+ * Set the rate button actions. It verify if the user selected a rate.
		131	+ * If true:
		132	+ * Call selected_rate_action to send the rate data.
		133	+ * If false:
		134	+ * Call not_selected_rate_action to display a error message to the user
		135	+ */
		136	+ function set_rate_button_action() {
		137	+ $("#star-rate-action").on("click", function() {
		138	+ var star_notice = $(".star-notice");
		139	+ star_notice.removeClass("star-hide");
		140	+
		141	+ if (DATA.selected_rate !== DATA.NOT_SELECTED_VALUE) {
		142	+ selected_rate_action(star_notice);
		143	+ } else {
		144	+ not_selected_rate_action(star_notice);
		145	+ }
		146	+ });
		147	+ }
		148	+
		149	+
		150	+ /*
		151	+ * When the page DOM is ready, set all the stars events
		152	+ */
88	$(document).ready(function() {	153	$(document).ready(function() {
		154	+ set_global_data();
89	set_star_hover_actions();	155	set_star_hover_actions();
		156	+ set_rate_button_action();
90	});	157	});
91	}) (jQuery);	158	}) (jQuery);
	@@ -20,3 +20,6 @@		@@ -20,3 +20,6 @@
20	background-image: url('public/images/star-positive.png');	20	background-image: url('public/images/star-positive.png');
21	}	21	}
22		22
		23	+.star-hide {
		24	+ display: none;
		25	+}
23	\ No newline at end of file	26	\ No newline at end of file