Award emoji implementation for notes.

app/assets/javascripts/awards_handler.coffee

@@ -6,35 +6,43 @@ class @AwardsHandler
 
     $(document)
       .off 'click', '.js-add-award'
-      .on  'click', '.js-add-award', (event) =>
-        event.stopPropagation()
-        event.preventDefault()
+      .on  'click', '.js-add-award', (e) =>
+        e.stopPropagation()
+        e.preventDefault()
+
+        @showEmojiMenu $(e.currentTarget)
+
+    $('html').on 'click', (e) ->
+      $target = $ e.target
 
-        @showEmojiMenu $(event.currentTarget)
+      unless $target.closest('.emoji-menu-content').length
+        $('.js-awards-block.current').removeClass 'current'
 
-    $('html').on 'click', (event) ->
-      unless $(event.target).closest('.emoji-menu').length
+      unless $target.closest('.emoji-menu').length
         if $('.emoji-menu').is(':visible')
           $('.js-add-award.is-active').removeClass 'is-active'
           $('.emoji-menu').removeClass 'is-visible'
 
     $(document)
       .off 'click', '.js-emoji-btn'
-      .on  'click', '.js-emoji-btn', @handleClick
-
-
-  handleClick: (e) =>
-
+      .on  'click', '.js-emoji-btn', (e) =>
         e.preventDefault()
 
-    emoji = $(e.currentTarget).find('.icon').data 'emoji'
-    @getVotesBlock().addClass 'js-awards-block'
+        $target = $ e.currentTarget
+        emoji   = $target.find('.icon').data 'emoji'
+
+        $target.closest('.js-awards-block').addClass 'current'
         @addAward @getAwardUrl(), emoji
 
 
   showEmojiMenu: ($addBtn) ->
 
-    $menu = $('.emoji-menu')
+    $menu = $ '.emoji-menu'
+
+    if $addBtn.hasClass 'note-emoji-button'
+      $addBtn.parents('.note').find('.js-awards-block').addClass 'current'
+    else
+      $addBtn.closest('.js-awards-block').addClass 'current'
 
     if $menu.length
       $holder = $addBtn.closest('.js-award-holder')
@@ -68,7 +76,7 @@ class @AwardsHandler
 
   createEmojiMenu: (awardMenuUrl, callback) ->
 
-    $.get awardMenuUrl, (response) =>
+    $.get awardMenuUrl, (response) ->
       $('body').append response
       callback()
 
@@ -94,11 +102,10 @@ class @AwardsHandler
 
   addAward: (awardUrl, emoji, checkMutuality = yes) ->
 
-    emoji = @normilizeEmojiName(emoji)
-    @postEmoji awardUrl, emoji, =>
-      @addAwardToEmojiBar(emoji, checkMutuality)
+    emoji = @normilizeEmojiName emoji
 
-      $('.js-awards-block-current').removeClass 'js-awards-block-current'
+    @postEmoji awardUrl, emoji, =>
+      @addAwardToEmojiBar emoji, checkMutuality
 
     $('.emoji-menu').removeClass 'is-visible'
 
@@ -112,21 +119,22 @@ class @AwardsHandler
     $emojiBtn = @findEmojiIcon(emoji).parent()
 
     if $emojiBtn.length > 0
-      if @isActive($emojiBtn)
-        @decrementCounter($emojiBtn, emoji)
+      if @isActive $emojiBtn
+        @decrementCounter $emojiBtn, emoji
       else
-        counter = $emojiBtn.find('.js-counter')
-        counter.text(parseInt(counter.text()) + 1)
-        $emojiBtn.addClass('active')
-        @addMeToUserList(emoji)
+        counter = $emojiBtn.find '.js-counter'
+        counter.text parseInt(counter.text()) + 1
+        $emojiBtn.addClass 'active'
+        @addMeToUserList emoji
     else
-      @createEmoji(emoji)
+      @getVotesBlock().removeClass 'hidden'
+      @createEmoji emoji
 
 
-  getVotesBlock: -> return $ '.awards.js-awards-block'
+  getVotesBlock: -> return $ '.js-awards-block.current'
 
 
-  getAwardUrl: -> @getVotesBlock().data 'award-url'
+  getAwardUrl: -> return @getVotesBlock().data 'award-url'
 
 
   checkMutuality: (emoji) ->
@@ -135,8 +143,9 @@ class @AwardsHandler
 
     if emoji in [ 'thumbsup', 'thumbsdown' ]
       mutualVote = if emoji is 'thumbsup' then 'thumbsdown' else 'thumbsup'
+      selector   = "[data-emoji=#{mutualVote}]"
 
-      isAlreadyVoted = $("[data-emoji=#{mutualVote}]").parent().hasClass 'active'
+      isAlreadyVoted = @getVotesBlock().find(selector).parent().hasClass 'active'
       @addAward awardUrl, mutualVote, no if isAlreadyVoted
 
 
@@ -144,26 +153,33 @@ class @AwardsHandler
 
 
   decrementCounter: ($emojiBtn, emoji) ->
-    isntNoteBody = $emojiBtn.closest('.note-body').length is 0
+
     counter       = $('.js-counter', $emojiBtn)
     counterNumber = parseInt(counter.text())
 
-    if !isntNoteBody
-      # If this is a note body, we just hide the award emoji row like the initial state
-      $emojiBtn.closest('.js-awards-block').addClass 'hidden'
-
     if counterNumber > 1
       counter.text(counterNumber - 1)
       @removeMeFromUserList($emojiBtn, emoji)
-    else if (emoji == 'thumbsup' || emoji == 'thumbsdown') && isntNoteBody
+    else if emoji is 'thumbsup' or emoji is 'thumbsdown'
       $emojiBtn.tooltip('destroy')
       counter.text('0')
       @removeMeFromUserList($emojiBtn, emoji)
+      @removeEmoji $emojiBtn if $emojiBtn.parents('.note').length
     else
+      @removeEmoji $emojiBtn
+
+    $emojiBtn.removeClass('active')
+
+
+  removeEmoji: ($emojiBtn) ->
+
     $emojiBtn.tooltip('destroy')
     $emojiBtn.remove()
 
-    $emojiBtn.removeClass('active')
+    $votesBlock = @getVotesBlock()
+
+    if $votesBlock.find('.js-emoji-btn').length is 0
+      $votesBlock.addClass 'hidden'
 
 
   getAwardTooltip: ($awardBlock) ->
@@ -225,16 +241,12 @@ class @AwardsHandler
     </button>"
 
     emoji_node = $(buttonHtml)
-      .insertBefore '.js-awards-block .js-award-holder:not(.js-award-action-btn)'
+      .insertBefore '.js-awards-block.current .js-award-holder:not(.js-award-action-btn)'
       .find '.emoji-icon'
       .data 'emoji', emoji
 
     $('.award-control').tooltip()
-
-    $currentBlock = $ '.js-awards-block'
-
-    if $currentBlock.is '.hidden'
-      $currentBlock.removeClass 'hidden'
+    $('.js-awards-block.current').removeClass 'current'
 
 
   createEmoji: (emoji) ->
@@ -261,42 +273,53 @@ class @AwardsHandler
 
 
   postEmoji: (awardUrl, emoji, callback) ->
+
     $.post awardUrl, { name: emoji }, (data) ->
-      if data.ok
-        callback.call()
+      callback.call() if data.ok
+
 
   findEmojiIcon: (emoji) ->
-    $(".js-awards-block.awards > .js-emoji-btn [data-emoji='#{emoji}']")
+
+    return $(".js-awards-block.current > .js-emoji-btn [data-emoji='#{emoji}']")
+
 
   scrollToAwards: ->
-    $('body, html').animate({
-      scrollTop: $('.awards').offset().top - 80
-    }, 200)
 
-  normilizeEmojiName: (emoji) ->
-    @aliases[emoji] || emoji
+    options = scrollTop: $('.awards').offset().top - 80
+    $('body, html').animate options, 200
+
+
+  normilizeEmojiName: (emoji) -> return @aliases[emoji] or emoji
+
 
   addEmojiToFrequentlyUsedList: (emoji) ->
-    frequently_used_emojis = @getFrequentlyUsedEmojis()
-    frequently_used_emojis.push(emoji)
-    $.cookie('frequently_used_emojis', frequently_used_emojis.join(','), { expires: 365 })
+
+    frequentlyUsedEmojis = @getFrequentlyUsedEmojis()
+    frequentlyUsedEmojis.push emoji
+    $.cookie 'frequently_used_emojis', frequentlyUsedEmojis.join(','), { expires: 365 }
+
 
   getFrequentlyUsedEmojis: ->
-    frequently_used_emojis = ($.cookie('frequently_used_emojis') || '').split(',')
-    _.compact(_.uniq(frequently_used_emojis))
+
+    frequentlyUsedEmojis = ($.cookie('frequently_used_emojis') or '').split(',')
+    return _.compact _.uniq frequentlyUsedEmojis
+
 
   renderFrequentlyUsedBlock: ->
-    if $.cookie('frequently_used_emojis')
-      frequently_used_emojis = @getFrequentlyUsedEmojis()
+
+    if $.cookie 'frequently_used_emojis'
+      frequentlyUsedEmojis = @getFrequentlyUsedEmojis()
 
       ul = $("<ul class='clearfix emoji-menu-list'>")
 
-      for emoji in frequently_used_emojis
+      for emoji in frequentlyUsedEmojis
         $(".emoji-menu-content [data-emoji='#{emoji}']").closest('li').clone().appendTo(ul)
 
       $('input.emoji-search').after(ul).after($('<h5>').text('Frequently used'))
 
+
   setupSearch: ->
+
     $('input.emoji-search').on 'keyup', (ev) =>
       term = $(ev.target).val()
 
@@ -313,5 +336,7 @@ class @AwardsHandler
       else
         $('.emoji-menu-content').children().show()
 
-  searchEmojis: (term)->
+
+  searchEmojis: (term) ->
+
     $(".emoji-menu-content [data-emoji*='#{term}']").closest('li').clone()

app/views/award_emoji/_awards_block.html.haml

@@ -11,7 +11,7 @@
       gl.awardMenuUrl = "#{emojis_path}"
 
     .award-menu-holder.js-award-holder
-      %button.btn.award-control.js-add-award{ type: "button", data: { award_menu_url: emojis_path } }
+      %button.btn.award-control.js-add-award{ type: "button" }
         = icon('smile-o', class: "award-control-icon award-control-icon-normal")
         = icon('spinner spin', class: "award-control-icon award-control-icon-loading")
         %span.award-control-text

app/views/projects/notes/_note.html.haml

@@ -22,7 +22,7 @@
             %span.note-role
               = access
           - if note_editable
-            = link_to '#', title: 'Add Reaction', class: 'note-emoji-button js-add-award js-note-emoji', data: { position: 'right' } do
+            = link_to '#', title: 'Award Emoji', class: 'note-emoji-button js-add-award js-note-emoji', data: { position: 'right' } do
               = icon('spinner spin')
               = icon('smile-o')
             = link_to '#', title: 'Edit comment', class: 'note-action-button js-note-edit' do
@@ -35,6 +35,8 @@
             = markdown(note.note, pipeline: :note, cache_key: [note, "note"], author: note.author)
         - if note_editable
           = render 'projects/notes/edit_form', note: note
+        .note-awards
+          = render 'award_emoji/awards_block', awardable: note, inline: false
       = edited_time_ago_with_tooltip(note, placement: 'bottom', html_class: 'note_edited_ago', include_author: true)
 
       - if note.attachment.url