Skip to content

G
gitlab-ce
Commit bf0b3d83 authored by Jacob Schatz's avatar Jacob Schatz
Browse files
Options

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

Refactor AwardsHandler into ES class syntax

See merge request !12239
parents 826d5b7b 3b4c07ac
Show whitespace changes
Inline Side-by-side
Showing with 374 additions and 379 deletions
app/assets/javascripts/awards_handler.js
View file @ bf0b3d83
/* 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;
}
}
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7