mirror of
https://github.com/zulip/zulip.git
synced 2025-11-18 12:54:58 +00:00
7c588d4747
This commit adds the support to select multiple dropdown items by inheriting dropdown list widget and overriding some of it's properties. The parameters that can be passed along with it are- - widget_name: The desired name of the widget. - data: The data that needs to be populated as dropdown items. - default_text: The default text to be rendered when none of the items is selected. - on_update: Function to trigger once the filter button is pressed. - on_close: Function to trigger once the dropdown is successfully closed after filtering. - value: The default value that is initially selected by user. - limit: The maximum number of dropdown items to display on button text. This widget can later be implemented in recent topic view to replace the several ellipses filter button and also within the organisation user's page to quickly sort the users list according to their org role.
554 lines
19 KiB
JavaScript
554 lines
19 KiB
JavaScript
import $ from "jquery";
|
|
import _ from "lodash";
|
|
|
|
import render_dropdown_list from "../templates/settings/dropdown_list.hbs";
|
|
|
|
import * as blueslip from "./blueslip";
|
|
import {$t} from "./i18n";
|
|
import * as ListWidget from "./list_widget";
|
|
|
|
export function DropdownListWidget({
|
|
widget_name,
|
|
data,
|
|
default_text,
|
|
render_text = (item_name) => item_name,
|
|
null_value = null,
|
|
include_current_item = true,
|
|
value,
|
|
on_update = () => {},
|
|
}) {
|
|
// Initializing values
|
|
this.widget_name = widget_name;
|
|
this.data = data;
|
|
this.default_text = default_text;
|
|
this.render_text = render_text;
|
|
this.null_value = null_value;
|
|
this.include_current_item = include_current_item;
|
|
this.initial_value = value;
|
|
this.on_update = on_update;
|
|
|
|
this.container_id = `${widget_name}_widget`;
|
|
this.value_id = `id_${widget_name}`;
|
|
|
|
if (value === undefined) {
|
|
this.initial_value = null_value;
|
|
blueslip.warn("dropdown-list-widget: Called without a default value; using null value");
|
|
}
|
|
|
|
// Setting up dropdown_list_widget
|
|
this.setup();
|
|
}
|
|
|
|
DropdownListWidget.prototype.render_default_text = function (elem) {
|
|
elem.text(this.default_text);
|
|
elem.addClass("text-warning");
|
|
elem.closest(".input-group").find(".dropdown_list_reset_button:enabled").hide();
|
|
};
|
|
|
|
DropdownListWidget.prototype.render = function (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`);
|
|
|
|
if (!value || value === this.null_value) {
|
|
this.render_default_text(elem);
|
|
return;
|
|
}
|
|
|
|
// Happy path
|
|
const item = this.data.find((x) => x.value === value.toString());
|
|
|
|
if (item === undefined) {
|
|
this.render_default_text(elem);
|
|
return;
|
|
}
|
|
|
|
const text = this.render_text(item.name);
|
|
elem.text(text);
|
|
elem.removeClass("text-warning");
|
|
elem.closest(".input-group").find(".dropdown_list_reset_button:enabled").show();
|
|
};
|
|
|
|
DropdownListWidget.prototype.update = function (value) {
|
|
this.render(value);
|
|
this.on_update(value);
|
|
};
|
|
|
|
DropdownListWidget.prototype.register_event_handlers = function () {
|
|
$(`#${CSS.escape(this.container_id)} .dropdown-list-body`).on(
|
|
"click keypress",
|
|
".list_item",
|
|
(e) => {
|
|
const setting_elem = $(e.currentTarget).closest(
|
|
`.${CSS.escape(this.widget_name)}_setting`,
|
|
);
|
|
if (e.type === "keypress") {
|
|
if (e.key === "Enter") {
|
|
setting_elem.find(".dropdown-menu").dropdown("toggle");
|
|
} else {
|
|
return;
|
|
}
|
|
}
|
|
const value = $(e.currentTarget).attr("data-value");
|
|
this.update(value);
|
|
},
|
|
);
|
|
$(`#${CSS.escape(this.container_id)} .dropdown_list_reset_button`).on("click", (e) => {
|
|
this.update(this.null_value);
|
|
e.preventDefault();
|
|
});
|
|
};
|
|
|
|
DropdownListWidget.prototype.setup_dropdown_widget = function (data) {
|
|
const dropdown_list_body = $(
|
|
`#${CSS.escape(this.container_id)} .dropdown-list-body`,
|
|
).expectOne();
|
|
const search_input = $(`#${CSS.escape(this.container_id)} .dropdown-search > input[type=text]`);
|
|
const get_data = () => {
|
|
if (this.include_current_item) {
|
|
return data;
|
|
}
|
|
return data.filter((x) => x.value !== this.value.toString());
|
|
};
|
|
|
|
ListWidget.create(dropdown_list_body, get_data(data), {
|
|
name: `${CSS.escape(this.widget_name)}_list`,
|
|
modifier(item) {
|
|
return render_dropdown_list({item});
|
|
},
|
|
filter: {
|
|
element: search_input,
|
|
predicate(item, value) {
|
|
return item.name.toLowerCase().includes(value);
|
|
},
|
|
},
|
|
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 () {
|
|
const dropdown_toggle = $(`#${CSS.escape(this.container_id)} .dropdown-toggle`);
|
|
const search_input = $(`#${CSS.escape(this.container_id)} .dropdown-search > input[type=text]`);
|
|
|
|
dropdown_toggle.on("click", () => {
|
|
search_input.val("").trigger("input");
|
|
});
|
|
};
|
|
|
|
DropdownListWidget.prototype.dropdown_focus_events = function () {
|
|
const search_input = $(`#${CSS.escape(this.container_id)} .dropdown-search > input[type=text]`);
|
|
const dropdown_menu = $(`.${CSS.escape(this.widget_name)}_setting .dropdown-menu`);
|
|
|
|
const dropdown_elements = () => {
|
|
const dropdown_list_body = $(
|
|
`#${CSS.escape(this.container_id)} .dropdown-list-body`,
|
|
).expectOne();
|
|
|
|
return dropdown_list_body.children().find("a");
|
|
};
|
|
|
|
// Rest of the key handlers are supported by our
|
|
// bootstrap library.
|
|
dropdown_menu.on("keydown", (e) => {
|
|
function trigger_element_focus(element) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
element.trigger("focus");
|
|
}
|
|
|
|
switch (e.key) {
|
|
case "ArrowDown": {
|
|
switch (e.target) {
|
|
case dropdown_elements().last()[0]:
|
|
trigger_element_focus(search_input);
|
|
break;
|
|
case search_input[0]:
|
|
trigger_element_focus(dropdown_elements().first());
|
|
break;
|
|
}
|
|
|
|
break;
|
|
}
|
|
case "ArrowUp": {
|
|
switch (e.target) {
|
|
case dropdown_elements().first()[0]:
|
|
trigger_element_focus(search_input);
|
|
break;
|
|
case search_input[0]:
|
|
trigger_element_focus(dropdown_elements().last());
|
|
}
|
|
|
|
break;
|
|
}
|
|
case "Tab": {
|
|
switch (e.target) {
|
|
case search_input[0]:
|
|
trigger_element_focus(dropdown_elements().first());
|
|
break;
|
|
case dropdown_elements().last()[0]:
|
|
trigger_element_focus(search_input);
|
|
break;
|
|
}
|
|
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
DropdownListWidget.prototype.setup = function () {
|
|
// populate the dropdown
|
|
const dropdown_list_body = $(
|
|
`#${CSS.escape(this.container_id)} .dropdown-list-body`,
|
|
).expectOne();
|
|
const search_input = $(`#${CSS.escape(this.container_id)} .dropdown-search > input[type=text]`);
|
|
const dropdown_toggle = $(`#${CSS.escape(this.container_id)} .dropdown-toggle`);
|
|
|
|
this.setup_dropdown_widget(this.data);
|
|
|
|
$(`#${CSS.escape(this.container_id)} .dropdown-search`).on("click", (e) => {
|
|
e.stopPropagation();
|
|
});
|
|
|
|
this.dropdown_toggle_click_handler();
|
|
|
|
dropdown_toggle.on("focus", (e) => {
|
|
// On opening a Bootstrap Dropdown, the parent element receives focus.
|
|
// Here, we want our search input to have focus instead.
|
|
e.preventDefault();
|
|
// This function gets called twice when focusing the
|
|
// dropdown, and only in the second call is the input
|
|
// field visible in the DOM; so the following visibility
|
|
// check ensures we wait for the second call to focus.
|
|
if (dropdown_list_body.is(":visible")) {
|
|
search_input.trigger("focus");
|
|
}
|
|
});
|
|
|
|
this.dropdown_focus_events();
|
|
|
|
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");
|
|
if (val === null) {
|
|
val = "";
|
|
}
|
|
return val;
|
|
};
|
|
|
|
export function MultiSelectDropdownListWidget({
|
|
widget_name,
|
|
data,
|
|
default_text,
|
|
null_value = null,
|
|
on_update = () => {},
|
|
on_close,
|
|
value,
|
|
limit,
|
|
}) {
|
|
// A widget mostly similar to `DropdownListWidget` but
|
|
// used in cases of multiple dropdown selection.
|
|
|
|
// Initializing values specific to `MultiSelectDropdownListWidget`.
|
|
this.limit = limit;
|
|
this.on_close = on_close;
|
|
|
|
// Important thing to note is that this needs to be maintained as
|
|
// a reference type and not to deep clone it/assign it to a
|
|
// different variable, so that it can be later referenced within
|
|
// `list_widget` as well. The way we manage dropdown elements are
|
|
// essentially by just modifying the values in `data_selected` variable.
|
|
this.data_selected = []; // Populate the dropdown values selected by user.
|
|
|
|
DropdownListWidget.call(this, {
|
|
widget_name,
|
|
data,
|
|
default_text,
|
|
null_value,
|
|
on_update,
|
|
value,
|
|
});
|
|
|
|
if (limit === undefined) {
|
|
this.limit = 2;
|
|
blueslip.warn(
|
|
"Multiselect dropdown-list-widget: Called without limit value; using 2 as the limit",
|
|
);
|
|
}
|
|
|
|
this.initialize_dropdown_values();
|
|
}
|
|
|
|
MultiSelectDropdownListWidget.prototype = Object.create(DropdownListWidget.prototype);
|
|
|
|
MultiSelectDropdownListWidget.prototype.initialize_dropdown_values = function () {
|
|
// Stop the execution if value parameter is undefined and null_value is passed.
|
|
if (!this.initial_value || this.initial_value === this.null_value) {
|
|
return;
|
|
}
|
|
const elem = $(`#${CSS.escape(this.container_id)} #${CSS.escape(this.widget_name)}_name`);
|
|
|
|
// Push values from initial valued array to `data_selected`.
|
|
this.data_selected.push(...this.initial_value);
|
|
this.render_button_text(elem, this.limit);
|
|
};
|
|
|
|
// Set the button text as per the selected data.
|
|
MultiSelectDropdownListWidget.prototype.render_button_text = function (elem, limit) {
|
|
const items_selected = this.data_selected.length;
|
|
let text = "";
|
|
|
|
if (items_selected === 0) {
|
|
this.render_default_text(elem);
|
|
return;
|
|
} else if (limit >= items_selected) {
|
|
const data_selected = this.data.filter((data) => this.data_selected.includes(data.value));
|
|
text = data_selected.map((data) => data.name).toString();
|
|
} else {
|
|
text = $t({defaultMessage: "{items_selected} selected"}, {items_selected});
|
|
}
|
|
|
|
elem.text(text);
|
|
elem.removeClass("text-warning");
|
|
elem.closest(".input-group").find(".dropdown_list_reset_button:enabled").show();
|
|
};
|
|
|
|
// Override the DrodownListWidget `render` function.
|
|
MultiSelectDropdownListWidget.prototype.render = function (value) {
|
|
const elem = $(`#${CSS.escape(this.container_id)} #${CSS.escape(this.widget_name)}_name`);
|
|
|
|
if (!value || value === this.null_value) {
|
|
this.render_default_text(elem);
|
|
return;
|
|
}
|
|
this.render_button_text(elem, this.limit);
|
|
};
|
|
|
|
MultiSelectDropdownListWidget.prototype.dropdown_toggle_click_handler = function () {
|
|
const dropdown_toggle = $(`#${CSS.escape(this.container_id)} .dropdown-toggle`);
|
|
const search_input = $(`#${CSS.escape(this.container_id)} .dropdown-search > input[type=text]`);
|
|
|
|
dropdown_toggle.on("click", () => {
|
|
this.reset_dropdown_items();
|
|
search_input.val("").trigger("input");
|
|
});
|
|
};
|
|
|
|
// Cases where a user presses any dropdown item but accidentally closes
|
|
// the dropdown list.
|
|
MultiSelectDropdownListWidget.prototype.reset_dropdown_items = function () {
|
|
// Clear the data selected and stop the execution once the user has
|
|
// pressed the `reset` button.
|
|
if (this.is_reset) {
|
|
this.data_selected.splice(0, this.data_selected.length);
|
|
return;
|
|
}
|
|
|
|
const original_items = this.checked_items ? this.checked_items : this.initial_value;
|
|
const items_added = _.difference(this.data_selected, original_items);
|
|
|
|
// Removing the unnecessary items from dropdown.
|
|
for (const val of items_added) {
|
|
const index = this.data_selected.indexOf(val);
|
|
if (index > -1) {
|
|
this.data_selected.splice(index, 1);
|
|
}
|
|
}
|
|
|
|
// Items that are removed in dropdown but should have been a part of it
|
|
const items_removed = _.difference(original_items, this.data_selected);
|
|
this.data_selected.push(...items_removed);
|
|
};
|
|
|
|
// Override the DrodownListWidget `setup_dropdown_widget` function.
|
|
MultiSelectDropdownListWidget.prototype.setup_dropdown_widget = function (data) {
|
|
const dropdown_list_body = $(
|
|
`#${CSS.escape(this.container_id)} .dropdown-list-body`,
|
|
).expectOne();
|
|
const search_input = $(`#${CSS.escape(this.container_id)} .dropdown-search > input[type=text]`);
|
|
|
|
ListWidget.create(dropdown_list_body, data, {
|
|
name: `${CSS.escape(this.widget_name)}_list`,
|
|
modifier(item) {
|
|
return render_dropdown_list({item});
|
|
},
|
|
multiselect: {
|
|
selected_items: this.data_selected,
|
|
},
|
|
filter: {
|
|
element: search_input,
|
|
predicate(item, value) {
|
|
return item.name.toLowerCase().includes(value);
|
|
},
|
|
},
|
|
simplebar_container: $(`#${CSS.escape(this.container_id)} .dropdown-list-wrapper`),
|
|
});
|
|
};
|
|
|
|
// Add the check mark to dropdown element passed.
|
|
MultiSelectDropdownListWidget.prototype.add_check_mark = function (element) {
|
|
const value = element.attr("data-value");
|
|
const link_elem = element.find("a").expectOne();
|
|
link_elem.prepend($("<i>", {class: "fa fa-check"}));
|
|
element.addClass("checked");
|
|
this.data_selected.push(value);
|
|
};
|
|
|
|
// Remove the check mark from dropdown element.
|
|
MultiSelectDropdownListWidget.prototype.remove_check_mark = function (element) {
|
|
const icon = element.find("i").expectOne();
|
|
const value = element.attr("data-value");
|
|
const index = this.data_selected.indexOf(value);
|
|
|
|
if (index > -1) {
|
|
icon.remove();
|
|
element.removeClass("checked");
|
|
this.data_selected.splice(index, 1);
|
|
}
|
|
};
|
|
|
|
MultiSelectDropdownListWidget.prototype.dropdown_focus_events = function () {
|
|
// Main keydown event handler which transfers the focus from one child element
|
|
// to another.
|
|
|
|
const search_input = $(`#${CSS.escape(this.container_id)} .dropdown-search > input[type=text]`);
|
|
const dropdown_menu = $(`.${CSS.escape(this.widget_name)}_setting .dropdown-menu`);
|
|
const filter_button = $(`#${CSS.escape(this.container_id)} .multiselect_btn`);
|
|
|
|
const dropdown_elements = () => {
|
|
const dropdown_list_body = $(
|
|
`#${CSS.escape(this.container_id)} .dropdown-list-body`,
|
|
).expectOne();
|
|
|
|
return dropdown_list_body.children().find("a");
|
|
};
|
|
|
|
dropdown_menu.on("keydown", (e) => {
|
|
function trigger_element_focus(element) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
element.trigger("focus");
|
|
}
|
|
|
|
switch (e.key) {
|
|
case "ArrowDown": {
|
|
switch (e.target) {
|
|
case dropdown_elements().last()[0]:
|
|
trigger_element_focus(filter_button);
|
|
break;
|
|
case $(`#${CSS.escape(this.container_id)} .multiselect_btn`)[0]:
|
|
trigger_element_focus(search_input);
|
|
break;
|
|
case search_input[0]:
|
|
trigger_element_focus(dropdown_elements().first());
|
|
break;
|
|
}
|
|
|
|
break;
|
|
}
|
|
case "ArrowUp": {
|
|
switch (e.target) {
|
|
case dropdown_elements().first()[0]:
|
|
trigger_element_focus(search_input);
|
|
break;
|
|
case search_input[0]:
|
|
trigger_element_focus(filter_button);
|
|
break;
|
|
case $(`#${CSS.escape(this.container_id)} .multiselect_btn`)[0]:
|
|
trigger_element_focus(dropdown_elements().last());
|
|
break;
|
|
}
|
|
|
|
break;
|
|
}
|
|
case "Tab": {
|
|
switch (e.target) {
|
|
case search_input[0]:
|
|
trigger_element_focus(dropdown_elements().first());
|
|
break;
|
|
case filter_button[0]:
|
|
trigger_element_focus(search_input);
|
|
break;
|
|
}
|
|
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
// Override the `register_event_handlers` function.
|
|
MultiSelectDropdownListWidget.prototype.register_event_handlers = function () {
|
|
const dropdown_list_body = $(
|
|
`#${CSS.escape(this.container_id)} .dropdown-list-body`,
|
|
).expectOne();
|
|
|
|
dropdown_list_body.on("click keypress", ".list_item", (e) => {
|
|
if (e.type === "keypress" && e.key !== "Enter") {
|
|
return;
|
|
}
|
|
|
|
const element = $(e.target.closest("li"));
|
|
if (element.hasClass("checked")) {
|
|
this.remove_check_mark(element);
|
|
} else {
|
|
this.add_check_mark(element);
|
|
}
|
|
|
|
e.stopPropagation();
|
|
});
|
|
|
|
$(`#${CSS.escape(this.container_id)} .dropdown_list_reset_button`).on("click", (e) => {
|
|
// Default back the values.
|
|
this.is_reset = true;
|
|
this.checked_items = undefined;
|
|
|
|
this.update(this.null_value);
|
|
e.preventDefault();
|
|
});
|
|
|
|
$(`#${CSS.escape(this.container_id)} .multiselect_btn`).on("click", (e) => {
|
|
e.preventDefault();
|
|
|
|
// Set the value to `false` to end the scope of the
|
|
// `reset` button.
|
|
this.is_reset = false;
|
|
// We deep clone the values of `data_selected` to a new
|
|
// variable. This is so because arrays are reference types
|
|
// and modifying the parent array can change the values
|
|
// within the child array. Here, `checked_items` copies over the
|
|
// value and not just the reference.
|
|
this.checked_items = _.cloneDeep(this.data_selected);
|
|
this.update(this.data_selected);
|
|
|
|
// Cases when the user wants to pass a successful event after
|
|
// the dropdown is closed.
|
|
if (this.on_close) {
|
|
e.stopPropagation();
|
|
const setting_elem = $(e.currentTarget).closest(
|
|
`.${CSS.escape(this.widget_name)}_setting`,
|
|
);
|
|
setting_elem.find(".dropdown-menu").dropdown("toggle");
|
|
|
|
this.on_close();
|
|
}
|
|
});
|
|
};
|
|
|
|
// Returns array of values selected by user.
|
|
MultiSelectDropdownListWidget.prototype.value = function () {
|
|
let val = this.checked_items;
|
|
// Cases taken care of -
|
|
// - User never pressed the filter button -> We return the initial value.
|
|
// - User pressed the `reset` button -> We return an empty array.
|
|
if (val === undefined) {
|
|
val = this.is_reset ? [] : this.initial_value;
|
|
}
|
|
return val;
|
|
};
|