Replace roster filter VDOMView with HTMLView

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;
             },
 

src/templates/roster_filter.html

@@ -1,34 +0,0 @@
-<form class="controlbox-padded roster-filter-form input-button-group {[ if (!o.visible) { ]} hidden {[ } ]}">
-    <div class="form-inline flex-nowrap">
-        <div class="filter-by d-flex flex-nowrap">
-            <span class="fa fa-user {[ if (o.filter_type === 'contacts') { ]} selected {[ } ]}" data-type="contacts" title="{{{o.title_contact_filter}}}"></span>
-            <span class="fa fa-users {[ if (o.filter_type === 'groups') { ]} selected {[ } ]}" data-type="groups" title="{{{o.title_group_filter}}}"></span>
-            <span class="fa fa-circle {[ if (o.filter_type === 'state') { ]} selected {[ } ]}" data-type="state" title="{{{o.title_status_filter}}}"></span>
-        </div>
-
-        <div class="btn-group">
-            <input {[ if (o.filter_text) { ]} value="{{{o.filter_text}}}" {[ } ]}
-                class="roster-filter form-control {[ if (o.filter_type === 'state') { ]} hidden {[ } ]}"
-                placeholder="{{{o.placeholder}}}"/>
-            <span class="clear-input fa fa-times {[ if (!o.filter_text || o.filter_type === 'state') { ]} hidden {[ } ]}"></span>
-        </div>
-
-        <select class="form-control state-type {[ if (o.filter_type !== 'state') { ]} hidden {[ } ]}">
-            <option value="">{{{o.label_any}}}</option>
-            <option {[ if (o.chat_state === 'unread_messages') { ]} selected="selected" {[ } ]}
-                value="unread_messages">{{{o.label_unread_messages}}}</option>
-            <option {[ if (o.chat_state === 'online') { ]} selected="selected" {[ } ]}
-                value="online">{{{o.label_online}}}</option>
-            <option {[ if (o.chat_state === 'chat') { ]} selected="selected" {[ } ]}
-                value="chat">{{{o.label_chatty}}}</option>
-            <option {[ if (o.chat_state === 'dnd') { ]} selected="selected" {[ } ]}
-                value="dnd">{{{o.label_busy}}}</option>
-            <option {[ if (o.chat_state === 'away') { ]} selected="selected" {[ } ]}
-                value="away">{{{o.label_away}}}</option>
-            <option {[ if (o.chat_state === 'xa') { ]} selected="selected" {[ } ]}
-                value="xa">{{{o.label_xa}}}</option>
-            <option {[ if (o.chat_state === 'offline') { ]} selected="selected" {[ } ]}
-                value="offline">{{{o.label_offline}}}</option>
-        </select>
-    </div>
-</form>

src/templates/roster_filter.js

@@ -0,0 +1,35 @@
+import { html } from "lit-html";
+
+
+export default (o) => html`
+    <form class="controlbox-padded roster-filter-form input-button-group ${ (!o.visible) ? 'hidden' : 'fade-in' }"
+          @submit=${o.submitFilter}>
+        <div class="form-inline flex-nowrap">
+            <div class="filter-by d-flex flex-nowrap">
+                <span @click=${o.changeTypeFilter} class="fa fa-user ${ (o.filter_type === 'contacts') ? 'selected' : '' }" data-type="contacts" title="${o.title_contact_filter}"></span>
+                <span @click=${o.changeTypeFilter} class="fa fa-users ${ (o.filter_type === 'groups') ? 'selected' : '' }" data-type="groups" title="${o.title_group_filter}"></span>
+                <span @click=${o.changeTypeFilter} class="fa fa-circle ${ (o.filter_type === 'state') ? 'selected' : '' }" data-type="state" title="${o.title_status_filter}"></span>
+            </div>
+            <div class="btn-group">
+                <input .value="${o.filter_text || ''}"
+                       @keydown=${o.liveFilter}
+                       class="roster-filter form-control ${ (o.filter_type === 'state') ? 'hidden' : '' }"
+                       placeholder="${o.placeholder}"/>
+                <span class="clear-input fa fa-times ${ (!o.filter_text || o.filter_type === 'state') ? 'hidden' : '' }"
+                      @click=${o.clearFilter}>
+                </span>
+            </div>
+            <select class="form-control state-type ${ (o.filter_type !== 'state') ? 'hidden' : '' }"
+                    @change=${o.changeChatStateFilter}>
+                <option value="">${o.label_any}</option>
+                <option ?selected=${o.chat_state === 'unread_messages'} value="unread_messages">${o.label_unread_messages}</option>
+                <option ?selected=${o.chat_state === 'online'} value="online">${o.label_online}</option>
+                <option ?selected=${o.chat_state === 'chat'} value="chat">${o.label_chatty}</option>
+                <option ?selected=${o.chat_state === 'dnd'} value="dnd">${o.label_busy}</option>
+                <option ?selected=${o.chat_state === 'away'} value="away">${o.label_away}</option>
+                <option ?selected=${o.chat_state === 'xa'} value="xa">${o.label_xa}</option>
+                <option ?selected=${o.chat_state === 'offline'} value="offline">${o.label_offline}</option>
+            </select>
+        </div>
+    </form>
+`;