Fix displaying emoji only comments.

To render emoji in the emoji bar of an issue or MR we actually need the emoji unicode and unicode info is stored in the emoji menu widget. That widget could only be visible if user clicks the "Add" button and there may not be a widget when posting emoji only comments. So this change will check existence of the widget and create it before posting the emoji if it's not exist to render it correctly.

Fix displaying emoji only comments.
85e9eece · Fatih Acet · e8c8c9d7 · 85e9eece · 85e9eece
Commit 85e9eece authored May 23, 2016 by Fatih Acet
Hide whitespace changes
Inline Side-by-side

Showing with 46 additions and 24 deletions

awards_handler.coffee app/assets/javascripts/awards_handler.coffee +44 -22

notes.js.coffee app/assets/javascripts/notes.js.coffee +2 -2

No files found.
--- a/app/assets/javascripts/awards_handler.coffee
+++ b/app/assets/javascripts/awards_handler.coffee
@@ -20,7 +20,9 @@ class @AwardsHandler
      .off "click", ".js-emoji-btn"
      .on "click", ".js-emoji-btn", @handleClick

+
  handleClick: (e) =>
+
    e.preventDefault()
    $emojiBtn = $(e.currentTarget)
    $addAwardBtn = $('.js-add-award.is-active')
@@ -31,14 +33,14 @@ class @AwardsHandler
    else if $votesBlock.length is 0
      $votesBlock = $addAwardBtn.closest('.js-awards-block')

-    $votesBlock.addClass 'js-awards-block-current'
+    $votesBlock.addClass 'js-awards-block'
    awardUrl = $votesBlock.data 'award-url'
-    emoji = $emojiBtn
-      .find(".icon")
-      .data "emoji"
+    emoji = $emojiBtn.find('.icon').data('emoji')
    @addAward awardUrl, emoji

+
  showEmojiMenu: ($addBtn) ->
+
    $menu = $('.emoji-menu')

    if $menu.length
@@ -55,23 +57,29 @@ class @AwardsHandler
        $menu.addClass "is-visible"
        $("#emoji_search").focus()
    else
-      $addBtn.addClass "is-loading is-active"
-      $.get $addBtn.data('award-menu-url'), (response) =>
-        $addBtn.removeClass "is-loading"
-        $('body').append response
-
-        $menu = $(".emoji-menu")
+      $addBtn.addClass 'is-loading is-active'
+      url = $addBtn.data 'award-menu-url'

+      @createEmojiMenu url, =>
+        $addBtn.removeClass 'is-loading'
+        $menu = $('.emoji-menu')
        @positionMenu($menu, $addBtn)
-
        @renderFrequentlyUsedBlock()

        setTimeout =>
-          $menu.addClass "is-visible"
-          $("#emoji_search").focus()
+          $menu.addClass 'is-visible'
+          $('#emoji_search').focus()
          @setupSearch()
        , 200

+
+  createEmojiMenu: (awardMenuUrl, callback) ->
+
+    $.get awardMenuUrl, (response) =>
+      $('body').append response
+      callback()
+
+
  positionMenu: ($menu, $addBtn) ->
    position = $addBtn.data('position')

@@ -170,8 +178,9 @@ class @AwardsHandler
    ), 200


-  createEmoji: (emoji) ->
-    emojiCssClass = @resolveNameToCssClass(emoji)
+  createEmoji_: (emoji) ->
+
+    emojiCssClass = @resolveNameToCssClass emoji

    buttonHtml = "<button class='btn award-control js-emoji-btn has-tooltip active' title='me' data-placement='bottom'>
      <div class='icon emoji-icon #{emojiCssClass}' data-emoji='#{emoji}'></div>
@@ -179,16 +188,28 @@ class @AwardsHandler
    </button>"

    emoji_node = $(buttonHtml)
-      .insertBefore(".js-awards-block-current .js-award-holder:not(.js-award-action-btn)")
-      .find(".emoji-icon")
-      .data("emoji", emoji)
+      .insertBefore '.js-awards-block .js-award-holder:not(.js-award-action-btn)'
+      .find '.emoji-icon'
+      .data 'emoji', emoji
+
    $('.award-control').tooltip()

-    $currentBlock = $('.js-awards-block-current')
-    if $currentBlock.is('.hidden')
+    $currentBlock = $ '.js-awards-block'
+
+    if $currentBlock.is '.hidden'
      $currentBlock.removeClass 'hidden'

+
+  createEmoji: (emoji) ->
+
+    return @createEmoji_ emoji if $('.emoji-menu').length
+
+    awardMenuUrl = $('[data-award-menu-url]').data 'award-menu-url'
+    @createEmojiMenu awardMenuUrl, => @createEmoji emoji
+
+
  resolveNameToCssClass: (emoji) ->
+
    emoji_icon = $(".emoji-menu-content [data-emoji='#{emoji}']")

    if emoji_icon.length > 0
@@ -197,7 +218,8 @@ class @AwardsHandler
      # Find by alias
      unicodeName = $(".emoji-menu-content [data-aliases*=':#{emoji}:']").data("unicode-name")

-    "emoji-#{unicodeName}"
+    return "emoji-#{unicodeName}"
+

  postEmoji: (awardUrl, emoji, callback) ->
    $.post awardUrl, { name: emoji }, (data) ->
@@ -205,7 +227,7 @@ class @AwardsHandler
        callback.call()

  findEmojiIcon: (emoji) ->
-    $(".js-awards-block-current.awards > .js-emoji-btn [data-emoji='#{emoji}']")
+    $(".js-awards-block.awards > .js-emoji-btn [data-emoji='#{emoji}']")

  scrollToAwards: ->
    $('body, html').animate({

--- a/app/assets/javascripts/notes.js.coffee
+++ b/app/assets/javascripts/notes.js.coffee
@@ -167,8 +167,8 @@ class @Notes
      return

    if note.award
-      awardsHandler.addAwardToEmojiBar(note.note)
-      awardsHandler.scrollToAwards()
+      awards_handler.addAwardToEmojiBar(note.name)
+      awards_handler.scrollToAwards()

    # render note if it not present in loaded list
    # or skip if rendered