2e32c7bbc3
Bind the sub-view to some data when we initialize it, rather than passing it in on render. That means the image view click handler will only ever open the blob we bound it to, even if its src attr changes for some reason, which should never happen, but if it does, it's nice to guard against opening arbitrary urls found in the dom. // FREEBIE
72 lines
1.9 KiB
JavaScript
72 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.$el.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: {
|
|
'loadeddata': 'update'
|
|
},
|
|
update: function() {
|
|
this.$el.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();
|
|
return this;
|
|
}
|
|
});
|
|
|
|
})();
|