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:
parent
806693ac1c
commit
9af18ce6ae
3 changed files with 32 additions and 23 deletions
50
js/popup.js
50
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) {
|
||||
|
|
|
@ -29,8 +29,7 @@ var Whisper = Whisper || {};
|
|||
},
|
||||
|
||||
render: function() {
|
||||
this.$el.show().insertAfter($('#gutter'));
|
||||
resizer();
|
||||
Whisper.Layout.setContent(this.$el.show());
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
});
|
||||
|
|
Loading…
Add table
Reference in a new issue