Add text input to act as live filter. updates #212

converse.js

@@ -3240,7 +3240,8 @@
             initialize: function () {
                 this.model.contacts.on("add", this.addContact, this);
                 this.model.contacts.on("change:chat_status", function (contact) {
-                    // This might be optimized by instead of first sorting, finding the correct position in positionContact
+                    // This might be optimized by instead of first sorting,
+                    // finding the correct position in positionContact
                     this.model.contacts.sort();
                     this.positionContact(contact).render();
                 }, this);
@@ -3293,7 +3294,7 @@
             addContact: function (contact) {
                 var view = new converse.RosterContactView({model: contact});
                 this.add(contact.get('id'), view);
-                var view = this.positionContact(contact).render();
+                view = this.positionContact(contact).render();
                 if (this.model.get('state') === CLOSED) {
                     view.$el.hide();
                 }
@@ -3347,7 +3348,7 @@
         });
 
         this.RosterView = Backbone.Overview.extend({
-            tagName: 'dl',
+            tagName: 'div',
             id: 'converse-roster',
 
             initialize: function () {
@@ -3369,7 +3370,10 @@
             },
 
             render: function () {
-                this.$el.empty();
+                this.$el.html(converse.templates.roster({
+                    placeholder: __('Type to filter contacts')
+                }));
+                this.$('.roster-filter').liveFilter('.roster-contacts', {hide: 'dt'});
                 return this;
             },
 
@@ -3457,13 +3461,13 @@
                     */
                 model.sort();
                 model.each($.proxy(function (group, idx) {
-                    var view = this.get(group.get('name'))
+                    var view = this.get(group.get('name'));
                     if (!view) {
                         view = new converse.RosterGroupView({model: group});
                         this.add(group.get('name'), view.render());
                     }
                     if (idx === 0) {
-                        this.$el.append(view.$el);
+                        this.$('.roster-contacts').append(view.$el);
                     } else {
                         this.appendGroup(view);
                     }
@@ -3476,7 +3480,7 @@
                  */
                 var index = this.model.indexOf(view.model);
                 if (index === 0) {
-                    this.$el.prepend(view.$el);
+                    this.$('.roster-contacts').prepend(view.$el);
                 } else if (index == (this.model.length-1)) {
                     this.appendGroup(view);
                 } else {

css/converse.css

@@ -872,11 +872,11 @@ dl.add-converse-contact {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-#conversejs #converse-roster span.req-contact-name {
+#converse-roster span.req-contact-name {
   width: 65%;
 }
-#conversejs #converse-roster span.pending-contact-name,
-#conversejs #converse-roster a.open-chat {
+#converse-roster span.pending-contact-name,
+#converse-roster a.open-chat {
   width: 80%;
 }
 #converse-roster dd span {
@@ -952,7 +952,7 @@ dl.add-converse-contact {
   font-size: 15px;
 }
 #conversejs dd.available-chatroom,
-#conversejs #converse-roster dd {
+#converse-roster dd {
   font-weight: bold;
   border: none;
   display: block;
@@ -961,7 +961,7 @@ dl.add-converse-contact {
   text-shadow: 0 1px 0 #fafafa;
   clear: both;
 }
-#conversejs #converse-roster dd {
+#converse-roster dd {
   line-height: 16px;
 }
 #conversejs .group-toggle {
@@ -970,20 +970,20 @@ dl.add-converse-contact {
 }
 #conversejs .roster-group:hover,
 #conversejs dd.available-chatroom:hover,
-#conversejs #converse-roster dd:hover {
+#converse-roster dd:hover {
   background-color: #eee;
 }
-#conversejs #converse-roster dd a.decline-xmpp-request {
+#converse-roster dd a.decline-xmpp-request {
   margin-left: 5px;
 }
-#conversejs #converse-roster dd a.remove-xmpp-contact {
+#converse-roster dd a.remove-xmpp-contact {
   float: right;
   width: 22px;
   margin: 0;
   display: none;
   color: #4f4f4f;
 }
-#conversejs #converse-roster dd:hover a.remove-xmpp-contact {
+#converse-roster dd:hover a.remove-xmpp-contact {
   display: inline-block;
 }
 #conversejs .chatbox,

docs/CHANGES.rst

 Changelog
 =========
 
-0.8 (2014-08-04)
-----------------
+0.8.1 (Unreleased)
+------------------
+
+* #212 Provide a live filter of the roster contacts. [jcbrand]
+
+
+0.8.0 (2014-08-04)
+------------------
 
 .. note::
     1. Converse.js is now relicensed under the `Mozilla Public License <http://www.mozilla.org/MPL/2.0/>`_.

less/converse.less

@@ -967,12 +967,12 @@ dl.add-converse-contact {
     text-overflow: ellipsis;
 }
 
-#conversejs #converse-roster span.req-contact-name {
+#converse-roster span.req-contact-name {
     width: 65%;
 }
 
-#conversejs #converse-roster span.pending-contact-name,
-#conversejs #converse-roster a.open-chat {
+#converse-roster span.pending-contact-name,
+#converse-roster a.open-chat {
     width: 80%;
 }
 
@@ -1063,7 +1063,7 @@ dl.add-converse-contact {
 }
 
 #conversejs dd.available-chatroom,
-#conversejs #converse-roster dd {
+#converse-roster dd {
     font-weight: bold;
     border: none;
     display: block;
@@ -1073,7 +1073,7 @@ dl.add-converse-contact {
     clear: both;
 }
 
-#conversejs #converse-roster dd {
+#converse-roster dd {
     line-height: 16px;
 }
 
@@ -1084,15 +1084,15 @@ dl.add-converse-contact {
 
 #conversejs .roster-group:hover,
 #conversejs dd.available-chatroom:hover,
-#conversejs #converse-roster dd:hover {
+#converse-roster dd:hover {
     background-color: #eee;
 }
 
-#conversejs #converse-roster dd a.decline-xmpp-request {
+#converse-roster dd a.decline-xmpp-request {
     margin-left: 5px;
 }
 
-#conversejs #converse-roster dd a.remove-xmpp-contact {
+#converse-roster dd a.remove-xmpp-contact {
     float: right;
     width: 22px;
     margin: 0;
@@ -1100,7 +1100,7 @@ dl.add-converse-contact {
     color: rgb(79, 79, 79);
 }
 
-#conversejs #converse-roster  dd:hover a.remove-xmpp-contact {
+#converse-roster  dd:hover a.remove-xmpp-contact {
     display: inline-block;
 }
 

main.js

@@ -4,6 +4,7 @@ config = {
         "jquery": "components/jquery/dist/jquery",
         "jquery.browser": "components/jquery.browser/dist/jquery.browser",
         "jquery.easing": "components/jquery-easing-original/jquery.easing.1.3", // XXX: Only required for https://conversejs.org website
+        "jquery.fastLiveFilter": "src/jquery.fastLiveFilter",
         "bootstrap": "components/bootstrap/dist/js/bootstrap",                  // XXX: Only required for https://conversejs.org website
         "locales": "locale/locales",
         "underscore": "components/underscore/underscore",
@@ -74,6 +75,7 @@ config = {
         'bigint':               { deps: ['crypto'] },
         'jquery.browser':       { deps: ['jquery'] },
         'jquery.easing':        { deps: ['jquery'] },
+        'jquery.fastLiveFilter':{ deps: ['jquery'] },
         'strophe':              { deps: ['jquery'] },
         'strophe.disco':        { deps: ['strophe'] },
         'strophe.muc':          { deps: ['strophe', 'jquery'] },

mockup/controlbox.html

@@ -114,7 +114,9 @@
                         </ul>
                     </dd>
                 </dl>
-                <dl id="converse-roster" style="display: block;">
+                <div id="converse-roster">
+                    <input id="search_input" placeholder="Type to filter">
+                    <dl class="roster-contacts" style="display: block;">
                         <dt class="roster-group" style="display: block;">
                             <a href="#" data-group="Colleagues" class="group-toggle icon-opened" title="Click to hide these contacts">Colleagues</a>
                         </dt>
@@ -250,6 +252,7 @@
                 </div>
             </div>
         </div>
+    </div>
 </div>
 
 <script>

src/build-no-locales-no-otr.js

@@ -25,6 +25,7 @@
         "strophe.disco": "components/strophe.disco/index",
         "converse-dependencies": "src/deps-no-otr",
         "jquery.browser": "components/jquery.browser/dist/jquery.browser",
+        "jquery.fastLiveFilter": "src/jquery.fastLiveFilter",
         "moment":"components/momentjs/moment",
         "converse-templates":"src/templates",
         "tpl": "components/requirejs-tpl-jcbrand/tpl",

src/build-no-otr.js

@@ -29,6 +29,7 @@
         "ru": "locale/ru/LC_MESSAGES/ru",
         "zh": "locale/zh/LC_MESSAGES/zh",
         "jquery.browser": "components/jquery.browser/dist/jquery.browser",
+        "jquery.fastLiveFilter": "src/jquery.fastLiveFilter",
         "underscore": "components/underscore/underscore",
         "backbone": "components/backbone/backbone",
         "backbone.browserStorage": "components/backbone.browserStorage/backbone.browserStorage",

src/build-website-no-otr.js

@@ -29,6 +29,7 @@
         "ru": "locale/ru/LC_MESSAGES/ru",
         "zh": "locale/zh/LC_MESSAGES/zh",
         "jquery.browser": "components/jquery.browser/dist/jquery.browser",
+        "jquery.fastLiveFilter": "src/jquery.fastLiveFilter",
         "underscore": "components/underscore/underscore",
         "backbone": "components/backbone/backbone",
         "backbone.browserStorage": "components/backbone.browserStorage/backbone.browserStorage",

src/build-website.js

@@ -35,6 +35,7 @@
         "backbone.overview": "components/backbone.overview/backbone.overview",
         "bootstrap": "components/bootstrap/dist/js/bootstrap",                  // XXX: Only required for https://conversejs.org website
         "jquery.easing": "components/jquery-easing-original/jquery.easing.1.3", // XXX: Only required for https://conversejs.org website
+        "jquery.fastLiveFilter": "src/jquery.fastLiveFilter",
         "strophe": "components/strophe/strophe",
         "strophe.muc": "components/strophe.muc/index",
         "strophe.roster": "components/strophe.roster/index",

src/build.js

@@ -29,6 +29,7 @@
         "ru": "locale/ru/LC_MESSAGES/ru",
         "zh": "locale/zh/LC_MESSAGES/zh",
         "jquery.browser": "components/jquery.browser/dist/jquery.browser",
+        "jquery.fastLiveFilter": "src/jquery.fastLiveFilter",
         "underscore": "components/underscore/underscore",
         "backbone": "components/backbone/backbone",
         "backbone.browserStorage": "components/backbone.browserStorage/backbone.browserStorage",

src/deps-full.js

@@ -5,6 +5,7 @@ define("converse-dependencies", [
     "backbone.browserStorage",
     "backbone.overview",
     "jquery.browser",
+    "jquery.fastLiveFilter",
     "strophe",
     "strophe.muc",
     "strophe.roster",

src/deps-no-otr.js

@@ -4,6 +4,7 @@ define("converse-dependencies", [
     "backbone.browserStorage",
     "backbone.overview",
     "jquery.browser",
+    "jquery.fastLiveFilter",
     "strophe",
     "strophe.muc",
     "strophe.roster",

src/deps-website-no-otr.js

@@ -6,6 +6,7 @@ define("converse-dependencies", [
     "backbone.overview",
     "jquery.browser",
     "jquery.easing", // XXX: Can be removed, only for https://conversejs.org
+    "jquery.fastLiveFilter",
     "strophe",
     "strophe.muc",
     "strophe.roster",

src/deps-website.js

@@ -2,11 +2,12 @@ define("converse-dependencies", [
     "otr",
     "moment",
     "locales",
-    "bootstrap", // XXX: Can be removed, only for https://conversejs.org
+    "bootstrap", // XXX: Only for https://conversejs.org
     "backbone.browserStorage",
     "backbone.overview",
     "jquery.browser",
-    "jquery.easing", // XXX: Can be removed, only for https://conversejs.org
+    "jquery.easing", // XXX: Only for https://conversejs.org
+    "jquery.fastLiveFilter",
     "strophe",
     "strophe.muc",
     "strophe.roster",

src/jquery.fastLiveFilter.js

+/**
+ * fastLiveFilter jQuery plugin 1.0.3
+ * 
+ * Copyright (c) 2011, Anthony Bush
+ * License: <http://www.opensource.org/licenses/bsd-license.php>
+ * Project Website: http://anthonybush.com/projects/jquery_fast_live_filter/
+ **/
+
+jQuery.fn.liveFilter = function(list, options) {
+	// Options: input, list, timeout, callback
+	options = options || {};
+	var input = this;
+	var lastFilter = '';
+	var timeout = options.timeout || 0;
+	var callback = options.callback || function() {};
+	var keyTimeout;
+	callback(); // do a one-time callback on initialization to make sure everything's in sync
+	
+	input.change(function() {
+        var $list = jQuery(list);
+        var lis = $list.children();
+        var len = lis.length;
+		var filter = input.val().toLowerCase();
+        if (filter.length > 0) {
+            $list.find(options.hide).hide();
+        } else {
+            $list.find(options.hide).show();
+        }
+		var li, innerText;
+		var numShown = 0;
+		for (var i = 0; i < len; i++) {
+			li = lis[i];
+			innerText = !options.selector ? 
+				(li.textContent || li.innerText || "") : 
+				$(li).find(options.selector).text();
+			
+			if (innerText.toLowerCase().indexOf(filter) >= 0) {
+				if (li.style.display == "none") {
+                    $(li).show();
+				}
+				numShown++;
+			} else {
+				if (li.style.display != "none") {
+                    $(li).hide();
+				}
+			}
+		}
+		callback(numShown);
+		return false;
+	}).keydown(function() {
+		clearTimeout(keyTimeout);
+		keyTimeout = setTimeout(function() {
+			if( input.val() === lastFilter ) return;
+			lastFilter = input.val();
+			input.change();
+		}, timeout);
+	});
+	return this; // maintain jQuery chainability
+};

src/templates.js

@@ -32,6 +32,7 @@ define("converse-templates", [
     "tpl!src/templates/room_description",
     "tpl!src/templates/room_item",
     "tpl!src/templates/room_panel",
+    "tpl!src/templates/roster",
     "tpl!src/templates/roster_item",
     "tpl!src/templates/select_option",
     "tpl!src/templates/status_option",
@@ -73,11 +74,12 @@ define("converse-templates", [
         room_description:       arguments[30],
         room_item:              arguments[31],
         room_panel:             arguments[32],
-        roster_item:            arguments[33],
-        select_option:          arguments[34],
-        status_option:          arguments[35],
-        toggle_chats:           arguments[36],
-        toolbar:                arguments[37],
-        trimmed_chat:           arguments[38]
+        roster:                 arguments[33],
+        roster_item:            arguments[34],
+        select_option:          arguments[35],
+        status_option:          arguments[36],
+        toggle_chats:           arguments[37],
+        toolbar:                arguments[38],
+        trimmed_chat:           arguments[39]
     };
 });

src/templates/roster.html

+<input class="roster-filter" placeholder="{{placeholder}}">
+<dl class="roster-contacts" style="display: block;">