Commit b3e34a06 authored by JC Brand's avatar JC Brand

Turn the emoji picker into a web component

parent be20b8e1
......@@ -64,16 +64,18 @@ describe("Emojis", function () {
expect(visible_emojis[2].getAttribute('data-emoji')).toBe(':grinning:');
// Test that TAB autocompletes the to first match
view.emoji_picker_view.onKeyDown(tab_event);
input.dispatchEvent(new KeyboardEvent('keydown', tab_event));
await u.waitUntil(() => sizzle('.emojis-lists__container--search .insert-emoji', picker).length === 1);
visible_emojis = sizzle('.emojis-lists__container--search .insert-emoji', picker);
expect(visible_emojis.length).toBe(1);
expect(visible_emojis[0].getAttribute('data-emoji')).toBe(':grimacing:');
expect(input.value).toBe(':grimacing:');
// Check that ENTER now inserts the match
const enter_event = Object.assign({}, tab_event, {'keyCode': 13, 'key': 'Enter', 'target': input});
view.emoji_picker_view.onKeyDown(enter_event);
expect(input.value).toBe('');
input.dispatchEvent(new KeyboardEvent('keydown', enter_event));
await u.waitUntil(() => input.value === '');
expect(textarea.value).toBe(':grimacing: ');
// Test that username starting with : doesn't cause issues
......@@ -124,8 +126,9 @@ describe("Emojis", function () {
'preventDefault': function preventDefault () {},
'stopPropagation': function stopPropagation () {}
};
view.emoji_picker_view.onKeyDown(event);
await u.waitUntil(() => view.emoji_picker_view.model.get('query') === 'smiley');
input.dispatchEvent(new KeyboardEvent('keydown', event));
await u.waitUntil(() => view.emoji_picker_view.model.get('query') === 'smiley', 1000);
let visible_emojis = sizzle('.emojis-lists__container--search .insert-emoji', picker);
expect(visible_emojis.length).toBe(2);
expect(visible_emojis[0].getAttribute('data-emoji')).toBe(':smiley:');
......@@ -133,26 +136,28 @@ describe("Emojis", function () {
// Check that pressing enter without an unambiguous match does nothing
const enter_event = Object.assign({}, event, {'keyCode': 13});
view.emoji_picker_view.onKeyDown(enter_event);
input.dispatchEvent(new KeyboardEvent('keydown', enter_event));
expect(input.value).toBe('smiley');
// Test that TAB autocompletes the to first match
const tab_event = Object.assign({}, event, {'keyCode': 9, 'key': 'Tab'});
view.emoji_picker_view.onKeyDown(tab_event);
expect(input.value).toBe(':smiley:');
input.dispatchEvent(new KeyboardEvent('keydown', tab_event));
await u.waitUntil(() => input.value === ':smiley:');
visible_emojis = sizzle('.emojis-lists__container--search .insert-emoji', picker);
expect(visible_emojis.length).toBe(1);
expect(visible_emojis[0].getAttribute('data-emoji')).toBe(':smiley:');
// Check that ENTER now inserts the match
view.emoji_picker_view.onKeyDown(enter_event);
expect(input.value).toBe('');
input.dispatchEvent(new KeyboardEvent('keydown', enter_event));
await u.waitUntil(() => input.value === '');
expect(view.el.querySelector('textarea.chat-textarea').value).toBe(':smiley: ');
done();
}));
});
describe("A Chat Message", function () {
it("will display larger if it's only emojis",
mock.initConverse(
['rosterGroupsFetched', 'chatBoxesFetched'], {'use_system_emojis': true},
......
This diff is collapsed.
This diff is collapsed.
import { html } from "lit-html";
import { __ } from '@converse/headless/i18n';
import { _converse, api } from "@converse/headless/converse-core";
import { html } from "lit-html";
const u = converse.env.utils;
const i18n_search = __('Search');
const i18n_search_results = __('Search results');
......@@ -11,7 +13,7 @@ const emoji_category = (o) => {
return html`
<li data-category="${o.category}"
class="emoji-category ${o.category} ${(o.current_category === o.category) ? 'picked' : ''}"
title="${__(o._converse.emoji_category_labels[o.category])}">
title="${__(_converse.emoji_category_labels[o.category])}">
<a class="pick-category"
@click=${o.onCategoryPicked}
......@@ -45,7 +47,7 @@ const search_results = (o) => html`
`;
const emojis_for_category = (o) => html`
<a id="emoji-picker-${o.category}" class="emoji-category__heading" data-category="${o.category}">${ __(o._converse.api.settings.get('emoji_category_labels')[o.category]) }</a>
<a id="emoji-picker-${o.category}" class="emoji-category__heading" data-category="${o.category}">${ __(api.settings.get('emoji_category_labels')[o.category]) }</a>
<ul class="emoji-picker" data-category="${o.category}">
${ Object.values(o.emojis_by_category[o.category]).map(emoji => emoji_item(Object.assign({emoji}, o))) }
</ul>
......@@ -68,7 +70,13 @@ const all_emojis = (o) => html`
`;
export default (o) => html`
export default (o) => {
o.emoji_categories = api.settings.get('emoji_categories');
o.emojis_by_category = _converse.emojis.json;
o.transform = u.getEmojiRenderer();
o.toned_emojis = _converse.emojis.toned;
return html`
<div class="emoji-picker__header">
<input class="form-control emoji-search" name="emoji-search" placeholder="${i18n_search}"
.value=${o.query || ''}
......@@ -84,5 +92,5 @@ export default (o) => html`
<div class="emoji-skintone-picker">
<label>Skin tone</label>
<ul>${ skintones.map(skintone => skintone_emoji(Object.assign({skintone}, o))) }</ul>
</div>
`;
</div>`;
}
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