2fc78ddd7d
Messages with images or media were causing the scroll position to jump around when they loaded, because rendering them changed the height of their elements from 0 to full-height sometime after they were inserted into the DOM. Now when rendering attachments, we wait for them to load so they can render at full height immediately, then warn our parent message list before and after a potential height change, so the scroll position can be saved and reset. // FREEBIE
73 lines
1.9 KiB
JavaScript
73 lines
1.9 KiB
JavaScript
/*
|
|
* vim: ts=4:sw=4:expandtab
|
|
*/
|
|
(function () {
|
|
'use strict';
|
|
|
|
var ImageView = Backbone.View.extend({
|
|
tagName: 'img',
|
|
initialize: function(dataUrl) {
|
|
this.dataUrl = dataUrl;
|
|
},
|
|
events: {
|
|
'load': 'update',
|
|
'click': 'open'
|
|
},
|
|
update: function() {
|
|
this.trigger('update');
|
|
},
|
|
open: function () {
|
|
window.open(this.dataUrl, '_blank');
|
|
},
|
|
render: function() {
|
|
this.$el.attr('src', this.dataUrl);
|
|
return this;
|
|
}
|
|
});
|
|
|
|
var MediaView = Backbone.View.extend({
|
|
initialize: function(dataUrl, contentType) {
|
|
this.dataUrl = dataUrl;
|
|
this.contentType = contentType;
|
|
this.$el.attr('controls', '');
|
|
},
|
|
events: {
|
|
'canplay': 'canplay'
|
|
},
|
|
canplay: function() {
|
|
this.trigger('update');
|
|
},
|
|
render: function() {
|
|
var $el = $('<source>');
|
|
$el.attr('src', this.dataUrl);
|
|
$el.attr('type', this.contentType);
|
|
this.$el.append($el);
|
|
return this;
|
|
}
|
|
});
|
|
|
|
var AudioView = MediaView.extend({ tagName: 'audio' });
|
|
var VideoView = MediaView.extend({ tagName: 'video' });
|
|
|
|
Whisper.AttachmentView = Backbone.View.extend({
|
|
tagName: 'span',
|
|
className: 'attachment',
|
|
render: function() {
|
|
var View;
|
|
switch(this.model.contentType.split('/')[0]) {
|
|
case 'image': View = ImageView; break;
|
|
case 'audio': View = AudioView; break;
|
|
case 'video': View = VideoView; break;
|
|
default:
|
|
throw 'Unsupported attachment type';
|
|
}
|
|
var blob = new Blob([this.model.data], {type: this.model.contentType});
|
|
var view = new View(window.URL.createObjectURL(blob), this.model.contentType);
|
|
view.$el.appendTo(this.$el);
|
|
view.render();
|
|
view.on('update', this.trigger.bind(this, 'update'));
|
|
return this;
|
|
}
|
|
});
|
|
|
|
})();
|