Some work on removing jQuery from converse-rosterview
This commit is contained in:
JC Brand
parent
0d256dbaf8
commit
550cc51724
@ -163,6 +163,7 @@ require.config({
|
||||
"room_item": "src/templates/room_item",
|
||||
"room_panel": "src/templates/room_panel",
|
||||
"roster": "src/templates/roster",
|
||||
"roster_filter": "src/templates/roster_filter",
|
||||
"roster_item": "src/templates/roster_item",
|
||||
"search_contact": "src/templates/search_contact",
|
||||
"select_option": "src/templates/select_option",
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
"tpl!pending_contact",
|
||||
"tpl!requesting_contact",
|
||||
"tpl!roster",
|
||||
"tpl!roster_filter",
|
||||
"tpl!roster_item"
|
||||
], factory);
|
||||
}(this, function (
|
||||
@ -20,6 +21,7 @@
|
||||
tpl_pending_contact,
|
||||
tpl_requesting_contact,
|
||||
tpl_roster,
|
||||
tpl_roster_filter,
|
||||
tpl_roster_item) {
|
||||
"use strict";
|
||||
var $ = converse.env.jQuery,
|
||||
@ -145,7 +147,7 @@
|
||||
},
|
||||
|
||||
render: function () {
|
||||
this.$el.html(tpl_roster(
|
||||
this.el.innerHTML = tpl_roster_filter(
|
||||
_.extend(this.model.toJSON(), {
|
||||
placeholder: __('Filter'),
|
||||
label_contacts: LABEL_CONTACTS,
|
||||
@ -158,8 +160,7 @@
|
||||
label_away: __('Away'),
|
||||
label_xa: __('Extended Away'),
|
||||
label_offline: __('Offline')
|
||||
})
|
||||
));
|
||||
}));
|
||||
this.renderClearButton();
|
||||
return this.$el;
|
||||
},
|
||||
@ -182,7 +183,7 @@
|
||||
changeChatStateFilter: function (ev) {
|
||||
if (ev && ev.preventDefault) { ev.preventDefault(); }
|
||||
this.model.save({
|
||||
'chat_state': this.$('.state-type').val()
|
||||
'chat_state': this.el.querySelector('.state-type').value
|
||||
});
|
||||
},
|
||||
|
||||
@ -192,20 +193,20 @@
|
||||
if (type === 'state') {
|
||||
this.model.save({
|
||||
'filter_type': type,
|
||||
'chat_state': this.$('.state-type').val()
|
||||
'chat_state': this.el.querySelector('.state-type').value
|
||||
});
|
||||
} else {
|
||||
this.model.save({
|
||||
'filter_type': type,
|
||||
'filter_text': this.$('.roster-filter').val(),
|
||||
'filter_text': this.el.querySelector('.roster-filter').value
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
liveFilter: _.debounce(function (ev) {
|
||||
this.model.save({
|
||||
'filter_type': this.$('.filter-type').val(),
|
||||
'filter_text': this.$('.roster-filter').val()
|
||||
'filter_type': this.el.querySelector('.filter-type').value,
|
||||
'filter_text': this.el.querySelector('.roster-filter').value
|
||||
});
|
||||
}, 250),
|
||||
|
||||
@ -234,7 +235,7 @@
|
||||
|
||||
hide: function () {
|
||||
if (!this.$el.is(':visible')) { return this; }
|
||||
if (this.$('.roster-filter').val().length > 0) {
|
||||
if (this.el.querySelector('.roster-filter').value.length > 0) {
|
||||
// Don't hide if user is currently filtering.
|
||||
return;
|
||||
}
|
||||
@ -276,16 +277,21 @@
|
||||
},
|
||||
|
||||
render: function () {
|
||||
this.$roster = $('<dl class="roster-contacts" style="display: none;"></dl>');
|
||||
this.renderRoster();
|
||||
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');
|
||||
this.el.classList.add('no-contact-requests');
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
renderRoster: function () {
|
||||
this.$roster = $(tpl_roster());
|
||||
this.roster = this.$roster[0];
|
||||
},
|
||||
|
||||
createRosterFilter: function () {
|
||||
// Create a model on which we can store filter properties
|
||||
var model = new _converse.RosterFilter();
|
||||
@ -320,7 +326,7 @@
|
||||
},
|
||||
|
||||
update: _.debounce(function () {
|
||||
if (this.$roster.parent().length === 0) {
|
||||
if (_.isNull(this.roster.parentElement)) {
|
||||
this.$el.append(this.$roster.show());
|
||||
}
|
||||
return this.showHideFilter();
|
||||
@ -366,7 +372,7 @@
|
||||
reset: function () {
|
||||
_converse.roster.reset();
|
||||
this.removeAll();
|
||||
this.$roster = $('<dl class="roster-contacts" style="display: none;"></dl>');
|
||||
this.renderRoster();
|
||||
this.render().update();
|
||||
return this;
|
||||
},
|
||||
@ -576,7 +582,7 @@
|
||||
_.each(classes_to_remove,
|
||||
function (cls) {
|
||||
if (_.includes(that.el.className, cls)) {
|
||||
that.$el.removeClass(cls);
|
||||
that.el.classList.remove(cls);
|
||||
}
|
||||
});
|
||||
this.$el.addClass(chat_status).data('status', chat_status);
|
||||
@ -593,7 +599,7 @@
|
||||
*
|
||||
* So in both cases the user is a "pending" contact.
|
||||
*/
|
||||
this.$el.addClass('pending-xmpp-contact');
|
||||
this.el.classList.add('pending-xmpp-contact');
|
||||
this.$el.html(tpl_pending_contact(
|
||||
_.extend(item.toJSON(), {
|
||||
'desc_remove': __('Click to remove this contact'),
|
||||
@ -601,7 +607,7 @@
|
||||
})
|
||||
));
|
||||
} else if (requesting === true) {
|
||||
this.$el.addClass('requesting-xmpp-contact');
|
||||
this.el.classList.add('requesting-xmpp-contact');
|
||||
this.$el.html(tpl_requesting_contact(
|
||||
_.extend(item.toJSON(), {
|
||||
'desc_accept': __("Click to accept this contact request"),
|
||||
@ -610,7 +616,7 @@
|
||||
})
|
||||
));
|
||||
} else if (subscription === 'both' || subscription === 'to') {
|
||||
this.$el.addClass('current-xmpp-contact');
|
||||
this.el.classList.add('current-xmpp-contact');
|
||||
this.$el.removeClass(_.without(['both', 'to'], subscription)[0]).addClass(subscription);
|
||||
this.$el.html(tpl_roster_item(
|
||||
_.extend(item.toJSON(), {
|
||||
@ -734,7 +740,7 @@
|
||||
},
|
||||
|
||||
render: function () {
|
||||
this.$el.attr('data-group', this.model.get('name'));
|
||||
this.el.setAttribute('data-group', this.model.get('name'));
|
||||
this.$el.html(
|
||||
$(tpl_group_header({
|
||||
label_group: this.model.get('name'),
|
||||
|
||||
@ -1,28 +1 @@
|
||||
<form class="pure-form roster-filter-form input-button-group">
|
||||
<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 === 'chat') { ]} selected="selected" {[ } ]}
|
||||
value="chat">{{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>
|
||||
<dl class="roster-contacts" style="display: none;"></dl>
|
||||
|
||||
28
src/templates/roster_filter.html
Normal file
28
src/templates/roster_filter.html
Normal file
@ -0,0 +1,28 @@
|
||||
<form class="pure-form roster-filter-form input-button-group">
|
||||
<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 === 'chat') { ]} selected="selected" {[ } ]}
|
||||
value="chat">{{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>
|
||||
Loading…
Reference in New Issue
Block a user