Merge pull request #550 from RocketChat/image-manual-download

Prevent download of images in phone and allow click to download
RocketChat · Aug 22, 2015 · dd3bc79 · dd3bc79
2 parents e10beca + 89478b9
commit dd3bc79
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 5 deletions.
diff --git a/client/stylesheets/base.less b/client/stylesheets/base.less
@@ -1988,6 +1988,23 @@ a.github-fork {
 	}
 }
 
+.image-to-download {
+	background-color: #fafafa;
+	border-radius: 6px;
+	border: 1px dashed #ddd;
+	padding: 20px 15px;
+	margin-bottom: 5px;
+	display: inline-block;
+	text-transform: uppercase;
+	color: #aaa;
+	text-align: center;
+	cursor: pointer;
+
+	i {
+		font-size: 24px;
+	}
+}
+
 .upload-progress {
 	position: absolute;
 	top: 60px;

diff --git a/client/views/app/room.coffee b/client/views/app/room.coffee
@@ -518,6 +518,9 @@ Template.room.events
 		Session.set('flexOpened', true)
 		Session.set('showUserInfo', $(e.currentTarget).data('username'))
 
+	'click .image-to-download': (event) ->
+		ChatMessage.update {_id: this._arguments[1]._id, 'urls.url': $(event.currentTarget).data('url')}, {$set: {'urls.$.downloadImages': true}}
+
 	'click .delete-message': (event) ->
 		message = @_arguments[1]
 		msg = event.currentTarget.parentNode.parentNode

diff --git a/packages/rocketchat-oembed/client/oembedImageWidget.coffee b/packages/rocketchat-oembed/client/oembedImageWidget.coffee
@@ -0,0 +1,3 @@
+Template.oembedImageWidget.helpers
+	showImage: ->
+		return @downloadImages is true or not Meteor.Device.isPhone()
diff --git a/packages/rocketchat-oembed/client/oembedImageWidget.html b/packages/rocketchat-oembed/client/oembedImageWidget.html
@@ -1,9 +1,16 @@
 <template name="oembedImageWidget">
-	<a href="{{url}}" target="_blank">
-		{{#if parsedUrl}}
-			<blockquote>
+	{{#if showImage}}
+		<a href="{{url}}" target="_blank">
+			{{#if parsedUrl}}
 				<div style="background-image: url({{url}}); background-size: contain; background-repeat: no-repeat; background-position: center left; height: 200px;"></div>
-			</blockquote>
+			{{/if}}
+		</a>
+	{{else}}
+		{{#if parsedUrl}}
+			<div class="image-to-download" data-url="{{url}}">
+				<i class="icon-picture"></i>
+				<div>click to download</div>
+			</div>
 		{{/if}}
-	</a>
+	{{/if}}
 </template>
diff --git a/packages/rocketchat-oembed/package.js b/packages/rocketchat-oembed/package.js
@@ -18,6 +18,7 @@ Package.onUse(function(api) {
 	api.addFiles('client/baseWidget.coffee', 'client');
 
 	api.addFiles('client/oembedImageWidget.html', 'client');
+	api.addFiles('client/oembedImageWidget.coffee', 'client');
 
 	api.addFiles('client/oembedAudioWidget.html', 'client');