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.
This commit is contained in:
lilia 2014-08-31 17:41:09 -07:00
parent 806693ac1c
commit 9af18ce6ae
3 changed files with 32 additions and 23 deletions

View file

@ -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) {

View file

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

View file

@ -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;
}
});