mirror of https://github.com/zulip/zulip.git
list_cursor: Convert list_cursor to an ES6 class ListCursor.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
parent
9d90ae0e69
commit
2e94914be4
|
@ -102,6 +102,7 @@
|
|||
"Filter": false,
|
||||
"Handlebars": false,
|
||||
"LightboxCanvas": false,
|
||||
"ListCursor": false,
|
||||
"MessageListData": false,
|
||||
"MessageListView": false,
|
||||
"Plotly": false,
|
||||
|
@ -162,7 +163,6 @@
|
|||
"jQuery": false,
|
||||
"keydown_util": false,
|
||||
"lightbox": false,
|
||||
"list_cursor": false,
|
||||
"list_render": false,
|
||||
"list_util": false,
|
||||
"loading": false,
|
||||
|
|
|
@ -2,7 +2,7 @@ zrequire("list_cursor");
|
|||
|
||||
run_test("config errors", () => {
|
||||
blueslip.expect("error", "Programming error");
|
||||
list_cursor({});
|
||||
new ListCursor({});
|
||||
});
|
||||
|
||||
function basic_conf() {
|
||||
|
@ -25,7 +25,7 @@ function basic_conf() {
|
|||
run_test("misc errors", () => {
|
||||
const conf = basic_conf();
|
||||
|
||||
const cursor = list_cursor(conf);
|
||||
const cursor = new ListCursor(conf);
|
||||
|
||||
// Test that we just ignore empty
|
||||
// lists for unknown keys.
|
||||
|
@ -37,10 +37,10 @@ run_test("misc errors", () => {
|
|||
|
||||
cursor.get_row("nada");
|
||||
|
||||
blueslip.expect("error", "Caller is not checking keys for list_cursor.go_to");
|
||||
blueslip.expect("error", "Caller is not checking keys for ListCursor.go_to");
|
||||
cursor.go_to(undefined);
|
||||
|
||||
blueslip.expect("error", "Cannot highlight key for list_cursor: nada");
|
||||
blueslip.expect("error", "Cannot highlight key for ListCursor: nada");
|
||||
cursor.go_to("nada");
|
||||
|
||||
cursor.prev();
|
||||
|
@ -49,7 +49,7 @@ run_test("misc errors", () => {
|
|||
|
||||
run_test("single item list", () => {
|
||||
const conf = basic_conf();
|
||||
const cursor = list_cursor(conf);
|
||||
const cursor = new ListCursor(conf);
|
||||
|
||||
const valid_key = "42";
|
||||
const li_stub = {
|
||||
|
|
|
@ -288,7 +288,7 @@ function keydown_enter_key() {
|
|||
}
|
||||
|
||||
exports.set_cursor_and_filter = function () {
|
||||
exports.user_cursor = list_cursor({
|
||||
exports.user_cursor = new ListCursor({
|
||||
list: buddy_list,
|
||||
highlight_class: "highlighted_user",
|
||||
});
|
||||
|
@ -296,12 +296,12 @@ exports.set_cursor_and_filter = function () {
|
|||
exports.user_filter = new UserSearch({
|
||||
update_list: update_users_for_search,
|
||||
reset_items: exports.reset_users,
|
||||
on_focus: exports.user_cursor.reset,
|
||||
on_focus: () => exports.user_cursor.reset(),
|
||||
});
|
||||
|
||||
const $input = exports.user_filter.input_field();
|
||||
|
||||
$input.on("blur", exports.user_cursor.clear);
|
||||
$input.on("blur", () => exports.user_cursor.clear());
|
||||
|
||||
keydown_util.handle({
|
||||
elem: $input,
|
||||
|
|
|
@ -192,7 +192,7 @@ class BuddyList extends BuddyListConf {
|
|||
const pos = this.keys.indexOf(key);
|
||||
|
||||
if (pos < 0) {
|
||||
// TODO: See list_cursor.get_row() for why this is
|
||||
// TODO: See ListCursor.get_row() for why this is
|
||||
// a bit janky now.
|
||||
return [];
|
||||
}
|
||||
|
|
|
@ -6,6 +6,7 @@
|
|||
declare let FetchStatus: any;
|
||||
declare let Filter: any;
|
||||
declare let LightboxCanvas: any;
|
||||
declare let ListCursor: any;
|
||||
declare let MessageListData: any;
|
||||
declare let MessageListView: any;
|
||||
declare let UserSearch: any;
|
||||
|
@ -59,7 +60,6 @@ declare let input_pill: any;
|
|||
declare let invite: any;
|
||||
declare let keydown_util: any;
|
||||
declare let lightbox: any;
|
||||
declare let list_cursor: any;
|
||||
declare let list_render: any;
|
||||
declare let list_util: any;
|
||||
declare let loading: any;
|
||||
|
|
|
@ -1,35 +1,38 @@
|
|||
const list_cursor = function (opts) {
|
||||
const self = {};
|
||||
|
||||
const config_ok =
|
||||
opts.highlight_class &&
|
||||
opts.list &&
|
||||
opts.list.scroll_container_sel &&
|
||||
opts.list.find_li &&
|
||||
opts.list.first_key &&
|
||||
opts.list.prev_key &&
|
||||
opts.list.next_key;
|
||||
if (!config_ok) {
|
||||
blueslip.error("Programming error");
|
||||
return;
|
||||
}
|
||||
|
||||
self.clear = function () {
|
||||
if (self.curr_key === undefined) {
|
||||
class ListCursor {
|
||||
constructor({highlight_class, list}) {
|
||||
const config_ok =
|
||||
highlight_class &&
|
||||
list &&
|
||||
list.scroll_container_sel &&
|
||||
list.find_li &&
|
||||
list.first_key &&
|
||||
list.prev_key &&
|
||||
list.next_key;
|
||||
if (!config_ok) {
|
||||
blueslip.error("Programming error");
|
||||
return;
|
||||
}
|
||||
const row = self.get_row(self.curr_key);
|
||||
|
||||
this.highlight_class = highlight_class;
|
||||
this.list = list;
|
||||
}
|
||||
|
||||
clear() {
|
||||
if (this.curr_key === undefined) {
|
||||
return;
|
||||
}
|
||||
const row = this.get_row(this.curr_key);
|
||||
if (row) {
|
||||
row.clear();
|
||||
}
|
||||
self.curr_key = undefined;
|
||||
};
|
||||
this.curr_key = undefined;
|
||||
}
|
||||
|
||||
self.get_key = function () {
|
||||
return self.curr_key;
|
||||
};
|
||||
get_key() {
|
||||
return this.curr_key;
|
||||
}
|
||||
|
||||
self.get_row = function (key) {
|
||||
get_row(key) {
|
||||
// TODO: The list class should probably do more of the work
|
||||
// here, so we're not so coupled to jQuery, and
|
||||
// so we instead just get back a widget we can say
|
||||
|
@ -41,7 +44,7 @@ const list_cursor = function (opts) {
|
|||
return;
|
||||
}
|
||||
|
||||
const li = opts.list.find_li({
|
||||
const li = this.list.find_li({
|
||||
key,
|
||||
force_render: true,
|
||||
});
|
||||
|
@ -51,91 +54,89 @@ const list_cursor = function (opts) {
|
|||
}
|
||||
|
||||
return {
|
||||
highlight() {
|
||||
li.addClass(opts.highlight_class);
|
||||
self.adjust_scroll(li);
|
||||
highlight: () => {
|
||||
li.addClass(this.highlight_class);
|
||||
this.adjust_scroll(li);
|
||||
},
|
||||
clear() {
|
||||
li.removeClass(opts.highlight_class);
|
||||
clear: () => {
|
||||
li.removeClass(this.highlight_class);
|
||||
},
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
self.adjust_scroll = function (li) {
|
||||
const scroll_container = $(opts.list.scroll_container_sel);
|
||||
adjust_scroll(li) {
|
||||
const scroll_container = $(this.list.scroll_container_sel);
|
||||
scroll_util.scroll_element_into_container(li, scroll_container);
|
||||
};
|
||||
}
|
||||
|
||||
self.redraw = function () {
|
||||
redraw() {
|
||||
// We should only call this for situations like the buddy
|
||||
// list where we redraw the whole list without necessarily
|
||||
// changing it, so we just want to re-highlight the current
|
||||
// row in the new DOM. If you are filtering, for now you
|
||||
// should call the 'reset()' method.
|
||||
const row = self.get_row(self.curr_key);
|
||||
const row = this.get_row(this.curr_key);
|
||||
|
||||
if (row === undefined) {
|
||||
return;
|
||||
}
|
||||
row.highlight();
|
||||
};
|
||||
}
|
||||
|
||||
self.go_to = function (key) {
|
||||
go_to(key) {
|
||||
if (key === undefined) {
|
||||
blueslip.error("Caller is not checking keys for list_cursor.go_to");
|
||||
blueslip.error("Caller is not checking keys for ListCursor.go_to");
|
||||
return;
|
||||
}
|
||||
if (key === self.curr_key) {
|
||||
if (key === this.curr_key) {
|
||||
return;
|
||||
}
|
||||
self.clear();
|
||||
const row = self.get_row(key);
|
||||
this.clear();
|
||||
const row = this.get_row(key);
|
||||
if (row === undefined) {
|
||||
blueslip.error("Cannot highlight key for list_cursor: " + key);
|
||||
blueslip.error("Cannot highlight key for ListCursor: " + key);
|
||||
return;
|
||||
}
|
||||
self.curr_key = key;
|
||||
this.curr_key = key;
|
||||
row.highlight();
|
||||
};
|
||||
}
|
||||
|
||||
self.reset = function () {
|
||||
self.clear();
|
||||
const key = opts.list.first_key();
|
||||
reset() {
|
||||
this.clear();
|
||||
const key = this.list.first_key();
|
||||
if (key === undefined) {
|
||||
self.curr_key = undefined;
|
||||
this.curr_key = undefined;
|
||||
return;
|
||||
}
|
||||
self.go_to(key);
|
||||
};
|
||||
this.go_to(key);
|
||||
}
|
||||
|
||||
self.prev = function () {
|
||||
if (self.curr_key === undefined) {
|
||||
prev() {
|
||||
if (this.curr_key === undefined) {
|
||||
return;
|
||||
}
|
||||
const key = opts.list.prev_key(self.curr_key);
|
||||
const key = this.list.prev_key(this.curr_key);
|
||||
if (key === undefined) {
|
||||
// leave the current key
|
||||
return;
|
||||
}
|
||||
self.go_to(key);
|
||||
};
|
||||
this.go_to(key);
|
||||
}
|
||||
|
||||
self.next = function () {
|
||||
if (self.curr_key === undefined) {
|
||||
next() {
|
||||
if (this.curr_key === undefined) {
|
||||
// This is sort of a special case where we went from
|
||||
// an empty filter to having data.
|
||||
self.reset();
|
||||
this.reset();
|
||||
return;
|
||||
}
|
||||
const key = opts.list.next_key(self.curr_key);
|
||||
const key = this.list.next_key(this.curr_key);
|
||||
if (key === undefined) {
|
||||
// leave the current key
|
||||
return;
|
||||
}
|
||||
self.go_to(key);
|
||||
};
|
||||
|
||||
return self;
|
||||
};
|
||||
module.exports = list_cursor;
|
||||
window.list_cursor = list_cursor;
|
||||
this.go_to(key);
|
||||
}
|
||||
}
|
||||
module.exports = ListCursor;
|
||||
window.ListCursor = ListCursor;
|
||||
|
|
|
@ -509,7 +509,7 @@ exports.set_event_handlers = function () {
|
|||
$(this).off("scroll");
|
||||
});
|
||||
|
||||
exports.stream_cursor = list_cursor({
|
||||
exports.stream_cursor = new ListCursor({
|
||||
list: {
|
||||
scroll_container_sel: "#stream-filters-container",
|
||||
find_li(opts) {
|
||||
|
@ -545,7 +545,7 @@ exports.set_event_handlers = function () {
|
|||
});
|
||||
|
||||
$search_input.on("click", focus_stream_filter);
|
||||
$search_input.on("focusout", exports.stream_cursor.clear);
|
||||
$search_input.on("focusout", () => exports.stream_cursor.clear());
|
||||
$search_input.on("input", update_streams_for_search);
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in New Issue