rate.js
4.31 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
;(function($, undefined) {
"use strict";
/*
* All global data that are used in the stars feature.
*/
var DATA = {
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
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;
}
/*
* 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 rate = parseInt(element.getAttribute(DATA.DATA_RATE_ATTRIBUTE));
return test_regex.test(rate);
});
return result;
}
/*
* 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;
// 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));
}
previous_stars.switchClass(remove_class, add_class);
}
/*
* Sets the stars mouse events.
*/
function set_star_hover_actions() {
$(".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));
change_stars_class(rate_mouseover, rate_mouseover, "star-negative", "star-positive");
})
.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));
// If the new rate is different from actual, update it
if (rate_mouseover !== DATA.selected_rate) {
DATA.selected_rate = rate_mouseover;
} else { // or else, uncheck it
DATA.selected_rate = DATA.NOT_SELECTED_VALUE;
}
var star_notice = $(".star-notice");
star_notice.removeClass("star-hide");
// Call selected_rate_action to send the rate data.
selected_rate_action(star_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);
}
});
}
/*
* When the page DOM is ready, set all the stars events
*/
$(document).ready(function() {
set_global_data();
set_star_hover_actions();
});
}) (jQuery);