mirror of
https://github.com/zulip/zulip.git
synced 2025-11-12 18:06:44 +00:00
f0d101edf5
The main point of this change is to streamline the core
code for input pills, and we use also modify user groups.
The main change to input_pill.js is that you now
configure a function called `create_item_from_text`, and
that can return an arbitrary object, and it just needs
a field called `display_value`.
Other changes:
* You now call `input.create(opts)` to create the
widget.
* There is no longer a cache, because we can
write smarter code in typeahead `source` functions
that exclude ids up front.
* There is no value/optinalKey complexity, because
the calling code can supply arbitrary objects and
do their own external data management on the pill
items.
* We eliminate `prependPill`.
* We eliminate `data`, `keys`, and `values`, and just
have `items`.
77 lines
1.9 KiB
Markdown
77 lines
1.9 KiB
Markdown
# UI: Input Pills
|
|
|
|
This is a high level and API explanation of the input pill interface in the
|
|
frontend of the Zulip web application.
|
|
|
|
## Setup
|
|
|
|
A pill container should have the following markup:
|
|
|
|
```html
|
|
<div class="pill-container">
|
|
<div class="input" contenteditable="true"></div>
|
|
</div>
|
|
```
|
|
|
|
The pills will automatically be inserted in before the ".input" in order.
|
|
|
|
## Basic Usage
|
|
|
|
```js
|
|
var pill_containter = $("#input_container");
|
|
var pills = input_pill.create({
|
|
container: pill_container,
|
|
create_item_from_text: user_pill.create_item_from_email,
|
|
get_text_from_item: user_pill.get_email_from_item,
|
|
});
|
|
```
|
|
|
|
You can look at `static/js/user_pill.js` to see how the above
|
|
methods are implemented. Essentially you just need to convert
|
|
from raw data (like an email) to structured data (like an object
|
|
with display_value, email, and user_id for a user), and vice
|
|
versa. The most important field to supply is `display_value`.
|
|
For user pills `pill_item.display_value === user.full_name`.
|
|
|
|
## Typeahead
|
|
|
|
Pills almost always work in conjunction with typeahead, and
|
|
you will want to provide a `source` function to typeahead
|
|
that can exclude items from the prior pills. Here is an
|
|
example snippet from our user group settings code.
|
|
|
|
```js
|
|
source: function () {
|
|
return user_pill.typeahead_source(pills);
|
|
},
|
|
```
|
|
|
|
And then in `user_pill.js`...
|
|
|
|
```js
|
|
exports.typeahead_source = function (pill_widget) {
|
|
var items = people.get_realm_persons();
|
|
var taken_user_ids = exports.get_user_ids(pill_widget);
|
|
items = _.filter(items, function (item) {
|
|
return taken_user_ids.indexOf(item.user_id) === -1;
|
|
});
|
|
return items;
|
|
};
|
|
```
|
|
|
|
### `onPillCreate` and `onPillRemove` methods
|
|
|
|
You can get notifications from the pill code that pills have been
|
|
created/remove.
|
|
|
|
|
|
```js
|
|
pills.onPillCreate(function () {
|
|
update_save_state();
|
|
});
|
|
|
|
pills.onPillRemove(function () {
|
|
update_save_state();
|
|
});
|
|
```
|