diff options
author | Alfredo Sumaran <alfredo@gitlab.com> | 2017-04-17 05:35:34 +0000 |
---|---|---|
committer | Alfredo Sumaran <alfredo@gitlab.com> | 2017-04-17 05:35:34 +0000 |
commit | eeaeb2752a589c9046659d58d4a3f6be8030b699 (patch) | |
tree | 931f3ff83b20a1ba6fce6f8eeb7f05d7852f10aa | |
parent | f78ecda55d5431f9a74ab2892b516ecb45f24d80 (diff) | |
parent | 0370c7c8389c43138b11c3c5167993d5b025933a (diff) | |
download | gitlab-ce-eeaeb2752a589c9046659d58d4a3f6be8030b699.tar.gz |
Merge branch '27655-clear-emoji-search-after-selection' into 'master'
Clear emoji search in awards menu after picking emoji
Closes #27655
See merge request !10524
-rw-r--r-- | app/assets/javascripts/awards_handler.js | 53 | ||||
-rw-r--r-- | changelogs/unreleased/27655-clear-emoji-search-after-selection.yml | 4 | ||||
-rw-r--r-- | features/steps/project/issues/award_emoji.rb | 6 | ||||
-rw-r--r-- | spec/javascripts/awards_handler_spec.js | 28 |
4 files changed, 67 insertions, 24 deletions
diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js index d8a73b0f5e7..f93208944a1 100644 --- a/app/assets/javascripts/awards_handler.js +++ b/app/assets/javascripts/awards_handler.js @@ -8,6 +8,7 @@ import { glEmojiTag } from './behaviors/gl_emoji'; import isEmojiNameValid from './behaviors/gl_emoji/is_emoji_name_valid'; const animationEndEventString = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd'; +const transitionEndEventString = 'transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd'; const requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || @@ -105,8 +106,9 @@ function AwardsHandler() { const $glEmojiElement = $target.find('gl-emoji'); const $spriteIconElement = $target.find('.icon'); const emoji = ($glEmojiElement.length ? $glEmojiElement : $spriteIconElement).data('name'); + $target.closest('.js-awards-block').addClass('current'); - return this.addAward(this.getVotesBlock(), this.getAwardUrl(), emoji); + this.addAward(this.getVotesBlock(), this.getAwardUrl(), emoji); }); } @@ -132,12 +134,12 @@ AwardsHandler.prototype.showEmojiMenu = function showEmojiMenu($addBtn) { if ($menu.is('.is-visible')) { $addBtn.removeClass('is-active'); $menu.removeClass('is-visible'); - $('#emoji_search').blur(); + $('.js-emoji-menu-search').blur(); } else { $addBtn.addClass('is-active'); this.positionMenu($menu, $addBtn); $menu.addClass('is-visible'); - $('#emoji_search').focus(); + $('.js-emoji-menu-search').focus(); } } else { $addBtn.addClass('is-loading is-active'); @@ -147,7 +149,7 @@ AwardsHandler.prototype.showEmojiMenu = function showEmojiMenu($addBtn) { this.positionMenu($createdMenu, $addBtn); return setTimeout(() => { $createdMenu.addClass('is-visible'); - $('#emoji_search').focus(); + $('.js-emoji-menu-search').focus(); }, 200); }); } @@ -180,7 +182,7 @@ AwardsHandler.prototype.createEmojiMenu = function createEmojiMenu(callback) { const emojiMenuMarkup = ` <div class="emoji-menu"> - <input type="text" name="emoji_search" id="emoji_search" value="" class="emoji-search search-input form-control" placeholder="Search emoji" /> + <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"> ${frequentlyUsedCatgegory} @@ -500,24 +502,41 @@ AwardsHandler.prototype.getFrequentlyUsedEmojis = function getFrequentlyUsedEmoj }; AwardsHandler.prototype.setupSearch = function setupSearch() { - this.registerEventListener('on', $('input.emoji-search'), 'input', (e) => { + const $search = $('.js-emoji-menu-search'); + + this.registerEventListener('on', $search, 'input', (e) => { const term = $(e.target).val().trim(); - // Clean previous search results - $('ul.emoji-menu-search, h5.emoji-search-title').remove(); - if (term.length > 0) { - // Generate a search result block - const h5 = $('<h5 class="emoji-search-title"/>').text('Search results'); - const foundEmojis = this.searchEmojis(term).show(); - const 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); - } else { - $('.emoji-menu-content').children().show(); + this.searchEmojis(term); + }); + + const $menu = $('.emoji-menu'); + this.registerEventListener('on', $menu, transitionEndEventString, (e) => { + if (e.target === e.currentTarget) { + // Clear the search + this.searchEmojis(''); } }); }; AwardsHandler.prototype.searchEmojis = function searchEmojis(term) { + const $search = $('.js-emoji-menu-search'); + $search.val(term); + + // Clean previous search results + $('ul.emoji-menu-search, h5.emoji-search-title').remove(); + if (term.length > 0) { + // Generate a search result block + const h5 = $('<h5 class="emoji-search-title"/>').text('Search results'); + const foundEmojis = this.findMatchingEmojiElements(term).show(); + const 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); + } else { + $('.emoji-menu-content').children().show(); + } +}; + +AwardsHandler.prototype.findMatchingEmojiElements = function findMatchingEmojiElements(term) { const safeTerm = term.toLowerCase(); const namesMatchingAlias = []; diff --git a/changelogs/unreleased/27655-clear-emoji-search-after-selection.yml b/changelogs/unreleased/27655-clear-emoji-search-after-selection.yml new file mode 100644 index 00000000000..5fd02696323 --- /dev/null +++ b/changelogs/unreleased/27655-clear-emoji-search-after-selection.yml @@ -0,0 +1,4 @@ +--- +title: Clear emoji search in awards menu after picking emoji +merge_request: +author: diff --git a/features/steps/project/issues/award_emoji.rb b/features/steps/project/issues/award_emoji.rb index a4cfc1fb8c8..dfd0bc13305 100644 --- a/features/steps/project/issues/award_emoji.rb +++ b/features/steps/project/issues/award_emoji.rb @@ -87,7 +87,7 @@ class Spinach::Features::AwardEmoji < Spinach::FeatureSteps end step 'I search "hand"' do - fill_in 'emoji_search', with: 'hand' + fill_in 'emoji-menu-search', with: 'hand' end step 'I see search result for "hand"' do @@ -101,7 +101,7 @@ class Spinach::Features::AwardEmoji < Spinach::FeatureSteps end step 'The search field is focused' do - expect(page).to have_selector('#emoji_search') - expect(page.evaluate_script('document.activeElement.id')).to eq('emoji_search') + expect(page).to have_selector('.js-emoji-menu-search') + expect(page.evaluate_script("document.activeElement.classList.contains('js-emoji-menu-search')")).to eq(true) end end diff --git a/spec/javascripts/awards_handler_spec.js b/spec/javascripts/awards_handler_spec.js index d6d50304086..68ad5f66676 100644 --- a/spec/javascripts/awards_handler_spec.js +++ b/spec/javascripts/awards_handler_spec.js @@ -65,7 +65,7 @@ require('~/lib/utils/common_utils'); $emojiMenu = $('.emoji-menu'); expect($emojiMenu.length).toBe(1); expect($emojiMenu.hasClass('is-visible')).toBe(true); - expect($emojiMenu.find('#emoji_search').length).toBe(1); + expect($emojiMenu.find('.js-emoji-menu-search').length).toBe(1); return expect($('.js-awards-block.current').length).toBe(1); }); }); @@ -217,16 +217,35 @@ require('~/lib/utils/common_utils'); return expect($thumbsUpEmoji.data("original-title")).toBe('sam'); }); }); - describe('search', function() { - return it('should filter the emoji', function(done) { + describe('::searchEmojis', () => { + it('should filter the emoji', function(done) { return openAndWaitForEmojiMenu() .then(() => { expect($('[data-name=angel]').is(':visible')).toBe(true); expect($('[data-name=anger]').is(':visible')).toBe(true); - $('#emoji_search').val('ali').trigger('input'); + awardsHandler.searchEmojis('ali'); expect($('[data-name=angel]').is(':visible')).toBe(false); expect($('[data-name=anger]').is(':visible')).toBe(false); expect($('[data-name=alien]').is(':visible')).toBe(true); + expect($('.js-emoji-menu-search').val()).toBe('ali'); + }) + .then(done) + .catch((err) => { + done.fail(`Failed to open and build emoji menu: ${err.message}`); + }); + }); + it('should clear the search when searching for nothing', function(done) { + return openAndWaitForEmojiMenu() + .then(() => { + awardsHandler.searchEmojis('ali'); + expect($('[data-name=angel]').is(':visible')).toBe(false); + expect($('[data-name=anger]').is(':visible')).toBe(false); + expect($('[data-name=alien]').is(':visible')).toBe(true); + awardsHandler.searchEmojis(''); + expect($('[data-name=angel]').is(':visible')).toBe(true); + expect($('[data-name=anger]').is(':visible')).toBe(true); + expect($('[data-name=alien]').is(':visible')).toBe(true); + expect($('.js-emoji-menu-search').val()).toBe(''); }) .then(done) .catch((err) => { @@ -234,6 +253,7 @@ require('~/lib/utils/common_utils'); }); }); }); + describe('emoji menu', function() { const emojiSelector = '[data-name="sunglasses"]'; const openEmojiMenuAndAddEmoji = function() { |