Refactored JS slightly to make things easier

# Conflicts:
#	app/assets/javascripts/awards_handler.coffee
#	app/views/emoji_awards/_awards_block.html.haml

app/assets/javascripts/awards_handler.coffee

 class @AwardsHandler
-  constructor: (@getEmojisUrl, @postEmojiUrl, @noteableType, @noteableId, @unicodes) ->
-    $('.js-add-award').on 'click', (event) =>
+  constructor: (@aliases) ->
+    $(".js-add-award").on "click", (event) =>
       event.stopPropagation()
       event.preventDefault()
 
       @showEmojiMenu()
 
-    $('html').on 'click', (event) ->
-      if !$(event.target).closest('.emoji-menu').length
-        if $('.emoji-menu').is(':visible')
-          $('.emoji-menu').removeClass 'is-visible'
+    $("html").on 'click', (event) ->
+      if !$(event.target).closest(".emoji-menu").length
+        if $(".emoji-menu").is(":visible")
+          $(".emoji-menu").removeClass "is-visible"
 
-    $('.awards')
-      .off 'click'
-      .on 'click', '.js-emoji-btn', @handleClick
+    $(".awards")
+      .off "click"
+      .on "click", ".js-emoji-btn", @handleClick
 
     @renderFrequentlyUsedBlock()
 
   handleClick: (e) ->
     e.preventDefault()
-    emoji = $(this)
-      .find('.icon')
-      .data 'emoji'
-
-    if emoji is 'thumbsup' and awardsHandler.didUserClickEmoji $(this), 'thumbsdown'
-      awardsHandler.addAward 'thumbsdown'
-
-    else if emoji is 'thumbsdown' and awardsHandler.didUserClickEmoji $(this), 'thumbsup'
-      awardsHandler.addAward 'thumbsup'
-
-    awardsHandler.addAward emoji
-
-    $(this).trigger 'blur'
-
-  didUserClickEmoji: (that, emoji) ->
-    if $(that).siblings("button:has([data-emoji=#{emoji}])").attr('data-original-title')
-      $(that).siblings("button:has([data-emoji=#{emoji}])").attr('data-original-title').indexOf('me') > -1
+    $emojiBtn = $(e.currentTarget)
+    awardUrl = $emojiBtn.closest('.js-votes-block').data 'award-url'
+    emoji = $emojiBtn
+      .find(".icon")
+      .data "emoji"
+    @addAward awardUrl, emoji
 
   showEmojiMenu: ->
-    if $('.emoji-menu').length
-      if $('.emoji-menu').is '.is-visible'
-        $('.emoji-menu').removeClass 'is-visible'
-        $('#emoji_search').blur()
+    if $(".emoji-menu").length
+      if $(".emoji-menu").is ".is-visible"
+        $(".emoji-menu").removeClass "is-visible"
+        $("#emoji_search").blur()
       else
-        $('.emoji-menu').addClass 'is-visible'
-        $('#emoji_search').focus()
+        $(".emoji-menu").addClass "is-visible"
+        $("#emoji_search").focus()
     else
-      $('.js-add-award').addClass 'is-loading'
-      $.get @getEmojisUrl, (response) =>
-        $('.js-add-award').removeClass 'is-loading'
-        $('.js-award-holder').append response
+      $('.js-add-award').addClass "is-loading"
+      $.get "/emojis", (response) =>
+        $('.js-add-award').removeClass "is-loading"
+        $(".js-award-holder").append response
         setTimeout =>
-          $('.emoji-menu').addClass 'is-visible'
-          $('#emoji_search').focus()
+          $(".emoji-menu").addClass "is-visible"
+          $("#emoji_search").focus()
           @setupSearch()
         , 200
 
-  addAward: (emoji) ->
-    @postEmoji emoji, =>
+  addAward: (awardUrl, emoji) ->
+    emoji = @normilizeEmojiName(emoji)
+    @postEmoji awardUrl, emoji, =>
       @addAwardToEmojiBar(emoji)
 
-    $('.emoji-menu').removeClass 'is-visible'
+    $(".emoji-menu").removeClass "is-visible"
 
   addAwardToEmojiBar: (emoji) ->
     @addEmojiToFrequentlyUsedList(emoji)
 
+    emoji = @normilizeEmojiName(emoji)
     if @exist(emoji)
       if @isActive(emoji)
         @decrementCounter(emoji)
       else
-        counter = @findEmojiIcon(emoji).siblings('.js-counter')
+        counter = @findEmojiIcon(emoji).siblings(".js-counter")
         counter.text(parseInt(counter.text()) + 1)
-        counter.parent().addClass('active')
-        @addMeToAuthorList(emoji)
+        counter.parent().addClass("active")
+        @addMeToUserList(emoji)
     else
       @createEmoji(emoji)
 
@@ -80,47 +71,47 @@ class @AwardsHandler
     @findEmojiIcon(emoji).length > 0
 
   isActive: (emoji) ->
-    @findEmojiIcon(emoji).parent().hasClass('active')
+    @findEmojiIcon(emoji).parent().hasClass("active")
 
   decrementCounter: (emoji) ->
-    counter = @findEmojiIcon(emoji).siblings('.js-counter')
+    counter = @findEmojiIcon(emoji).siblings(".js-counter")
     emojiIcon = counter.parent()
     if parseInt(counter.text()) > 1
       counter.text(parseInt(counter.text()) - 1)
-      emojiIcon.removeClass('active')
-      @removeMeFromAuthorList(emoji)
-    else if emoji == 'thumbsup' || emoji == 'thumbsdown'
-      emojiIcon.tooltip('destroy')
+      emojiIcon.removeClass("active")
+      @removeMeFromUserList(emoji)
+    else if emoji == "thumbsup" || emoji == "thumbsdown"
+      emojiIcon.tooltip("destroy")
       counter.text(0)
-      emojiIcon.removeClass('active')
-      @removeMeFromAuthorList(emoji)
+      emojiIcon.removeClass("active")
+      @removeMeFromUserList(emoji)
     else
-      emojiIcon.tooltip('destroy')
+      emojiIcon.tooltip("destroy")
       emojiIcon.remove()
 
-  removeMeFromAuthorList: (emoji) ->
-    awardBlock = @findEmojiIcon(emoji).parent()
-    authors = awardBlock
-      .attr('data-original-title')
-      .split(', ')
-    authors.splice(authors.indexOf('me'),1)
-    awardBlock
-      .closest('.js-emoji-btn')
-      .attr('data-original-title', authors.join(', '))
-    @resetTooltip(awardBlock)
-
-  addMeToAuthorList: (emoji) ->
-    awardBlock = @findEmojiIcon(emoji).parent()
-    origTitle = awardBlock.attr('data-original-title').trim()
-    authors = []
+  removeMeFromUserList: (emoji) ->
+    award_block = @findEmojiIcon(emoji).parent()
+    authors = award_block
+      .attr("data-original-title")
+      .split(", ")
+    authors.splice(authors.indexOf("me"),1)
+    award_block
+      .closest(".js-emoji-btn")
+      .attr("data-original-title", authors.join(", "))
+    @resetTooltip(award_block)
+
+  addMeToUserList: (emoji) ->
+    award_block = @findEmojiIcon(emoji).parent()
+    origTitle = award_block.attr("data-original-title").trim()
+    users = []
     if origTitle
-      authors = origTitle.split(', ')
-    authors.push('me')
-    awardBlock.attr('data-original-title', authors.join(', '))
-    @resetTooltip(awardBlock)
+      users = origTitle.split(', ')
+    users.push("me")
+    award_block.attr("title", users.join(", "))
+    @resetTooltip(award_block)
 
   resetTooltip: (award) ->
-    award.tooltip('destroy')
+    award.tooltip("destroy")
 
     # "destroy" call is asynchronous and there is no appropriate callback on it, this is why we need to set timeout.
     setTimeout (->
@@ -131,37 +122,30 @@ class @AwardsHandler
   createEmoji: (emoji) ->
     emojiCssClass = @resolveNameToCssClass(emoji)
 
-    nodes = []
-    nodes.push(
-      "<button class='btn award-control js-emoji-btn has-tooltip active' data-original-title='me'>",
-      "<div class='icon emoji-icon #{emojiCssClass}' data-emoji='#{emoji}'></div>",
-      "<span class='award-control-text js-counter'>1</span>",
-      "</button>"
-    )
-
-    $(nodes.join("\n"))
-      .insertBefore('.js-award-holder')
-      .find('.emoji-icon')
-      .data('emoji', emoji)
+    buttonHtml = "<button class='btn award-control js-emoji-btn has-tooltip active' title='me'>
+      <div class='icon emoji-icon #{emojiCssClass}' data-emoji='#{emoji}'></div>
+      <span class='award-control-text js-counter'>1</span>
+    </button>"
+
+    emoji_node = $(buttonHtml)
+      .insertBefore(".js-award-holder")
+      .find(".emoji-icon")
+      .data("emoji", emoji)
     $('.award-control').tooltip()
 
   resolveNameToCssClass: (emoji) ->
-    emojiIcon = $(".emoji-menu-content [data-emoji='#{emoji}']")
+    emoji_icon = $(".emoji-menu-content [data-emoji='#{emoji}']")
 
-    if emojiIcon.length > 0
-      unicodeName = emojiIcon.data('unicode-name')
+    if emoji_icon.length > 0
+      unicodeName = emoji_icon.data("unicode-name")
     else
       # Find by alias
-      unicodeName = $(".emoji-menu-content [data-aliases*=':#{emoji}:']").data('unicode-name')
+      unicodeName = $(".emoji-menu-content [data-aliases*=':#{emoji}:']").data("unicode-name")
 
     "emoji-#{unicodeName}"
 
-  postEmoji: (emoji, callback) ->
-    $.post @postEmojiUrl, { note: {
-      note: ":#{emoji}:"
-      noteable_type: @noteableType
-      noteable_id: @noteableId
-    }},(data) ->
+  postEmoji: (awardUrl, emoji, callback) ->
+    $.post awardUrl, { name: emoji }, (data) ->
       if data.ok
         callback.call()
 
@@ -173,43 +157,46 @@ class @AwardsHandler
       scrollTop: $('.awards').offset().top - 80
     }, 200)
 
+  normilizeEmojiName: (emoji) ->
+    @aliases[emoji] || emoji
+
   addEmojiToFrequentlyUsedList: (emoji) ->
-    frequentlyUsedEmojis = @getFrequentlyUsedEmojis()
-    frequentlyUsedEmojis.push(emoji)
-    $.cookie('frequently_used_emojis', frequentlyUsedEmojis.join(','), { expires: 365 })
+    frequently_used_emojis = @getFrequentlyUsedEmojis()
+    frequently_used_emojis.push(emoji)
+    $.cookie('frequently_used_emojis', frequently_used_emojis.join(","), { expires: 365 })
 
   getFrequentlyUsedEmojis: ->
-    frequentlyUsedEmojis = ($.cookie('frequently_used_emojis') || '').split(',')
-    _.compact(_.uniq(frequentlyUsedEmojis))
+    frequently_used_emojis = ($.cookie('frequently_used_emojis') || "").split(",")
+    _.compact(_.uniq(frequently_used_emojis))
 
   renderFrequentlyUsedBlock: ->
     if $.cookie('frequently_used_emojis')
-      frequentlyUsedEmojis = @getFrequentlyUsedEmojis()
+      frequently_used_emojis = @getFrequentlyUsedEmojis()
 
-      ul = $('<ul>')
+      ul = $("<ul>")
 
-      for emoji in frequentlyUsedEmojis
+      for emoji in frequently_used_emojis
         do (emoji) ->
-          $(".emoji-menu-content [data-emoji='#{emoji}']").closest('li').clone().appendTo(ul)
+          $(".emoji-menu-content [data-emoji='#{emoji}']").closest("li").clone().appendTo(ul)
 
-      $('input.emoji-search').after(ul).after($('<h5>').text('Frequently used'))
+      $("input.emoji-search").after(ul).after($("<h5>").text("Frequently used"))
 
   setupSearch: ->
-    $('input.emoji-search').keyup (ev) =>
+    $("input.emoji-search").keyup (ev) =>
       term = $(ev.target).val()
 
       # Clean previous search results
-      $('ul.emoji-menu-search, h5.emoji-search').remove()
+      $("ul.emoji-menu-search, h5.emoji-search").remove()
 
       if term
         # Generate a search result block
-        h5 = $('<h5>').text('Search results').addClass('emoji-search')
-        foundEmojis = @searchEmojis(term).show()
-        ul = $('<ul>').addClass('emoji-menu-list emoji-menu-search').append(foundEmojis)
-        $('.emoji-menu-content ul, .emoji-menu-content h5').hide()
-        $('.emoji-menu-content').append(h5).append(ul)
+        h5 = $("<h5>").text("Search results").addClass("emoji-search")
+        found_emojis = @searchEmojis(term).show()
+        ul = $("<ul>").addClass("emoji-menu-list emoji-menu-search").append(found_emojis)
+        $(".emoji-menu-content ul, .emoji-menu-content h5").hide()
+        $(".emoji-menu-content").append(h5).append(ul)
       else
-        $('.emoji-menu-content').children().show()
+        $(".emoji-menu-content").children().show()
 
   searchEmojis: (term)->
     $(".emoji-menu-content [data-emoji*='#{term}']").closest("li").clone()

app/views/emoji_awards/_awards_block.html.haml

+.awards.votes-block.js-votes-block{ data: { award_url: url_for([:toggle_emoji_award, @project.namespace.becomes(Namespace), @project, awardable]) } }
+  - awards_sort(awardable.grouped_awards).each do |emoji, awards|
+    %button.btn.award-control.js-emoji-btn.has-tooltip{ type: "button", class: (award_active_class(awards, current_user)), title: award_user_list(awards, current_user) }
+      = emoji_icon(emoji)
+      %span.award-control-text.js-counter
+        = awards.count
+
+  - if current_user
+    %div.award-menu-holder.js-award-holder
+      %button.btn.award-control.js-add-award{ type: "button" }
+        = icon('smile-o', {class: "award-control-icon"})
+        = icon('spinner spin', {class: "award-control-icon award-control-icon-loading"})
+        %span.award-control-text
+          Add
+
+- if current_user
+  :javascript
+    var aliases = #{AwardEmoji.aliases.to_json};
+
+    window.awards_handler = new AwardsHandler(
+      aliases
+    );