paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-05 06:23:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

bootstrap_typeahead: Remove create and lookup API.

Browse Source 
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Anders Kaseorg
2024-05-06 13:31:24 -07:00
committed by Tim Abbott
parent acf93eac4b
commit 7360fd2a67
9 changed files with 32 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/bootstrap_typeahead.ts
View File

@@ -188,7 +188,7 @@ export type TypeaheadInputElement =
type: "input"; type: "input";
}; };
class Typeahead<ItemType extends string | object> { export class Typeahead<ItemType extends string | object> {
input_element: TypeaheadInputElement; input_element: TypeaheadInputElement;
items: number; items: number;
matcher: (item: ItemType, query: string) => boolean; matcher: (item: ItemType, query: string) => boolean;
@@ -726,15 +726,3 @@ type TypeaheadOptions<ItemType> = {
event?: JQuery.ClickEvent | JQuery.KeyUpEvent | JQuery.KeyDownEvent, event?: JQuery.ClickEvent | JQuery.KeyUpEvent | JQuery.KeyDownEvent,
) => string | undefined; ) => string | undefined;
}; };
export function create<ItemType extends string | object>(
input_element: TypeaheadInputElement,
options: TypeaheadOptions<ItemType>,
): void {
input_element.$element.data("typeahead", new Typeahead(input_element, options));
}
export function lookup($element: JQuery): void {
const typeahead = $element.data("typeahead");
typeahead.lookup();
}

13
web/src/composebox_typeahead.js
View File

@@ -4,7 +4,7 @@ import _ from "lodash";
import * as typeahead from "../shared/src/typeahead"; import * as typeahead from "../shared/src/typeahead";
import render_topic_typeahead_hint from "../templates/topic_typeahead_hint.hbs"; 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 bulleted_numbered_list_util from "./bulleted_numbered_list_util";
import * as compose_pm_pill from "./compose_pm_pill"; import * as compose_pm_pill from "./compose_pm_pill";
import * as compose_state from "./compose_state"; 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, $element: form_field,
type: "input", type: "input",
}; };
const options = { new Typeahead(bootstrap_typeahead_input, {
fixed: true, fixed: true,
dropup, dropup,
highlighter_html(item) { highlighter_html(item) {
@@ -1126,8 +1126,7 @@ export function initialize_topic_edit_typeahead(form_field, stream_name, dropup)
return topics_seen_for(stream_id); return topics_seen_for(stream_id);
}, },
items: 5, items: 5,
}; });
bootstrap_typeahead.create(bootstrap_typeahead_input, options);
} }
function get_header_html() { function get_header_html() {
@@ -1159,7 +1158,7 @@ export function initialize_compose_typeahead(selector) {
$element: $(selector), $element: $(selector),
type: "input", type: "input",
}; };
bootstrap_typeahead.create(bootstrap_typeahead_input, { new Typeahead(bootstrap_typeahead_input, {
items: max_num_items, items: max_num_items,
dropup: true, dropup: true,
fixed: true, fixed: true,
@@ -1192,7 +1191,7 @@ export function initialize({on_enter_send}) {
$element: $("input#stream_message_recipient_topic"), $element: $("input#stream_message_recipient_topic"),
type: "input", type: "input",
}; };
bootstrap_typeahead.create(stream_message_typeahead_input, { new Typeahead(stream_message_typeahead_input, {
source() { source() {
return topics_seen_for(compose_state.stream_id()); return topics_seen_for(compose_state.stream_id());
}, },
@@ -1221,7 +1220,7 @@ export function initialize({on_enter_send}) {
$element: $("#private_message_recipient"), $element: $("#private_message_recipient"),
type: "contenteditable", type: "contenteditable",
}; };
bootstrap_typeahead.create(private_message_typeahead_input, { new Typeahead(private_message_typeahead_input, {
source: get_pm_people, source: get_pm_people,
items: max_num_items, items: max_num_items,
dropup: true, dropup: true,

3
web/src/custom_profile_fields_ui.js
View File

@@ -2,6 +2,7 @@ import $ from "jquery";
import render_settings_custom_user_profile_field from "../templates/settings/custom_user_profile_field.hbs"; 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 * as bootstrap_typeahead from "./bootstrap_typeahead";
import {$t} from "./i18n"; import {$t} from "./i18n";
import * as people from "./people"; 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"), $element: $(element_id).find(".pronouns_type_field"),
type: "input", type: "input",
}; };
bootstrap_typeahead.create(bootstrap_typeahead_input, { new Typeahead(bootstrap_typeahead_input, {
items: 3, items: 3,
fixed: true, fixed: true,
helpOnEmptyStrings: true, helpOnEmptyStrings: true,

4
web/src/pill_typeahead.ts
View File

@@ -1,7 +1,7 @@
import assert from "minimalistic-assert"; import assert from "minimalistic-assert";
import * as blueslip from "./blueslip"; import * as blueslip from "./blueslip";
import * as bootstrap_typeahead from "./bootstrap_typeahead"; import {Typeahead} from "./bootstrap_typeahead";
import type {TypeaheadInputElement} from "./bootstrap_typeahead"; import type {TypeaheadInputElement} from "./bootstrap_typeahead";
import * as people from "./people"; import * as people from "./people";
import type {User} from "./people"; import type {User} from "./people";
@@ -53,7 +53,7 @@ export function set_up(
$element: $input, $element: $input,
type: "contenteditable", type: "contenteditable",
}; };
bootstrap_typeahead.create(bootstrap_typeahead_input, { new Typeahead(bootstrap_typeahead_input, {
items: 5, items: 5,
fixed: true, fixed: true,
dropup: true, dropup: true,

8
web/src/search.ts
View File

@@ -3,7 +3,7 @@ import assert from "minimalistic-assert";
import render_search_list_item from "../templates/search_list_item.hbs"; 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 type {TypeaheadInputElement} from "./bootstrap_typeahead";
import {Filter} from "./filter"; import {Filter} from "./filter";
import * as keydown_util from "./keydown_util"; import * as keydown_util from "./keydown_util";
@@ -15,6 +15,8 @@ import type {NarrowTerm} from "./state_data";
// Exported for unit testing // Exported for unit testing
export let is_using_input_method = false; export let is_using_input_method = false;
let search_typeahead: Typeahead<string>;
export function set_search_bar_text(text: string): void { export function set_search_bar_text(text: string): void {
$("#search_query").val(text); $("#search_query").val(text);
} }
@@ -76,7 +78,7 @@ export function initialize({on_narrow_search}: {on_narrow_search: OnNarrowSearch
$element: $search_query_box, $element: $search_query_box,
type: "input", type: "input",
}; };
bootstrap_typeahead.create(bootstrap_typeahead_input, { search_typeahead = new Typeahead(bootstrap_typeahead_input, {
source(query: string): string[] { source(query: string): string[] {
const suggestions = search_suggestion.get_suggestions(query); const suggestions = search_suggestion.get_suggestions(query);
// Update our global search_map hash // 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 // Open the typeahead after opening the search bar, so that we don't
// get a weird visual jump where the typeahead results are narrow // get a weird visual jump where the typeahead results are narrow
// before the search bar expands and then wider it expands. // before the search bar expands and then wider it expands.
bootstrap_typeahead.lookup($("#search_query")); search_typeahead.lookup(false);
$("#search_query").trigger("select"); $("#search_query").trigger("select");
} }

7
web/src/settings_playgrounds.ts
View File

@@ -3,6 +3,7 @@ import $ from "jquery";
import render_confirm_delete_playground from "../templates/confirm_dialog/confirm_delete_playground.hbs"; 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 render_admin_playground_list from "../templates/settings/admin_playground_list.hbs";
import {Typeahead} from "./bootstrap_typeahead";
import * as bootstrap_typeahead from "./bootstrap_typeahead"; import * as bootstrap_typeahead from "./bootstrap_typeahead";
import type {TypeaheadInputElement} from "./bootstrap_typeahead"; import type {TypeaheadInputElement} from "./bootstrap_typeahead";
import * as channel from "./channel"; import * as channel from "./channel";
@@ -17,6 +18,8 @@ import {current_user, realm} from "./state_data";
import {render_typeahead_item} from "./typeahead_helper"; import {render_typeahead_item} from "./typeahead_helper";
import * as ui_report from "./ui_report"; import * as ui_report from "./ui_report";
let pygments_typeahead: Typeahead<string>;
const meta = { const meta = {
loaded: false, loaded: false,
}; };
@@ -161,7 +164,7 @@ function build_page(): void {
type: "input", type: "input",
}; };
bootstrap_typeahead.create(bootstrap_typeahead_input, { pygments_typeahead = new Typeahead(bootstrap_typeahead_input, {
source(query: string): string[] { source(query: string): string[] {
language_labels = realm_playground.get_pygments_typeahead_list_for_settings(query); language_labels = realm_playground.get_pygments_typeahead_list_for_settings(query);
return [...language_labels.keys()]; return [...language_labels.keys()];
@@ -181,7 +184,7 @@ function build_page(): void {
}); });
$search_pygments_box.on("click", (e) => { $search_pygments_box.on("click", (e) => {
bootstrap_typeahead.lookup($search_pygments_box); pygments_typeahead.lookup(false);
$search_pygments_box.trigger("select"); $search_pygments_box.trigger("select");
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();

2
web/tests/composebox_typeahead.test.js
View File

@@ -799,7 +799,7 @@ test("initialize", ({override, override_rewire, mock_template}) => {
let topic_typeahead_called = false; let topic_typeahead_called = false;
let pm_recipient_typeahead_called = false; let pm_recipient_typeahead_called = false;
let compose_textarea_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) { switch (input_element.$element) {
case $("input#stream_message_recipient_topic"): { case $("input#stream_message_recipient_topic"): {
override_rewire(stream_topic_history, "get_recent_topic_names", (stream_id) => { override_rewire(stream_topic_history, "get_recent_topic_names", (stream_id) => {

2
web/tests/pill_typeahead.test.js
View File

@@ -159,7 +159,7 @@ run_test("set_up", ({mock_template, override, override_rewire}) => {
} }
let opts = {}; 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(input_element.$element, $fake_input);
assert.equal(config.items, 5); assert.equal(config.items, 5);
assert.ok(config.fixed); assert.ok(config.fixed);

16
web/tests/search.test.js
View File

@@ -18,6 +18,8 @@ mock_esm("../src/filter", {
const search = zrequire("search"); const search = zrequire("search");
let typeahead_forced_open = false;
run_test("initialize", ({override, override_rewire, mock_template}) => { run_test("initialize", ({override, override_rewire, mock_template}) => {
const $search_query_box = $("#search_query"); const $search_query_box = $("#search_query");
const $searchbox_form = $("#searchbox_form"); 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; search_suggestion.max_num_of_search_results = 999;
let terms; 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(input_element.$element, $search_query_box);
assert.equal(opts.items, 999); assert.equal(opts.items, 999);
assert.equal(opts.naturalSearch, true); assert.equal(opts.naturalSearch, true);
@@ -207,7 +209,11 @@ run_test("initialize", ({override, override_rewire, mock_template}) => {
$search_query_box.off("blur"); $search_query_box.off("blur");
} }
return {}; return {
lookup() {
typeahead_forced_open = true;
},
};
}); });
search.initialize({ search.initialize({
@@ -306,17 +312,13 @@ run_test("initialize", ({override, override_rewire, mock_template}) => {
assert.ok(is_blurred); assert.ok(is_blurred);
}); });
run_test("initiate_search", ({override}) => { run_test("initiate_search", () => {
// open typeahead and select text when navbar is open // open typeahead and select text when navbar is open
// this implicitly expects the code to used the chained // this implicitly expects the code to used the chained
// function calls, which is something to keep in mind if // function calls, which is something to keep in mind if
// this test ever fails unexpectedly. // this test ever fails unexpectedly.
narrow_state.filter = () => ({is_keyword_search: () => false}); narrow_state.filter = () => ({is_keyword_search: () => false});
let typeahead_forced_open = false;
let is_searchbox_text_selected = false; let is_searchbox_text_selected = false;
override(bootstrap_typeahead, "lookup", () => {
typeahead_forced_open = true;
});
$("#search_query").on("select", () => { $("#search_query").on("select", () => {
is_searchbox_text_selected = true; is_searchbox_text_selected = true;
}); });