users_select.js.coffee
1.82 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
$ ->
userFormatResult = (user) ->
avatar = gon.gravatar_url
avatar = avatar.replace('%{hash}', md5(user.email))
avatar = avatar.replace('%{size}', '24')
markup = "<div class='user-result'>"
markup += "<div class='user-image'><img class='avatar s24' src='" + avatar + "'></div>"
markup += "<div class='user-name'>" + user.name + "</div>"
markup += "<div class='user-username'>" + user.username + "</div>"
markup += "</div>"
markup
userFormatSelection = (user) ->
user.name
$('.ajax-users-select').select2
placeholder: "Search for a user"
multiple: $('.ajax-users-select').hasClass('multiselect')
minimumInputLength: 0
ajax: # instead of writing the function to execute the request we use Select2's convenient helper
url: "/api/" + gon.api_version + "/users.json"
dataType: "json"
data: (term, page) ->
search: term # search term
per_page: 10
private_token: gon.api_token
results: (data, page) -> # parse the results into the format expected by Select2.
# since we are using custom formatting functions we do not need to alter remote JSON data
results: data
initSelection: (element, callback) ->
id = $(element).val()
if id isnt ""
$.ajax(
"/api/" + gon.api_version + "/users/" + id + ".json",
dataType: "json"
data:
private_token: gon.api_token
).done (data) ->
callback data
formatResult: userFormatResult # omitted for brevity, see the source of this page
formatSelection: userFormatSelection # omitted for brevity, see the source of this page
dropdownCssClass: "ajax-users-dropdown" # apply css that makes the dropdown taller
escapeMarkup: (m) -> # we do not want to escape markup since we are displaying html in results
m