Merge branch 'emoji_award_coffee_refactoring' into 'master'

AwardsHandler follows code style conventions See merge request !3871

Merge branch 'emoji_award_coffee_refactoring' into 'master'
AwardsHandler follows code style conventions See merge request !3871
79c27e6a · Jacob Schatz · bfc6a0e3 · 311c859d · 79c27e6a · 79c27e6a
--- a/app/assets/javascripts/awards_handler.coffee
+++ b/app/assets/javascripts/awards_handler.coffee
 class @AwardsHandler
-  constructor: (@get_emojis_url, @post_emoji_url, @noteable_type, @noteable_id, @unicodes) ->
-    $(".js-add-award").on "click", (event) =>
+  constructor: (@getEmojisUrl, @postEmojiUrl, @noteableType, @noteableId, @unicodes) ->
+    $('.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"
+      .find('.icon')
+      .data 'emoji'

-    if emoji is "thumbsup" and awards_handler.didUserClickEmoji $(this), "thumbsdown"
-      awards_handler.addAward "thumbsdown"
+    if emoji is 'thumbsup' and awardsHandler.didUserClickEmoji $(this), 'thumbsdown'
+      awardsHandler.addAward 'thumbsdown'

-    else if emoji is "thumbsdown" and awards_handler.didUserClickEmoji $(this), "thumbsup"
-      awards_handler.addAward "thumbsup"
+    else if emoji is 'thumbsdown' and awardsHandler.didUserClickEmoji $(this), 'thumbsup'
+      awardsHandler.addAward 'thumbsup'

-    awards_handler.addAward emoji
+    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
+    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

  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 @get_emojis_url, (response) =>
-        $('.js-add-award').removeClass "is-loading"
-        $(".js-award-holder").append response
+      $('.js-add-award').addClass 'is-loading'
+      $.get @getEmojisUrl, (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

@@ -60,7 +60,7 @@ class @AwardsHandler
    @postEmoji emoji, =>
      @addAwardToEmojiBar(emoji)

-    $(".emoji-menu").removeClass "is-visible"
+    $('.emoji-menu').removeClass 'is-visible'

  addAwardToEmojiBar: (emoji) ->
    @addEmojiToFrequentlyUsedList(emoji)
@@ -69,9 +69,9 @@ class @AwardsHandler
      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")
+        counter.parent().addClass('active')
        @addMeToAuthorList(emoji)
    else
      @createEmoji(emoji)
@@ -80,47 +80,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")
+      emojiIcon.removeClass('active')
      @removeMeFromAuthorList(emoji)
-    else if emoji == "thumbsup" || emoji == "thumbsdown"
-      emojiIcon.tooltip("destroy")
+    else if emoji == 'thumbsup' || emoji == 'thumbsdown'
+      emojiIcon.tooltip('destroy')
      counter.text(0)
-      emojiIcon.removeClass("active")
+      emojiIcon.removeClass('active')
      @removeMeFromAuthorList(emoji)
    else
-      emojiIcon.tooltip("destroy")
+      emojiIcon.tooltip('destroy')
      emojiIcon.remove()

  removeMeFromAuthorList: (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)
+    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) ->
-    award_block = @findEmojiIcon(emoji).parent()
-    origTitle = award_block.attr("data-original-title").trim()
+    awardBlock = @findEmojiIcon(emoji).parent()
+    origTitle = awardBlock.attr('data-original-title').trim()
    authors = []
    if origTitle
      authors = origTitle.split(', ')
-    authors.push("me")
-    award_block.attr("data-original-title", authors.join(", "))
-    @resetTooltip(award_block)
+    authors.push('me')
+    awardBlock.attr('data-original-title', authors.join(', '))
+    @resetTooltip(awardBlock)

  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 (->
@@ -139,20 +139,28 @@ class @AwardsHandler
      "</button>"
    )

-    emoji_node = $(nodes.join("\n"))
-      .insertBefore(".js-award-holder")
-      .find(".emoji-icon")
-      .data("emoji", emoji)
+    $(nodes.join("\n"))
+      .insertBefore('.js-award-holder')
+      .find('.emoji-icon')
+      .data('emoji', emoji)
    $('.award-control').tooltip()

  resolveNameToCssClass: (emoji) ->
-    "emoji-#{@unicodes[emoji]}"
+    emojiIcon = $(".emoji-menu-content [data-emoji='#{emoji}']")
+
+    if emojiIcon.length > 0
+      unicodeName = emojiIcon.data('unicode-name')
+    else
+      # Find by alias
+      unicodeName = $(".emoji-menu-content [data-aliases*=':#{emoji}:']").data('unicode-name')
+
+    "emoji-#{unicodeName}"

  postEmoji: (emoji, callback) ->
-    $.post @post_emoji_url, { note: {
+    $.post @postEmojiUrl, { note: {
      note: ":#{emoji}:"
-      noteable_type: @noteable_type
-      noteable_id: @noteable_id
+      noteable_type: @noteableType
+      noteable_id: @noteableId
    }},(data) ->
      if data.ok
        callback.call()
@@ -166,42 +174,42 @@ class @AwardsHandler
    }, 200)

  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') || '').split(',')
+    _.compact(_.uniq(frequentlyUsedEmojis))

  renderFrequentlyUsedBlock: ->
    if $.cookie('frequently_used_emojis')
-      frequently_used_emojis = @getFrequentlyUsedEmojis()
+      frequentlyUsedEmojis = @getFrequentlyUsedEmojis()

-      ul = $("<ul>")
+      ul = $('<ul>')

-      for emoji in frequently_used_emojis
+      for emoji in frequentlyUsedEmojis
        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")
-        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)
+        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)
      else
-        $(".emoji-menu-content").children().show()
+        $('.emoji-menu-content').children().show()

  searchEmojis: (term)->
    $(".emoji-menu-content [data-emoji*='#{term}']").closest("li").clone()
--- a/app/assets/javascripts/notes.js.coffee
+++ b/app/assets/javascripts/notes.js.coffee
@@ -167,8 +167,8 @@ class @Notes
      return

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

    # render note if it not present in loaded list
    # or skip if rendered
@@ -373,11 +373,11 @@ class @Notes

    new GLForm form
    if scrollTo? and myLastNote?
-      # scroll to the bottom 
+      # scroll to the bottom
      # so the open of the last element doesn't make a jump
      $('html, body').scrollTop($(document).height());
      $('html, body').animate({
-        scrollTop: myLastNote.offset().top - 150  
+        scrollTop: myLastNote.offset().top - 150
      }, 500, ->
        $noteText = form.find(".js-note-text")
        $noteText.focus()

--- a/app/views/votes/_votes_block.html.haml
+++ b/app/views/votes/_votes_block.html.haml
@@ -15,16 +15,16 @@

 - if current_user
  :javascript
-    var get_emojis_url = "#{emojis_path}";
-    var post_emoji_url = "#{award_toggle_namespace_project_notes_path(@project.namespace, @project)}";
-    var noteable_type = "#{votable.class.name.underscore}";
-    var noteable_id = "#{votable.id}";
+    var getEmojisUrl = "#{emojis_path}";
+    var postEmojiUrl = "#{award_toggle_namespace_project_notes_path(@project.namespace, @project)}";
+    var noteableType = "#{votable.class.name.underscore}";
+    var noteableId = "#{votable.id}";
    var unicodes = #{AwardEmoji.unicode.to_json};

-    window.awards_handler = new AwardsHandler(
-      get_emojis_url,
-      post_emoji_url,
-      noteable_type,
-      noteable_id,
+    window.awardsHandler = new AwardsHandler(
+      getEmojisUrl,
+      postEmojiUrl,
+      noteableType,
+      noteableId,
      unicodes
    );