Commit 8bf6f20a21cc3ed71b0d3e81783d7a987f74abc2
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>
Showing
4 changed files
with
96 additions
and
11 deletions
Show diff stats
plugins/communities_ratings/controllers/communities_ratings_plugin_profile_controller.rb
@@ -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 |
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
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> |