Commit 881aa168 authored by lilia's avatar lilia
Browse files

Fix up unsupported attachment rendering

Rather than simply displaying an inactionable error, render a link that
allows the user to save the unsupported attachment.

// FREEBIE
parent 239ec8e3
......@@ -4,8 +4,24 @@
(function () {
'use strict';
Whisper.FileTypeToast = Whisper.ToastView.extend({
template: $('#attachment-type-modal').html()
var FileView = Backbone.View.extend({
tagName: 'a',
initialize: function(dataUrl) {
this.dataUrl = dataUrl;
this.$el.text("Unsupported attachment type. Click to save.");
},
events: {
'click': 'open'
},
open: function (e) {
e.preventDefault();
window.open(this.dataUrl, '_blank');
},
render: function() {
this.$el.attr('href', this.dataUrl);
this.trigger('update');
return this;
}
});
var ImageView = Backbone.View.extend({
......@@ -58,33 +74,18 @@
className: 'attachment',
render: function() {
var View;
var isUnsupportedType = false;
switch(this.model.contentType.split('/')[0]) {
case 'image': View = ImageView; break;
case 'audio': View = AudioView; break;
case 'video': View = VideoView; break;
default:
isUnsupportedType = true;
default : View = FileView; break;
}
if (isUnsupportedType) {
var toast = new Whisper.FileTypeToast({
model: {type: this.model.contentType.split('/')[0]}
});
toast.$el.insertAfter(this.$el);
toast.render();
return toast;
} else {
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;
}
},
deleteView: function(e) {
if (e) { e.stopPropagation(); }
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.on('update', this.trigger.bind(this, 'update'));
view.render();
return this;
}
});
......
......@@ -100,12 +100,13 @@
},
loadAttachments: function() {
this.model.get('attachments').forEach(function(attachment) {
var view = new Whisper.AttachmentView({ model: attachment }).render();
var view = new Whisper.AttachmentView({ model: attachment });
this.listenTo(view, 'update', function() {
this.trigger('beforeChangeHeight');
this.$('.attachments').append(view.el);
this.trigger('afterChangeHeight');
});
view.render();
}.bind(this));
}
});
......
......@@ -365,11 +365,12 @@
border-left: 8px solid $blue;
}
.content {
.attachments, .content {
a {
color: $grey_l;
}
}
.content {
&::selection, a::selection {
color: $grey_d;
background: white;
......@@ -396,6 +397,13 @@
}
.attachments {
a {
font-style: italic;
display: block;
padding: 1em;
background-color: #ccc;
}
img, audio, video {
max-width: 100%;
max-height: 300px;
......@@ -409,6 +417,7 @@
img {
cursor: pointer;
}
}
.outgoing .avatar {
......
......@@ -852,7 +852,8 @@ input.search {
.message-list .outgoing .bubble::after {
right: -8px;
border-left: 8px solid #2090ea; }
.message-detail .outgoing .bubble .content a,
.message-detail .outgoing .bubble .attachments a, .message-detail .outgoing .bubble .content a,
.message-list .outgoing .bubble .attachments a,
.message-list .outgoing .bubble .content a {
color: #f3f3f3; }
.message-detail .outgoing .bubble .content::selection, .message-detail .outgoing .bubble .content a::selection,
......@@ -872,6 +873,12 @@ input.search {
.message-list .control .bubble::before,
.message-list .control .bubble::after {
display: none; }
.message-detail .attachments a,
.message-list .attachments a {
font-style: italic;
display: block;
padding: 1em;
background-color: #ccc; }
.message-detail .attachments img, .message-detail .attachments audio, .message-detail .attachments video,
.message-list .attachments img,
.message-list .attachments audio,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment