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 @@
  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 58 \ No newline at end of file
... ...
app/views/layouts/_head_panel.html.haml
  Diff comments   View file @e4aa5a5
... ... @@ -28,6 +28,8 @@
28 28 My profile
29 29 = link_to 'Logout', destroy_user_session_path, class: "logout", method: :delete
30 30  
  31 += render "layouts/init_auto_complete"
  32 +
31 33 :javascript
32 34 $(function(){
33 35 $("#search").autocomplete({
... ...
app/views/layouts/_init_auto_complete.html.haml 0 → 100644
  Diff comments   View file @e4aa5a5
... ... @@ -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 36 %a.file_upload.btn.small Upload File
37 37 = f.file_field :attachment, class: "input-file"
38 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   - });
... ...