Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

user_search: Convert user_search to an ES6 class UserSearch. 

Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Anders Kaseorg 2020-07-22 19:10:24 -07:00 committed by Tim Abbott
parent 41778d81d2
commit f96bd3839c
5 changed files with 85 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.json
View File

@ -106,6 +106,7 @@
"MessageListView": false, "MessageListView": false,
"Plotly": false, "Plotly": false,
"Sortable": false, "Sortable": false,
"UserSearch": false,
"WinChan": false, "WinChan": false,
"XDate": false, "XDate": false,
"_": false, "_": false,
@ -291,7 +292,6 @@
"user_events": false, "user_events": false,
"user_groups": false, "user_groups": false,
"user_pill": false, "user_pill": false,
"user_search": false,
"user_status": false, "user_status": false,
"user_status_ui": false, "user_status_ui": false,
"poll_widget": false, "poll_widget": false,

4
frontend_tests/node_tests/activity.js
View File

@ -585,9 +585,9 @@ run_test("realm_presence_disabled", () => {
run_test("clear_search", () => { run_test("clear_search", () => {
$(".user-list-filter").val("somevalue"); $(".user-list-filter").val("somevalue");
activity.user_filter.clear_search(); $("#clear_search_people_button").trigger("click");
assert.equal($(".user-list-filter").val(), ""); assert.equal($(".user-list-filter").val(), "");
activity.user_filter.clear_search(); $("#clear_search_people_button").trigger("click");
assert($("#user_search_section").hasClass("notdisplayed")); assert($("#user_search_section").hasClass("notdisplayed"));
}); });

2
static/js/activity.js
View File

@ -292,7 +292,7 @@ exports.set_cursor_and_filter = function () {
highlight_class: "highlighted_user", highlight_class: "highlighted_user",
}); });
exports.user_filter = user_search({ exports.user_filter = new UserSearch({
update_list: update_users_for_search, update_list: update_users_for_search,
reset_items: exports.reset_users, reset_items: exports.reset_users,
on_focus: exports.user_cursor.reset, on_focus: exports.user_cursor.reset,

2
static/js/global.d.ts vendored
View File

@ -8,6 +8,7 @@ declare let Filter: any;
declare let LightboxCanvas: any; declare let LightboxCanvas: any;
declare let MessageListData: any; declare let MessageListData: any;
declare let MessageListView: any; declare let MessageListView: any;
declare let UserSearch: any;
declare let activity: any; declare let activity: any;
declare let admin: any; declare let admin: any;
declare let alert_words: any; declare let alert_words: any;
@ -176,7 +177,6 @@ declare let upload_widget: any;
declare let user_events: any; declare let user_events: any;
declare let user_groups: any; declare let user_groups: any;
declare let user_pill: any; declare let user_pill: any;
declare let user_search: any;
declare let user_status: any; declare let user_status: any;
declare let user_status_ui: any; declare let user_status_ui: any;
declare let widgetize: any; declare let widgetize: any;

158
static/js/user_search.js
View File

@ -1,83 +1,93 @@
const user_search = function (opts) { class UserSearch {
// This is mostly view code to manage the user search widget // This is mostly view code to manage the user search widget
// above the buddy list. We rely on other code to manage the // above the buddy list. We rely on other code to manage the
// details of populating the list when we change. // details of populating the list when we change.
const self = {}; $widget = $("#user_search_section").expectOne();
$input = $(".user-list-filter").expectOne();
const $widget = $("#user_search_section").expectOne(); constructor(opts) {
const $input = $(".user-list-filter").expectOne(); this._reset_items = opts.reset_items;
this._update_list = opts.update_list;
this._on_focus = opts.on_focus;
self.input_field = function () { $("#clear_search_people_button").on("click", () => this.clear_search());
return $input; $("#userlist-header").on("click", () => this.toggle_filter_displayed());
};
self.text = function () { this.$input.on("input", opts.update_list);
return $input.val().trim(); this.$input.on("focus", (e) => this.on_focus(e));
}; }
self.searching = function () { input_field() {
return $input.is(":focus"); return this.$input;
}; }
self.empty = function () { text() {
return self.text() === ""; return this.$input.val().trim();
}; }
self.clear_search = function () { searching() {
if (self.empty()) { return this.$input.is(":focus");
self.close_widget(); }
empty() {
return this.text() === "";
}
clear_search() {
if (this.empty()) {
this.close_widget();
return; return;
} }
$input.val(""); this.$input.val("");
$input.trigger("blur"); this.$input.trigger("blur");
opts.reset_items(); this._reset_items();
}; }
self.escape_search = function () { escape_search() {
if (self.empty()) { if (this.empty()) {
self.close_widget(); this.close_widget();
return; return;
} }
$input.val(""); this.$input.val("");
opts.update_list(); this._update_list();
}; }
self.hide_widget = function () { hide_widget() {
$widget.addClass("notdisplayed"); this.$widget.addClass("notdisplayed");
resize.resize_sidebars(); resize.resize_sidebars();
}; }
self.show_widget = function () { show_widget() {
// Hide all the popovers but not userlist sidebar // Hide all the popovers but not userlist sidebar
// when the user wants to search. // when the user wants to search.
popovers.hide_all_except_sidebars(); popovers.hide_all_except_sidebars();
$widget.removeClass("notdisplayed"); this.$widget.removeClass("notdisplayed");
resize.resize_sidebars(); resize.resize_sidebars();
}; }
self.widget_shown = function () { widget_shown() {
return $widget.hasClass("notdisplayed"); return this.$widget.hasClass("notdisplayed");
}; }
self.clear_and_hide_search = function () { clear_and_hide_search() {
if (!self.empty()) { if (!this.empty()) {
$input.val(""); this.$input.val("");
opts.update_list(); this._update_list();
} }
self.close_widget(); this.close_widget();
}; }
self.close_widget = function () { close_widget() {
$input.trigger("blur"); this.$input.trigger("blur");
self.hide_widget(); this.hide_widget();
opts.reset_items(); this._reset_items();
}; }
self.expand_column = function () { expand_column() {
const column = $input.closest(".app-main [class^='column-']"); const column = this.$input.closest(".app-main [class^='column-']");
if (!column.hasClass("expanded")) { if (!column.hasClass("expanded")) {
popovers.hide_all(); popovers.hide_all();
if (column.hasClass("column-left")) { if (column.hasClass("column-left")) {
@ -86,35 +96,27 @@ const user_search = function (opts) {
popovers.show_userlist_sidebar(); popovers.show_userlist_sidebar();
} }
} }
};
self.initiate_search = function () {
self.expand_column();
self.show_widget();
$input.trigger("focus");
};
self.toggle_filter_displayed = function () {
if (self.widget_shown()) {
self.initiate_search();
} else {
self.clear_and_hide_search();
}
};
function on_focus(e) {
opts.on_focus();
e.stopPropagation();
} }
$("#clear_search_people_button").on("click", self.clear_search); initiate_search() {
$("#userlist-header").on("click", self.toggle_filter_displayed); this.expand_column();
this.show_widget();
this.$input.trigger("focus");
}
$input.on("input", opts.update_list); toggle_filter_displayed() {
$input.on("focus", on_focus); if (this.widget_shown()) {
this.initiate_search();
} else {
this.clear_and_hide_search();
}
}
return self; on_focus(e) {
}; this._on_focus();
e.stopPropagation();
}
}
module.exports = user_search; module.exports = UserSearch;
window.user_search = user_search; window.UserSearch = UserSearch;