Skip to content

C
converse.js
Commit 8e0f8f0a authored by JC Brand's avatar JC Brand
Browse files
Options

Add the ability to filter contacts by chat state. 

The roster filter is now also remembered across page loads.
parent 885c553e
Hide whitespace changes
Inline Side-by-side
Showing with 324 additions and 133 deletions
css/converse.css
View file @ 8e0f8f0a
......@@ -1848,6 +1848,15 @@
background-position: right 3px center; }
#conversejs #converse-roster .roster-filter-group .roster-filter.onX {
cursor: pointer; }
#conversejs #converse-roster .roster-filter-group .state-type {
float: left;
border: 1px solid #999;
font-size: calc(14px - 2px);
height: 25px;
margin: 0;
padding: 0;
padding-left: 0.4em;
width: 53%; }
#conversejs #converse-roster .roster-filter-group .filter-type {
display: table-cell;
float: right;
......
docs/CHANGES.md
View file @ 8e0f8f0a
......@@ -2,8 +2,10 @@
## 1.0.0 (Unreleased)
- Better Sass/CSS for responsive/mobile views. [jcbrand]
- Split converse.js up into different plugin modules. [jcbrand]
- Better Sass/CSS for responsive/mobile views. New mobile-only build. [jcbrand]
- Roster contacts can now be filtered by chat state and roster filters are
remembered across page loads. [jcbrand]
- Add support for messages with type `headline`, often used for notifications
from the server. [jcbrand]
- Add stanza-specific event listener `converse.listen.stanza`.
......
sass/_roster.scss
View file @ 8e0f8f0a
......@@ -44,6 +44,16 @@
.roster-filter.onX {
cursor: pointer;
}
.state-type {
float: left;
border: 1px solid #999;
font-size: calc(#{$font-size} - 2px);
height: $controlbox-dropdown-height;
margin: 0;
padding: 0;
padding-left: 0.4em;
width: 53%;
}
.filter-type {
display: table-cell;
float: right;
......
spec/controlbox.js
View file @ 8e0f8f0a
......@@ -138,28 +138,38 @@
test_utils.openControlBox();
});
it("will only appear when roster contacts flow over the visible area", $.proxy(function () {
_clearContacts();
it("will only appear when roster contacts flow over the visible area", function () {
var $filter = converse.rosterview.$('.roster-filter');
var names = mock.cur_names;
expect($filter.length).toBe(1);
expect($filter.is(':visible')).toBeFalsy();
for (var i=0; i<names.length; i++) {
converse.roster.create({
ask: null,
fullname: names[i],
jid: names[i].replace(/ /g,'.').toLowerCase() + '@localhost',
requesting: 'false',
subscription: 'both'
});
runs(function () {
_clearContacts();
converse.rosterview.update(); // XXX: Will normally called as event handler
});
waits(5); // Needed, due to debounce
runs(function () {
expect($filter.length).toBe(1);
expect($filter.is(':visible')).toBeFalsy();
for (var i=0; i<names.length; i++) {
converse.roster.create({
ask: null,
fullname: names[i],
jid: names[i].replace(/ /g,'.').toLowerCase() + '@localhost',
requesting: 'false',
subscription: 'both'
});
converse.rosterview.update(); // XXX: Will normally called as event handler
}
});
waits(5); // Needed, due to debounce
runs(function () {
$filter = converse.rosterview.$('.roster-filter');
if (converse.rosterview.$roster.hasScrollBar()) {
expect($filter.is(':visible')).toBeTruthy();
} else {
expect($filter.is(':visible')).toBeFalsy();
}
}
}, converse));
});
});
it("can be used to filter the contacts shown", function () {
var $filter;
......@@ -171,8 +181,9 @@
$filter = converse.rosterview.$('.roster-filter');
$roster = converse.rosterview.$roster;
});
waits(350); // Needed, due to debounce
waits(5); // Needed, due to debounce in "update" method
runs(function () {
converse.rosterview.filter_view.delegateEvents();
expect($roster.find('dd:visible').length).toBe(15);
expect($roster.find('dt:visible').length).toBe(5);
$filter.val("candice");
......@@ -180,30 +191,33 @@
expect($roster.find('dt:visible').length).toBe(5); // ditto
$filter.trigger('keydown');
});
waits(350); // Needed, due to debounce
waits(550); // Needed, due to debounce
runs (function () {
expect($roster.find('dd:visible').length).toBe(1);
expect($roster.find('dd:visible').eq(0).text().trim()).toBe('Candice van der Knijff');
expect($roster.find('dt:visible').length).toBe(1);
expect($roster.find('dt:visible').eq(0).text()).toBe('colleagues');
$filter = converse.rosterview.$('.roster-filter');
$filter.val("an");
$filter.trigger('keydown');
});
waits(350); // Needed, due to debounce
waits(550); // Needed, due to debounce
runs (function () {
expect($roster.find('dd:visible').length).toBe(5);
expect($roster.find('dt:visible').length).toBe(4);
$filter = converse.rosterview.$('.roster-filter');
$filter.val("xxx");
$filter.trigger('keydown');
});
waits(350); // Needed, due to debounce
waits(550); // Needed, due to debounce
runs (function () {
expect($roster.find('dd:visible').length).toBe(0);
expect($roster.find('dt:visible').length).toBe(0);
$filter = converse.rosterview.$('.roster-filter');
$filter.val(""); // Check that contacts are shown again, when the filter string is cleared.
$filter.trigger('keydown');
});
waits(350); // Needed, due to debounce
waits(550); // Needed, due to debounce
runs(function () {
expect($roster.find('dd:visible').length).toBe(15);
expect($roster.find('dt:visible').length).toBe(5);
......@@ -219,12 +233,13 @@
converse.roster_groups = true;
_clearContacts();
utils.createGroupedContacts();
converse.rosterview.filter_view.delegateEvents();
$filter = converse.rosterview.$('.roster-filter');
$roster = converse.rosterview.$roster;
$type = converse.rosterview.$('.filter-type');
$type.val('groups');
});
waits(350); // Needed, due to debounce
waits(550); // Needed, due to debounce
runs(function () {
expect($roster.find('dd:visible').length).toBe(15);
expect($roster.find('dt:visible').length).toBe(5);
......@@ -233,22 +248,24 @@
expect($roster.find('dt:visible').length).toBe(5); // ditto
$filter.trigger('keydown');
});
waits(350); // Needed, due to debounce
waits(550); // Needed, due to debounce
runs (function () {
expect($roster.find('dt:visible').length).toBe(1);
expect($roster.find('dt:visible').eq(0).text()).toBe('colleagues');
// Check that all contacts under the group are shown
expect($roster.find('dt:visible').nextUntil('dt', 'dd:hidden').length).toBe(0);
$filter = converse.rosterview.$('.roster-filter');
$filter.val("xxx");
$filter.trigger('keydown');
});
waits(350); // Needed, due to debounce
waits(550); // Needed, due to debounce
runs (function () {
expect($roster.find('dt:visible').length).toBe(0);
$filter = converse.rosterview.$('.roster-filter');
$filter.val(""); // Check that groups are shown again, when the filter string is cleared.
$filter.trigger('keydown');
});
waits(350); // Needed, due to debounce
waits(550); // Needed, due to debounce
runs(function () {
expect($roster.find('dd:visible').length).toBe(15);
expect($roster.find('dt:visible').length).toBe(5);
......@@ -262,12 +279,14 @@
utils.createGroupedContacts();
var $filter = converse.rosterview.$('.roster-filter');
runs (function () {
converse.rosterview.filter_view.delegateEvents();
$filter.val("xxx");
$filter.trigger('keydown');
expect($filter.hasClass("x")).toBeFalsy();
});
waits(350); // Needed, due to debounce
waits(550); // Needed, due to debounce
runs (function () {
$filter = converse.rosterview.$('.roster-filter');
expect($filter.hasClass("x")).toBeTruthy();
$filter.addClass("onX").click();
expect($filter.val()).toBe("");
......
src/converse-controlbox.js
View file @ 8e0f8f0a
......@@ -324,7 +324,7 @@
onControlBoxToggleHidden: function () {
this.$el.show('fast', function () {
if (converse.rosterview) {
converse.rosterview.update();
converse.rosterview.updateOnlineCount();
}
utils.refreshWebkit();
converse.emit('controlBoxOpened', this);
......
src/converse-core.js
View file @ 8e0f8f0a
......@@ -779,20 +779,6 @@
.c('item', {jid: this.get('jid'), subscription: "remove"});
converse.connection.sendIQ(iq, callback, callback);
return this;
},
showInRoster: function () {
var chatStatus = this.get('chat_status');
if ((converse.show_only_online_users && chatStatus !== 'online') || (converse.hide_offline_users && chatStatus === 'offline')) {
// If pending or requesting, show
if ((this.get('ask') === 'subscribe') ||
(this.get('subscription') === 'from') ||
(this.get('requesting') === true)) {
return true;
}
return false;
}
return true;
}
});
......
src/converse-rosterview.js
View file @ 8e0f8f0a
......@@ -67,17 +67,127 @@
HEADER_WEIGHTS[HEADER_REQUESTING_CONTACTS] = 2;
HEADER_WEIGHTS[HEADER_PENDING_CONTACTS] = 3;
converse.RosterFilter = Backbone.Model.extend({
initialize: function () {
this.set({
'filter_text': '',
'filter_type': 'contacts',
'chat_state': ''
});
},
});
converse.RosterView = Backbone.Overview.extend({
tagName: 'div',
id: 'converse-roster',
converse.RosterFilterView = Backbone.View.extend({
tagName: 'span',
events: {
"keydown .roster-filter": "liveFilter",
"click .onX": "clearFilter",
"mousemove .x": "togglePointer",
"change .filter-type": "changeFilterType"
"mousemove .x": "toggleX",
"change .filter-type": "changeTypeFilter",
"change .state-type": "changeChatStateFilter"
},
initialize: function () {
this.model.on('change', this.render, this);
},
render: function () {
this.$el.html(converse.templates.roster(
_.extend(this.model.toJSON(), {
placeholder: __('Type to filter'),
label_contacts: LABEL_CONTACTS,
label_groups: LABEL_GROUPS,
label_state: __('State'),
label_any: __('Any'),
label_online: __('Online'),
label_chatty: __('Chatty'),
label_busy: __('Busy'),
label_away: __('Away'),
label_xa: __('Extended Away'),
label_offline: __('Offline')
})
));
var $roster_filter = this.$('.roster-filter');
$roster_filter[this.tog($roster_filter.val())]('x');
return this.$el;
},
tog: function (v) {
return v?'addClass':'removeClass';
},
toggleX: function (ev) {
if (ev && ev.preventDefault) { ev.preventDefault(); }
var el = ev.target;
$(el)[this.tog(el.offsetWidth-18 < ev.clientX-el.getBoundingClientRect().left)]('onX');
},
changeChatStateFilter: function (ev) {
if (ev && ev.preventDefault) { ev.preventDefault(); }
this.model.save({
'chat_state': this.$('.state-type').val()
});
},
changeTypeFilter: function (ev) {
if (ev && ev.preventDefault) { ev.preventDefault(); }
var type = ev.target.value;
if (type === 'state') {
this.model.save({
'filter_type': type,
'chat_state': this.$('.state-type').val()
});
} else {
this.model.save({
'filter_type': type,
'filter_text': this.$('.roster-filter').val(),
});
}
},
liveFilter: _.debounce(function (ev) {
if (ev && ev.preventDefault) { ev.preventDefault(); }
this.model.save({
'filter_type': this.$('.filter-type').val(),
'filter_text': this.$('.roster-filter').val()
});
}, 250),
show: function () {
if (this.$el.is(':visible')) { return this; }
this.$el.show();
return this;
},
hide: function () {
if (!this.$el.is(':visible')) { return this; }
if (this.$('.roster-filter').val().length > 0) {
// Don't hide if user is currently filtering.
return;
}
this.model.save({
'filter_text': '',
'chat_state': ''
});
this.$el.hide();
return this;
},
clearFilter: function (ev) {
if (ev && ev.preventDefault) {
ev.preventDefault();
$(ev.target).removeClass('x onX').val('');
}
this.model.save({
'filter_text': ''
});
}
});
converse.RosterView = Backbone.Overview.extend({
tagName: 'div',
id: 'converse-roster',
initialize: function () {
this.roster_handler_ref = this.registerRosterHandler();
this.rosterx_handler_ref = this.registerRosterXHandler();
......@@ -89,8 +199,42 @@
this.model.on("add", this.onGroupAdd, this);
this.model.on("reset", this.reset, this);
this.$roster = $('<dl class="roster-contacts" style="display: none;"></dl>');
// Create a model on which we can store filter properties
var model = new converse.RosterFilter();
model.id = b64_sha1('converse.rosterfilter'+converse.bare_jid);
model.browserStorage = new Backbone.BrowserStorage.local(this.filter.id);
this.filter_view = new converse.RosterFilterView({'model': model});
this.filter_view.model.on('change', this.updateFilter, this);
this.filter_view.model.fetch();
},
render: function () {
this.$el.html(this.filter_view.render());
if (!converse.allow_contact_requests) {
// XXX: if we ever support live editing of config then
// we'll need to be able to remove this class on the fly.
this.$el.addClass('no-contact-requests');
}
return this;
},
updateFilter: _.debounce(function () {
/* Filter the roster again.
* Called whenever the filter settings have been changed or
* when contacts have been added, removed or changed.
*
* Debounced so that it doesn't get called for every
* contact fetched from browser storage.
*/
converse.log('updateFilter called!!!!!!');
var type = this.filter_view.model.get('filter_type');
if (type === 'state') {
this.filter(this.filter_view.model.get('chat_state'), type);
} else {
this.filter(this.filter_view.model.get('filter_text'), type);
}
}, 100),
unregisterHandlers: function () {
converse.connection.deleteHandler(this.roster_handler_ref);
delete this.roster_handler_ref;
......@@ -100,28 +244,30 @@
delete this.presence_ref;
},
update: _.debounce(function () {
updateOnlineCount: function () {
var $count = $('#online-count');
$count.text('('+converse.roster.getNumOnlineContacts()+')');
if (!$count.is(':visible')) {
$count.show();
}
},
update: _.debounce(function () {
this.updateOnlineCount();
if (this.$roster.parent().length === 0) {
this.$el.append(this.$roster.show());
}
return this.showHideFilter();
}, converse.animate ? 100 : 0),
render: function () {
this.$el.html(converse.templates.roster({
placeholder: __('Type to filter'),
label_contacts: LABEL_CONTACTS,
label_groups: LABEL_GROUPS
}));
if (!converse.allow_contact_requests) {
// XXX: if we ever support live editing of config then
// we'll need to be able to remove this class on the fly.
this.$el.addClass('no-contact-requests');
showHideFilter: function () {
if (!this.$el.is(':visible')) {
return;
}
if (this.$roster.hasScrollBar()) {
this.filter_view.show();
} else {
this.filter_view.hide();
}
return this;
},
......@@ -163,26 +309,15 @@
return this;
},
changeFilterType: function (ev) {
if (ev && ev.preventDefault) { ev.preventDefault(); }
this.clearFilter();
this.filter(
this.$('.roster-filter').val(),
ev.target.value
);
},
tog: function (v) {
return v?'addClass':'removeClass';
},
togglePointer: function (ev) {
if (ev && ev.preventDefault) { ev.preventDefault(); }
var el = ev.target;
$(el)[this.tog(el.offsetWidth-18 < ev.clientX-el.getBoundingClientRect().left)]('onX');
},
filter: function (query, type) {
// First we make sure the filter is restored to its
// original state
_.each(this.getAll(), function (view) {
if (view.model.contacts.length > 0) {
view.show().filter('');
}
});
// Now we can filter
query = query.toLowerCase();
if (type === 'groups') {
_.each(this.getAll(), function (view, idx) {
......@@ -199,46 +334,6 @@
}
},
liveFilter: _.debounce(function (ev) {
if (ev && ev.preventDefault) { ev.preventDefault(); }
var $filter = this.$('.roster-filter');
var q = $filter.val();
var t = this.$('.filter-type').val();
$filter[this.tog(q)]('x');
this.filter(q, t);
}, 300),
clearFilter: function (ev) {
if (ev && ev.preventDefault) {
ev.preventDefault();
$(ev.target).removeClass('x onX').val('');
}
this.filter('');
},
showHideFilter: function () {
if (!this.$el.is(':visible')) {
return;
}
var $filter = this.$('.roster-filter');
var $type = this.$('.filter-type');
var visible = $filter.is(':visible');
if (visible && $filter.val().length > 0) {
// Don't hide if user is currently filtering.
return;
}
if (this.$roster.hasScrollBar()) {
if (!visible) {
$filter.show();
$type.show();
}
} else {
$filter.hide();
$type.hide();
}
return this;
},
reset: function () {
converse.roster.reset();
this.removeAll();
......@@ -288,6 +383,7 @@
onContactAdd: function (contact) {
this.addRosterContact(contact).update();
this.updateFilter();
},
onContactChange: function (contact) {
......@@ -305,7 +401,7 @@
if (_.has(contact.changed, 'subscription') && contact.changed.requesting === 'true') {
this.addContactToGroup(contact, HEADER_REQUESTING_CONTACTS);
}
this.liveFilter();
this.updateFilter();
},
updateChatBox: function (contact) {
......@@ -438,11 +534,9 @@
},
render: function () {
if (!this.model.showInRoster()) {
if (!this.mayBeShown()) {
this.$el.hide();
return this;
} else if (this.$el[0].style.display === "none") {
this.$el.show();
}
var item = this.model,
ask = item.get('ask'),
......@@ -509,6 +603,45 @@
return this;
},
isGroupCollapsed: function () {
/* Check whether the group in which this contact appears is
* collapsed.
*/
// XXX: this sucks and is fragile.
// It's because I tried to do the "right thing"
// and use definition lists to represent roster groups.
// If roster group items were inside the group elements, we
// would simplify things by not having to check whether the
// group is collapsed or not.
var name = this.$el.prevAll('dt:first').data('group');
var group = converse.rosterview.model.where({'name': name})[0];
if (group.get('state') === converse.CLOSED) {
return true;
}
return false;
},
mayBeShown: function () {
/* Return a boolean indicating whether this contact should
* generally be visible in the roster.
*
* It doesn't check for the more specific case of whether
* the group it's in is collapsed (see isGroupCollapsed).
*/
var chatStatus = this.model.get('chat_status');
if ((converse.show_only_online_users && chatStatus !== 'online') ||
(converse.hide_offline_users && chatStatus === 'offline')) {
// If pending or requesting, show
if ((this.model.get('ask') === 'subscribe') ||
(this.model.get('subscription') === 'from') ||
(this.model.get('requesting') === true)) {
return true;
}
return false;
}
return true;
},
openChat: function (ev) {
if (ev && ev.preventDefault) { ev.preventDefault(); }
return converse.chatboxviews.showChat(this.model.attributes);
......@@ -606,7 +739,7 @@
var view = new converse.RosterContactView({model: contact});
this.add(contact.get('id'), view);
view = this.positionContact(contact).render();
if (contact.showInRoster()) {
if (view.mayBeShown()) {
if (this.model.get('state') === converse.CLOSED) {
if (view.$el[0].style.display !== "none") { view.$el.hide(); }
if (!this.$el.is(':visible')) { this.$el.show(); }
......@@ -635,18 +768,19 @@
show: function () {
this.$el.show();
_.each(this.getAll(), function (contactView) {
if (contactView.model.showInRoster()) {
contactView.$el.show();
_.each(this.getAll(), function (view) {
if (view.mayBeShown() && !view.isGroupCollapsed()) {
view.$el.show();
}
});
return this;
},
hide: function () {
this.$el.nextUntil('dt').addBack().hide();
},
filter: function (q) {
filter: function (q, type) {
/* Filter the group's contacts based on the query "q".
* The query is matched against the contact's full name.
* If all contacts are filtered out (i.e. hidden), then the
......@@ -656,16 +790,26 @@
if (q.length === 0) {
if (this.model.get('state') === converse.OPENED) {
this.model.contacts.each(function (item) {
if (item.showInRoster()) {
this.get(item.get('id')).$el.show();
var view = this.get(item.get('id'));
if (view.mayBeShown() && !view.isGroupCollapsed()) {
view.$el.show();
}
}.bind(this));
}
this.showIfNecessary();
} else {
q = q.toLowerCase();
matches = this.model.contacts.filter(utils.contains.not('fullname', q));
if (matches.length === this.model.contacts.length) { // hide the whole group
if (type === 'state') {
matches = this.model.contacts.filter(
utils.contains.not('chat_status', q)
);
} else {
matches = this.model.contacts.filter(
utils.contains.not('fullname', q)
);
}
if (matches.length === this.model.contacts.length) {
// hide the whole group
this.hide();
} else {
_.each(matches, function (item) {
......@@ -696,7 +840,7 @@
$el.removeClass("icon-closed").addClass("icon-opened");
this.model.save({state: converse.OPENED});
this.filter(
converse.rosterview.$('.roster-filter').val(),
converse.rosterview.$('.roster-filter').val() || '',
converse.rosterview.$('.filter-type').val()
);
}
......
src/templates/roster.html
View file @ 8e0f8f0a
<form class="pure-form roster-filter-group input-button-group">
<input style="display: none;" class="roster-filter" placeholder="{{placeholder}}">
<select style="display: none;" class="filter-type">
<option value="contacts">{{label_contacts}}</option>
<option value="groups">{{label_groups}}</option>
<input value="{{filter_text}}" class="roster-filter"
placeholder="{{placeholder}}"
{[ if (filter_type === 'state') { ]} style="display: none" {[ } ]} >
<select class="state-type" {[ if (filter_type !== 'state') { ]} style="display: none" {[ } ]} >
<option value="">{{label_any}}</option>
<option {[ if (chat_state === 'online') { ]} selected="selected" {[ } ]}
value="online">{{label_online}}</option>
<option {[ if (chat_state === 'chatty') { ]} selected="selected" {[ } ]}
value="chatty">{{label_chatty}}</option>
<option {[ if (chat_state === 'dnd') { ]} selected="selected" {[ } ]}
value="dnd">{{label_busy}}</option>
<option {[ if (chat_state === 'away') { ]} selected="selected" {[ } ]}
value="away">{{label_away}}</option>
<option {[ if (chat_state === 'xa') { ]} selected="selected" {[ } ]}
value="xa">{{label_xa}}</option>
<option {[ if (chat_state === 'offline') { ]} selected="selected" {[ } ]}
value="offline">{{label_offline}}</option>
</select>
<select class="filter-type">
<option {[ if (filter_type === 'contacts') { ]} selected="selected" {[ } ]}
value="contacts">{{label_contacts}}</option>
<option {[ if (filter_type === 'groups') { ]} selected="selected" {[ } ]}
value="groups">{{label_groups}}</option>
<option {[ if (filter_type === 'state') { ]} selected="selected" {[ } ]}
value="state">{{label_state}}</option>
</select>
</form>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7