Skip to content

C
converse.js
Commit 3984aadb authored by JC Brand's avatar JC Brand
Browse files
Options

More work (with tests) on showing roster items under groups. 

updates #83
parent be761562
Expand all Show whitespace changes
Inline Side-by-side
Showing with 101 additions and 82 deletions
converse.js
View file @ 3984aadb
......@@ -280,6 +280,9 @@
'xa': __('This contact is away for an extended period'),
'away': __('This contact is away')
};
var DESC_GROUP_TOGGLE = __('Click to hide these contacts');
var HEADER_CURRENT_CONTACTS = __('My contacts');
var HEADER_UNGROUPED = __('Ungrouped');
// Module-level variables
// ----------------------
......@@ -2806,6 +2809,7 @@
'id': jid,
'user_id': Strophe.getNodeFromJid(jid),
'resources': [],
'groups': [],
'status': ''
}, attributes);
attrs.sorted = false;
......@@ -3252,22 +3256,22 @@
},
render: function () {
var desc_group_toggle = __('Click to hide these contacts'),
toggle_state = 'opened',
var toggle_state = 'opened', // TODO: remember state...
roster_markup = converse.templates.group_header({
label_group: this.roster_groups ? __('Ungrouped') : __('My contacts'),
desc_group_toggle: desc_group_toggle,
label_group: converse.roster_groups ? HEADER_UNGROUPED : HEADER_CURRENT_CONTACTS,
desc_group_toggle: DESC_GROUP_TOGGLE,
toggle_state: toggle_state
});
if (converse.allow_contact_requests) {
roster_markup += converse.templates.requesting_contacts({
label_contact_requests: __('Contact requests'),
desc_group_toggle: desc_group_toggle,
desc_group_toggle: DESC_GROUP_TOGGLE,
toggle_state: toggle_state
}) +
converse.templates.pending_contacts({
label_pending_contacts: __('Pending contacts'),
desc_group_toggle: desc_group_toggle,
desc_group_toggle: DESC_GROUP_TOGGLE,
toggle_state: toggle_state
});
}
......@@ -3275,10 +3279,18 @@
this.$fragment.append($(roster_markup));
},
insertRosterFragment: function () {
if (this.$fragment) {
this.$el.html(this.$fragment)
delete this.$fragment;
}
return this;
},
onAdd: function (item) {
this.addRosterItem(item).updateRoster();
this.addRosterItem(item);
if (item.get('is_last')) {
this.sortRoster().showRoster();
this.toggleHeaders().sortRoster().insertRosterFragment().updateCount();
}
if (!item.get('vcard_updated')) {
// This will update the vcard, which triggers a change
......@@ -3287,19 +3299,11 @@
}
},
showRoster: function () {
if (this.$fragment) {
this.$el.html(this.$fragment)
delete this.$fragment;
}
return this;
},
onChange: function (item) {
if ((_.size(item.changed) === 1) && _.contains(_.keys(item.changed), 'sorted')) {
return;
}
this.updateChatBox(item).renderRosterItem(item).updateRoster();
this.updateChatBox(item).renderRosterItem(item).toggleHeaders().updateCount();
if (item.changed.chat_status) { // A changed chat status implies a new sort order
this.sortRoster();
}
......@@ -3323,14 +3327,14 @@
removeAllRosterItemViews: function () {
this.removeAll();
this.updateRoster();
this.updateCount().toggleHeaders();
return this;
},
removeRosterItemView: function (item) {
if (this.get(item.id)) {
this.get(item.id).remove();
this.updateRoster();
this.updateCount().toggleHeaders();
}
return this;
},
......@@ -3361,6 +3365,32 @@
}
},
addCurrentContact: function (view) {
var $el = this.getRosterElement(),
item = view.model;
if (converse.roster_groups) {
if (item.get('groups').length === 0) {
$el.find('.roster-group[data-group="'+HEADER_UNGROUPED+'"]').after(view.el);
} else {
_.each(item.get('groups'), $.proxy(function (group) {
var $group = $el.find('.roster-group[data-group="'+group+'"]');
if ($group.length > 0) {
$group.after(view.el);
} else {
$group = $(converse.templates.group_header({
label_group: group,
desc_group_toggle: DESC_GROUP_TOGGLE,
toggle_state: 'opened' // TODO: remember state...
})).after(view.el);
this.getRosterElement().append($group);
}
},this));
}
} else {
$el.find('.roster-group[data-group="'+HEADER_CURRENT_CONTACTS+'"]').after(view.el);
}
},
addRosterItem: function (item) {
var view = new converse.RosterItemView({model: item});
this.add(item.id, view);
......@@ -3368,24 +3398,16 @@
return this;
}
view.render()
var $el = this.getRosterElement();
if (view.$el.hasClass('current-xmpp-contact')) {
// TODO: need to add group support
$el.find('.roster-group').after(view.el);
this.addCurrentContact(view);
} else if (view.$el.hasClass('pending-xmpp-contact')) {
$el.find('#pending-xmpp-contacts').after(view.el);
this.getRosterElement().find('#pending-xmpp-contacts').after(view.el);
} else if (view.$el.hasClass('requesting-xmpp-contact')) {
$el.find('#xmpp-contact-requests').after(view.render().el);
this.getRosterElement().find('#xmpp-contact-requests').after(view.render().el);
}
return this;
},
updateRoster: function (item) {
this.updateCount().toggleHeaders();
converse.emit('rosterViewUpdated');
return this;
},
updateCount: function () {
var $count = $('#online-count');
$count.text('('+this.model.getNumOnlineContacts()+')');
......
docs/source/index.rst
View file @ 3984aadb
......@@ -784,8 +784,6 @@ Here are the different events that are emitted:
+----------------------------------+---------------------------------------------------------------------------------------------------+-----------------------------------------------------------------------------------------+
| **roster** | When the roster is updated. | ``converse.on('roster', function (items) { ... });`` |
+----------------------------------+---------------------------------------------------------------------------------------------------+-----------------------------------------------------------------------------------------+
| **rosterViewUpdated** | Whenever the roster view (i.e. the rendered HTML) has changed. | ``converse.on('rosterViewUpdated', function (items) { ... });`` |
+----------------------------------+---------------------------------------------------------------------------------------------------+-----------------------------------------------------------------------------------------+
| **callButtonClicked** | When a call button (i.e. with class .toggle-call) on a chat box has been clicked. | ``converse.on('callButtonClicked', function (connection, model) { ... });`` |
+----------------------------------+---------------------------------------------------------------------------------------------------+-----------------------------------------------------------------------------------------+
| **chatBoxOpened** | When a chat box has been opened. | ``converse.on('chatBoxOpened', function (chatbox) { ... });`` |
......
mockup/controlbox.html
View file @ 3984aadb
......@@ -116,7 +116,7 @@
</dl>
<dl id="converse-roster" style="display: block;">
<dt class="roster-group" style="display: block;">
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Colleagues</a>
<a href="#" data-group="Colleagues" class="group-toggle icon-opened" title="Click to hide these contacts">Colleagues</a>
</dt>
<dd class="online current-xmpp-contact">
<a class="open-chat" title="Click to chat with this contact" href="#">
......@@ -141,7 +141,7 @@
</dd>
<dt class="roster-group" style="display: block;">
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Family</a>
<a href="#" data-group="Family" class="group-toggle icon-opened" title="Click to hide these contacts">Family</a>
</dt>
<dd class="away current-xmpp-contact">
<a class="open-chat" title="Click to chat with this contact" href="#">
......@@ -159,7 +159,7 @@
</dd>
<dt class="roster-group" style="display: block;">
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Friends</a>
<a href="#" data-group="Friends" class="group-toggle icon-opened" title="Click to hide these contacts">Friends</a>
</dt>
<dd class="online current-xmpp-contact">
<a class="open-chat" title="Click to chat with this contact" href="#">
......
spec/controlbox.js
View file @ 3984aadb
This diff is collapsed.
src/templates/group_header.html
View file @ 3984aadb
<dt class="roster-group"><a href="#" class="group-toggle icon-{{toggle_state}}" title="{{desc_group_toggle}}">{{label_group}}</a></dt>
<dt class="roster-group" data-group="{{label_group}}">
<a href="#" class="group-toggle icon-{{toggle_state}}" title="{{desc_group_toggle}}">{{label_group}}</a>
</dt>
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