Load message list over JSON

- Add jquery-load-template to bower
- Add moment (date rendering) to bower
- Load message list JSON via /api/v1/mailbox
- Render message list using jquery template
- Fix resize related problems with message list height caused by
  2092949dbc

themes/bootstrap/public/mailbox.js

@@ -11,7 +11,7 @@ function deleteMessage(id) {
   $.ajax({
     type: 'DELETE',
     url: '/mailbox/' + mailbox + '/' + id,
-    success: reloadList
+    success: loadList
   })
 }
 
@@ -29,9 +29,25 @@ function htmlView(id) {
       'menubar=yes,resizable=yes,scrollbars=yes,status=yes,toolbar=yes');
 }
 
-// loadList displays the message list for this mailbox
+// loadList loads the message list for this mailbox via AJAX
 function loadList() {
-  $('#message-list').load('/mailbox/' + mailbox, onListLoaded);
+  $('#message-list').hide().empty();
+  $.ajax({
+    dataType: "json",
+    url: '/api/v1/mailbox/' + mailbox,
+    success: function(data) {
+      // Render list
+      $('#message-list').loadTemplate($('#list-entry-template'), data);
+      $('.listEntry').click(onMessageListClick);
+      // Reveal and select current message
+      $("#message-list").slideDown();
+      if (selected != "") {
+        $("#" + selected).click();
+        selected = "";
+      }
+      onDocumentChange();
+    }
+  });
 }
 
 // messageSource pops open another window for message source
@@ -41,12 +57,6 @@ function messageSource(id) {
       'menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no');
 }
 
-// reloadList reloads the message list for this mailbox
-function reloadList() {
-  $('#message-list').hide();
-  loadList();
-}
-
 // toggleMessageLink shows/hids the message link URL form
 function toggleMessageLink(id) {
   var url = baseURL + '/link/' + mailbox + '/' + id;
@@ -75,28 +85,22 @@ function onDocumentChange() {
 
 // onDocumentReady is called by mailbox/index.html to initialize
 function onDocumentReady() {
+  $.addTemplateFormatter("DateFormatter",
+      function(value, template) {
+        return moment(value).calendar();
+      });
   $("#message-list").hide();
   onWindowResize();
   $(window).resize(onWindowResize);
   loadList();
 }
 
-// onListLoaded is called when the message list changes
-function onListLoaded() {
-  onDocumentChange();
-  $('.listEntry').click(
-      function() {
-        $('.listEntry').removeClass("disabled");
-        $(this).addClass("disabled");
-        $('#message-content').load('/mailbox/' + mailbox + '/' + this.id, onMessageLoaded);
-        selected = this.id;
-      }
-      )
-    $("#message-list").slideDown();
-  if (selected != "") {
-    $("#" + selected).click();
-    selected = "";
-  }
+// onMessageListClick is triggered by clicks on the message list
+function onMessageListClick() {
+  $('.listEntry').removeClass("disabled");
+  $(this).addClass("disabled");
+  $('#message-content').load('/mailbox/' + mailbox + '/' + this.id, onMessageLoaded);
+  selected = this.id;
 }
 
 // onMessageLoaded is called each time a new message is shown
@@ -113,14 +117,16 @@ function onMessageLoaded(responseText, textStatus, XMLHttpRequest) {
 // onWindowResize handles special cases when window is resized
 function onWindowResize() {
   if ($(window).width() > mediumDeviceWidth) {
+    var content_height = $(window).height() - messageListMargin;
+    var messageListWrapper = $('#message-list-wrapper');
+    messageListWrapper.height(content_height);
     if (!messageListScroll) {
-      messageListScroll= true;
-      var content_height = $(window).height() - messageListMargin;
-      $('#message-list-wrapper').height(content_height).addClass("message-list-scroll");
+      messageListScroll = true;
+      messageListWrapper.addClass("message-list-scroll");
     }
   } else {
     if (messageListScroll) {
-      messageListScroll= false;
+      messageListScroll = false;
       $('#message-list-wrapper').height('auto').removeClass("message-list-scroll");
     }
   }