Commit 3f5919e2 authored by Eric Eastwood's avatar Eric Eastwood

Add frequently used emojis back to awards menu

Thanks @filipa for the shout`
parent 130fd255
...@@ -45,12 +45,12 @@ function buildCategoryMap() { ...@@ -45,12 +45,12 @@ function buildCategoryMap() {
}); });
} }
function renderCategory(name, emojiList) { function renderCategory(name, emojiList, opts = {}) {
return ` return `
<h5 class="emoji-menu-title"> <h5 class="emoji-menu-title">
${name} ${name}
</h5> </h5>
<ul class="clearfix emoji-menu-list"> <ul class="clearfix emoji-menu-list ${opts.menuListClass}">
${emojiList.map(emojiName => ` ${emojiList.map(emojiName => `
<li class="emoji-menu-list-item"> <li class="emoji-menu-list-item">
<button class="emoji-menu-btn text-center js-emoji-btn" type="button"> <button class="emoji-menu-btn text-center js-emoji-btn" type="button">
...@@ -140,9 +140,6 @@ AwardsHandler.prototype.showEmojiMenu = function showEmojiMenu($addBtn) { ...@@ -140,9 +140,6 @@ AwardsHandler.prototype.showEmojiMenu = function showEmojiMenu($addBtn) {
const $createdMenu = $('.emoji-menu'); const $createdMenu = $('.emoji-menu');
$addBtn.removeClass('is-loading'); $addBtn.removeClass('is-loading');
this.positionMenu($createdMenu, $addBtn); this.positionMenu($createdMenu, $addBtn);
if (!this.frequentEmojiBlockRendered) {
this.renderFrequentlyUsedBlock();
}
return setTimeout(() => { return setTimeout(() => {
$createdMenu.addClass('is-visible'); $createdMenu.addClass('is-visible');
$('#emoji_search').focus(); $('#emoji_search').focus();
...@@ -165,11 +162,21 @@ AwardsHandler.prototype.createEmojiMenu = function createEmojiMenu(callback) { ...@@ -165,11 +162,21 @@ AwardsHandler.prototype.createEmojiMenu = function createEmojiMenu(callback) {
const emojisInCategory = categoryMap[categoryNameKey]; const emojisInCategory = categoryMap[categoryNameKey];
const firstCategory = renderCategory(categoryLabelMap[categoryNameKey], emojisInCategory); const firstCategory = renderCategory(categoryLabelMap[categoryNameKey], emojisInCategory);
// Render the frequently used
const frequentlyUsedEmojis = this.getFrequentlyUsedEmojis();
let frequentlyUsedCatgegory = '';
if (frequentlyUsedEmojis.length > 0) {
frequentlyUsedCatgegory = renderCategory('Frequently used', frequentlyUsedEmojis, {
menuListClass: 'frequent-emojis',
});
}
const emojiMenuMarkup = ` const emojiMenuMarkup = `
<div class="emoji-menu"> <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_search" id="emoji_search" value="" class="emoji-search search-input form-control" placeholder="Search emoji" />
<div class="emoji-menu-content"> <div class="emoji-menu-content">
${frequentlyUsedCatgegory}
${firstCategory} ${firstCategory}
</div> </div>
</div> </div>
...@@ -457,19 +464,6 @@ AwardsHandler.prototype.getFrequentlyUsedEmojis = function getFrequentlyUsedEmoj ...@@ -457,19 +464,6 @@ AwardsHandler.prototype.getFrequentlyUsedEmojis = function getFrequentlyUsedEmoj
return _.compact(_.uniq(frequentlyUsedEmojis)); return _.compact(_.uniq(frequentlyUsedEmojis));
}; };
AwardsHandler.prototype.renderFrequentlyUsedBlock = function renderFrequentlyUsedBlock() {
if (Cookies.get('frequently_used_emojis')) {
const frequentlyUsedEmojis = this.getFrequentlyUsedEmojis();
const ul = $('<ul class="clearfix emoji-menu-list frequent-emojis">');
for (let i = 0, len = frequentlyUsedEmojis.length; i < len; i += 1) {
const emoji = frequentlyUsedEmojis[i];
$(`.emoji-menu-content [data-name="${emoji}"]`).closest('li').clone().appendTo(ul);
}
$('.emoji-menu-content').prepend(ul).prepend($('<h5>').text('Frequently used'));
}
this.frequentEmojiBlockRendered = true;
};
AwardsHandler.prototype.setupSearch = function setupSearch() { AwardsHandler.prototype.setupSearch = function setupSearch() {
this.registerEventListener('on', $('input.emoji-search'), 'input', (e) => { this.registerEventListener('on', $('input.emoji-search'), 'input', (e) => {
const term = $(e.target).val().trim(); const term = $(e.target).val().trim();
......
---
title: Add frequently used emojis back to awards menu
merge_request:
author:
/* eslint-disable space-before-function-paren, no-var, one-var, one-var-declaration-per-line, no-unused-expressions, comma-dangle, new-parens, no-unused-vars, quotes, jasmine/no-spec-dupes, prefer-template, max-len */ /* eslint-disable space-before-function-paren, no-var, one-var, one-var-declaration-per-line, no-unused-expressions, comma-dangle, new-parens, no-unused-vars, quotes, jasmine/no-spec-dupes, prefer-template, max-len */
import promisePolyfill from 'es6-promise'; import promisePolyfill from 'es6-promise';
import Cookies from 'js-cookie';
import AwardsHandler from '~/awards_handler'; import AwardsHandler from '~/awards_handler';
promisePolyfill.polyfill(); promisePolyfill.polyfill();
...@@ -208,8 +209,8 @@ promisePolyfill.polyfill(); ...@@ -208,8 +209,8 @@ promisePolyfill.polyfill();
expect($('[data-name=alien]').is(':visible')).toBe(true); expect($('[data-name=alien]').is(':visible')).toBe(true);
}) })
.then(done) .then(done)
.catch(() => { .catch((err) => {
done.fail('Failed to open and build emoji menu'); done.fail(`Failed to open and build emoji menu: ${err.message}`);
}); });
}); });
}); });
...@@ -232,8 +233,8 @@ promisePolyfill.polyfill(); ...@@ -232,8 +233,8 @@ promisePolyfill.polyfill();
it('should add selected emoji to awards block', function(done) { it('should add selected emoji to awards block', function(done) {
return openEmojiMenuAndAddEmoji() return openEmojiMenuAndAddEmoji()
.then(done) .then(done)
.catch(() => { .catch((err) => {
done.fail('Failed to open and build emoji menu'); done.fail(`Failed to open and build emoji menu: ${err.message}`);
}); });
}); });
it('should remove already selected emoji', function(done) { it('should remove already selected emoji', function(done) {
...@@ -247,7 +248,46 @@ promisePolyfill.polyfill(); ...@@ -247,7 +248,46 @@ promisePolyfill.polyfill();
}) })
.then(done) .then(done)
.catch((err) => { .catch((err) => {
done.fail('Failed to open and build emoji menu'); done.fail(`Failed to open and build emoji menu: ${err.message}`);
});
});
});
describe('frequently used emojis', function() {
beforeEach(() => {
// Clear it out
Cookies.set('frequently_used_emojis', '');
});
it('shouldn\'t have any "Frequently used" heading if no frequently used emojis', function(done) {
return openAndWaitForEmojiMenu()
.then(() => {
const emojiMenu = document.querySelector('.emoji-menu');
Array.prototype.forEach.call(emojiMenu.querySelectorAll('.emoji-menu-title'), (title) => {
expect(title.textContent.trim().toLowerCase()).not.toBe('frequently used');
});
})
.then(done)
.catch((err) => {
done.fail(`Failed to open and build emoji menu: ${err.message}`);
});
});
it('should have any frequently used section when there are frequently used emojis', function(done) {
awardsHandler.addEmojiToFrequentlyUsedList('8ball');
return openAndWaitForEmojiMenu()
.then(() => {
const emojiMenu = document.querySelector('.emoji-menu');
const hasFrequentlyUsedHeading = Array.prototype.some.call(emojiMenu.querySelectorAll('.emoji-menu-title'), title =>
title.textContent.trim().toLowerCase() === 'frequently used'
);
expect(hasFrequentlyUsedHeading).toBe(true);
})
.then(done)
.catch((err) => {
done.fail(`Failed to open and build emoji menu: ${err.message}`);
}); });
}); });
}); });
......
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