108 lines
3.3 KiB
JavaScript
108 lines
3.3 KiB
JavaScript
import tpl_roster_filter from "./templates/roster_filter.js";
|
|
import { ElementView } from '@converse/skeletor/src/element.js';
|
|
import { Model } from '@converse/skeletor/src/model.js';
|
|
import { _converse, api } from "@converse/headless/core";
|
|
import { debounce } from "lodash-es";
|
|
import { render } from 'lit-html';
|
|
|
|
export const RosterFilter = Model.extend({
|
|
initialize () {
|
|
this.set({
|
|
'filter_text': '',
|
|
'filter_type': 'contacts',
|
|
'chat_state': 'online'
|
|
});
|
|
}
|
|
});
|
|
|
|
export class RosterFilterView extends ElementView {
|
|
tagName = 'span';
|
|
|
|
initialize () {
|
|
const model = new _converse.RosterFilter();
|
|
model.id = `_converse.rosterfilter-${_converse.bare_jid}`;
|
|
model.browserStorage = _converse.createStore(model.id);
|
|
this.model = model;
|
|
_converse.roster_filter = model;
|
|
|
|
this.liveFilter = debounce(() => {
|
|
this.model.save({'filter_text': this.querySelector('.roster-filter').value});
|
|
}, 250);
|
|
|
|
this.listenTo(this.model, 'change', this.render);
|
|
this.listenTo(
|
|
this.model,
|
|
'change',
|
|
() => this.dispatchEvent(new CustomEvent('update', { 'detail': this.model.changed }))
|
|
);
|
|
|
|
this.listenTo(_converse.roster, "add", this.render);
|
|
this.listenTo(_converse.roster, "destroy", this.render);
|
|
this.listenTo(_converse.roster, "remove", this.render);
|
|
_converse.presences.on('change:show', this.render, this);
|
|
|
|
this.model.fetch();
|
|
this.render();
|
|
}
|
|
|
|
render () {
|
|
render(tpl_roster_filter(
|
|
Object.assign(this.model.toJSON(), {
|
|
visible: this.shouldBeVisible(),
|
|
changeChatStateFilter: ev => this.changeChatStateFilter(ev),
|
|
changeTypeFilter: ev => this.changeTypeFilter(ev),
|
|
clearFilter: ev => this.clearFilter(ev),
|
|
liveFilter: ev => this.liveFilter(ev),
|
|
submitFilter: ev => this.submitFilter(ev),
|
|
})), this);
|
|
return this;
|
|
}
|
|
|
|
changeChatStateFilter (ev) {
|
|
ev && ev.preventDefault();
|
|
this.model.save({'chat_state': this.querySelector('.state-type').value});
|
|
}
|
|
|
|
changeTypeFilter (ev) {
|
|
ev && ev.preventDefault();
|
|
const type = ev.target.dataset.type;
|
|
if (type === 'state') {
|
|
this.model.save({
|
|
'filter_type': type,
|
|
'chat_state': this.querySelector('.state-type').value
|
|
});
|
|
} else {
|
|
this.model.save({
|
|
'filter_type': type,
|
|
'filter_text': this.querySelector('.roster-filter').value
|
|
});
|
|
}
|
|
}
|
|
|
|
submitFilter (ev) {
|
|
ev && ev.preventDefault();
|
|
this.liveFilter();
|
|
}
|
|
|
|
/**
|
|
* Returns true if the filter is enabled (i.e. if the user
|
|
* has added values to the filter).
|
|
* @private
|
|
* @method _converse.RosterFilterView#isActive
|
|
*/
|
|
isActive () {
|
|
return (this.model.get('filter_type') === 'state' || this.model.get('filter_text'));
|
|
}
|
|
|
|
shouldBeVisible () {
|
|
return _converse.roster && _converse.roster.length >= 5 || this.isActive();
|
|
}
|
|
|
|
clearFilter (ev) {
|
|
ev && ev.preventDefault();
|
|
this.model.save({'filter_text': ''});
|
|
}
|
|
}
|
|
|
|
api.elements.define('converse-roster-filter', RosterFilterView);
|