diff options
author | Phil Hughes <me@iamphill.com> | 2016-03-31 11:21:33 +0300 |
---|---|---|
committer | Fatih Acet <acetfatih@gmail.com> | 2016-05-19 22:04:48 +0300 |
commit | 4caf38a1d583f1561affc278ff0ddc0174e47b72 (patch) | |
tree | b91a8d167b3c28980b02692569c9b8620e37bda6 /app/assets/javascripts/awards_handler.coffee | |
parent | 6c89e2fd41a39e2cfde623405d01aa63469370d1 (diff) |
Refactored JS slightly to make things easier
# Conflicts:
# app/assets/javascripts/awards_handler.coffee
# app/views/emoji_awards/_awards_block.html.haml
Diffstat (limited to 'app/assets/javascripts/awards_handler.coffee')
-rw-r--r-- | app/assets/javascripts/awards_handler.coffee | 213 |
1 files changed, 100 insertions, 113 deletions
diff --git a/app/assets/javascripts/awards_handler.coffee b/app/assets/javascripts/awards_handler.coffee index bf95e06b4e5..105b0c34e95 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() |