From 9af18ce6aede5ba43e52b4a3a99c28688836028d Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Sun, 31 Aug 2014 17:41:09 -0700
Subject: [PATCH] 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                    | 50 ++++++++++++++++++++--------------
 js/views/conversation_view.js  |  3 +-
 js/views/new_message_button.js |  2 +-
 3 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/js/popup.js b/js/popup.js
index fd6dc5ad2..6ce115476 100644
--- a/js/popup.js
+++ b/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) {
diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js
index 600ff26c6..1c4c62a54 100644
--- a/js/views/conversation_view.js
+++ b/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;
     }
   });
diff --git a/js/views/new_message_button.js b/js/views/new_message_button.js
index d45cb9ad0..90787f08d 100644
--- a/js/views/new_message_button.js
+++ b/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;
     }
   });