Hide the roster filter by default. Updates #949

- Also, use a virtual-dom view for rendering the roster filter.

CHANGES.md

@@ -4,6 +4,7 @@
 
 ### Bugfixes
 - #800 Could not register successfully in ejabberd 17.01
+- #949 Don't flash the roster contacts filter (i.e. hide by default)
 - Don't require `auto_login` to be `true` when using the API to log in.
 - Moment locale wasn't being set to the value passed via the `i18n` option.
 - Refetch the roster from the server after reconnection.

package.json

@@ -40,7 +40,7 @@
     "backbone": "1.3.3",
     "backbone.browserStorage": "0.0.3",
     "backbone.overview": "0.0.3",
-    "backbone.vdomview": "0.0.1",
+    "backbone.vdomview": "0.0.2",
     "bootstrap": "^3.3.7",
     "bourbon": "^4.3.2",
     "clean-css-cli": "^4.0.10",

src/converse-rosterview.js

@@ -129,7 +129,7 @@
                 },
             });
 
-            _converse.RosterFilterView = Backbone.View.extend({
+            _converse.RosterFilterView = Backbone.VDOMView.extend({
                 tagName: 'span',
                 events: {
                     "keydown .roster-filter": "liveFilter",
@@ -145,8 +145,8 @@
                     this.model.on('change:filter_text', this.renderClearButton, this);
                 },
 
-                render () {
-                    this.el.innerHTML = tpl_roster_filter(
+                renderHTML () {
+                    return tpl_roster_filter(
                         _.extend(this.model.toJSON(), {
                             placeholder: __('Filter'),
                             label_contacts: LABEL_CONTACTS,
@@ -161,8 +161,10 @@
                             label_xa: __('Extended Away'),
                             label_offline: __('Offline')
                         }));
+                },
+
+                afterRender () {
                     this.renderClearButton();
-                    return this.$el;
                 },
 
                 renderClearButton () {
@@ -231,13 +233,14 @@
                 },
 
                 show () {
-                    if (this.$el.is(':visible')) { return this; }
-                    this.$el.show();
+                    if (utils.isVisible(this.el)) { return this; }
+                    this.el.classList.add('fade-in');
+                    this.el.classList.remove('hidden');
                     return this;
                 },
 
                 hide () {
-                    if (!this.$el.is(':visible')) { return this; }
+                    if (!utils.isVisible(this.el)) { return this; }
                     if (this.el.querySelector('.roster-filter').value.length > 0) {
                         // Don't hide if user is currently filtering.
                         return;
@@ -246,7 +249,7 @@
                         'filter_text': '',
                         'chat_state': ''
                     });
-                    this.$el.hide();
+                    this.el.classList.add('hidden');
                     return this;
                 },
 
@@ -279,7 +282,9 @@
 
                 render () {
                     this.renderRoster();
-                    this.$el.html(this.filter_view.render());
+                    this.el.innerHTML = "";
+                    this.el.appendChild(this.filter_view.render().el);
+
                     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.
@@ -327,7 +332,7 @@
                 }, _converse.animate ? 100 : 0),
 
                 showHideFilter () {
-                    if (!this.$el.is(':visible')) {
+                    if (!utils.isVisible(this.el)) {
                         return;
                     }
                     if (_converse.roster.length >= 10) {

src/templates/roster_filter.html

+<span class="hidden">
 <form class="pure-form roster-filter-form input-button-group">
     <input value="{{{o.filter_text}}}"
            class="roster-filter roster-filter-{{{o.filter_type}}}"
@@ -28,3 +29,4 @@
                 value="state">{{{o.label_state}}}</option>
     </select>
 </form>
+</span>

src/utils.js

@@ -531,5 +531,11 @@
             model.set(attributes);
         }
     }
+
+    u.isVisible = function (el) {
+        // XXX: Taken from jQuery's "visible" implementation
+        return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
+    };
+
     return u;
 }));