BigW Consortium Gitlab

awards_handler.coffee 6.57 KB
Newer Older
Valery Sizov committed
1
class @AwardsHandler
2
  constructor: (@getEmojisUrl, @postEmojiUrl, @noteableType, @noteableId, @unicodes) ->
3
    $('.js-add-award').on 'click', (event) =>
4 5
      event.stopPropagation()
      event.preventDefault()
6 7

      @showEmojiMenu()
8

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

14 15 16
    $('.awards')
      .off 'click'
      .on 'click', '.js-emoji-btn', @handleClick
17

18
    @renderFrequentlyUsedBlock()
19 20 21

  handleClick: (e) ->
    e.preventDefault()
22
    emoji = $(this)
23 24
      .find('.icon')
      .data 'emoji'
25

26 27
    if emoji is 'thumbsup' and awardsHandler.didUserClickEmoji $(this), 'thumbsdown'
      awardsHandler.addAward 'thumbsdown'
28

29 30
    else if emoji is 'thumbsdown' and awardsHandler.didUserClickEmoji $(this), 'thumbsup'
      awardsHandler.addAward 'thumbsup'
31

32
    awardsHandler.addAward emoji
33

34 35
    $(this).trigger 'blur'

36
  didUserClickEmoji: (that, emoji) ->
37 38
    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
39

40
  showEmojiMenu: ->
41 42 43 44
    if $('.emoji-menu').length
      if $('.emoji-menu').is '.is-visible'
        $('.emoji-menu').removeClass 'is-visible'
        $('#emoji_search').blur()
45
      else
46 47
        $('.emoji-menu').addClass 'is-visible'
        $('#emoji_search').focus()
48
    else
49
      $('.js-add-award').addClass 'is-loading'
50
      $.get @getEmojisUrl, (response) =>
51 52
        $('.js-add-award').removeClass 'is-loading'
        $('.js-award-holder').append response
53
        setTimeout =>
54 55
          $('.emoji-menu').addClass 'is-visible'
          $('#emoji_search').focus()
56 57
          @setupSearch()
        , 200
58

Valery Sizov committed
59 60
  addAward: (emoji) ->
    @postEmoji emoji, =>
61
      @addAwardToEmojiBar(emoji)
62

63
    $('.emoji-menu').removeClass 'is-visible'
64

65
  addAwardToEmojiBar: (emoji) ->
66 67
    @addEmojiToFrequentlyUsedList(emoji)

68 69 70 71
    if @exist(emoji)
      if @isActive(emoji)
        @decrementCounter(emoji)
      else
72
        counter = @findEmojiIcon(emoji).siblings('.js-counter')
73
        counter.text(parseInt(counter.text()) + 1)
74
        counter.parent().addClass('active')
Valery Sizov committed
75
        @addMeToAuthorList(emoji)
76
    else
77
      @createEmoji(emoji)
Valery Sizov committed
78 79

  exist: (emoji) ->
80
    @findEmojiIcon(emoji).length > 0
Valery Sizov committed
81 82

  isActive: (emoji) ->
83
    @findEmojiIcon(emoji).parent().hasClass('active')
Valery Sizov committed
84 85

  decrementCounter: (emoji) ->
86
    counter = @findEmojiIcon(emoji).siblings('.js-counter')
87
    emojiIcon = counter.parent()
88
    if parseInt(counter.text()) > 1
Valery Sizov committed
89
      counter.text(parseInt(counter.text()) - 1)
90
      emojiIcon.removeClass('active')
Valery Sizov committed
91
      @removeMeFromAuthorList(emoji)
92 93
    else if emoji == 'thumbsup' || emoji == 'thumbsdown'
      emojiIcon.tooltip('destroy')
94
      counter.text(0)
95
      emojiIcon.removeClass('active')
96
      @removeMeFromAuthorList(emoji)
Valery Sizov committed
97
    else
98
      emojiIcon.tooltip('destroy')
99
      emojiIcon.remove()
Valery Sizov committed
100

Valery Sizov committed
101
  removeMeFromAuthorList: (emoji) ->
102 103
    awardBlock = @findEmojiIcon(emoji).parent()
    authors = awardBlock
104 105 106
      .attr('data-original-title')
      .split(', ')
    authors.splice(authors.indexOf('me'),1)
107
    awardBlock
108 109
      .closest('.js-emoji-btn')
      .attr('data-original-title', authors.join(', '))
110
    @resetTooltip(awardBlock)
Valery Sizov committed
111 112

  addMeToAuthorList: (emoji) ->
113
    awardBlock = @findEmojiIcon(emoji).parent()
114
    origTitle = awardBlock.attr('data-original-title').trim()
115 116 117
    authors = []
    if origTitle
      authors = origTitle.split(', ')
118 119
    authors.push('me')
    awardBlock.attr('data-original-title', authors.join(', '))
120
    @resetTooltip(awardBlock)
Valery Sizov committed
121 122

  resetTooltip: (award) ->
123
    award.tooltip('destroy')
Valery Sizov committed
124

Valery Sizov committed
125
    # "destroy" call is asynchronous and there is no appropriate callback on it, this is why we need to set timeout.
Valery Sizov committed
126 127 128
    setTimeout (->
      award.tooltip()
    ), 200
129

Valery Sizov committed
130

131 132 133
  createEmoji: (emoji) ->
    emojiCssClass = @resolveNameToCssClass(emoji)

Valery Sizov committed
134
    nodes = []
135
    nodes.push(
136
      "<button class='btn award-control js-emoji-btn has-tooltip active' data-original-title='me'>",
137 138 139 140 141
      "<div class='icon emoji-icon #{emojiCssClass}' data-emoji='#{emoji}'></div>",
      "<span class='award-control-text js-counter'>1</span>",
      "</button>"
    )

142
    $(nodes.join("\n"))
143 144 145
      .insertBefore('.js-award-holder')
      .find('.emoji-icon')
      .data('emoji', emoji)
146
    $('.award-control').tooltip()
Valery Sizov committed
147

148
  resolveNameToCssClass: (emoji) ->
149
    emojiIcon = $(".emoji-menu-content [data-emoji='#{emoji}']")
150

151 152
    if emojiIcon.length > 0
      unicodeName = emojiIcon.data('unicode-name')
153 154 155 156 157
    else
      # Find by alias
      unicodeName = $(".emoji-menu-content [data-aliases*=':#{emoji}:']").data('unicode-name')

    "emoji-#{unicodeName}"
Valery Sizov committed
158 159

  postEmoji: (emoji, callback) ->
160
    $.post @postEmojiUrl, { note: {
161
      note: ":#{emoji}:"
162 163
      noteable_type: @noteableType
      noteable_id: @noteableId
Valery Sizov committed
164
    }},(data) ->
Valery Sizov committed
165
      if data.ok
166 167 168
        callback.call()

  findEmojiIcon: (emoji) ->
169
    $(".awards > .js-emoji-btn [data-emoji='#{emoji}']")
170 171 172 173 174

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

176
  addEmojiToFrequentlyUsedList: (emoji) ->
177 178
    frequentlyUsedEmojis = @getFrequentlyUsedEmojis()
    frequentlyUsedEmojis.push(emoji)
179
    $.cookie('frequently_used_emojis', frequentlyUsedEmojis.join(','), { expires: 365 })
180 181

  getFrequentlyUsedEmojis: ->
182
    frequentlyUsedEmojis = ($.cookie('frequently_used_emojis') || '').split(',')
183
    _.compact(_.uniq(frequentlyUsedEmojis))
184 185

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

189
      ul = $('<ul>')
190

191
      for emoji in frequentlyUsedEmojis
192
        do (emoji) ->
193
          $(".emoji-menu-content [data-emoji='#{emoji}']").closest('li').clone().appendTo(ul)
194

195
      $('input.emoji-search').after(ul).after($('<h5>').text('Frequently used'))
196

Valery Sizov committed
197
  setupSearch: ->
198
    $('input.emoji-search').keyup (ev) =>
Valery Sizov committed
199 200 201
      term = $(ev.target).val()

      # Clean previous search results
202
      $('ul.emoji-menu-search, h5.emoji-search').remove()
Valery Sizov committed
203 204

      if term
205
        # Generate a search result block
206
        h5 = $('<h5>').text('Search results').addClass('emoji-search')
207
        foundEmojis = @searchEmojis(term).show()
208 209 210
        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)
Valery Sizov committed
211
      else
212
        $('.emoji-menu-content').children().show()
Valery Sizov committed
213 214

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