Emoji encoding 3123 (#3161)

* initial setup commit

* [WIP] refactoring atwho code, moved primary code to assets/javascripts and added script to comments form and rich text editor, but not working yet in markdown editor

* removed script from rich text editor, removed emoji file from public folder

* reverting file config/database.yml.sqlite

* renamed emoji script to atwho_autocomplete, modified to read var emoji from /lib/emoji.js, modified comments form and assets to reflect these changes, removed reference to comment-autocomplete

* moved error code to script file

* moved error code out of script to form, wrapped it in a function

* amended git workflow regarding public/lib/emoji.js

app/assets/javascripts/atwho_autocomplete.js

@@ -0,0 +1,38 @@
+    (function() {
+
+      var at_config = {
+        at: "@",
+        callbacks: {
+          remoteFilter: function(query, callback) {
+            $.getJSON("/api/srch/profiles?srchString=" + query, {}, function(data) {
+              if (data.hasOwnProperty('items') && data.items.length > 0) {
+                callback(data.items.map(function(i) { return i.docTitle }));
+              }
+             });
+            }
+          },
+          limit: 20
+        },
+        hashtags_config = {
+          at: "#",
+          callbacks: {
+            remoteFilter: function(query, callback) {
+              if (query != ''){
+                $.post('/tag/suggested/' + query, {}, function(response) {
+                   callback(response.map(function(tagnames){ return tagnames }));
+                 });
+                }
+              }
+            },
+          limit: 20
+        },
+        emojis_config = {
+          at: ':',
+          data: Object.keys(emoji).map(function(name){ return {'name': name, 'value': emoji[name]}}),
+          displayTpl: "<li>${value} ${name}</li>",
+          insertTpl: ":${name}:",
+          limit: 100
+       }
+
+      $('textarea#text-input').atwho(at_config).atwho(hashtags_config).atwho(emojis_config);
+      })();

app/views/comments/_form.html.erb

@@ -65,50 +65,15 @@
 
   <%= javascript_include_tag "dragdrop" %>
   <script src="/lib/emoji.js" type="text/javascript"></script>
+  <script src="/assets/atwho_autocomplete.js" type="text/javascript"></script>
   <script>
+
+  (function() {
     $('#comment-form').bind('ajax:beforeSend', function(event){
       $("#text-input").prop('disabled',true)
       $("#comment-form .btn-primary").button('loading',true);
     });
 
-    (function() {
-
-    var at_config = {
-      at: "@",
-      callbacks: {
-        remoteFilter: function(query, callback) {
-          $.getJSON("/api/srch/profiles?srchString=" + query, {}, function(data) {
-            if (data.hasOwnProperty('items') && data.items.length > 0) {
-              callback(data.items.map(function(i) { return i.docTitle }));
-            }
-           });
-          }
-        },
-        limit: 20
-      },
-      hashtags_config = {
-        at: "#",
-        callbacks: {
-          remoteFilter: function(query, callback) {
-            if (query != ''){
-              $.post('/tag/suggested/' + query, {}, function(response) {
-                 callback(response.map(function(tagnames){ return tagnames }));
-               });
-              }
-            }
-          },
-        limit: 20
-      },
-      emojis_config = {
-        at: ':',
-        data: Object.keys(emoji).map(function(name){ return {'name': name, 'value': emoji[name]} }),
-        displayTpl: "<li>${value} ${name}</li>",
-        insertTpl: ":${name}:", 
-        limit: 100
-     }
-
-    $('textarea#text-input').atwho(at_config).atwho(hashtags_config).atwho(emojis_config);
-
     $('#comment-form').bind('ajax:success', function(e, data, status, xhr){
       $('#text-input').prop('disabled',false);
       $('#text-input').val('');
@@ -126,9 +91,8 @@
       $('#comment-form .control-group .help-block ').remove()
       $('#comment-form .control-group').append('<span class="help-block ">Error: there was a problem.</span>')
     });
-
-    })();
-
+  })();
+
     function insertTitleSuggestionTemplate() {
       var element = $('#text-input');
       var currentText = $('#text-input').val().trim();

app/views/editor/rich.html.erb

@@ -168,13 +168,13 @@
       <% if controller.action_name != "edit" && !current_user.first_time_poster %>
         <span id="newOpts" style="display: inline-block;">
         <span id="text" style="display: none; color:red;">
-          Others won't see your post yet 
+          Others won't see your post yet
           (<a href="https://publiclab.org/draft-feature" targrt="_blank">?</a>) &nbsp; &nbsp;</span>
           <span class="checkbox">
             <label>
               <input type="checkbox" id="myCheck" onclick="draftCheck()" />
               Save as draft
-            </label> | 
+            </label> |
           </span>
           <span class="ple-steps-left">2</span>
           <span class="hidden-xs"> steps left</span>
@@ -185,8 +185,6 @@
   </div>
 
 </div>
-
-
 <script>
 
   var editor;
@@ -294,7 +292,6 @@
         }
       }
     });
-
   })();
 
   $('.legacy-button').click(function onLegacyClick(event) {
@@ -317,5 +314,4 @@
       }
       console.log("Draft:", editor.data.draft);
   }
-
 </script>

config/initializers/assets.rb

@@ -1,6 +1,6 @@
-Rails.application.config.assets.precompile += [  
+Rails.application.config.assets.precompile += [
   'leaflet-blurred-location/dist/Leaflet.BlurredLocation.js',
-  
+
   'advanced_search.js',
   'application.js',
   'comment_expand.js',
@@ -30,7 +30,7 @@
   'textbox_expand.js',
   'users.js',
   'wikis.js',
-  
+
   'blog.css',
   'comments.css',
   'dashboard.css',
@@ -48,6 +48,5 @@
   'user_tags.css.scss',
   'wiki.css',
   'horsey.js',
-  'comment-autocomplete'
+  'atwho_autocomplete.js'
 ]
-