Commit 8bf6f20a21cc3ed71b0d3e81783d7a987f74abc2

Authored by Fabio Teixeira
1 parent c30779af
Exists in temp_ratings

Adjust javascript to rated communities

Signed-off-by: Fabio Teixeira <fabio1079@gmail.com>
Signed-off-by: Tallys Martins <tallysmartins@gmail.com>
plugins/communities_ratings/controllers/communities_ratings_plugin_profile_controller.rb
@@ -28,6 +28,13 @@ class CommunitiesRatingsPluginProfileController &lt; ProfileController @@ -28,6 +28,13 @@ class CommunitiesRatingsPluginProfileController &lt; 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
plugins/communities_ratings/public/rate.js
@@ -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);
plugins/communities_ratings/style.css
@@ -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
plugins/communities_ratings/views/communities_ratings_plugin_profile/new_rating.html.erb
  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 <div> 7 <div>
2 <div></div> 8 <div></div>
3 9
4 <div> 10 <div>
5 <div data-rate-url=<%= url_for controller: "communities_ratings_plugin_profile", :action => "rate" %>> 11 <div data-rate-url=<%= url_for controller: "communities_ratings_plugin_profile", :action => "rate" %>>
6 <div class="star-container"> 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 </div> 20 </div>
13 21
14 <div class="star-action"> 22 <div class="star-action">
15 - <button><%= _("Rate") %></button> 23 + <button id="star-rate-action"><%= _("Rate") %></button>
16 </div> 24 </div>
17 </div> 25 </div>
18 <div> 26 <div>