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	28	end
29	29
30	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	38	end
32	39
33	40	private
...	...
...	...	@@ -5,10 +5,21 @@
5	5	* All global data that are used in the stars feature.
6	6	*/
7	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	9	MAXIMUM_STARS: 5, // (const) The maximum number of allowed stars
10	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	53	* Show or hide the stars depending on the mouse position and the limit rate.
43	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	57	* If true:
47	58	* It swap the css classes from the selected star up to the given limit rate
48	59	* If false:
...	...	@@ -51,7 +62,8 @@
51	62	function change_stars_class(rate_mouseover, limit_rate, remove_class, add_class) {
52	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	67	previous_stars = star_filter(DATA.selected_rate+1, limit_rate, $("."+remove_class));
56	68	} else {
57	69	previous_stars = star_filter(DATA.MINIMUM_STARS, rate_mouseover, $("."+remove_class));
...	...	@@ -65,7 +77,7 @@
65	77	* Sets the stars mouse events.
66	78	*/
67	79	function set_star_hover_actions() {
68		- $(".star-negative")
	80	+ $(".star-negative, .star-positive")
69	81	.on("mouseover", function() { // On mouse over, show the current rate star
70	82	var rate_mouseover = parseInt(this.getAttribute(DATA.DATA_RATE_ATTRIBUTE));
71	83
...	...	@@ -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	153	$(document).ready(function() {
	154	+ set_global_data();
89	155	set_star_hover_actions();
	156	+ set_rate_button_action();
90	157	});
91	158	}) (jQuery);
...	...
...	...	@@ -20,3 +20,6 @@
20	20	background-image: url('public/images/star-positive.png');
21	21	}
22	22
	23	+.star-hide {
	24	+ display: none;
	25	+}
23	26	\ No newline at end of file
...	...
	1	+<input type="hidden" id="community-profile" value="<%= @profile.identifier %>">
	2	+<input type="hidden" id="empty-star-notice" value="<%= _("At least one star must be selected") %>">
	3	+<input type="hidden" id="selected-star-rate" value="<%= @actual_rate_value %>">
	4	+
	5	+<div class="star-notice star-hide"></div>
	6	+
1	7	<div>
2	8	<div></div>
3	9
4	10	<div>
5	11	<div data-rate-url=<%= url_for controller: "communities_ratings_plugin_profile", :action => "rate" %>>
6	12	<div class="star-container">
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>
	13	+ <% (1..5).each do \|rate_number\| %>
	14	+ <% if rate_number <= @actual_rate_value %>
	15	+ <div class="star-positive" data-star-rate="<%= rate_number %>"></div>
	16	+ <% else %>
	17	+ <div class="star-negative" data-star-rate="<%= rate_number %>"></div>
	18	+ <% end %>
	19	+ <% end %>
12	20	</div>
13	21
14	22	<div class="star-action">
15		- <button><%= _("Rate") %></button>
	23	+ <button id="star-rate-action"><%= _("Rate") %></button>
16	24	</div>
17	25	</div>
18	26	<div>
...	...