From 60eef68f5974664af2f6a0dc5bbbe42aea607393 Mon Sep 17 00:00:00 2001 From: Ryan Rehman Date: Fri, 24 Jul 2020 21:34:15 +0530 Subject: [PATCH] refactor: Extract `set_up_typeahead_on_pills` to a new file. We move this function from `user_pill.js` to `pill_typeahead.js`. The function has also been renamed to `set_up`. The move was made because there are plans to update the pills typeahead (i.e. to include user-groups/streams in the results). Thus this function should not belong in `user_pill.js`. --- .eslintrc.json | 1 + .../node_tests/settings_user_groups.js | 1 + frontend_tests/node_tests/user_pill.js | 1 + static/js/bundles/app.js | 1 + static/js/global.d.ts | 1 + static/js/pill_typeahead.js | 44 +++++++++++++++++++ static/js/settings_account.js | 4 +- static/js/settings_user_groups.js | 2 +- static/js/stream_edit.js | 2 +- static/js/user_pill.js | 42 +----------------- 10 files changed, 54 insertions(+), 45 deletions(-) create mode 100644 static/js/pill_typeahead.js diff --git a/.eslintrc.json b/.eslintrc.json index e94d64e56b..f67f19cfbd 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -188,6 +188,7 @@ "padded_widget": false, "page_params": false, "panels": false, + "pill_typeahead": false, "people": false, "pm_conversations": false, "pm_list": false, diff --git a/frontend_tests/node_tests/settings_user_groups.js b/frontend_tests/node_tests/settings_user_groups.js index 36747501c9..9db9ca8acc 100644 --- a/frontend_tests/node_tests/settings_user_groups.js +++ b/frontend_tests/node_tests/settings_user_groups.js @@ -3,6 +3,7 @@ const _ = require("lodash"); zrequire("user_pill"); +zrequire("pill_typeahead"); zrequire("settings_user_groups"); set_global("$", global.make_zjquery()); diff --git a/frontend_tests/node_tests/user_pill.js b/frontend_tests/node_tests/user_pill.js index 6abd113b9c..8cbe663ab2 100644 --- a/frontend_tests/node_tests/user_pill.js +++ b/frontend_tests/node_tests/user_pill.js @@ -3,6 +3,7 @@ zrequire("people"); set_global("md5", (s) => "md5-" + s); zrequire("user_pill"); +zrequire("pill_typeahead"); set_global("page_params", {}); diff --git a/static/js/bundles/app.js b/static/js/bundles/app.js index ae9050327d..532b934e47 100644 --- a/static/js/bundles/app.js +++ b/static/js/bundles/app.js @@ -115,6 +115,7 @@ import "../typeahead_helper.js"; import "../search_suggestion.js"; import "../search.js"; import "../composebox_typeahead.js"; +import "../pill_typeahead.js"; import "../navigate.js"; import "../list_util.js"; import "../hotkey.js"; diff --git a/static/js/global.d.ts b/static/js/global.d.ts index 5b9b386ceb..4ff6b88c0a 100644 --- a/static/js/global.d.ts +++ b/static/js/global.d.ts @@ -89,6 +89,7 @@ declare let padded_widget: any; declare let page_params: any; declare let panels: any; declare let people: any; +declare let pill_typeahead: any; declare let pm_conversations: any; declare let pm_list: any; declare let pointer: any; diff --git a/static/js/pill_typeahead.js b/static/js/pill_typeahead.js new file mode 100644 index 0000000000..ae72b41271 --- /dev/null +++ b/static/js/pill_typeahead.js @@ -0,0 +1,44 @@ +"use strict"; + +const settings_data = require("./settings_data"); + +exports.set_up = function (input, pills, opts) { + let source = opts.source; + if (!opts.source) { + source = () => user_pill.typeahead_source(pills); + } + + input.typeahead({ + items: 5, + fixed: true, + dropup: true, + source, + highlighter(item) { + return typeahead_helper.render_person(item); + }, + matcher(item) { + let query = this.query.toLowerCase(); + query = query.replace(/\u00A0/g, String.fromCharCode(32)); + if (!settings_data.show_email()) { + return item.full_name.toLowerCase().includes(query); + } + const email = people.get_visible_email(item); + return ( + email.toLowerCase().includes(query) || item.full_name.toLowerCase().includes(query) + ); + }, + sorter(matches) { + return typeahead_helper.sort_recipientbox_typeahead(this.query, matches, ""); + }, + updater(user) { + user_pill.append_user(user, pills); + input.trigger("focus"); + if (opts.update_func) { + opts.update_func(); + } + }, + stopAdvance: true, + }); +}; + +window.pill_typeahead = exports; diff --git a/static/js/settings_account.js b/static/js/settings_account.js index 3dd93a8306..e39767d807 100644 --- a/static/js/settings_account.js +++ b/static/js/settings_account.js @@ -257,12 +257,12 @@ exports.initialize_custom_user_type_fields = function ( const input = pill_container.children(".input"); if (set_handler_on_update) { const opts = {update_func: update_custom_user_field}; - user_pill.set_up_typeahead_on_pills(input, pills, opts); + pill_typeahead.set_up(input, pills, opts); pills.onPillRemove(() => { update_custom_user_field(); }); } else { - user_pill.set_up_typeahead_on_pills(input, pills, {}); + pill_typeahead.set_up(input, pills, {}); } } user_pills.set(field.id, pills); diff --git a/static/js/settings_user_groups.js b/static/js/settings_user_groups.js index e65992327b..5157dd427c 100644 --- a/static/js/settings_user_groups.js +++ b/static/js/settings_user_groups.js @@ -265,7 +265,7 @@ exports.populate_user_groups = function () { const input = pill_container.children(".input"); if (exports.can_edit(data.id)) { const opts = {update_func: update_cancel_button}; - user_pill.set_up_typeahead_on_pills(input, pills, opts); + pill_typeahead.set_up(input, pills, opts); } (function pill_remove() { diff --git a/static/js/stream_edit.js b/static/js/stream_edit.js index 1108262185..b589966183 100644 --- a/static/js/stream_edit.js +++ b/static/js/stream_edit.js @@ -343,7 +343,7 @@ function show_subscription_settings(sub_row) { }); const opts = {source: get_users_for_subscriber_typeahead}; - user_pill.set_up_typeahead_on_pills(sub_settings.find(".input"), exports.pill_widget, opts); + pill_typeahead.set_up(sub_settings.find(".input"), exports.pill_widget, opts); } exports.is_notification_setting = function (setting_label) { diff --git a/static/js/user_pill.js b/static/js/user_pill.js index 721959bd47..084483e93b 100644 --- a/static/js/user_pill.js +++ b/static/js/user_pill.js @@ -2,7 +2,6 @@ // This will be used for pills for things like composing PMs // or adding users to a stream/group. -const settings_data = require("./settings_data"); exports.create_item_from_email = function (email, current_items) { // For normal Zulip use, we need to validate the email for our realm. @@ -90,7 +89,7 @@ exports.has_unconverted_data = function (pill_widget) { exports.typeahead_source = function (pill_widget) { const persons = people.get_realm_users(); - return exports.filter_taken_users(persons, pill_widget); + return user_pill.filter_taken_users(persons, pill_widget); }; exports.filter_taken_users = function (items, pill_widget) { @@ -119,43 +118,4 @@ exports.create_pills = function (pill_container) { return pills; }; -exports.set_up_typeahead_on_pills = function (input, pills, opts) { - let source = opts.source; - if (!opts.source) { - source = () => exports.typeahead_source(pills); - } - - input.typeahead({ - items: 5, - fixed: true, - dropup: true, - source, - highlighter(item) { - return typeahead_helper.render_person(item); - }, - matcher(item) { - let query = this.query.toLowerCase(); - query = query.replace(/\u00A0/g, String.fromCharCode(32)); - if (!settings_data.show_email()) { - return item.full_name.toLowerCase().includes(query); - } - const email = people.get_visible_email(item); - return ( - email.toLowerCase().includes(query) || item.full_name.toLowerCase().includes(query) - ); - }, - sorter(matches) { - return typeahead_helper.sort_recipientbox_typeahead(this.query, matches, ""); - }, - updater(user) { - exports.append_user(user, pills); - input.trigger("focus"); - if (opts.update_func) { - opts.update_func(); - } - }, - stopAdvance: true, - }); -}; - window.user_pill = exports;