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:
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;
|
||||
}
|
||||
});
|
||||
|
Reference in New Issue
Block a user