diff options
Diffstat (limited to 'app/assets/javascripts/awards_handler.js')
-rw-r--r-- | app/assets/javascripts/awards_handler.js | 55 |
1 files changed, 33 insertions, 22 deletions
diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js index 70f20c5c7cf..e34db893989 100644 --- a/app/assets/javascripts/awards_handler.js +++ b/app/assets/javascripts/awards_handler.js @@ -33,19 +33,24 @@ const categoryLabelMap = { const IS_VISIBLE = 'is-visible'; const IS_RENDERED = 'is-rendered'; -class AwardsHandler { +export class AwardsHandler { constructor(emoji) { this.emoji = emoji; this.eventListeners = []; + this.toggleButtonSelector = '.js-add-award'; + this.menuClass = 'js-award-emoji-menu'; + } + + bindEvents() { // If the user shows intent let's pre-build the menu this.registerEventListener( 'one', $(document), 'mouseenter focus', - '.js-add-award', + this.toggleButtonSelector, 'mouseenter focus', () => { - const $menu = $('.emoji-menu'); + const $menu = $(`.${this.menuClass}`); if ($menu.length === 0) { requestAnimationFrame(() => { this.createEmojiMenu(); @@ -53,7 +58,7 @@ class AwardsHandler { } }, ); - this.registerEventListener('on', $(document), 'click', '.js-add-award', e => { + this.registerEventListener('on', $(document), 'click', this.toggleButtonSelector, e => { e.stopPropagation(); e.preventDefault(); this.showEmojiMenu($(e.currentTarget)); @@ -61,15 +66,17 @@ class AwardsHandler { this.registerEventListener('on', $('html'), 'click', e => { const $target = $(e.target); - if (!$target.closest('.emoji-menu').length) { + if (!$target.closest(`.${this.menuClass}`).length) { $('.js-awards-block.current').removeClass('current'); - if ($('.emoji-menu').is(':visible')) { - $('.js-add-award.is-active').removeClass('is-active'); - this.hideMenuElement($('.emoji-menu')); + if ($(`.${this.menuClass}`).is(':visible')) { + $(`${this.toggleButtonSelector}.is-active`).removeClass('is-active'); + this.hideMenuElement($(`.${this.menuClass}`)); } } }); - this.registerEventListener('on', $(document), 'click', '.js-emoji-btn', e => { + + const emojiButtonSelector = `.js-awards-block .js-emoji-btn, .${this.menuClass} .js-emoji-btn`; + this.registerEventListener('on', $(document), 'click', emojiButtonSelector, e => { e.preventDefault(); const $target = $(e.currentTarget); const $glEmojiElement = $target.find('gl-emoji'); @@ -101,7 +108,7 @@ class AwardsHandler { $addBtn.closest('.js-awards-block').addClass('current'); } - const $menu = $('.emoji-menu'); + const $menu = $(`.${this.menuClass}`); const $thumbsBtn = $menu.find('[data-name="thumbsup"], [data-name="thumbsdown"]').parent(); const $userAuthored = this.isUserAuthored($addBtn); if ($menu.length) { @@ -118,7 +125,7 @@ class AwardsHandler { } else { $addBtn.addClass('is-loading is-active'); this.createEmojiMenu(() => { - const $createdMenu = $('.emoji-menu'); + const $createdMenu = $(`.${this.menuClass}`); $addBtn.removeClass('is-loading'); this.positionMenu($createdMenu, $addBtn); return setTimeout(() => { @@ -156,7 +163,7 @@ class AwardsHandler { } const emojiMenuMarkup = ` - <div class="emoji-menu"> + <div class="emoji-menu ${this.menuClass}"> <input type="text" name="emoji-menu-search" value="" class="js-emoji-menu-search emoji-search search-input form-control" placeholder="Search emoji" /> <div class="emoji-menu-content"> @@ -185,7 +192,7 @@ class AwardsHandler { // Avoid the jank and render the remaining categories separately // This will take more time, but makes UI more responsive - const menu = document.querySelector('.emoji-menu'); + const menu = document.querySelector(`.${this.menuClass}`); const emojiContentElement = menu.querySelector('.emoji-menu-content'); const remainingCategories = Object.keys(categoryMap).slice(1); const allCategoriesAddedPromise = remainingCategories.reduce( @@ -270,9 +277,9 @@ class AwardsHandler { if (isInVueNoteablePage() && !isMainAwardsBlock) { const id = votesBlock.attr('id').replace('note_', ''); - this.hideMenuElement($('.emoji-menu')); + this.hideMenuElement($(`.${this.menuClass}`)); - $('.js-add-award.is-active').removeClass('is-active'); + $(`${this.toggleButtonSelector}.is-active`).removeClass('is-active'); const toggleAwardEvent = new CustomEvent('toggleAward', { detail: { awardName: emoji, @@ -291,9 +298,9 @@ class AwardsHandler { return typeof callback === 'function' ? callback() : undefined; }); - this.hideMenuElement($('.emoji-menu')); + this.hideMenuElement($(`.${this.menuClass}`)); - return $('.js-add-award.is-active').removeClass('is-active'); + return $(`${this.toggleButtonSelector}.is-active`).removeClass('is-active'); } addAwardToEmojiBar(votesBlock, emoji, checkForMutuality) { @@ -321,7 +328,7 @@ class AwardsHandler { getVotesBlock() { if (isInVueNoteablePage()) { - const $el = $('.js-add-award.is-active').closest('.note.timeline-entry'); + const $el = $(`${this.toggleButtonSelector}.is-active`).closest('.note.timeline-entry'); if ($el.length) { return $el; @@ -458,7 +465,7 @@ class AwardsHandler { } createEmoji(votesBlock, emoji) { - if ($('.emoji-menu').length) { + if ($(`.${this.menuClass}`).length) { this.createAwardButtonForVotesBlock(votesBlock, emoji); } this.createEmojiMenu(() => { @@ -538,7 +545,7 @@ class AwardsHandler { this.searchEmojis(term); }); - const $menu = $('.emoji-menu'); + const $menu = $(`.${this.menuClass}`); this.registerEventListener('on', $menu, transitionEndEventString, e => { if (e.target === e.currentTarget) { // Clear the search @@ -608,7 +615,7 @@ class AwardsHandler { this.eventListeners.forEach(entry => { entry.element.off.call(entry.element, ...entry.args); }); - $('.emoji-menu').remove(); + $(`.${this.menuClass}`).remove(); } } @@ -616,7 +623,11 @@ let awardsHandlerPromise = null; export default function loadAwardsHandler(reload = false) { if (!awardsHandlerPromise || reload) { awardsHandlerPromise = import(/* webpackChunkName: 'emoji' */ './emoji').then( - Emoji => new AwardsHandler(Emoji), + Emoji => { + const awardsHandler = new AwardsHandler(Emoji); + awardsHandler.bindEvents(); + return awardsHandler; + }, ); } return awardsHandlerPromise; |