awards_handler.coffee 6.22 KB
Newer Older
Valery Sizov's avatar
Valery Sizov committed
1
class @AwardsHandler
2
  constructor: (@get_emojis_url, @post_emoji_url, @noteable_type, @noteable_id, @aliases) ->
3
    $(".js-add-award").on "click", (event) =>
4 5
      event.stopPropagation()
      event.preventDefault()
6 7

      @showEmojiMenu()
8

9
    $("html").on 'click', (event) ->
10 11
      if !$(event.target).closest(".emoji-menu").length
        if $(".emoji-menu").is(":visible")
Phil Hughes's avatar
Phil Hughes committed
12
          $(".emoji-menu").removeClass "is-visible"
Valery Sizov's avatar
Valery Sizov committed
13

Phil Hughes's avatar
Phil Hughes committed
14 15 16
    $(".awards")
      .off "click"
      .on "click", ".js-emoji-btn", @handleClick
Phil Hughes's avatar
Phil Hughes committed
17

18
    @renderFrequentlyUsedBlock()
Phil Hughes's avatar
Phil Hughes committed
19 20 21

  handleClick: (e) ->
    e.preventDefault()
22 23 24
    emoji = $(this)
      .find(".icon")
      .data "emoji"
Phil Hughes's avatar
Phil Hughes committed
25
    awards_handler.addAward emoji
26

27 28
  showEmojiMenu: ->
    if $(".emoji-menu").length
Phil Hughes's avatar
Phil Hughes committed
29 30 31 32 33 34
      if $(".emoji-menu").is ".is-visible"
        $(".emoji-menu").removeClass "is-visible"
        $("#emoji_search").blur()
      else
        $(".emoji-menu").addClass "is-visible"
        $("#emoji_search").focus()
35
    else
Phil Hughes's avatar
Phil Hughes committed
36
      $('.js-add-award').addClass "is-loading"
37
      $.get @get_emojis_url, (response) =>
Phil Hughes's avatar
Phil Hughes committed
38 39
        $('.js-add-award').removeClass "is-loading"
        $(".js-award-holder").append response
Phil Hughes's avatar
Phil Hughes committed
40 41 42 43 44
        setTimeout =>
          $(".emoji-menu").addClass "is-visible"
          $("#emoji_search").focus()
          @setupSearch()
        , 200
45

Valery Sizov's avatar
Valery Sizov committed
46
  addAward: (emoji) ->
Valery Sizov's avatar
Valery Sizov committed
47
    emoji = @normilizeEmojiName(emoji)
Valery Sizov's avatar
Valery Sizov committed
48
    @postEmoji emoji, =>
49
      @addAwardToEmojiBar(emoji)
50

Phil Hughes's avatar
Phil Hughes committed
51
    $(".emoji-menu").removeClass "is-visible"
52

53
  addAwardToEmojiBar: (emoji) ->
54 55
    @addEmojiToFrequentlyUsedList(emoji)

Valery Sizov's avatar
Valery Sizov committed
56
    emoji = @normilizeEmojiName(emoji)
57 58 59 60
    if @exist(emoji)
      if @isActive(emoji)
        @decrementCounter(emoji)
      else
Phil Hughes's avatar
Phil Hughes committed
61
        counter = @findEmojiIcon(emoji).siblings(".js-counter")
62 63
        counter.text(parseInt(counter.text()) + 1)
        counter.parent().addClass("active")
Valery Sizov's avatar
Valery Sizov committed
64
        @addMeToAuthorList(emoji)
65
    else
66
      @createEmoji(emoji)
Valery Sizov's avatar
Valery Sizov committed
67 68

  exist: (emoji) ->
69
    @findEmojiIcon(emoji).length > 0
Valery Sizov's avatar
Valery Sizov committed
70 71

  isActive: (emoji) ->
72
    @findEmojiIcon(emoji).parent().hasClass("active")
Valery Sizov's avatar
Valery Sizov committed
73 74

  decrementCounter: (emoji) ->
Phil Hughes's avatar
Phil Hughes committed
75
    counter = @findEmojiIcon(emoji).siblings(".js-counter")
76
    emojiIcon = counter.parent()
77
    if parseInt(counter.text()) > 1
Valery Sizov's avatar
Valery Sizov committed
78
      counter.text(parseInt(counter.text()) - 1)
79
      emojiIcon.removeClass("active")
Valery Sizov's avatar
Valery Sizov committed
80
      @removeMeFromAuthorList(emoji)
81
    else if emoji == "thumbsup" || emoji == "thumbsdown"
82 83 84
      emojiIcon.tooltip("destroy")
      counter.text(0)
      emojiIcon.removeClass("active")
85
      @removeMeFromAuthorList(emoji)
Valery Sizov's avatar
Valery Sizov committed
86
    else
87 88
      emojiIcon.tooltip("destroy")
      emojiIcon.remove()
Valery Sizov's avatar
Valery Sizov committed
89

Valery Sizov's avatar
Valery Sizov committed
90 91
  removeMeFromAuthorList: (emoji) ->
    award_block = @findEmojiIcon(emoji).parent()
92 93 94
    authors = award_block
      .attr("data-original-title")
      .split(", ")
95
    authors.splice(authors.indexOf("me"),1)
96 97 98
    award_block
      .closest(".js-emoji-btn")
      .attr("data-original-title", authors.join(", "))
Valery Sizov's avatar
Valery Sizov committed
99 100 101 102
    @resetTooltip(award_block)

  addMeToAuthorList: (emoji) ->
    award_block = @findEmojiIcon(emoji).parent()
103 104 105 106
    origTitle = award_block.attr("data-original-title").trim()
    authors = []
    if origTitle
      authors = origTitle.split(', ')
107
    authors.push("me")
108
    award_block.attr("title", authors.join(", "))
Valery Sizov's avatar
Valery Sizov committed
109 110 111 112 113
    @resetTooltip(award_block)

  resetTooltip: (award) ->
    award.tooltip("destroy")

Valery Sizov's avatar
Valery Sizov committed
114
    # "destroy" call is asynchronous and there is no appropriate callback on it, this is why we need to set timeout.
Valery Sizov's avatar
Valery Sizov committed
115 116 117
    setTimeout (->
      award.tooltip()
    ), 200
118

Valery Sizov's avatar
Valery Sizov committed
119

120 121 122
  createEmoji: (emoji) ->
    emojiCssClass = @resolveNameToCssClass(emoji)

Valery Sizov's avatar
Valery Sizov committed
123
    nodes = []
124
    nodes.push(
125
      "<button class='btn award-control js-emoji-btn has-tooltip active' title='me'>",
126 127 128 129 130 131 132 133 134
      "<div class='icon emoji-icon #{emojiCssClass}' data-emoji='#{emoji}'></div>",
      "<span class='award-control-text js-counter'>1</span>",
      "</button>"
    )

    emoji_node = $(nodes.join("\n"))
      .insertBefore(".js-award-holder")
      .find(".emoji-icon")
      .data("emoji", emoji)
Phil Hughes's avatar
Phil Hughes committed
135
    $('.award-control').tooltip()
Valery Sizov's avatar
Valery Sizov committed
136

137
  resolveNameToCssClass: (emoji) ->
138
    emoji_icon = $(".emoji-menu-content [data-emoji='#{emoji}']")
139

140 141 142 143 144 145 146
    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")

    "emoji-#{unicodeName}"
Valery Sizov's avatar
Valery Sizov committed
147 148

  postEmoji: (emoji, callback) ->
Valery Sizov's avatar
Valery Sizov committed
149
    $.post @post_emoji_url, { note: {
150
      note: ":#{emoji}:"
Valery Sizov's avatar
Valery Sizov committed
151 152
      noteable_type: @noteable_type
      noteable_id: @noteable_id
Valery Sizov's avatar
Valery Sizov committed
153
    }},(data) ->
Valery Sizov's avatar
Valery Sizov committed
154
      if data.ok
155 156 157
        callback.call()

  findEmojiIcon: (emoji) ->
Phil Hughes's avatar
Phil Hughes committed
158
    $(".awards > .js-emoji-btn [data-emoji='#{emoji}']")
159 160 161 162 163

  scrollToAwards: ->
    $('body, html').animate({
      scrollTop: $('.awards').offset().top - 80
    }, 200)
Valery Sizov's avatar
Valery Sizov committed
164 165 166

  normilizeEmojiName: (emoji) ->
    @aliases[emoji] || emoji
167 168 169 170 171 172 173 174 175 176 177

  addEmojiToFrequentlyUsedList: (emoji) ->
    frequently_used_emojis = @getFrequentlyUsedEmojis()
    frequently_used_emojis.push(emoji)
    $.cookie('frequently_used_emojis', frequently_used_emojis.join(","), { expires: 365 })

  getFrequentlyUsedEmojis: ->
    frequently_used_emojis = ($.cookie('frequently_used_emojis') || "").split(",")
    _.compact(_.uniq(frequently_used_emojis))

  renderFrequentlyUsedBlock: ->
178 179
    if $.cookie('frequently_used_emojis')
      frequently_used_emojis = @getFrequentlyUsedEmojis()
180

181
      ul = $("<ul>")
182

183 184 185
      for emoji in frequently_used_emojis
        do (emoji) ->
          $(".emoji-menu-content [data-emoji='#{emoji}']").closest("li").clone().appendTo(ul)
186

187
      $("input.emoji-search").after(ul).after($("<h5>").text("Frequently used"))
188

Valery Sizov's avatar
Valery Sizov committed
189
  setupSearch: ->
Valery Sizov's avatar
Valery Sizov committed
190
    $("input.emoji-search").keyup (ev) =>
Valery Sizov's avatar
Valery Sizov committed
191 192 193
      term = $(ev.target).val()

      # Clean previous search results
194
      $("ul.emoji-menu-search, h5.emoji-search").remove()
Valery Sizov's avatar
Valery Sizov committed
195 196

      if term
197
        # Generate a search result block
Valery Sizov's avatar
Valery Sizov committed
198 199
        h5 = $("<h5>").text("Search results").addClass("emoji-search")
        found_emojis = @searchEmojis(term).show()
200
        ul = $("<ul>").addClass("emoji-menu-list emoji-menu-search").append(found_emojis)
Valery Sizov's avatar
Valery Sizov committed
201 202 203 204 205 206
        $(".emoji-menu-content ul, .emoji-menu-content h5").hide()
        $(".emoji-menu-content").append(h5).append(ul)
      else
        $(".emoji-menu-content").children().show()

  searchEmojis: (term)->
Valery Sizov's avatar
Valery Sizov committed
207
    $(".emoji-menu-content [data-emoji*='#{term}']").closest("li").clone()