From 550cc5172443e902d40ed34b869e9661a31c89f6 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Thu, 30 Mar 2017 16:45:52 +0200 Subject: [PATCH] Some work on removing jQuery from converse-rosterview --- src/config.js | 1 + src/converse-rosterview.js | 42 ++++++++++++++++++-------------- src/templates/roster.html | 29 +--------------------- src/templates/roster_filter.html | 28 +++++++++++++++++++++ 4 files changed, 54 insertions(+), 46 deletions(-) create mode 100644 src/templates/roster_filter.html diff --git a/src/config.js b/src/config.js index dc658eee3..766b132dc 100644 --- a/src/config.js +++ b/src/config.js @@ -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", diff --git a/src/converse-rosterview.js b/src/converse-rosterview.js index e46fc81bf..62727139c 100644 --- a/src/converse-rosterview.js +++ b/src/converse-rosterview.js @@ -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 = $(''); + 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 = $(''); + 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'), diff --git a/src/templates/roster.html b/src/templates/roster.html index c6c9f0f33..3f26995a7 100644 --- a/src/templates/roster.html +++ b/src/templates/roster.html @@ -1,28 +1 @@ -
- - - -
+ diff --git a/src/templates/roster_filter.html b/src/templates/roster_filter.html new file mode 100644 index 000000000..c6c9f0f33 --- /dev/null +++ b/src/templates/roster_filter.html @@ -0,0 +1,28 @@ +
+ + + +