From 7360fd2a675f072ae2a9dafeec452b891a11d77c Mon Sep 17 00:00:00 2001 From: Anders Kaseorg Date: Mon, 6 May 2024 13:31:24 -0700 Subject: [PATCH] bootstrap_typeahead: Remove create and lookup API. Signed-off-by: Anders Kaseorg --- web/src/bootstrap_typeahead.ts | 14 +------------- web/src/composebox_typeahead.js | 13 ++++++------- web/src/custom_profile_fields_ui.js | 3 ++- web/src/pill_typeahead.ts | 4 ++-- web/src/search.ts | 8 +++++--- web/src/settings_playgrounds.ts | 7 +++++-- web/tests/composebox_typeahead.test.js | 2 +- web/tests/pill_typeahead.test.js | 2 +- web/tests/search.test.js | 16 +++++++++------- 9 files changed, 32 insertions(+), 37 deletions(-) diff --git a/web/src/bootstrap_typeahead.ts b/web/src/bootstrap_typeahead.ts index 46206acc94..67d8773cf8 100644 --- a/web/src/bootstrap_typeahead.ts +++ b/web/src/bootstrap_typeahead.ts @@ -188,7 +188,7 @@ export type TypeaheadInputElement = type: "input"; }; -class Typeahead { +export class Typeahead { input_element: TypeaheadInputElement; items: number; matcher: (item: ItemType, query: string) => boolean; @@ -726,15 +726,3 @@ type TypeaheadOptions = { event?: JQuery.ClickEvent | JQuery.KeyUpEvent | JQuery.KeyDownEvent, ) => string | undefined; }; - -export function create( - input_element: TypeaheadInputElement, - options: TypeaheadOptions, -): void { - input_element.$element.data("typeahead", new Typeahead(input_element, options)); -} - -export function lookup($element: JQuery): void { - const typeahead = $element.data("typeahead"); - typeahead.lookup(); -} diff --git a/web/src/composebox_typeahead.js b/web/src/composebox_typeahead.js index b922c0b0b1..ee9a444b28 100644 --- a/web/src/composebox_typeahead.js +++ b/web/src/composebox_typeahead.js @@ -4,7 +4,7 @@ import _ from "lodash"; import * as typeahead from "../shared/src/typeahead"; import render_topic_typeahead_hint from "../templates/topic_typeahead_hint.hbs"; -import * as bootstrap_typeahead from "./bootstrap_typeahead"; +import {Typeahead} from "./bootstrap_typeahead"; import * as bulleted_numbered_list_util from "./bulleted_numbered_list_util"; import * as compose_pm_pill from "./compose_pm_pill"; import * as compose_state from "./compose_state"; @@ -1108,7 +1108,7 @@ export function initialize_topic_edit_typeahead(form_field, stream_name, dropup) $element: form_field, type: "input", }; - const options = { + new Typeahead(bootstrap_typeahead_input, { fixed: true, dropup, highlighter_html(item) { @@ -1126,8 +1126,7 @@ export function initialize_topic_edit_typeahead(form_field, stream_name, dropup) return topics_seen_for(stream_id); }, items: 5, - }; - bootstrap_typeahead.create(bootstrap_typeahead_input, options); + }); } function get_header_html() { @@ -1159,7 +1158,7 @@ export function initialize_compose_typeahead(selector) { $element: $(selector), type: "input", }; - bootstrap_typeahead.create(bootstrap_typeahead_input, { + new Typeahead(bootstrap_typeahead_input, { items: max_num_items, dropup: true, fixed: true, @@ -1192,7 +1191,7 @@ export function initialize({on_enter_send}) { $element: $("input#stream_message_recipient_topic"), type: "input", }; - bootstrap_typeahead.create(stream_message_typeahead_input, { + new Typeahead(stream_message_typeahead_input, { source() { return topics_seen_for(compose_state.stream_id()); }, @@ -1221,7 +1220,7 @@ export function initialize({on_enter_send}) { $element: $("#private_message_recipient"), type: "contenteditable", }; - bootstrap_typeahead.create(private_message_typeahead_input, { + new Typeahead(private_message_typeahead_input, { source: get_pm_people, items: max_num_items, dropup: true, diff --git a/web/src/custom_profile_fields_ui.js b/web/src/custom_profile_fields_ui.js index 48da240b44..3f65952401 100644 --- a/web/src/custom_profile_fields_ui.js +++ b/web/src/custom_profile_fields_ui.js @@ -2,6 +2,7 @@ import $ from "jquery"; import render_settings_custom_user_profile_field from "../templates/settings/custom_user_profile_field.hbs"; +import {Typeahead} from "./bootstrap_typeahead"; import * as bootstrap_typeahead from "./bootstrap_typeahead"; import {$t} from "./i18n"; import * as people from "./people"; @@ -169,7 +170,7 @@ export function initialize_custom_pronouns_type_fields(element_id) { $element: $(element_id).find(".pronouns_type_field"), type: "input", }; - bootstrap_typeahead.create(bootstrap_typeahead_input, { + new Typeahead(bootstrap_typeahead_input, { items: 3, fixed: true, helpOnEmptyStrings: true, diff --git a/web/src/pill_typeahead.ts b/web/src/pill_typeahead.ts index b6349b766a..b69dc92ff3 100644 --- a/web/src/pill_typeahead.ts +++ b/web/src/pill_typeahead.ts @@ -1,7 +1,7 @@ import assert from "minimalistic-assert"; import * as blueslip from "./blueslip"; -import * as bootstrap_typeahead from "./bootstrap_typeahead"; +import {Typeahead} from "./bootstrap_typeahead"; import type {TypeaheadInputElement} from "./bootstrap_typeahead"; import * as people from "./people"; import type {User} from "./people"; @@ -53,7 +53,7 @@ export function set_up( $element: $input, type: "contenteditable", }; - bootstrap_typeahead.create(bootstrap_typeahead_input, { + new Typeahead(bootstrap_typeahead_input, { items: 5, fixed: true, dropup: true, diff --git a/web/src/search.ts b/web/src/search.ts index e64dbebd10..b0f717914b 100644 --- a/web/src/search.ts +++ b/web/src/search.ts @@ -3,7 +3,7 @@ import assert from "minimalistic-assert"; import render_search_list_item from "../templates/search_list_item.hbs"; -import * as bootstrap_typeahead from "./bootstrap_typeahead"; +import {Typeahead} from "./bootstrap_typeahead"; import type {TypeaheadInputElement} from "./bootstrap_typeahead"; import {Filter} from "./filter"; import * as keydown_util from "./keydown_util"; @@ -15,6 +15,8 @@ import type {NarrowTerm} from "./state_data"; // Exported for unit testing export let is_using_input_method = false; +let search_typeahead: Typeahead; + export function set_search_bar_text(text: string): void { $("#search_query").val(text); } @@ -76,7 +78,7 @@ export function initialize({on_narrow_search}: {on_narrow_search: OnNarrowSearch $element: $search_query_box, type: "input", }; - bootstrap_typeahead.create(bootstrap_typeahead_input, { + search_typeahead = new Typeahead(bootstrap_typeahead_input, { source(query: string): string[] { const suggestions = search_suggestion.get_suggestions(query); // Update our global search_map hash @@ -218,7 +220,7 @@ export function initiate_search(): void { // Open the typeahead after opening the search bar, so that we don't // get a weird visual jump where the typeahead results are narrow // before the search bar expands and then wider it expands. - bootstrap_typeahead.lookup($("#search_query")); + search_typeahead.lookup(false); $("#search_query").trigger("select"); } diff --git a/web/src/settings_playgrounds.ts b/web/src/settings_playgrounds.ts index b7f268d3cf..0bbcf98eb2 100644 --- a/web/src/settings_playgrounds.ts +++ b/web/src/settings_playgrounds.ts @@ -3,6 +3,7 @@ import $ from "jquery"; import render_confirm_delete_playground from "../templates/confirm_dialog/confirm_delete_playground.hbs"; import render_admin_playground_list from "../templates/settings/admin_playground_list.hbs"; +import {Typeahead} from "./bootstrap_typeahead"; import * as bootstrap_typeahead from "./bootstrap_typeahead"; import type {TypeaheadInputElement} from "./bootstrap_typeahead"; import * as channel from "./channel"; @@ -17,6 +18,8 @@ import {current_user, realm} from "./state_data"; import {render_typeahead_item} from "./typeahead_helper"; import * as ui_report from "./ui_report"; +let pygments_typeahead: Typeahead; + const meta = { loaded: false, }; @@ -161,7 +164,7 @@ function build_page(): void { type: "input", }; - bootstrap_typeahead.create(bootstrap_typeahead_input, { + pygments_typeahead = new Typeahead(bootstrap_typeahead_input, { source(query: string): string[] { language_labels = realm_playground.get_pygments_typeahead_list_for_settings(query); return [...language_labels.keys()]; @@ -181,7 +184,7 @@ function build_page(): void { }); $search_pygments_box.on("click", (e) => { - bootstrap_typeahead.lookup($search_pygments_box); + pygments_typeahead.lookup(false); $search_pygments_box.trigger("select"); e.preventDefault(); e.stopPropagation(); diff --git a/web/tests/composebox_typeahead.test.js b/web/tests/composebox_typeahead.test.js index 97e11275b5..0a57d4f662 100644 --- a/web/tests/composebox_typeahead.test.js +++ b/web/tests/composebox_typeahead.test.js @@ -799,7 +799,7 @@ test("initialize", ({override, override_rewire, mock_template}) => { let topic_typeahead_called = false; let pm_recipient_typeahead_called = false; let compose_textarea_typeahead_called = false; - override(bootstrap_typeahead, "create", (input_element, options) => { + override(bootstrap_typeahead, "Typeahead", (input_element, options) => { switch (input_element.$element) { case $("input#stream_message_recipient_topic"): { override_rewire(stream_topic_history, "get_recent_topic_names", (stream_id) => { diff --git a/web/tests/pill_typeahead.test.js b/web/tests/pill_typeahead.test.js index 7d13dc8ce0..5b9063df26 100644 --- a/web/tests/pill_typeahead.test.js +++ b/web/tests/pill_typeahead.test.js @@ -159,7 +159,7 @@ run_test("set_up", ({mock_template, override, override_rewire}) => { } let opts = {}; - override(bootstrap_typeahead, "create", (input_element, config) => { + override(bootstrap_typeahead, "Typeahead", (input_element, config) => { assert.equal(input_element.$element, $fake_input); assert.equal(config.items, 5); assert.ok(config.fixed); diff --git a/web/tests/search.test.js b/web/tests/search.test.js index b50a31d917..bf76e9414a 100644 --- a/web/tests/search.test.js +++ b/web/tests/search.test.js @@ -18,6 +18,8 @@ mock_esm("../src/filter", { const search = zrequire("search"); +let typeahead_forced_open = false; + run_test("initialize", ({override, override_rewire, mock_template}) => { const $search_query_box = $("#search_query"); const $searchbox_form = $("#searchbox_form"); @@ -36,7 +38,7 @@ run_test("initialize", ({override, override_rewire, mock_template}) => { search_suggestion.max_num_of_search_results = 999; let terms; - override(bootstrap_typeahead, "create", (input_element, opts) => { + override(bootstrap_typeahead, "Typeahead", (input_element, opts) => { assert.equal(input_element.$element, $search_query_box); assert.equal(opts.items, 999); assert.equal(opts.naturalSearch, true); @@ -207,7 +209,11 @@ run_test("initialize", ({override, override_rewire, mock_template}) => { $search_query_box.off("blur"); } - return {}; + return { + lookup() { + typeahead_forced_open = true; + }, + }; }); search.initialize({ @@ -306,17 +312,13 @@ run_test("initialize", ({override, override_rewire, mock_template}) => { assert.ok(is_blurred); }); -run_test("initiate_search", ({override}) => { +run_test("initiate_search", () => { // open typeahead and select text when navbar is open // this implicitly expects the code to used the chained // function calls, which is something to keep in mind if // this test ever fails unexpectedly. narrow_state.filter = () => ({is_keyword_search: () => false}); - let typeahead_forced_open = false; let is_searchbox_text_selected = false; - override(bootstrap_typeahead, "lookup", () => { - typeahead_forced_open = true; - }); $("#search_query").on("select", () => { is_searchbox_text_selected = true; });