diff --git a/src/converse-rosterview.js b/src/converse-rosterview.js
index f67f9a0a6..463a890a1 100644
--- a/src/converse-rosterview.js
+++ b/src/converse-rosterview.js
@@ -3,12 +3,12 @@
* @copyright 2020, the Converse.js contributors
* @license Mozilla Public License (MPLv2)
*/
-import "backbone.vdomview";
import "@converse/headless/converse-chatboxes";
import "@converse/headless/converse-roster";
import "converse-modal";
import "formdata-polyfill";
import { compact, debounce, has, isString, uniq, without } from "lodash";
+import { HTMLView } from 'skeletor.js/src/htmlview.js';
import { Model } from 'skeletor.js/src/model.js';
import { OrderedListView } from "skeletor.js/src/overview";
import SHA1 from 'strophe.js/src/sha1';
@@ -19,10 +19,10 @@ import tpl_group_header from "templates/group_header.html";
import tpl_pending_contact from "templates/pending_contact.html";
import tpl_requesting_contact from "templates/requesting_contact.html";
import tpl_roster from "templates/roster.html";
-import tpl_roster_filter from "templates/roster_filter.html";
+import tpl_roster_filter from "templates/roster_filter.js";
import tpl_roster_item from "templates/roster_item.html";
-const { Backbone, Strophe } = converse.env;
+const { Strophe } = converse.env;
const u = converse.env.utils;
@@ -201,16 +201,8 @@ converse.plugins.add('converse-rosterview', {
},
});
- _converse.RosterFilterView = Backbone.VDOMView.extend({
- tagName: 'form',
- className: 'roster-filter-form',
- events: {
- "keydown .roster-filter": "liveFilter",
- "submit": "submitFilter",
- "click .clear-input": "clearFilter",
- "click .filter-by span": "changeTypeFilter",
- "change .state-type": "changeChatStateFilter"
- },
+ _converse.RosterFilterView = HTMLView.extend({
+ tagName: 'span',
initialize () {
this.listenTo(this.model, 'change:filter_type', this.render);
@@ -232,17 +224,22 @@ converse.plugins.add('converse-rosterview', {
label_busy: __('Busy'),
label_away: __('Away'),
label_xa: __('Extended Away'),
- label_offline: __('Offline')
+ label_offline: __('Offline'),
+ 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),
}));
},
changeChatStateFilter (ev) {
- if (ev && ev.preventDefault) { ev.preventDefault(); }
+ ev && ev.preventDefault();
this.model.save({'chat_state': this.el.querySelector('.state-type').value});
},
changeTypeFilter (ev) {
- if (ev && ev.preventDefault) { ev.preventDefault(); }
+ ev && ev.preventDefault();
const type = ev.target.dataset.type;
if (type === 'state') {
this.model.save({
@@ -258,64 +255,30 @@ converse.plugins.add('converse-rosterview', {
},
liveFilter: debounce(function () {
- this.model.save({
- 'filter_text': this.el.querySelector('.roster-filter').value
- });
+ this.model.save({'filter_text': this.el.querySelector('.roster-filter').value});
}, 250),
submitFilter (ev) {
- if (ev && ev.preventDefault) { ev.preventDefault(); }
+ ev && ev.preventDefault();
this.liveFilter();
- this.render();
},
+ /**
+ * Returns true if the filter is enabled (i.e. if the user
+ * has added values to the filter).
+ * @private
+ * @method _converse.RosterFilterView#isActive
+ */
isActive () {
- /* Returns true if the filter is enabled (i.e. if the user
- * has added values to the filter).
- */
- if (this.model.get('filter_type') === 'state' ||
- this.model.get('filter_text')) {
- return true;
- }
- return false;
+ return (this.model.get('filter_type') === 'state' || this.model.get('filter_text'));
},
shouldBeVisible () {
return _converse.roster && _converse.roster.length >= 5 || this.isActive();
},
- showOrHide () {
- if (this.shouldBeVisible()) {
- this.show();
- } else {
- this.hide();
- }
- },
-
- show () {
- if (u.isVisible(this.el)) { return this; }
- this.el.classList.add('fade-in');
- this.el.classList.remove('hidden');
- return this;
- },
-
- hide () {
- if (!u.isVisible(this.el)) { return this; }
- this.model.save({
- 'filter_text': '',
- 'chat_state': 'online'
- });
- this.el.classList.add('hidden');
- return this;
- },
-
clearFilter (ev) {
- if (ev && ev.preventDefault) {
- ev.preventDefault();
- u.hideElement(this.el.querySelector('.clear-input'));
- }
- const roster_filter = this.el.querySelector('.roster-filter');
- roster_filter.value = '';
+ ev && ev.preventDefault();
this.model.save({'filter_text': ''});
}
});
@@ -819,7 +782,7 @@ converse.plugins.add('converse-rosterview', {
const model = new _converse.RosterFilter();
model.id = `_converse.rosterfilter-${_converse.bare_jid}`;
model.browserStorage = _converse.createStore(model.id);
- this.filter_view = new _converse.RosterFilterView({'model': model});
+ this.filter_view = new _converse.RosterFilterView({model});
this.listenTo(this.filter_view.model, 'change', this.updateFilter);
this.filter_view.model.fetch();
},
@@ -844,7 +807,7 @@ converse.plugins.add('converse-rosterview', {
if (!u.isVisible(this.roster_el)) {
u.showElement(this.roster_el);
}
- this.filter_view.showOrHide();
+ this.filter_view.render();
return this;
},
diff --git a/src/templates/roster_filter.html b/src/templates/roster_filter.html
deleted file mode 100644
index 4f70882c7..000000000
--- a/src/templates/roster_filter.html
+++ /dev/null
@@ -1,34 +0,0 @@
-
diff --git a/src/templates/roster_filter.js b/src/templates/roster_filter.js
new file mode 100644
index 000000000..5e690a9f6
--- /dev/null
+++ b/src/templates/roster_filter.js
@@ -0,0 +1,35 @@
+import { html } from "lit-html";
+
+
+export default (o) => html`
+
+`;