From 955d03b8a0eb81d960573b48d49a9ea36ade024c Mon Sep 17 00:00:00 2001 From: Utkarsh Patil Date: Sun, 22 Apr 2018 04:06:19 +0530 Subject: [PATCH] emoji: Prefix sort for emojis. Emoji prefix sort for "popular emojis first". Fixes #7625. --- .../node_tests/composebox_typeahead.js | 52 ++++++++++++++++--- frontend_tests/node_tests/typeahead_helper.js | 1 + static/js/typeahead_helper.js | 2 +- static/js/util.js | 16 ++++++ 4 files changed, 62 insertions(+), 9 deletions(-) diff --git a/frontend_tests/node_tests/composebox_typeahead.js b/frontend_tests/node_tests/composebox_typeahead.js index d595762e01..8897d285a9 100644 --- a/frontend_tests/node_tests/composebox_typeahead.js +++ b/frontend_tests/node_tests/composebox_typeahead.js @@ -2,6 +2,7 @@ set_global('i18n', global.stub_i18n); zrequire('compose_state'); zrequire('ui_util'); zrequire('pm_conversations'); +zrequire('emoji_picker'); zrequire('util'); zrequire('Handlebars', 'handlebars'); zrequire('templates'); @@ -22,34 +23,57 @@ var noop = function () {}; var emoji_stadium = { emoji_name: 'stadium', emoji_url: 'TBD', + codepoint: '1f3df', }; var emoji_tada = { emoji_name: 'tada', emoji_url: 'TBD', + codepoint: '1f389', }; var emoji_moneybag = { emoji_name: 'moneybag', emoji_url: 'TBD', + codepoint: '1f4b0', }; var emoji_japanese_post_office = { emoji_name: 'japanese_post_office', emoji_url: 'TBD', + codepoint: '1f3e3', }; var emoji_panda_face = { emoji_name: 'panda_face', emoji_url: 'TBD', + codepoint: '1f43c', }; var emoji_see_no_evil = { emoji_name: 'see_no_evil', emoji_url: 'TBD', + codepoint: '1f648', }; var emoji_thumbs_up = { - emoji_name: '+1', + emoji_name: 'thumbs_up', emoji_url: 'TBD', + codepoint: '1f44d', +}; +var emoji_thermometer = { + emoji_name: 'thermometer', + emoji_url: 'TBD', + codepoint: '1f321', +}; +var emoji_heart = { + emoji_name: 'heart', + emoji_url: 'TBD', + codepoint: '2764', +}; +var emoji_headphones = { + emoji_name: 'headphones', + emoji_url: 'TBD', + codepoint: '1f3a7', }; var emoji_list = [emoji_tada, emoji_moneybag, emoji_stadium, emoji_japanese_post_office, - emoji_panda_face, emoji_see_no_evil, emoji_thumbs_up]; + emoji_panda_face, emoji_see_no_evil, emoji_thumbs_up, emoji_thermometer, + emoji_heart, emoji_headphones]; var stream_list = ['Denmark', 'Sweden', 'The Netherlands']; var sweden_stream = { name: 'Sweden', @@ -222,6 +246,8 @@ user_pill.get_user_ids = function () { expected_value = '{ :octopus: '; assert.equal(actual_value, expected_value); + + // mention fake_this.completing = 'mention'; var document_stub_trigger1_called = false; @@ -603,6 +629,16 @@ user_pill.get_user_ids = function () { expected_value = [emoji_tada, emoji_stadium]; assert.deepEqual(actual_value, expected_value); + fake_this = { completing: 'emoji', token: 'th' }; + actual_value = options.sorter.call(fake_this, [emoji_thermometer, emoji_thumbs_up]); + expected_value = [emoji_thumbs_up, emoji_thermometer]; + assert.deepEqual(actual_value, expected_value); + + fake_this = { completing: 'emoji', token: 'he' }; + actual_value = options.sorter.call(fake_this, [emoji_headphones, emoji_heart]); + expected_value = [emoji_heart, emoji_headphones]; + assert.deepEqual(actual_value, expected_value); + fake_this = { completing: 'mention', token: 'co' }; actual_value = options.sorter.call(fake_this, [othello, cordelia]); expected_value = [cordelia, othello]; @@ -1127,14 +1163,14 @@ user_pill.get_user_ids = function () { assert.deepEqual(returned, expected); } - assert_emoji_matches('da',[{emoji_name: "tada", emoji_url: "TBD"}, - {emoji_name: "panda_face", emoji_url: "TBD"}]); + assert_emoji_matches('da',[{emoji_name: "tada", emoji_url: "TBD", codepoint: "1f389"}, + {emoji_name: "panda_face", emoji_url: "TBD", codepoint: "1f43c"}]); assert_emoji_matches('da_', []); assert_emoji_matches('da ', []); - assert_emoji_matches('panda ', [{emoji_name: "panda_face", emoji_url: "TBD"}]); - assert_emoji_matches('panda_', [{emoji_name: "panda_face", emoji_url: "TBD"}]); - assert_emoji_matches('japanese_post_', [{emoji_name: "japanese_post_office", emoji_url: "TBD"}]); - assert_emoji_matches('japanese post ', [{emoji_name: "japanese_post_office", emoji_url: "TBD"}]); + assert_emoji_matches('panda ', [{emoji_name: "panda_face", emoji_url: "TBD", codepoint: "1f43c"}]); + assert_emoji_matches('panda_', [{emoji_name: "panda_face", emoji_url: "TBD", codepoint: "1f43c"}]); + assert_emoji_matches('japanese_post_', [{emoji_name: "japanese_post_office", emoji_url: "TBD", codepoint: "1f3e3"}]); + assert_emoji_matches('japanese post ', [{emoji_name: "japanese_post_office", emoji_url: "TBD", codepoint: "1f3e3"}]); assert_emoji_matches('notaemoji', []); // Autocomplete user mentions by user name. assert_mentions_matches('cordelia', [cordelia]); diff --git a/frontend_tests/node_tests/typeahead_helper.js b/frontend_tests/node_tests/typeahead_helper.js index 8fc722af2e..5e8382c965 100644 --- a/frontend_tests/node_tests/typeahead_helper.js +++ b/frontend_tests/node_tests/typeahead_helper.js @@ -8,6 +8,7 @@ zrequire('Handlebars', 'handlebars'); zrequire('recent_senders'); zrequire('pm_conversations'); zrequire('people'); +zrequire('emoji_picker'); zrequire('util'); zrequire('stream_data'); zrequire('narrow'); diff --git a/static/js/typeahead_helper.js b/static/js/typeahead_helper.js index dcec8d39ff..f387534469 100644 --- a/static/js/typeahead_helper.js +++ b/static/js/typeahead_helper.js @@ -307,7 +307,7 @@ exports.sort_recipients = function (users, query, current_stream, current_subjec exports.sort_emojis = function (matches, query) { // TODO: sort by category in v2 - var results = util.prefix_sort(query, matches, function (x) { return x.emoji_name; }); + var results = util.emoji_prefix_sort(query, matches, function (x) { return x.emoji_name; }); return results.matches.concat(results.rest); }; diff --git a/static/js/util.js b/static/js/util.js index 0805cc1f07..ad99e6635c 100644 --- a/static/js/util.js +++ b/static/js/util.js @@ -254,6 +254,22 @@ exports.prefix_sort = function (query, objs, get_item) { rest: noMatch }; }; +// manipulate prefix_sort to select popular emojis first +// This is kinda a hack and so probably not our long-term solution. +exports.emoji_prefix_sort = function (query, objs, get_item) { + var prefix_sort = exports.prefix_sort(query, objs, get_item); + var popular_emoji_matches = []; + var other_emoji_matches = []; + prefix_sort.matches.forEach(function (obj) { + if (emoji_picker.frequently_used_emojis_list.includes(obj.codepoint)) { + popular_emoji_matches.push(obj); + } else { + other_emoji_matches.push(obj); + } + }); + return { matches: popular_emoji_matches.concat(other_emoji_matches), rest: prefix_sort.rest }; +}; + return exports; }());