Emoji autocomplete

app/assets/javascripts/application.js

@@ -51,6 +51,7 @@
 //= require short-code-forms/dist/short-code-prompts.js
 //= require wikis.js
 //= require chart.js/dist/Chart.js
+//= require horsey.js
 //= require header_footer.js
 //  require turbolinks // Temporarily removed while fixing
 

app/assets/stylesheets/comments.css

@@ -12,4 +12,14 @@
 
 #question-comment-form {
     width: 90%;
-}
+}
+
+.sey-item b {
+  font-weight: 300;
+  font-size: 20px;
+}
+
+.sey-item span {
+  margin-bottom: 0;
+  margin-left: 4px;
+}

app/helpers/application_helper.rb

@@ -27,6 +27,18 @@ def emojify(content)
     end if content.present?
   end
 
+  def emoji_names_list
+    emojis = []
+    image_map = {}
+    Emoji.all.each do |e|
+      next unless e.raw
+      val = ":#{e.name}:"
+      emojis<<{ value: val, text: e.name }
+      image_map[e.name] = e.raw
+    end
+    { emojis: emojis, image_map: image_map }
+  end
+
   def feature(title)
     features = Node.where(type: 'feature', title: title)
     if !features.empty?

app/views/comments/_edit.html.erb

@@ -42,7 +42,6 @@
 
     </div>
   </div>
-
   <script type="application/javascript">
     jQuery(document).ready(function() {
       $E.initialize();
@@ -148,5 +147,3 @@
     <%= t('comments._edit.email_notifications') %>
   </p>
 </form>
-
-

app/views/comments/_form.html.erb

@@ -48,6 +48,7 @@
 
   <div class="well col-md-11" id="preview" style="background:white;display: none">
   </div>
+  <link href="/lib/horsey/dist/horsey.min.css" rel="stylesheet">
 
   <script>
     jQuery(document).ready(function() {
@@ -64,11 +65,24 @@
   </script>
 
   <%= javascript_include_tag "dragdrop" %>
-  <script>    
+  <script>
     $('#comment-form').bind('ajax:beforeSend', function(event){      
       $("#text-input").prop('disabled',true)
       $("#comment-form .btn-primary").button('loading',true);      
     });
+    <% emoji_names = emoji_names_list %>
+    <% emojis = emoji_names[:emojis] %>
+    <% image_map = emoji_names[:image_map] %>
+    var image_map = <%= raw image_map.to_json %>
+    horsey(document.querySelector('textarea#text-input'), {
+        suggestions: (<%= raw emojis.to_json %>),
+        anchor: ':',
+        render: function (li, suggestion) {
+            var image = image_map[suggestion.text];
+            li.innerHTML = "<b>"+image+"</b><span>"+suggestion.text+"</span>";
+        },
+        limit: 6
+    });
 
     $('#comment-form').bind('ajax:success', function(e, data, status, xhr){      
       $('#text-input').prop('disabled',false);      

config/initializers/assets.rb

@@ -46,6 +46,8 @@
   'style.css',
   'tags.css',
   'user_tags.css.scss',
-  'wiki.css'
+  'wiki.css',
+  'horsey.js',
+  'comment-autocomplete'
 ]