diff --git a/app/assets/javascripts/awards_handler.coffee b/app/assets/javascripts/awards_handler.coffee index bf95e06b4e5e8336168402982c0a3bbc3b4aefbe..105b0c34e958ff85051263434ba9864448bc9fa3 100644 --- a/app/assets/javascripts/awards_handler.coffee +++ b/app/assets/javascripts/awards_handler.coffee @@ -1,78 +1,69 @@ class @AwardsHandler - constructor: (@getEmojisUrl, @postEmojiUrl, @noteableType, @noteableId, @unicodes) -> - $('.js-add-award').on 'click', (event) => + constructor: (@aliases) -> + $(".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' - - if emoji is 'thumbsup' and awardsHandler.didUserClickEmoji $(this), 'thumbsdown' - awardsHandler.addAward 'thumbsdown' - - else if emoji is 'thumbsdown' and awardsHandler.didUserClickEmoji $(this), 'thumbsup' - awardsHandler.addAward 'thumbsup' - - 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 + $emojiBtn = $(e.currentTarget) + awardUrl = $emojiBtn.closest('.js-votes-block').data 'award-url' + emoji = $emojiBtn + .find(".icon") + .data "emoji" + @addAward awardUrl, emoji 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 @getEmojisUrl, (response) => - $('.js-add-award').removeClass 'is-loading' - $('.js-award-holder').append response + $('.js-add-award').addClass "is-loading" + $.get "/emojis", (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 - addAward: (emoji) -> - @postEmoji emoji, => + addAward: (awardUrl, emoji) -> + emoji = @normilizeEmojiName(emoji) + @postEmoji awardUrl, emoji, => @addAwardToEmojiBar(emoji) - $('.emoji-menu').removeClass 'is-visible' + $(".emoji-menu").removeClass "is-visible" addAwardToEmojiBar: (emoji) -> @addEmojiToFrequentlyUsedList(emoji) + emoji = @normilizeEmojiName(emoji) if @exist(emoji) 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') - @addMeToAuthorList(emoji) + counter.parent().addClass("active") + @addMeToUserList(emoji) else @createEmoji(emoji) @@ -80,47 +71,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') - @removeMeFromAuthorList(emoji) - else if emoji == 'thumbsup' || emoji == 'thumbsdown' - emojiIcon.tooltip('destroy') + emojiIcon.removeClass("active") + @removeMeFromUserList(emoji) + else if emoji == "thumbsup" || emoji == "thumbsdown" + emojiIcon.tooltip("destroy") counter.text(0) - emojiIcon.removeClass('active') - @removeMeFromAuthorList(emoji) + emojiIcon.removeClass("active") + @removeMeFromUserList(emoji) else - emojiIcon.tooltip('destroy') + emojiIcon.tooltip("destroy") emojiIcon.remove() - removeMeFromAuthorList: (emoji) -> - 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) -> - awardBlock = @findEmojiIcon(emoji).parent() - origTitle = awardBlock.attr('data-original-title').trim() - authors = [] + removeMeFromUserList: (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) + + addMeToUserList: (emoji) -> + award_block = @findEmojiIcon(emoji).parent() + origTitle = award_block.attr("data-original-title").trim() + users = [] if origTitle - authors = origTitle.split(', ') - authors.push('me') - awardBlock.attr('data-original-title', authors.join(', ')) - @resetTooltip(awardBlock) + users = origTitle.split(', ') + users.push("me") + award_block.attr("title", users.join(", ")) + @resetTooltip(award_block) 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 (-> @@ -131,37 +122,30 @@ class @AwardsHandler createEmoji: (emoji) -> emojiCssClass = @resolveNameToCssClass(emoji) - nodes = [] - nodes.push( - "<button class='btn award-control js-emoji-btn has-tooltip active' data-original-title='me'>", - "<div class='icon emoji-icon #{emojiCssClass}' data-emoji='#{emoji}'></div>", - "<span class='award-control-text js-counter'>1</span>", - "</button>" - ) - - $(nodes.join("\n")) - .insertBefore('.js-award-holder') - .find('.emoji-icon') - .data('emoji', emoji) + buttonHtml = "<button class='btn award-control js-emoji-btn has-tooltip active' title='me'> + <div class='icon emoji-icon #{emojiCssClass}' data-emoji='#{emoji}'></div> + <span class='award-control-text js-counter'>1</span> + </button>" + + emoji_node = $(buttonHtml) + .insertBefore(".js-award-holder") + .find(".emoji-icon") + .data("emoji", emoji) $('.award-control').tooltip() resolveNameToCssClass: (emoji) -> - emojiIcon = $(".emoji-menu-content [data-emoji='#{emoji}']") + emoji_icon = $(".emoji-menu-content [data-emoji='#{emoji}']") - if emojiIcon.length > 0 - unicodeName = emojiIcon.data('unicode-name') + 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') + unicodeName = $(".emoji-menu-content [data-aliases*=':#{emoji}:']").data("unicode-name") "emoji-#{unicodeName}" - postEmoji: (emoji, callback) -> - $.post @postEmojiUrl, { note: { - note: ":#{emoji}:" - noteable_type: @noteableType - noteable_id: @noteableId - }},(data) -> + postEmoji: (awardUrl, emoji, callback) -> + $.post awardUrl, { name: emoji }, (data) -> if data.ok callback.call() @@ -173,43 +157,46 @@ class @AwardsHandler scrollTop: $('.awards').offset().top - 80 }, 200) + normilizeEmojiName: (emoji) -> + @aliases[emoji] || emoji + addEmojiToFrequentlyUsedList: (emoji) -> - frequentlyUsedEmojis = @getFrequentlyUsedEmojis() - frequentlyUsedEmojis.push(emoji) - $.cookie('frequently_used_emojis', frequentlyUsedEmojis.join(','), { expires: 365 }) + frequently_used_emojis = @getFrequentlyUsedEmojis() + frequently_used_emojis.push(emoji) + $.cookie('frequently_used_emojis', frequently_used_emojis.join(","), { expires: 365 }) getFrequentlyUsedEmojis: -> - frequentlyUsedEmojis = ($.cookie('frequently_used_emojis') || '').split(',') - _.compact(_.uniq(frequentlyUsedEmojis)) + frequently_used_emojis = ($.cookie('frequently_used_emojis') || "").split(",") + _.compact(_.uniq(frequently_used_emojis)) renderFrequentlyUsedBlock: -> if $.cookie('frequently_used_emojis') - frequentlyUsedEmojis = @getFrequentlyUsedEmojis() + frequently_used_emojis = @getFrequentlyUsedEmojis() - ul = $('<ul>') + ul = $("<ul>") - for emoji in frequentlyUsedEmojis + for emoji in frequently_used_emojis 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') - 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) + 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) else - $('.emoji-menu-content').children().show() + $(".emoji-menu-content").children().show() searchEmojis: (term)-> $(".emoji-menu-content [data-emoji*='#{term}']").closest("li").clone() diff --git a/app/views/emoji_awards/_awards_block.html.haml b/app/views/emoji_awards/_awards_block.html.haml new file mode 100644 index 0000000000000000000000000000000000000000..da1de1c1debd84c17651d368820acd2e81bd9c46 --- /dev/null +++ b/app/views/emoji_awards/_awards_block.html.haml @@ -0,0 +1,22 @@ +.awards.votes-block.js-votes-block{ data: { award_url: url_for([:toggle_emoji_award, @project.namespace.becomes(Namespace), @project, awardable]) } } + - awards_sort(awardable.grouped_awards).each do |emoji, awards| + %button.btn.award-control.js-emoji-btn.has-tooltip{ type: "button", class: (award_active_class(awards, current_user)), title: award_user_list(awards, current_user) } + = emoji_icon(emoji) + %span.award-control-text.js-counter + = awards.count + + - if current_user + %div.award-menu-holder.js-award-holder + %button.btn.award-control.js-add-award{ type: "button" } + = icon('smile-o', {class: "award-control-icon"}) + = icon('spinner spin', {class: "award-control-icon award-control-icon-loading"}) + %span.award-control-text + Add + +- if current_user + :javascript + var aliases = #{AwardEmoji.aliases.to_json}; + + window.awards_handler = new AwardsHandler( + aliases + );