Fix list view scrolling

Resize handlers are ugly. But not as ugly as scroll handlers. :p
Normalized some whitespace along the way.

js/views/conversation_view.js

@@ -42,6 +42,7 @@
             if (this.model.id) {
                 this.model.fetchMessages({reset: true});
             }
+            window.addEventListener('resize', this.view.resize.bind(this.view));
         },
 
         events: {

js/views/inbox_view.js

@@ -45,6 +45,7 @@
                     this.conversations.get(message.conversationId).fetchMessages();
                 }.bind(this));
             }.bind(this));
+            window.addEventListener('resize', this.inbox.resize.bind(this.inbox));
         },
         events: {
             'keyup': 'keyup',

js/views/list_view.js

@@ -16,33 +16,45 @@
 var Whisper = Whisper || {};
 
 (function () {
-  'use strict';
+    'use strict';
 
-  /*
-   * Generic list view that watches a given collection, wraps its members in
-   * a given child view and adds the child view elements to its own element.
-   */
-  Whisper.ListView = Backbone.View.extend({
-    tagName: 'ul',
-    itemView: Backbone.View,
-    initialize: function() {
-      this.listenTo(this.collection, 'change', this.render); // auto update
-      this.listenTo(this.collection, 'add', this.addOne);
-      this.listenTo(this.collection, 'reset', this.addAll);
-      this.listenTo(this.collection, 'all', this.render);
-    },
+    /*
+    * Generic list view that watches a given collection, wraps its members in
+    * a given child view and adds the child view elements to its own element.
+    */
+    Whisper.ListView = Backbone.View.extend({
+        tagName: 'ul',
+        itemView: Backbone.View,
+        initialize: function() {
+            this.listenTo(this.collection, 'change', this.render); // auto update
+            this.listenTo(this.collection, 'add', this.addOne);
+            this.listenTo(this.collection, 'reset', this.addAll);
+            this.listenTo(this.collection, 'all', this.render);
+        },
 
-    addOne: function(model) {
-      if (this.itemView) {
-        var view = new this.itemView({model: model});
-        this.$el.append(view.render().el);
-        this.$el.trigger('add');
-      }
-    },
+        addOne: function(model) {
+        if (this.itemView) {
+                var view = new this.itemView({model: model});
+                this.$el.append(view.render().el);
+                this.$el.trigger('add');
+            }
+        },
 
-    addAll: function() {
-      this.$el.html('');
-      this.collection.each(this.addOne, this);
-    }
-  });
+        addAll: function() {
+            this.$el.html('');
+            this.collection.each(this.addOne, this);
+            this.resize();
+        },
+
+        resize: function() {
+            var height = window.innerHeight - $('#header').height() - $('#footer').height();
+            if (this.$el.height() > height) {
+                this.$el.css('height', height + 'px');
+                this.$el.css('overflow-y', 'scroll');
+            } else {
+                this.$el.css('height', 'auto');
+                this.$el.css('overflow-y', 'auto');
+            }
+        }
+    });
 })();

js/views/message_list_view.js

@@ -16,23 +16,23 @@
 var Whisper = Whisper || {};
 
 (function () {
-  'use strict';
+    'use strict';
 
-  Whisper.MessageListView = Whisper.ListView.extend({
-    tagName: 'ul',
-    className: 'message-list',
-    itemView: Whisper.MessageView,
-    events: {
-      'add': 'scrollToBottom',
-      'update *': 'scrollToBottom'
-    },
-    scrollToBottom: function() {
-        // TODO: Avoid scrolling if user has manually scrolled up?
-        this.$el.scrollTop(this.el.scrollHeight);
-    },
-    addAll: function() {
-      Whisper.ListView.prototype.addAll.apply(this, arguments); // super()
-      this.scrollToBottom();
-    },
-  });
+    Whisper.MessageListView = Whisper.ListView.extend({
+        tagName: 'ul',
+        className: 'message-list',
+        itemView: Whisper.MessageView,
+        events: {
+            'add': 'scrollToBottom',
+            'update *': 'scrollToBottom'
+        },
+        scrollToBottom: function() {
+            // TODO: Avoid scrolling if user has manually scrolled up?
+            this.$el.scrollTop(this.el.scrollHeight);
+        },
+        addAll: function() {
+            Whisper.ListView.prototype.addAll.apply(this, arguments); // super()
+            this.scrollToBottom();
+        }
+    });
 })();