summaryrefslogtreecommitdiffstats
path: root/client/components/cards
diff options
context:
space:
mode:
authorfloatinghotpot <rjfun.mobile@gmail.com>2015-11-13 11:13:54 +0800
committerfloatinghotpot <rjfun.mobile@gmail.com>2015-11-13 11:13:54 +0800
commiteaf2afb44cb9de64b1ed13cb795efd0f44c541ec (patch)
treea806c9fecfa22bcb8a0f9ff3375aefa3652818f9 /client/components/cards
parent41b23f88aea0f421226f92b081cdb1b61c64bde4 (diff)
downloadwekan-eaf2afb44cb9de64b1ed13cb795efd0f44c541ec.tar.gz
wekan-eaf2afb44cb9de64b1ed13cb795efd0f44c541ec.tar.bz2
wekan-eaf2afb44cb9de64b1ed13cb795efd0f44c541ec.zip
add preview attached image, allow upload image from clipboard and drag & drp
Diffstat (limited to 'client/components/cards')
-rw-r--r--client/components/cards/attachments.jade12
-rw-r--r--client/components/cards/attachments.js79
-rw-r--r--client/components/cards/attachments.styl11
3 files changed, 100 insertions, 2 deletions
diff --git a/client/components/cards/attachments.jade b/client/components/cards/attachments.jade
index 168fc2c8..79511ac9 100644
--- a/client/components/cards/attachments.jade
+++ b/client/components/cards/attachments.jade
@@ -3,6 +3,16 @@ template(name="cardAttachmentsPopup")
li
input.js-attach-file.hide(type="file" name="file" multiple)
a.js-computer-upload {{_ 'computer'}}
+ li
+ a.js-upload-clipboard-image {{_ 'clipboard'}}
+
+template(name="previewClipboardImagePopup")
+ p {{_ "paste-or-dragdrop"}}
+ img.preview-clipboard-image()
+ button.primary.js-upload-pasted-image {{_ 'upload'}}
+
+template(name="previewAttachedImagePopup")
+ img.preview-large-image.js-large-image-clicked(src="{{pathFor url}}")
template(name="attachmentDeletePopup")
p {{_ "attachment-delete-pop"}}
@@ -15,7 +25,7 @@ template(name="attachmentsGalery")
.attachment-thumbnail
if isUploaded
if isImage
- img.attachment-thumbnail-img(src="{{pathFor url}}")
+ img.attachment-thumbnail-img.js-preview-image(src="{{pathFor url}}")
else
span.attachment-thumbnail-ext= extension
else
diff --git a/client/components/cards/attachments.js b/client/components/cards/attachments.js
index ea621a74..1e5aa03b 100644
--- a/client/components/cards/attachments.js
+++ b/client/components/cards/attachments.js
@@ -20,6 +20,39 @@ Template.attachmentsGalery.events({
'click .js-remove-cover'() {
Cards.findOne(this.cardId).unsetCover();
},
+ 'click .js-preview-image'(evt) {
+ Popup.open('previewAttachedImage').call(this, evt);
+ // when multiple thumbnails, if click one then another very fast,
+ // we might get a wrong width from previous img.
+ // when popup reused, onRendered() won't be called, so we cannot get there.
+ // here make sure to get correct size when this img fully loaded.
+ const img = $('img.preview-large-image')[0];
+ if (!img) return;
+ const rePosPopup = () => {
+ const w = img.width;
+ const h = img.height;
+ // if the image is too large, we resize & center the popup.
+ if (w > 300) {
+ $('div.pop-over').css({
+ width: (w + 20),
+ position: 'absolute',
+ left: (window.innerWidth - w)/2,
+ top: (window.innerHeight - h)/2,
+ });
+ }
+ };
+ const url = $(evt.currentTarget).attr('src');
+ if (img.src === url && img.complete)
+ rePosPopup();
+ else
+ img.onload = rePosPopup;
+ },
+});
+
+Template.previewAttachedImagePopup.events({
+ 'click .js-large-image-clicked'(){
+ Popup.close();
+ },
});
Template.cardAttachmentsPopup.events({
@@ -28,7 +61,7 @@ Template.cardAttachmentsPopup.events({
FS.Utility.eachFile(evt, (f) => {
const file = new FS.File(f);
file.boardId = card.boardId;
- file.cardId = card._id;
+ file.cardId = card._id;
Attachments.insert(file);
Popup.close();
@@ -38,4 +71,48 @@ Template.cardAttachmentsPopup.events({
tpl.find('.js-attach-file').click();
evt.preventDefault();
},
+ 'click .js-upload-clipboard-image': Popup.open('previewClipboardImage'),
+});
+
+let pastedResults = null;
+
+Template.previewClipboardImagePopup.onRendered(() => {
+ // we can paste image from clipboard
+ $(document.body).pasteImageReader((results) => {
+ if (results.dataURL.startsWith('data:image/')) {
+ $('img.preview-clipboard-image').attr('src', results.dataURL);
+ pastedResults = results;
+ }
+ });
+
+ // we can also drag & drop image file to it
+ $(document.body).dropImageReader((results) => {
+ if (results.dataURL.startsWith('data:image/')) {
+ $('img.preview-clipboard-image').attr('src', results.dataURL);
+ pastedResults = results;
+ }
+ });
+});
+
+Template.previewClipboardImagePopup.events({
+ 'click .js-upload-pasted-image'() {
+ const results = pastedResults;
+ if (results && results.file) {
+ const card = this;
+ const file = new FS.File(results.file);
+ if (!results.name) {
+ // if no filename, it's from clipboard. then we give it a name, with ext name from MIME type
+ if (typeof results.file.type === 'string') {
+ file.name(results.file.type.replace('image/', 'clipboard.'));
+ }
+ }
+ file.updatedAt(new Date());
+ file.boardId = card.boardId;
+ file.cardId = card._id;
+ Attachments.insert(file);
+ pastedResults = null;
+ $(document.body).pasteImageReader(() => {});
+ Popup.close();
+ }
+ },
});
diff --git a/client/components/cards/attachments.styl b/client/components/cards/attachments.styl
index 5cdf7386..a582f3af 100644
--- a/client/components/cards/attachments.styl
+++ b/client/components/cards/attachments.styl
@@ -45,3 +45,14 @@
display: block
box-shadow: 0 1px 2px rgba(0,0,0,.2)
+.preview-large-image
+ max-width: 1000px
+ display: block
+ box-shadow: 0 1px 2px rgba(0,0,0,.2)
+
+.preview-clipboard-image
+ width: 280px
+ height: 200px
+ display: block
+ border: 1px solid black
+ box-shadow: 0 1px 2px rgba(0,0,0,.2)