gitlab-org--gitlab-foss/app/assets/javascripts/awards_handler.coffee

class @AwardsHandler

  constructor: ->

    @aliases = gl.emojiAliases()

    $(document)
      .off 'click', '.js-add-award'
      .on  'click', '.js-add-award', (e) =>
        e.stopPropagation()
        e.preventDefault()

        @showEmojiMenu $(e.currentTarget)

    $('html').on 'click', (e) ->
      $target = $ e.target

      unless $target.closest('.emoji-menu-content').length
        $('.js-awards-block.current').removeClass 'current'

      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', (e) =>
        e.preventDefault()

        $target = $ e.currentTarget
        emoji   = $target.find('.icon').data 'emoji'

        $target.closest('.js-awards-block').addClass 'current'
        @addAward @getVotesBlock(), @getAwardUrl(), emoji


  showEmojiMenu: ($addBtn) ->

    $menu = $ '.emoji-menu'

    if $addBtn.hasClass 'js-note-emoji'
      $addBtn.closest('.note').find('.js-awards-block').addClass 'current'
    else
      $addBtn.closest('.js-awards-block').addClass 'current'

    if $menu.length
      $holder = $addBtn.closest('.js-award-holder')

      if $menu.is '.is-visible'
        $addBtn.removeClass 'is-active'
        $menu.removeClass 'is-visible'
        $('#emoji_search').blur()
      else
        $addBtn.addClass 'is-active'
        @positionMenu($menu, $addBtn)

        $menu.addClass 'is-visible'
        $('#emoji_search').focus()
    else
      $addBtn.addClass 'is-loading is-active'
      url = @getAwardMenuUrl()

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

        setTimeout =>
          $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')

    # The menu could potentially be off-screen or in a hidden overflow element
    # So we position the element absolute in the body
    css =
      top: "#{$addBtn.offset().top + $addBtn.outerHeight()}px"

    if position? and position is 'right'
      css.left = "#{($addBtn.offset().left - $menu.outerWidth()) + 20}px"
      $menu.addClass 'is-aligned-right'
    else
      css.left = "#{$addBtn.offset().left}px"
      $menu.removeClass 'is-aligned-right'

    $menu.css(css)


  addAward: (votesBlock, awardUrl, emoji, checkMutuality = true, callback) ->

    emoji = @normilizeEmojiName emoji

    @postEmoji awardUrl, emoji, =>
      @addAwardToEmojiBar votesBlock, emoji, checkMutuality
      callback?()

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


  addAwardToEmojiBar: (votesBlock, emoji, checkForMutuality = true) ->

    @checkMutuality votesBlock, emoji  if checkForMutuality
    @addEmojiToFrequentlyUsedList emoji

    emoji        = @normilizeEmojiName emoji
    $emojiButton = @findEmojiIcon(votesBlock, emoji).parent()

    if $emojiButton.length > 0
      if @isActive $emojiButton
        @decrementCounter $emojiButton, emoji
      else
        counter = $emojiButton.find '.js-counter'
        counter.text parseInt(counter.text()) + 1
        $emojiButton.addClass 'active'
        @addMeToUserList votesBlock, emoji
        @animateEmoji $emojiButton
    else
      votesBlock.removeClass 'hidden'
      @createEmoji votesBlock, emoji


  getVotesBlock: ->

    currentBlock = $ '.js-awards-block.current'
    return if currentBlock.length then currentBlock else $('.js-awards-block').eq 0


  getAwardUrl: -> return @getVotesBlock().data 'award-url'


  checkMutuality: (votesBlock, emoji) ->

    awardUrl = @getAwardUrl()

    if emoji in [ 'thumbsup', 'thumbsdown' ]
      mutualVote     = if emoji is 'thumbsup' then 'thumbsdown' else 'thumbsup'
      $emojiButton   = votesBlock.find("[data-emoji=#{mutualVote}]").parent()
      isAlreadyVoted = $emojiButton.hasClass 'active'

      if isAlreadyVoted
        @showEmojiLoader $emojiButton
        @addAward votesBlock, awardUrl, mutualVote, false, ->
          $emojiButton.removeClass 'is-loading'


  showEmojiLoader: ($emojiButton) ->

    $loader = $emojiButton.find '.fa-spinner'

    unless $loader.length
      $emojiButton.append '<i class="fa fa-spinner fa-spin award-control-icon award-control-icon-loading"></i>'

    $emojiButton.addClass 'is-loading'


  isActive: ($emojiButton) -> $emojiButton.hasClass 'active'


  decrementCounter: ($emojiButton, emoji) ->

    counter       = $ '.js-counter', $emojiButton
    counterNumber = parseInt counter.text(), 10

    if counterNumber > 1
      counter.text counterNumber - 1
      @removeMeFromUserList $emojiButton, emoji
    else if emoji is 'thumbsup' or emoji is 'thumbsdown'
      $emojiButton.tooltip 'destroy'
      counter.text '0'
      @removeMeFromUserList $emojiButton, emoji
      @removeEmoji $emojiButton if $emojiButton.parents('.note').length
    else
      @removeEmoji $emojiButton

    $emojiButton.removeClass 'active'


  removeEmoji: ($emojiButton) ->

    $emojiButton.tooltip('destroy')
    $emojiButton.remove()

    $votesBlock = @getVotesBlock()

    if $votesBlock.find('.js-emoji-btn').length is 0
      $votesBlock.addClass 'hidden'


  getAwardTooltip: ($awardBlock) ->

    return $awardBlock.attr('data-original-title') or $awardBlock.attr('data-title') or ''


  removeMeFromUserList: ($emojiButton, emoji) ->

    awardBlock    = $emojiButton
    originalTitle = @getAwardTooltip awardBlock

    authors = originalTitle.split ', '
    authors.splice authors.indexOf('me'), 1

    newAuthors = authors.join ', '

    awardBlock
      .closest '.js-emoji-btn'
      .removeData 'original-title'
      .attr 'data-original-title', newAuthors

    @resetTooltip awardBlock


  addMeToUserList: (votesBlock, emoji) ->

    awardBlock = @findEmojiIcon(votesBlock, emoji).parent()
    origTitle  = @getAwardTooltip awardBlock
    users      = []

    if origTitle
      users = origTitle.trim().split ', '

    users.push 'me'
    awardBlock.attr 'title', users.join ', '

    @resetTooltip awardBlock


  resetTooltip: (award) ->

    award.tooltip 'destroy'

    # 'destroy' call is asynchronous and there is no appropriate callback on it, this is why we need to set timeout.
    cb = -> award.tooltip()
    setTimeout cb, 200


  createEmoji_: (votesBlock, 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>
      <span class='award-control-text js-counter'>1</span>
    </button>"

    $emojiButton = $ buttonHtml
    $emojiButton
      .insertBefore votesBlock.find '.js-award-holder'
      .find '.emoji-icon'
      .data 'emoji', emoji

    @animateEmoji $emojiButton
    $('.award-control').tooltip()
    votesBlock.removeClass 'current'


  animateEmoji: ($emoji) ->

    className = 'pulse animated'

    $emoji.addClass className
    setTimeout (-> $emoji.removeClass className), 321


  createEmoji: (votesBlock, emoji) ->

    if $('.emoji-menu').length
      return @createEmoji_ votesBlock, emoji

    @createEmojiMenu @getAwardMenuUrl(), => @createEmoji_ votesBlock, emoji


  getAwardMenuUrl: -> return gon.award_menu_url


  resolveNameToCssClass: (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'

    return "emoji-#{unicodeName}"


  postEmoji: (awardUrl, emoji, callback) ->

    $.post awardUrl, { name: emoji }, (data) ->
      callback() if data.ok


  findEmojiIcon: (votesBlock, emoji) ->

    return votesBlock.find ".js-emoji-btn [data-emoji='#{emoji}']"


  scrollToAwards: ->

    options = scrollTop: $('.awards').offset().top - 110
    $('body, html').animate options, 200


  normilizeEmojiName: (emoji) -> return @aliases[emoji] or emoji


  addEmojiToFrequentlyUsedList: (emoji) ->

    frequentlyUsedEmojis = @getFrequentlyUsedEmojis()
    frequentlyUsedEmojis.push emoji
    $.cookie 'frequently_used_emojis', frequentlyUsedEmojis.join(','), { expires: 365 }


  getFrequentlyUsedEmojis: ->

    frequentlyUsedEmojis = ($.cookie('frequently_used_emojis') or '').split(',')
    return _.compact _.uniq frequentlyUsedEmojis


  renderFrequentlyUsedBlock: ->

    if $.cookie 'frequently_used_emojis'
      frequentlyUsedEmojis = @getFrequentlyUsedEmojis()

      ul = $("<ul class='clearfix emoji-menu-list frequent-emojis'>")

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

      $('.emoji-menu-content')
        .prepend(ul)
        .prepend($('<h5>').text('Frequently used'))

    @frequentEmojiBlockRendered = true


  setupSearch: ->

    $('input.emoji-search').on 'keyup', (ev) =>
      term = $(ev.target).val()

      # Clean previous search results
      $('ul.emoji-menu-search, h5.emoji-search').remove()

      if term
        # Generate a search result block
        h5 = $('<h5>').text('Search results')
        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)
      else
        $('.emoji-menu-content').children().show()


  searchEmojis: (term) ->

    $(".emoji-menu-list:not(.frequent-emojis) [data-emoji*='#{term}']").closest('li').clone()