converse-emoji: Sort search results

Also, don't show the categories while searching.
This commit is contained in:
JC Brand 2019-09-05 14:49:06 +02:00
parent 60f04bc915
commit 01468fc087
3 changed files with 10 additions and 8 deletions

View File

@ -59,6 +59,10 @@
list-style: none; list-style: none;
position: relative; position: relative;
&.insert-emoji { &.insert-emoji {
margin: 0;
height: 32px;
width: 32px;
&.picked { &.picked {
background-color: var(--highlight-color); background-color: var(--highlight-color);
} }

View File

@ -332,19 +332,15 @@ converse.plugins.add('converse-emoji', {
const { default: json } = await import(/*webpackChunkName: "emojis" */ './emojis.json'); const { default: json } = await import(/*webpackChunkName: "emojis" */ './emojis.json');
_converse.emojis.json = json; _converse.emojis.json = json;
_converse.emojis_map = Object.keys(_converse.emojis.json).reduce((result, cat) => Object.assign(result, _converse.emojis.json[cat]), {}); _converse.emojis.categories = Object.keys(_converse.emojis.json);
_converse.emojis_map = _converse.emojis.categories.reduce((result, cat) => Object.assign(result, _converse.emojis.json[cat]), {});
_converse.emojis_list = Object.values(_converse.emojis_map); _converse.emojis_list = Object.values(_converse.emojis_map);
_converse.emojis_list.sort((a, b) => a.sn < b.sn ? -1 : (a.sn > b.sn ? 1 : 0));
_converse.emoji_shortnames = _converse.emojis_list.map(m => m.sn); _converse.emoji_shortnames = _converse.emojis_list.map(m => m.sn);
_converse.emoji_shortnames.sort();
const getShortNames = () => _converse.emoji_shortnames.map(s => s.replace(/[+]/g, "\\$&")).join('|'); const getShortNames = () => _converse.emoji_shortnames.map(s => s.replace(/[+]/g, "\\$&")).join('|');
_converse.emojis.shortnames_regex = new RegExp("<object[^>]*>.*?<\/object>|<span[^>]*>.*?<\/span>|<(?:object|embed|svg|img|div|span|p|a)[^>]*>|("+getShortNames()+")", "gi"); _converse.emojis.shortnames_regex = new RegExp("<object[^>]*>.*?<\/object>|<span[^>]*>.*?<\/span>|<(?:object|embed|svg|img|div|span|p|a)[^>]*>|("+getShortNames()+")", "gi");
const excluded_categories = ['modifier', 'regional'];
_converse.emojis.all_categories = _converse.emojis_list
.map(e => e.c)
.filter((c, i, arr) => arr.indexOf(c) == i)
.filter(c => !excluded_categories.includes(c));
_converse.emojis.toned = getTonedEmojis(); _converse.emojis.toned = getTonedEmojis();

View File

@ -1,13 +1,15 @@
<div class="emoji-picker__container"> <div class="emoji-picker__container">
<div class="emoji-picker__header"> <div class="emoji-picker__header">
<input class="form-control emoji-search" name="emoji-search" placeholder="{{{o.__('Search')}}}"/> <input class="form-control emoji-search" name="emoji-search" placeholder="{{{o.__('Search')}}}"/>
{[ if (!o.query) { ]}
<ul> <ul>
{[ Object.keys(o.emoji_categories).forEach(function (category) { ]} {[ Object.keys(o.emoji_categories).forEach(function (category) { ]}
<li data-category="{{{category}}}" class="emoji-category {[ if (o.current_category === category) { ]} picked {[ } ]}" title="{{{o._converse.emoji_category_labels[category]}}}"> <li data-category="{{{category}}}" class="emoji-category {{{o.current_category}}} {{{ category}}} {[ if (o.current_category === category) { ]} picked {[ } ]}" title="{{{o._converse.emoji_category_labels[category]}}}">
<a class="pick-category" href="#emoji-picker-{{{category}}}" data-category="{{{category}}}"> {{ o.transformCategory(o.emoji_categories[category]) }} </a> <a class="pick-category" href="#emoji-picker-{{{category}}}" data-category="{{{category}}}"> {{ o.transformCategory(o.emoji_categories[category]) }} </a>
</li> </li>
{[ }); ]} {[ }); ]}
</ul> </ul>
{[ } ]}
</div> </div>
<div class="emoji-picker__lists"> <div class="emoji-picker__lists">
{[ if (o.query) { ]} {[ if (o.query) { ]}