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

dropdown_list_widget: Convert DropdownListWidget to ES6 class. 

Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Anders Kaseorg 2022-04-27 15:22:05 -07:00 committed by Tim Abbott
parent d131327760
commit 567859d15d
1 changed files with 230 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
static/js/dropdown_list_widget.js
View File

@ -8,7 +8,8 @@ import * as blueslip from "./blueslip";
import {$t} from "./i18n";
import * as ListWidget from "./list_widget";
export function DropdownListWidget({
export class DropdownListWidget {
constructor({
widget_name,
data,
default_text,
@ -17,7 +18,7 @@ export function DropdownListWidget({
include_current_item = true,
value,
on_update = () => {},
}) {
}) {
// Initializing values
this.widget_name = widget_name;
this.data = data;
@ -35,15 +36,15 @@ export function DropdownListWidget({
this.initial_value = null_value;
blueslip.warn("dropdown-list-widget: Called without a default value; using null value");
}
}
}
DropdownListWidget.prototype.render_default_text = function ($elem) {
render_default_text($elem) {
$elem.text(this.default_text);
$elem.addClass("text-warning");
$elem.closest(".input-group").find(".dropdown_list_reset_button").hide();
};
}
DropdownListWidget.prototype.render = function (value) {
render(value) {
$(`#${CSS.escape(this.container_id)} #${CSS.escape(this.value_id)}`).data("value", value);
const $elem = $(`#${CSS.escape(this.container_id)} #${CSS.escape(this.widget_name)}_name`);
@ -65,14 +66,14 @@ DropdownListWidget.prototype.render = function (value) {
$elem.text(text);
$elem.removeClass("text-warning");
$elem.closest(".input-group").find(".dropdown_list_reset_button").show();
};
}
DropdownListWidget.prototype.update = function (value) {
update(value) {
this.render(value);
this.on_update(value);
};
}
DropdownListWidget.prototype.register_event_handlers = function () {
register_event_handlers() {
$(`#${CSS.escape(this.container_id)} .dropdown-list-body`).on(
"click keypress",
".list_item",
@ -95,9 +96,9 @@ DropdownListWidget.prototype.register_event_handlers = function () {
this.update(this.null_value);
e.preventDefault();
});
};
}
DropdownListWidget.prototype.setup_dropdown_widget = function (data) {
setup_dropdown_widget(data) {
const $dropdown_list_body = $(
`#${CSS.escape(this.container_id)} .dropdown-list-body`,
).expectOne();
@ -124,10 +125,10 @@ DropdownListWidget.prototype.setup_dropdown_widget = function (data) {
},
$simplebar_container: $(`#${CSS.escape(this.container_id)} .dropdown-list-wrapper`),
});
};
}
// Sets the focus to the ListWidget input once the dropdown button is clicked.
DropdownListWidget.prototype.dropdown_toggle_click_handler = function () {
// Sets the focus to the ListWidget input once the dropdown button is clicked.
dropdown_toggle_click_handler() {
const $dropdown_toggle = $(`#${CSS.escape(this.container_id)} .dropdown-toggle`);
const $search_input = $(
`#${CSS.escape(this.container_id)} .dropdown-search > input[type=text]`,
@ -136,9 +137,9 @@ DropdownListWidget.prototype.dropdown_toggle_click_handler = function () {
$dropdown_toggle.on("click", () => {
$search_input.val("").trigger("input");
});
};
}
DropdownListWidget.prototype.dropdown_focus_events = function () {
dropdown_focus_events() {
const $search_input = $(
`#${CSS.escape(this.container_id)} .dropdown-search > input[type=text]`,
);
@ -199,9 +200,9 @@ DropdownListWidget.prototype.dropdown_focus_events = function () {
}
}
});
};
}
DropdownListWidget.prototype.setup = function () {
setup() {
// populate the dropdown
const $dropdown_list_body = $(
`#${CSS.escape(this.container_id)} .dropdown-list-body`,
@ -236,16 +237,19 @@ DropdownListWidget.prototype.setup = function () {
this.render(this.initial_value);
this.register_event_handlers();
};
}
// Returns the updated value
DropdownListWidget.prototype.value = function () {
let val = $(`#${CSS.escape(this.container_id)} #${CSS.escape(this.value_id)}`).data("value");
// Returns the updated value
value() {
let val = $(`#${CSS.escape(this.container_id)} #${CSS.escape(this.value_id)}`).data(
"value",
);
if (val === null) {
val = "";
}
return val;
};
}
}
// A widget mostly similar to `DropdownListWidget` but
// used in cases of multiple dropdown selection.