Skip to content

Commit

Permalink
Fix up unsupported attachment rendering
Browse files Browse the repository at this point in the history
Rather than simply displaying an inactionable error, render a link that
allows the user to save the unsupported attachment.

// FREEBIE
  • Loading branch information
liliakai committed Dec 22, 2015
1 parent 239ec8e commit 881aa16
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 28 deletions.
49 changes: 25 additions & 24 deletions js/views/attachment_view.js
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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;
}
});

Expand Down
3 changes: 2 additions & 1 deletion js/views/message_view.js
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
});
Expand Down
13 changes: 11 additions & 2 deletions stylesheets/_conversation.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -409,6 +417,7 @@
img {
cursor: pointer;
}

}

.outgoing .avatar {
Expand Down
9 changes: 8 additions & 1 deletion stylesheets/manifest.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 881aa16

Please sign in to comment.