Add message list search feature

- Search as you type (client side)
- Add makeDelay to reduce resize and search callback frequency
- Rename class listEntry to message-list-entry
- Move Refresh button into search button bar

themes/bootstrap/public/mailbox.js

@@ -4,6 +4,13 @@ var mediumDeviceWidth = 980;
 var messageListMargin = 275;
 var clipboard = null;
 var messageListScroll = false;
+var messageListData = null;
+
+// clearMessageSearch resets the message list search
+function clearMessageSearch() {
+  $('#message-search').val('');
+  updateMessageSearch();
+}
 
 // deleteMessage sends a delete request for a message
 function deleteMessage(id) {
@@ -36,9 +43,10 @@ function loadList() {
     dataType: "json",
     url: '/api/v1/mailbox/' + mailbox,
     success: function(data) {
+      messageListData = data;
       // Render list
       $('#message-list').loadTemplate($('#list-entry-template'), data);
-      $('.listEntry').click(onMessageListClick);
+      $('.message-list-entry').click(onMessageListClick);
       // Reveal and select current message
       $("#message-list").slideDown();
       if (selected != "") {
@@ -46,10 +54,21 @@ function loadList() {
         selected = "";
       }
       onDocumentChange();
+      updateMessageSearch();
     }
   });
 }
 
+// makeDelay creates a call-back timer that prevents itself from being
+// stacked
+function makeDelay(ms) {
+  var timer = 0;
+  return (function(callback) {
+    clearTimeout (timer);
+    timer = setTimeout(callback, ms);
+  });
+}
+
 // messageSource pops open another window for message source
 function messageSource(id) {
   window.open('/mailbox/' + mailbox + '/' + id + "/source", '_blank',
@@ -85,19 +104,27 @@ function onDocumentChange() {
 
 // onDocumentReady is called by mailbox/index.html to initialize
 function onDocumentReady() {
+  // Prevent search and resize handlers being called too often
+  var searchDelay = makeDelay(200);
+  var resizeDelay = makeDelay(100);
   $.addTemplateFormatter("DateFormatter",
       function(value, template) {
         return moment(value).calendar();
       });
   $("#message-list").hide();
   onWindowResize();
-  $(window).resize(onWindowResize);
+  $(window).resize(function() {
+    resizeDelay(onWindowResize);
+  });
+  $('#message-search').on('change keyup', function(el) {
+    searchDelay(updateMessageSearch);
+  });
   loadList();
 }
 
 // onMessageListClick is triggered by clicks on the message list
 function onMessageListClick() {
-  $('.listEntry').removeClass("disabled");
+  $('.message-list-entry').removeClass("disabled");
   $(this).addClass("disabled");
   $('#message-content').load('/mailbox/' + mailbox + '/' + this.id, onMessageLoaded);
   selected = this.id;
@@ -132,3 +159,24 @@ function onWindowResize() {
   }
 }
 
+// updateMessageSearch compares the message list subjects and senders against
+// the search string and hides entries that don't match
+function updateMessageSearch() {
+  var criteria = $('#message-search').val();
+  if (criteria.length < 2) {
+    $('.message-list-entry').show();
+    return;
+  }
+  criteria = criteria.toLowerCase();
+  for (i=0; i<messageListData.length; i++) {
+    entry = messageListData[i];
+    if ((entry.subject.toLowerCase().indexOf(criteria) > -1) ||
+        (entry.from.toLowerCase().indexOf(criteria) > -1)) {
+      // Match
+      $('#' + entry.id).show();
+    } else {
+      $('#' + entry.id).hide();
+    }
+  }
+}
+