Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Replace roster filter VDOMView with HTMLView

Browse Source
This commit is contained in:
JC Brand 2020-01-30 12:03:28 +01:00
parent 39f189b1d1
commit 8b5227761e
3 changed files with 60 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/converse-rosterview.js
View File

@ -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();
},
isActive () {
/* Returns true if the filter is enabled (i.e. if the user
/**
* Returns true if the filter is enabled (i.e. if the user
* has added values to the filter).
* @private
* @method _converse.RosterFilterView#isActive
*/
if (this.model.get('filter_type') === 'state' ||
this.model.get('filter_text')) {
return true;
}
return false;
isActive () {
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;
},

34
src/templates/roster_filter.html
View File

@ -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
View 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>
`;