Preview emojis in chatbox.

Author: mjtko

Gemfile

@@ -33,6 +33,7 @@ group :assets do
   gem 'eco'
   gem 'uglifier'
   gem 'bootstrap-sass', '~> 2.3.0.1'
+  gem 'gemoji'
 end
 
 group :production do

Gemfile.lock

@@ -124,6 +124,7 @@ GEM
     faye-websocket (0.4.7)
       eventmachine (>= 0.12.0)
     ffi (1.4.0)
+    gemoji (1.4.0)
     guard (1.6.2)
       listen (>= 0.6.0)
       lumberjack (>= 1.0.2)
@@ -291,6 +292,7 @@ DEPENDENCIES
   factory_girl_rails
   faker
   faye
+  gemoji
   guard
   guard-rspec
   jasmine (~> 1.3.1)

app/assets/javascripts/backbone/kandan.js.coffee.erb

@@ -41,6 +41,7 @@ window.Kandan =
       ,"Attachments"
       ,"MeAnnounce"
       ,"Emoticons"
+      ,"Emojis"
       ,"RgbColorEmbed"
       ,"HexColorEmbed"
     ]
@@ -127,6 +128,7 @@ window.Kandan =
       Kandan.Widgets.initAll()
       Kandan.Helpers.Channels.scrollToLatestMessage()
       Kandan.Plugins.Mentions.initUsersMentions(Kandan.Helpers.ActiveUsers.all())
+      Kandan.Plugins.Emojis.attachToChatbox()
       return
 
   registerUtilityEvents: ()->

app/assets/javascripts/backbone/plugins/emojis.js.coffee.erb

@@ -0,0 +1,19 @@
+class Kandan.Plugins.Emojis
+  @options:
+    atWhoTemplate: '''<li data-value="${insert}"><img class="emoticon-embed small" height="20" width="20" src="${src}" alt="${name}" title="${name}" /> ${name}</li>'''
+
+  @emojis: <%= Emoji.names.to_s %>
+
+  @init: ->
+    @emojis = $.map @emojis, (v) ->
+      {
+        name: v,
+        insert: "#{v}:"
+        src: "<%= image_path('emoticons/emojis') %>/#{v}.png"
+      }
+
+  @attachToChatbox: ->
+    $(".chat-input").atwho ':([a-zA-Z0-9_+-]+)',
+      data: @emojis
+      tpl: @options.atWhoTemplate
+      limit: 10