Commit f261be09 authored by Fatih Acet's avatar Fatih Acet Committed by Z.J. van de Weg

Award emoji implementation for notes.

parent eaff5afc
...@@ -6,35 +6,43 @@ class @AwardsHandler ...@@ -6,35 +6,43 @@ class @AwardsHandler
$(document) $(document)
.off 'click', '.js-add-award' .off 'click', '.js-add-award'
.on 'click', '.js-add-award', (event) => .on 'click', '.js-add-award', (e) =>
event.stopPropagation() e.stopPropagation()
event.preventDefault() e.preventDefault()
@showEmojiMenu $(e.currentTarget)
$('html').on 'click', (e) ->
$target = $ e.target
@showEmojiMenu $(event.currentTarget) unless $target.closest('.emoji-menu-content').length
$('.js-awards-block.current').removeClass 'current'
$('html').on 'click', (event) -> unless $target.closest('.emoji-menu').length
unless $(event.target).closest('.emoji-menu').length
if $('.emoji-menu').is(':visible') if $('.emoji-menu').is(':visible')
$('.js-add-award.is-active').removeClass 'is-active' $('.js-add-award.is-active').removeClass 'is-active'
$('.emoji-menu').removeClass 'is-visible' $('.emoji-menu').removeClass 'is-visible'
$(document) $(document)
.off 'click', '.js-emoji-btn' .off 'click', '.js-emoji-btn'
.on 'click', '.js-emoji-btn', @handleClick .on 'click', '.js-emoji-btn', (e) =>
handleClick: (e) =>
e.preventDefault() e.preventDefault()
emoji = $(e.currentTarget).find('.icon').data 'emoji' $target = $ e.currentTarget
@getVotesBlock().addClass 'js-awards-block' emoji = $target.find('.icon').data 'emoji'
$target.closest('.js-awards-block').addClass 'current'
@addAward @getAwardUrl(), emoji @addAward @getAwardUrl(), emoji
showEmojiMenu: ($addBtn) -> showEmojiMenu: ($addBtn) ->
$menu = $('.emoji-menu') $menu = $ '.emoji-menu'
if $addBtn.hasClass 'note-emoji-button'
$addBtn.parents('.note').find('.js-awards-block').addClass 'current'
else
$addBtn.closest('.js-awards-block').addClass 'current'
if $menu.length if $menu.length
$holder = $addBtn.closest('.js-award-holder') $holder = $addBtn.closest('.js-award-holder')
...@@ -68,7 +76,7 @@ class @AwardsHandler ...@@ -68,7 +76,7 @@ class @AwardsHandler
createEmojiMenu: (awardMenuUrl, callback) -> createEmojiMenu: (awardMenuUrl, callback) ->
$.get awardMenuUrl, (response) => $.get awardMenuUrl, (response) ->
$('body').append response $('body').append response
callback() callback()
...@@ -94,11 +102,10 @@ class @AwardsHandler ...@@ -94,11 +102,10 @@ class @AwardsHandler
addAward: (awardUrl, emoji, checkMutuality = yes) -> addAward: (awardUrl, emoji, checkMutuality = yes) ->
emoji = @normilizeEmojiName(emoji) emoji = @normilizeEmojiName emoji
@postEmoji awardUrl, emoji, =>
@addAwardToEmojiBar(emoji, checkMutuality)
$('.js-awards-block-current').removeClass 'js-awards-block-current' @postEmoji awardUrl, emoji, =>
@addAwardToEmojiBar emoji, checkMutuality
$('.emoji-menu').removeClass 'is-visible' $('.emoji-menu').removeClass 'is-visible'
...@@ -112,21 +119,22 @@ class @AwardsHandler ...@@ -112,21 +119,22 @@ class @AwardsHandler
$emojiBtn = @findEmojiIcon(emoji).parent() $emojiBtn = @findEmojiIcon(emoji).parent()
if $emojiBtn.length > 0 if $emojiBtn.length > 0
if @isActive($emojiBtn) if @isActive $emojiBtn
@decrementCounter($emojiBtn, emoji) @decrementCounter $emojiBtn, emoji
else else
counter = $emojiBtn.find('.js-counter') counter = $emojiBtn.find '.js-counter'
counter.text(parseInt(counter.text()) + 1) counter.text parseInt(counter.text()) + 1
$emojiBtn.addClass('active') $emojiBtn.addClass 'active'
@addMeToUserList(emoji) @addMeToUserList emoji
else else
@createEmoji(emoji) @getVotesBlock().removeClass 'hidden'
@createEmoji emoji
getVotesBlock: -> return $ '.awards.js-awards-block' getVotesBlock: -> return $ '.js-awards-block.current'
getAwardUrl: -> @getVotesBlock().data 'award-url' getAwardUrl: -> return @getVotesBlock().data 'award-url'
checkMutuality: (emoji) -> checkMutuality: (emoji) ->
...@@ -135,8 +143,9 @@ class @AwardsHandler ...@@ -135,8 +143,9 @@ class @AwardsHandler
if emoji in [ 'thumbsup', 'thumbsdown' ] if emoji in [ 'thumbsup', 'thumbsdown' ]
mutualVote = if emoji is 'thumbsup' then 'thumbsdown' else 'thumbsup' mutualVote = if emoji is 'thumbsup' then 'thumbsdown' else 'thumbsup'
selector = "[data-emoji=#{mutualVote}]"
isAlreadyVoted = $("[data-emoji=#{mutualVote}]").parent().hasClass 'active' isAlreadyVoted = @getVotesBlock().find(selector).parent().hasClass 'active'
@addAward awardUrl, mutualVote, no if isAlreadyVoted @addAward awardUrl, mutualVote, no if isAlreadyVoted
...@@ -144,26 +153,33 @@ class @AwardsHandler ...@@ -144,26 +153,33 @@ class @AwardsHandler
decrementCounter: ($emojiBtn, emoji) -> decrementCounter: ($emojiBtn, emoji) ->
isntNoteBody = $emojiBtn.closest('.note-body').length is 0
counter = $('.js-counter', $emojiBtn) counter = $('.js-counter', $emojiBtn)
counterNumber = parseInt(counter.text()) counterNumber = parseInt(counter.text())
if !isntNoteBody
# If this is a note body, we just hide the award emoji row like the initial state
$emojiBtn.closest('.js-awards-block').addClass 'hidden'
if counterNumber > 1 if counterNumber > 1
counter.text(counterNumber - 1) counter.text(counterNumber - 1)
@removeMeFromUserList($emojiBtn, emoji) @removeMeFromUserList($emojiBtn, emoji)
else if (emoji == 'thumbsup' || emoji == 'thumbsdown') && isntNoteBody else if emoji is 'thumbsup' or emoji is 'thumbsdown'
$emojiBtn.tooltip('destroy') $emojiBtn.tooltip('destroy')
counter.text('0') counter.text('0')
@removeMeFromUserList($emojiBtn, emoji) @removeMeFromUserList($emojiBtn, emoji)
@removeEmoji $emojiBtn if $emojiBtn.parents('.note').length
else else
@removeEmoji $emojiBtn
$emojiBtn.removeClass('active')
removeEmoji: ($emojiBtn) ->
$emojiBtn.tooltip('destroy') $emojiBtn.tooltip('destroy')
$emojiBtn.remove() $emojiBtn.remove()
$emojiBtn.removeClass('active') $votesBlock = @getVotesBlock()
if $votesBlock.find('.js-emoji-btn').length is 0
$votesBlock.addClass 'hidden'
getAwardTooltip: ($awardBlock) -> getAwardTooltip: ($awardBlock) ->
...@@ -225,16 +241,12 @@ class @AwardsHandler ...@@ -225,16 +241,12 @@ class @AwardsHandler
</button>" </button>"
emoji_node = $(buttonHtml) emoji_node = $(buttonHtml)
.insertBefore '.js-awards-block .js-award-holder:not(.js-award-action-btn)' .insertBefore '.js-awards-block.current .js-award-holder:not(.js-award-action-btn)'
.find '.emoji-icon' .find '.emoji-icon'
.data 'emoji', emoji .data 'emoji', emoji
$('.award-control').tooltip() $('.award-control').tooltip()
$('.js-awards-block.current').removeClass 'current'
$currentBlock = $ '.js-awards-block'
if $currentBlock.is '.hidden'
$currentBlock.removeClass 'hidden'
createEmoji: (emoji) -> createEmoji: (emoji) ->
...@@ -261,42 +273,53 @@ class @AwardsHandler ...@@ -261,42 +273,53 @@ class @AwardsHandler
postEmoji: (awardUrl, emoji, callback) -> postEmoji: (awardUrl, emoji, callback) ->
$.post awardUrl, { name: emoji }, (data) -> $.post awardUrl, { name: emoji }, (data) ->
if data.ok callback.call() if data.ok
callback.call()
findEmojiIcon: (emoji) -> findEmojiIcon: (emoji) ->
$(".js-awards-block.awards > .js-emoji-btn [data-emoji='#{emoji}']")
return $(".js-awards-block.current > .js-emoji-btn [data-emoji='#{emoji}']")
scrollToAwards: -> scrollToAwards: ->
$('body, html').animate({
scrollTop: $('.awards').offset().top - 80
}, 200)
normilizeEmojiName: (emoji) -> options = scrollTop: $('.awards').offset().top - 80
@aliases[emoji] || emoji $('body, html').animate options, 200
normilizeEmojiName: (emoji) -> return @aliases[emoji] or emoji
addEmojiToFrequentlyUsedList: (emoji) -> addEmojiToFrequentlyUsedList: (emoji) ->
frequently_used_emojis = @getFrequentlyUsedEmojis()
frequently_used_emojis.push(emoji) frequentlyUsedEmojis = @getFrequentlyUsedEmojis()
$.cookie('frequently_used_emojis', frequently_used_emojis.join(','), { expires: 365 }) frequentlyUsedEmojis.push emoji
$.cookie 'frequently_used_emojis', frequentlyUsedEmojis.join(','), { expires: 365 }
getFrequentlyUsedEmojis: -> getFrequentlyUsedEmojis: ->
frequently_used_emojis = ($.cookie('frequently_used_emojis') || '').split(',')
_.compact(_.uniq(frequently_used_emojis)) frequentlyUsedEmojis = ($.cookie('frequently_used_emojis') or '').split(',')
return _.compact _.uniq frequentlyUsedEmojis
renderFrequentlyUsedBlock: -> renderFrequentlyUsedBlock: ->
if $.cookie('frequently_used_emojis')
frequently_used_emojis = @getFrequentlyUsedEmojis() if $.cookie 'frequently_used_emojis'
frequentlyUsedEmojis = @getFrequentlyUsedEmojis()
ul = $("<ul class='clearfix emoji-menu-list'>") ul = $("<ul class='clearfix emoji-menu-list'>")
for emoji in frequently_used_emojis for emoji in frequentlyUsedEmojis
$(".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: -> setupSearch: ->
$('input.emoji-search').on 'keyup', (ev) => $('input.emoji-search').on 'keyup', (ev) =>
term = $(ev.target).val() term = $(ev.target).val()
...@@ -313,5 +336,7 @@ class @AwardsHandler ...@@ -313,5 +336,7 @@ class @AwardsHandler
else else
$('.emoji-menu-content').children().show() $('.emoji-menu-content').children().show()
searchEmojis: (term)->
searchEmojis: (term) ->
$(".emoji-menu-content [data-emoji*='#{term}']").closest('li').clone() $(".emoji-menu-content [data-emoji*='#{term}']").closest('li').clone()
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
gl.awardMenuUrl = "#{emojis_path}" gl.awardMenuUrl = "#{emojis_path}"
.award-menu-holder.js-award-holder .award-menu-holder.js-award-holder
%button.btn.award-control.js-add-award{ type: "button", data: { award_menu_url: emojis_path } } %button.btn.award-control.js-add-award{ type: "button" }
= icon('smile-o', class: "award-control-icon award-control-icon-normal") = icon('smile-o', class: "award-control-icon award-control-icon-normal")
= icon('spinner spin', class: "award-control-icon award-control-icon-loading") = icon('spinner spin', class: "award-control-icon award-control-icon-loading")
%span.award-control-text %span.award-control-text
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
%span.note-role %span.note-role
= access = access
- if note_editable - if note_editable
= link_to '#', title: 'Add Reaction', class: 'note-emoji-button js-add-award js-note-emoji', data: { position: 'right' } do = link_to '#', title: 'Award Emoji', class: 'note-emoji-button js-add-award js-note-emoji', data: { position: 'right' } do
= icon('spinner spin') = icon('spinner spin')
= icon('smile-o') = icon('smile-o')
= link_to '#', title: 'Edit comment', class: 'note-action-button js-note-edit' do = link_to '#', title: 'Edit comment', class: 'note-action-button js-note-edit' do
...@@ -35,6 +35,8 @@ ...@@ -35,6 +35,8 @@
= markdown(note.note, pipeline: :note, cache_key: [note, "note"], author: note.author) = markdown(note.note, pipeline: :note, cache_key: [note, "note"], author: note.author)
- if note_editable - if note_editable
= render 'projects/notes/edit_form', note: note = render 'projects/notes/edit_form', note: note
.note-awards
= render 'award_emoji/awards_block', awardable: note, inline: false
= edited_time_ago_with_tooltip(note, placement: 'bottom', html_class: 'note_edited_ago', include_author: true) = edited_time_ago_with_tooltip(note, placement: 'bottom', html_class: 'note_edited_ago', include_author: true)
- if note.attachment.url - if note.attachment.url
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment