Merge branch 'awards-handler-class-syntax' into 'master'

Refactor AwardsHandler into ES class syntax

See merge request !12239

app/assets/javascripts/awards_handler.js

+/* eslint-disable class-methods-use-this */
 /* global Flash */
 
 import Cookies from 'js-cookie';
@@ -68,7 +69,8 @@ function renderCategory(name, emojiList, opts = {}) {
   `;
 }
 
-function AwardsHandler() {
+export default class AwardsHandler {
+  constructor() {
     this.eventListeners = [];
     this.aliases = emojiAliases;
     // If the user shows intent let's pre-build the menu
@@ -110,17 +112,17 @@ function AwardsHandler() {
       $target.closest('.js-awards-block').addClass('current');
       this.addAward(this.getVotesBlock(), this.getAwardUrl(), emoji);
     });
-}
+  }
 
-AwardsHandler.prototype.registerEventListener = function registerEventListener(method = 'on', element, ...args) {
+  registerEventListener(method = 'on', element, ...args) {
     element[method].call(element, ...args);
     this.eventListeners.push({
       element,
       args,
     });
-};
+  }
 
-AwardsHandler.prototype.showEmojiMenu = function showEmojiMenu($addBtn) {
+  showEmojiMenu($addBtn) {
     if ($addBtn.hasClass('js-note-emoji')) {
       $addBtn.closest('.note').find('.js-awards-block').addClass('current');
     } else {
@@ -155,11 +157,11 @@ AwardsHandler.prototype.showEmojiMenu = function showEmojiMenu($addBtn) {
     }
 
     $thumbsBtn.toggleClass('disabled', $userAuthored);
-};
+  }
 
-// Create the emoji menu with the first category of emojis.
-// Then render the remaining categories of emojis one by one to avoid jank.
-AwardsHandler.prototype.createEmojiMenu = function createEmojiMenu(callback) {
+  // Create the emoji menu with the first category of emojis.
+  // Then render the remaining categories of emojis one by one to avoid jank.
+  createEmojiMenu(callback) {
     if (this.isCreatingEmojiMenu) {
       return;
     }
@@ -198,11 +200,9 @@ AwardsHandler.prototype.createEmojiMenu = function createEmojiMenu(callback) {
     if (callback) {
       callback();
     }
-};
+  }
 
-AwardsHandler
-  .prototype
-  .addRemainingEmojiMenuCategories = function addRemainingEmojiMenuCategories() {
+  addRemainingEmojiMenuCategories() {
     if (this.isAddingRemainingEmojiMenuCategories) {
       return;
     }
@@ -243,9 +243,9 @@ AwardsHandler
       emojiContentElement.insertAdjacentHTML('beforeend', '<p>We encountered an error while adding the remaining categories</p>');
       throw new Error(`Error occurred in addRemainingEmojiMenuCategories: ${err.message}`);
     });
-  };
+  }
 
-AwardsHandler.prototype.positionMenu = function positionMenu($menu, $addBtn) {
+  positionMenu($menu, $addBtn) {
     const 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
@@ -260,15 +260,15 @@ AwardsHandler.prototype.positionMenu = function positionMenu($menu, $addBtn) {
       $menu.removeClass('is-aligned-right');
     }
     return $menu.css(css);
-};
+  }
 
-AwardsHandler.prototype.addAward = function addAward(
+  addAward(
     votesBlock,
     awardUrl,
     emoji,
     checkMutuality,
     callback,
-) {
+  ) {
     const normalizedEmoji = this.normalizeEmojiName(emoji);
     const $emojiButton = this.findEmojiIcon(votesBlock, normalizedEmoji).parent();
     this.postEmoji($emojiButton, awardUrl, normalizedEmoji, () => {
@@ -277,13 +277,13 @@ AwardsHandler.prototype.addAward = function addAward(
     });
     $('.emoji-menu').removeClass('is-visible');
     $('.js-add-award.is-active').removeClass('is-active');
-};
+  }
 
-AwardsHandler.prototype.addAwardToEmojiBar = function addAwardToEmojiBar(
+  addAwardToEmojiBar(
     votesBlock,
     emoji,
     checkForMutuality,
-) {
+  ) {
     if (checkForMutuality || checkForMutuality === null) {
       this.checkMutuality(votesBlock, emoji);
     }
@@ -304,9 +304,9 @@ AwardsHandler.prototype.addAwardToEmojiBar = function addAwardToEmojiBar(
       votesBlock.removeClass('hidden');
       this.createEmoji(votesBlock, normalizedEmoji);
     }
-};
+  }
 
-AwardsHandler.prototype.getVotesBlock = function getVotesBlock() {
+  getVotesBlock() {
     const currentBlock = $('.js-awards-block.current');
     let resultantVotesBlock = currentBlock;
     if (currentBlock.length === 0) {
@@ -314,13 +314,13 @@ AwardsHandler.prototype.getVotesBlock = function getVotesBlock() {
     }
 
     return resultantVotesBlock;
-};
+  }
 
-AwardsHandler.prototype.getAwardUrl = function getAwardUrl() {
+  getAwardUrl() {
     return this.getVotesBlock().data('award-url');
-};
+  }
 
-AwardsHandler.prototype.checkMutuality = function checkMutuality(votesBlock, emoji) {
+  checkMutuality(votesBlock, emoji) {
     const awardUrl = this.getAwardUrl();
     if (emoji === 'thumbsup' || emoji === 'thumbsdown') {
       const mutualVote = emoji === 'thumbsup' ? 'thumbsdown' : 'thumbsup';
@@ -330,17 +330,17 @@ AwardsHandler.prototype.checkMutuality = function checkMutuality(votesBlock, emo
         this.addAward(votesBlock, awardUrl, mutualVote, false);
       }
     }
-};
+  }
 
-AwardsHandler.prototype.isActive = function isActive($emojiButton) {
+  isActive($emojiButton) {
     return $emojiButton.hasClass('active');
-};
+  }
 
-AwardsHandler.prototype.isUserAuthored = function isUserAuthored($button) {
+  isUserAuthored($button) {
     return $button.hasClass('js-user-authored');
-};
+  }
 
-AwardsHandler.prototype.decrementCounter = function decrementCounter($emojiButton, emoji) {
+  decrementCounter($emojiButton, emoji) {
     const counter = $('.js-counter', $emojiButton);
     const counterNumber = parseInt(counter.text(), 10);
     if (counterNumber > 1) {
@@ -357,22 +357,22 @@ AwardsHandler.prototype.decrementCounter = function decrementCounter($emojiButto
       this.removeEmoji($emojiButton);
     }
     return $emojiButton.removeClass('active');
-};
+  }
 
-AwardsHandler.prototype.removeEmoji = function removeEmoji($emojiButton) {
+  removeEmoji($emojiButton) {
     $emojiButton.tooltip('destroy');
     $emojiButton.remove();
     const $votesBlock = this.getVotesBlock();
     if ($votesBlock.find('.js-emoji-btn').length === 0) {
       $votesBlock.addClass('hidden');
     }
-};
+  }
 
-AwardsHandler.prototype.getAwardTooltip = function getAwardTooltip($awardBlock) {
+  getAwardTooltip($awardBlock) {
     return $awardBlock.attr('data-original-title') || $awardBlock.attr('data-title') || '';
-};
+  }
 
-AwardsHandler.prototype.toSentence = function toSentence(list) {
+  toSentence(list) {
     let sentence;
     if (list.length <= 2) {
       sentence = list.join(' and ');
@@ -381,9 +381,9 @@ AwardsHandler.prototype.toSentence = function toSentence(list) {
     }
 
     return sentence;
-};
+  }
 
-AwardsHandler.prototype.removeYouFromUserList = function removeYouFromUserList($emojiButton) {
+  removeYouFromUserList($emojiButton) {
     const awardBlock = $emojiButton;
     const originalTitle = this.getAwardTooltip(awardBlock);
     const authors = originalTitle.split(FROM_SENTENCE_REGEX);
@@ -395,9 +395,9 @@ AwardsHandler.prototype.removeYouFromUserList = function removeYouFromUserList($
       .removeAttr('data-original-title')
       .attr('title', this.toSentence(authors))
       .tooltip('fixTitle');
-};
+  }
 
-AwardsHandler.prototype.addYouToUserList = function addYouToUserList(votesBlock, emoji) {
+  addYouToUserList(votesBlock, emoji) {
     const awardBlock = this.findEmojiIcon(votesBlock, emoji).parent();
     const origTitle = this.getAwardTooltip(awardBlock);
     let users = [];
@@ -408,11 +408,9 @@ AwardsHandler.prototype.addYouToUserList = function addYouToUserList(votesBlock,
     return awardBlock
       .attr('title', this.toSentence(users))
       .tooltip('fixTitle');
-};
+  }
 
-AwardsHandler
-  .prototype
-  .createAwardButtonForVotesBlock = function createAwardButtonForVotesBlock(votesBlock, emojiName) {
+  createAwardButtonForVotesBlock(votesBlock, emojiName) {
     const buttonHtml = `
       <button class="btn award-control js-emoji-btn has-tooltip active" title="You" data-placement="bottom">
         ${glEmojiTag(emojiName)}
@@ -424,27 +422,27 @@ AwardsHandler
     this.animateEmoji($emojiButton);
     $('.award-control').tooltip();
     votesBlock.removeClass('current');
-  };
+  }
 
-AwardsHandler.prototype.animateEmoji = function animateEmoji($emoji) {
+  animateEmoji($emoji) {
     const className = 'pulse animated once short';
     $emoji.addClass(className);
 
     this.registerEventListener('on', $emoji, animationEndEventString, (e) => {
       $(e.currentTarget).removeClass(className);
     });
-};
+  }
 
-AwardsHandler.prototype.createEmoji = function createEmoji(votesBlock, emoji) {
+  createEmoji(votesBlock, emoji) {
     if ($('.emoji-menu').length) {
       this.createAwardButtonForVotesBlock(votesBlock, emoji);
     }
     this.createEmojiMenu(() => {
       this.createAwardButtonForVotesBlock(votesBlock, emoji);
     });
-};
+  }
 
-AwardsHandler.prototype.postEmoji = function postEmoji($emojiButton, awardUrl, emoji, callback) {
+  postEmoji($emojiButton, awardUrl, emoji, callback) {
     if (this.isUserAuthored($emojiButton)) {
       this.userAuthored($emojiButton);
     } else {
@@ -456,13 +454,13 @@ AwardsHandler.prototype.postEmoji = function postEmoji($emojiButton, awardUrl, e
         }
       }).fail(() => new Flash('Something went wrong on our end.'));
     }
-};
+  }
 
-AwardsHandler.prototype.findEmojiIcon = function findEmojiIcon(votesBlock, emoji) {
+  findEmojiIcon(votesBlock, emoji) {
     return votesBlock.find(`.js-emoji-btn [data-name="${emoji}"]`);
-};
+  }
 
-AwardsHandler.prototype.userAuthored = function userAuthored($emojiButton) {
+  userAuthored($emojiButton) {
     const oldTitle = this.getAwardTooltip($emojiButton);
     const newTitle = 'You cannot vote on your own issue, MR and note';
     gl.utils.updateTooltipTitle($emojiButton, newTitle).tooltip('show');
@@ -471,29 +469,27 @@ AwardsHandler.prototype.userAuthored = function userAuthored($emojiButton) {
       $emojiButton.tooltip('hide');
       gl.utils.updateTooltipTitle($emojiButton, oldTitle);
     }, 2800);
-};
+  }
 
-AwardsHandler.prototype.scrollToAwards = function scrollToAwards() {
+  scrollToAwards() {
     const options = {
       scrollTop: $('.awards').offset().top - 110,
     };
     return $('body, html').animate(options, 200);
-};
+  }
 
-AwardsHandler.prototype.normalizeEmojiName = function normalizeEmojiName(emoji) {
+  normalizeEmojiName(emoji) {
     return Object.prototype.hasOwnProperty.call(this.aliases, emoji) ? this.aliases[emoji] : emoji;
-};
+  }
 
-AwardsHandler
-  .prototype
-  .addEmojiToFrequentlyUsedList = function addEmojiToFrequentlyUsedList(emoji) {
+  addEmojiToFrequentlyUsedList(emoji) {
     if (isEmojiNameValid(emoji)) {
       this.frequentlyUsedEmojis = _.uniq(this.getFrequentlyUsedEmojis().concat(emoji));
       Cookies.set('frequently_used_emojis', this.frequentlyUsedEmojis.join(','), { expires: 365 });
     }
-  };
+  }
 
-AwardsHandler.prototype.getFrequentlyUsedEmojis = function getFrequentlyUsedEmojis() {
+  getFrequentlyUsedEmojis() {
     return this.frequentlyUsedEmojis || (() => {
       const frequentlyUsedEmojis = _.uniq((Cookies.get('frequently_used_emojis') || '').split(','));
       this.frequentlyUsedEmojis = frequentlyUsedEmojis.filter(
@@ -502,9 +498,9 @@ AwardsHandler.prototype.getFrequentlyUsedEmojis = function getFrequentlyUsedEmoj
 
       return this.frequentlyUsedEmojis;
     })();
-};
+  }
 
-AwardsHandler.prototype.setupSearch = function setupSearch() {
+  setupSearch() {
     const $search = $('.js-emoji-menu-search');
 
     this.registerEventListener('on', $search, 'input', (e) => {
@@ -519,9 +515,9 @@ AwardsHandler.prototype.setupSearch = function setupSearch() {
         this.searchEmojis('');
       }
     });
-};
+  }
 
-AwardsHandler.prototype.searchEmojis = function searchEmojis(term) {
+  searchEmojis(term) {
     const $search = $('.js-emoji-menu-search');
     $search.val(term);
 
@@ -537,9 +533,9 @@ AwardsHandler.prototype.searchEmojis = function searchEmojis(term) {
     } else {
       $('.emoji-menu-content').children().show();
     }
-};
+  }
 
-AwardsHandler.prototype.findMatchingEmojiElements = function findMatchingEmojiElements(term) {
+  findMatchingEmojiElements(term) {
     const safeTerm = term.toLowerCase();
 
     const namesMatchingAlias = [];
@@ -555,13 +551,12 @@ AwardsHandler.prototype.findMatchingEmojiElements = function findMatchingEmojiEl
         $([]),
       );
     return $matchingElements.closest('li').clone();
-};
+  }
 
-AwardsHandler.prototype.destroy = function destroy() {
+  destroy() {
     this.eventListeners.forEach((entry) => {
       entry.element.off.call(entry.element, ...entry.args);
     });
     $('.emoji-menu').remove();
-};
-
-export default AwardsHandler;
+  }
+}