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

dropdown_list_widget: Convert DropdownListWidget to ES6 class.

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