Download as
Browse Code »

Commit e4aa5a5c8f9d8a4b556aeba003160017821ed9a3

Authored by Riyad Preukschas
1 parent eb928137
Exists in master and in 4 other branches 6-8-stable, 7-0-stable, 7-0-stable-spb, spb-stable

Extract and split GFM auto-completion setup JS 

* static initialization and setup moved to assets
* per request initialization moved to layout partial
Showing 4 changed files with 76 additions and 46 deletions   Show diff stats
app/assets/javascripts/gfm_auto_complete.js.coffee 0 → 100644
  Diff comments   View file @e4aa5a5
@@ -0,0 +1,57 @@ @@ -0,0 +1,57 @@
  1 +
  2 +###
  3 + Creates the variables for setting up GFM auto-completion
  4 +###
  5 +# Emoji
  6 +window.autocompleteEmojiData = [];
  7 +window.autocompleteEmojiTemplate = "<li data-value='${insert}'>${name} <img alt='${name}' height='20' src='${image}' width='20' /></li>";
  8 +
  9 +# Team Members
  10 +window.autocompleteMembersUrl = "";
  11 +window.autocompleteMembersParams =
  12 + private_token: ""
  13 + page: 1
  14 +window.autocompleteMembersData = [];
  15 +
  16 +
  17 +
  18 +###
  19 + Add GFM auto-completion to all input fields, that accept GFM input.
  20 +###
  21 +window.setupGfmAutoComplete = ->
  22 + ###
  23 + Emoji
  24 + ###
  25 + $('.gfm-input').atWho ':',
  26 + data: autocompleteEmojiData,
  27 + tpl: autocompleteEmojiTemplate
  28 +
  29 + ###
  30 + Team Members
  31 + ###
  32 + $('.gfm-input').atWho '@', (query, callback) ->
  33 + (getMoreMembers = ->
  34 + $.getJSON(autocompleteMembersUrl, autocompleteMembersParams)
  35 + .success (members) ->
  36 + # pick the data we need
  37 + newMembersData = $.map members, (m) -> m.name
  38 +
  39 + # add the new page of data to the rest
  40 + $.merge autocompleteMembersData, newMembersData
  41 +
  42 + # show the pop-up with a copy of the current data
  43 + callback autocompleteMembersData[..]
  44 +
  45 + # are we past the last page?
  46 + if newMembersData.length == 0
  47 + # set static data and stop callbacks
  48 + $('.gfm-input').atWho '@',
  49 + data: autocompleteMembersData
  50 + callback: null
  51 + else
  52 + # get next page
  53 + getMoreMembers()
  54 +
  55 + # so the next request gets the next page
  56 + autocompleteMembersParams.page += 1;
  57 + ).call();
0 \ No newline at end of file 58 \ No newline at end of file
app/views/layouts/_head_panel.html.haml
  Diff comments   View file @e4aa5a5
@@ -28,6 +28,8 @@ @@ -28,6 +28,8 @@
28 My profile 28 My profile
29 = link_to 'Logout', destroy_user_session_path, class: "logout", method: :delete 29 = link_to 'Logout', destroy_user_session_path, class: "logout", method: :delete
30 30
  31 += render "layouts/init_auto_complete"
  32 +
31 :javascript 33 :javascript
32 $(function(){ 34 $(function(){
33 $("#search").autocomplete({ 35 $("#search").autocomplete({
app/views/layouts/_init_auto_complete.html.haml 0 → 100644
  Diff comments   View file @e4aa5a5
@@ -0,0 +1,17 @@ @@ -0,0 +1,17 @@
  1 +:javascript
  2 + $(function() {
  3 + autocompleteMembersUrl = "#{ "/api/v2/projects/#{@project.code}/members" if @project }";
  4 + autocompleteMembersParams.private_token = "#{current_user.authentication_token}";
  5 +
  6 + autocompleteEmojiData = #{raw emoji_autocomplete_source};
  7 + // convert the list so that the items have the right format for completion
  8 + autocompleteEmojiData = $.map(autocompleteEmojiData, function(value) {
  9 + return {
  10 + name: value,
  11 + insert: value+':',
  12 + image: '#{image_path("emoji")}/'+value+'.png'
  13 + }
  14 + });
  15 +
  16 + setupGfmAutoComplete();
  17 + });
app/views/notes/_common_form.html.haml
  Diff comments   View file @e4aa5a5
@@ -36,49 +36,3 @@ @@ -36,49 +36,3 @@
36 %a.file_upload.btn.small Upload File 36 %a.file_upload.btn.small Upload File
37 = f.file_field :attachment, class: "input-file" 37 = f.file_field :attachment, class: "input-file"
38 %span.hint Any file less than 10 MB 38 %span.hint Any file less than 10 MB
39 -  
40 -:javascript  
41 - $(function(){  
42 - // init auto-completion of team members  
43 - var membersUrl = "#{root_url}/api/v2/projects/#{@project.code}/members";  
44 - var membersParams = {  
45 - private_token: "#{current_user.authentication_token}",  
46 - page: 1,  
47 - };  
48 - var membersData = [];  
49 - $('.gfm-input').atWho('@', function(query, callback) {  
50 - (function getMoreMembers() {  
51 - $.getJSON(membersUrl, membersParams).  
52 - success(function(members) {  
53 - // pick the data we need  
54 - var newMembersData = $.map(members, function(member) { return member.name });  
55 -  
56 - // add the new page of data to the rest  
57 - $.merge(membersData, newMembersData);  
58 -  
59 - // show the pop-up with a copy of the current data  
60 - callback(membersData.slice(0));  
61 -  
62 - // are we past the last page?  
63 - if (newMembersData.length == 0) {  
64 - // set static data and stop callbacks  
65 - $('.gfm-input').atWho('@', { data: membersData, callback: null });  
66 - } else {  
67 - // get next page  
68 - getMoreMembers();  
69 - }  
70 - });  
71 - // next request will get the next page  
72 - membersParams.page += 1;  
73 - })();  
74 - });  
75 -  
76 - // init auto-completion of emoji  
77 - var emoji = #{emoji_for_completion};  
78 - // convert the list so that the items have the right format for completion  
79 - emoji = $.map(emoji, function(value) {return { key: value+':', name: value }});  
80 - $('.gfm-input').atWho(':', {  
81 - data: emoji,  
82 - tpl: "<li data-value='${key}'>${name} #{escape_javascript image_tag('emoji/${name}.png', :size => '20x20')}</li>"  
83 - });  
84 - });