Commit e4aa5a5c authored by Riyad Preukschas's avatar Riyad Preukschas

Extract and split GFM auto-completion setup JS

* static initialization and setup moved to assets
* per request initialization moved to layout partial
parent eb928137
###
Creates the variables for setting up GFM auto-completion
###
# Emoji
window.autocompleteEmojiData = [];
window.autocompleteEmojiTemplate = "<li data-value='${insert}'>${name} <img alt='${name}' height='20' src='${image}' width='20' /></li>";
# Team Members
window.autocompleteMembersUrl = "";
window.autocompleteMembersParams =
private_token: ""
page: 1
window.autocompleteMembersData = [];
###
Add GFM auto-completion to all input fields, that accept GFM input.
###
window.setupGfmAutoComplete = ->
###
Emoji
###
$('.gfm-input').atWho ':',
data: autocompleteEmojiData,
tpl: autocompleteEmojiTemplate
###
Team Members
###
$('.gfm-input').atWho '@', (query, callback) ->
(getMoreMembers = ->
$.getJSON(autocompleteMembersUrl, autocompleteMembersParams)
.success (members) ->
# pick the data we need
newMembersData = $.map members, (m) -> m.name
# add the new page of data to the rest
$.merge autocompleteMembersData, newMembersData
# show the pop-up with a copy of the current data
callback autocompleteMembersData[..]
# are we past the last page?
if newMembersData.length == 0
# set static data and stop callbacks
$('.gfm-input').atWho '@',
data: autocompleteMembersData
callback: null
else
# get next page
getMoreMembers()
# so the next request gets the next page
autocompleteMembersParams.page += 1;
).call();
\ No newline at end of file
......@@ -28,6 +28,8 @@
My profile
= link_to 'Logout', destroy_user_session_path, class: "logout", method: :delete
= render "layouts/init_auto_complete"
:javascript
$(function(){
$("#search").autocomplete({
......
:javascript
$(function() {
autocompleteMembersUrl = "#{ "/api/v2/projects/#{@project.code}/members" if @project }";
autocompleteMembersParams.private_token = "#{current_user.authentication_token}";
autocompleteEmojiData = #{raw emoji_autocomplete_source};
// convert the list so that the items have the right format for completion
autocompleteEmojiData = $.map(autocompleteEmojiData, function(value) {
return {
name: value,
insert: value+':',
image: '#{image_path("emoji")}/'+value+'.png'
}
});
setupGfmAutoComplete();
});
......@@ -36,49 +36,3 @@
%a.file_upload.btn.small Upload File
= f.file_field :attachment, class: "input-file"
%span.hint Any file less than 10 MB
:javascript
$(function(){
// init auto-completion of team members
var membersUrl = "#{root_url}/api/v2/projects/#{@project.code}/members";
var membersParams = {
private_token: "#{current_user.authentication_token}",
page: 1,
};
var membersData = [];
$('.gfm-input').atWho('@', function(query, callback) {
(function getMoreMembers() {
$.getJSON(membersUrl, membersParams).
success(function(members) {
// pick the data we need
var newMembersData = $.map(members, function(member) { return member.name });
// add the new page of data to the rest
$.merge(membersData, newMembersData);
// show the pop-up with a copy of the current data
callback(membersData.slice(0));
// are we past the last page?
if (newMembersData.length == 0) {
// set static data and stop callbacks
$('.gfm-input').atWho('@', { data: membersData, callback: null });
} else {
// get next page
getMoreMembers();
}
});
// next request will get the next page
membersParams.page += 1;
})();
});
// init auto-completion of emoji
var emoji = #{emoji_for_completion};
// convert the list so that the items have the right format for completion
emoji = $.map(emoji, function(value) {return { key: value+':', name: value }});
$('.gfm-input').atWho(':', {
data: emoji,
tpl: "<li data-value='${key}'>${name} #{escape_javascript image_tag('emoji/${name}.png', :size => '20x20')}</li>"
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment