Replace roster filter VDOMView with HTMLView
This commit is contained in:
parent
39f189b1d1
commit
8b5227761e
@ -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;
|
||||
},
|
||||
|
||||
|
@ -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>
|
35
src/templates/roster_filter.js
Normal file
35
src/templates/roster_filter.js
Normal file
@ -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>
|
||||
`;
|
Loading…
Reference in New Issue
Block a user