Encapsulate page layout js

The layout class is the only class that should have knowledge of
page-level constant markup, such as #gutter and #contacts, and
should be pretty much the only place we find elements by id (with
the exception of template elements).

This change removes references to #gutter from views. Rather than
hardcoding assumptions about page layout, view elements should
ask the layout to insert themselves into the main content area by
calling Whisper.Layout.setContent.

js/popup.js

@@ -14,28 +14,38 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+Whisper.Layout = new (Backbone.View.extend({
+	initialize: function() {
+		this.gutter = $('#gutter');
+		this.contacts = $('#contacts');
+		this.resize();
 
-
-new Whisper.ConversationListView({el: $('#contacts')});
-new Whisper.Header({el: $('#header')});
-Whisper.Threads.fetch({reset: true});
-
-function resizer(e) {
-	var windowheight = window.innerHeight;
-	var form = $('.send-message-area').outerHeight();
-	var gutter_offset = $('#gutter').offset().top;
-	var contacts_offset = $('#contacts').offset().top;
-	if (window.innerWidth < 480) {
-		$('#gutter').css('height', windowheight - gutter_offset - form);
-		$('#contacts').css('height', windowheight - contacts_offset - form);
-	} else {
-		$('#gutter').css('height', windowheight - gutter_offset);
-		$('#contacts').css('height', windowheight - contacts_offset);
+		new Whisper.ConversationListView({el: $('#contacts')});
+		new Whisper.Header({el: $('#header')});
+		Whisper.Threads.fetch({reset: true});
+	},
+	events: {
+		'resize': 'resize'
+	},
+	resize: function (e) {
+		var windowheight = window.innerHeight;
+		var form = $('.send-message-area').outerHeight();
+		var gutter_offset = this.gutter.offset().top;
+		var contacts_offset = this.contacts.offset().top;
+		if (window.innerWidth < 480) {
+			this.gutter.css('height', windowheight - gutter_offset - form);
+			this.contacts.css('height', windowheight - contacts_offset - form);
+		} else {
+			this.gutter.css('height', windowheight - gutter_offset);
+			this.contacts.css('height', windowheight - contacts_offset);
+		}
+		$('.discussion').css('height', windowheight - gutter_offset - form);
+	},
+	setContent: function(content) {
+		$(content).insertAfter(this.gutter);
+		this.resize();
 	}
-	$('.discussion').css('height', windowheight - gutter_offset - form);
-}
-window.addEventListener('resize', resizer, false);
-resizer();
+}))({el: window});
 
 textsecure.registerOnLoadFunction(function() {
 	if (textsecure.storage.getUnencrypted("number_id") === undefined) {

js/views/conversation_view.js

@@ -29,8 +29,7 @@ var Whisper = Whisper || {};
     },
 
     render: function() {
-      this.$el.show().insertAfter($('#gutter'));
-      resizer();
+      Whisper.Layout.setContent(this.$el.show());
       return this;
     }
   });

js/views/new_message_button.js

@@ -94,7 +94,7 @@ var Whisper = Whisper || {};
 
     render: function() {
       this.$el.html(Mustache.render(this.template));
-      this.$el.show().insertAfter($('#gutter'));
+      Whisper.Layout.setContent(this.$el.show());
       return this;
     }
   });