Merge pull request #4989 from VidVidex/master

Add support for viewing pdfs

client/components/boards/boardColors.css

@@ -1976,7 +1976,7 @@
   background-color: #ccc;
   color: #222;
 }
-.board-color-moderndark .attachments-galery .attachment-item {
+.board-color-moderndark .attachments-gallery .attachment-item {
   color: #222;
 }
 .board-color-moderndark .minicard-description {
@@ -2148,10 +2148,10 @@
 .board-color-exodark .sidebar-content {
   box-shadow: 0 0 7px 0 #00897b;
 }
-.board-color-exodark .attachments-galery .attachment-item {
+.board-color-exodark .attachments-gallery .attachment-item {
   background: #2b2b2b;
 }
-.board-color-exodark .attachments-galery .attachment-item:hover {
+.board-color-exodark .attachments-gallery .attachment-item:hover {
   border: 1px solid #00897b;
   background: #2b2b2b;
 }

client/components/cards/attachments.css

@@ -7,11 +7,11 @@
   text-align: center;
   font-weight: bold;
 }
-.attachments-galery {
+.attachments-gallery {
   display: flex;
   flex-wrap: wrap;
 }
-.attachments-galery .attachment-item {
+.attachments-gallery .attachment-item {
   width: 31.33%;
   margin: 10px 1% 0;
   text-align: center;
@@ -20,40 +20,40 @@
   background: #ededed;
   min-height: 120px;
 }
-.attachments-galery .attachment-item:hover {
+.attachments-gallery .attachment-item:hover {
   background: #e0e0e0;
 }
-.attachments-galery .attachment-item.add-attachment {
+.attachments-gallery .attachment-item.add-attachment {
   display: flex;
   align-items: center;
 }
-.attachments-galery .attachment-item.add-attachment a {
+.attachments-gallery .attachment-item.add-attachment a {
   display: block;
   margin: auto;
 }
-.attachments-galery .attachment-item .attachment-thumbnail {
+.attachments-gallery .attachment-item .attachment-thumbnail {
   height: 80px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
 }
-.attachments-galery .attachment-item .attachment-thumbnail .attachment-thumbnail-img {
+.attachments-gallery .attachment-item .attachment-thumbnail .attachment-thumbnail-img {
   max-height: 100%;
   max-width: 100%;
 }
-.attachments-galery .attachment-item .attachment-thumbnail .attachment-thumbnail-ext {
+.attachments-gallery .attachment-item .attachment-thumbnail .attachment-thumbnail-ext {
   text-transform: uppercase;
   font-size: 1.6em;
 }
-.attachments-galery .attachment-item .attachment-details {
+.attachments-gallery .attachment-item .attachment-details {
   font-size: 0.75em;
   margin: 3px;
 }
-.attachments-galery .attachment-item .attachment-details .attachment-details-actions a {
+.attachments-gallery .attachment-item .attachment-details .attachment-details-actions a {
   display: block;
 }
-.attachments-galery .attachment-item .attachment-details .attachment-details-actions a.attachment-details-menu {
+.attachments-gallery .attachment-item .attachment-details .attachment-details-actions a.attachment-details-menu {
   padding-top: 10px;
 }
 .attachment-image-preview {
@@ -69,22 +69,69 @@
   border: 1px solid #000;
   box-shadow: 0 1px 2px rgba(0,0,0,0.2);
 }
+#viewer-overlay{
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  top: 48px;  /* height of the navbar */
+  left: 0;
+  z-index: 9999 !important;
+  background: rgba(13,13,13,0.9);
+}
+#viewer-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+#viewer-close {
+  color:white;
+  cursor: pointer;
+  font-size: 4em;
+  top: 0;
+  right: 16px;
+  position: absolute;
+  padding: 20 20;
+}
+#viewer-container{
+  text-align: center;
+}
+#pdf-viewer {
+  width: 40vw;
+  height: 100vh;
+}
+.pdf-preview-error{
+  margin-top: 20vh;
+  display: block;
+  font-size: 2em;
+  color: white;
+}
+@media screen and (max-width: 1600px) {
+  #pdf-viewer {
+    width: 60vw;
+  }
+}
+
 @media screen and (max-width: 800px) {
-  .attachments-galery .attachment-item {
+
+  #pdf-viewer {
+    width: 100vh;
+  }
+
+  .attachments-gallery .attachment-item {
     width: 48%;
   }
-  .attachments-galery .attachment-item .attachment-thumbnail {
+  .attachments-gallery .attachment-item .attachment-thumbnail {
     height: 130px;
   }
-  .attachments-galery .attachment-item .attachment-details {
+  .attachments-gallery .attachment-item .attachment-details {
     font-size: 1.1em;
   }
 }
 @media screen and (max-width: 360px) {
-  .attachments-galery .attachment-item {
+  .attachments-gallery .attachment-item {
     width: 100%;
   }
-  .attachments-galery .attachment-item .attachment-thumbnail {
+  .attachments-gallery .attachment-item .attachment-thumbnail {
     height: 200px;
   }
 }

client/components/cards/attachments.jade

@@ -30,8 +30,14 @@ template(name="attachmentDeletePopup")
   p {{_ "attachment-delete-pop"}}
   button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
 
-template(name="attachmentsGalery")
+template(name="attachmentsGallery")
-  .attachments-galery
+  #viewer-overlay.hidden
+    #viewer-container
+      object#pdf-viewer(type="application/pdf")
+        span.pdf-preview-error Your device does not support previewing pdfs. Try downloading instead.
+    a#viewer-close.fa.fa-times-thin
+
+  .attachments-gallery
     if currentUser.isBoardMember
       unless currentUser.isCommentOnly
         unless currentUser.isWorker
@@ -40,7 +46,8 @@ template(name="attachmentsGalery")
             i.fa.fa-plus
     each attachments
       .attachment-item
-        a.attachment-thumbnail.swipebox(href="{{link}}" title="{{sanitize name}}")
+
+        span.attachment-thumbnail(href="{{link}}" title="{{sanitize name}}" class="{{#if isImage}}swipebox{{/if}} {{#if $eq extension 'pdf'}}pdf{{/if}}")
           if link
             if($eq extension 'svg')
               img.attachment-thumbnail-img(src="{{link}}" title="{{sanitize name}}" type="image/svg+xml")

client/components/cards/attachments.js

@@ -4,7 +4,18 @@ import DOMPurify from 'dompurify';
 const filesize = require('filesize');
 const prettyMilliseconds = require('pretty-ms');
 
-Template.attachmentsGalery.events({
+Template.attachmentsGallery.events({
+  'click .pdf'(event) {
+    let link = $(event.currentTarget).attr("href");
+    $("#pdf-viewer").attr("data", link);
+    $("#viewer-overlay").removeClass("hidden");
+  },
+  'click #viewer-container'(event) {
+    $("#viewer-overlay").addClass("hidden");
+  },
+  'click #viewer-close'(event) {
+    $("#viewer-overlay").addClass("hidden");
+  },
   'click .js-add-attachment': Popup.open('cardAttachments'),
   // If we let this event bubble, FlowRouter will handle it and empty the page
   // content, see #101.
@@ -14,7 +25,7 @@ Template.attachmentsGalery.events({
   'click .js-open-attachment-menu': Popup.open('attachmentActions'),
 });
 
-Template.attachmentsGalery.helpers({
+Template.attachmentsGallery.helpers({
   isBoardAdmin() {
     return Meteor.user().isBoardAdmin();
   },

client/components/cards/cardDetails.jade

@@ -541,8 +541,8 @@ template(name="cardDetails")
           +viewer
             = getDescription
 
-      .card-checklist-attachmentGalerys
+      .card-checklist-attachmentGalleries
-        .card-checklist-attachmentGalery.card-checklists
+        .card-checklist-attachmentGallery.card-checklists
           if currentBoard.allowsChecklists
             hr
             +checklists(cardId = _id)
@@ -561,8 +561,8 @@ template(name="cardDetails")
             | {{_ 'allowed-upload-filetypes'}} {{Meteor.settings.public.attachmentsUploadMimeTypes}}
             br
           | {{_ 'invalid-file'}}
-          .card-checklist-attachmentGalery.card-attachmentGalery
+          .card-checklist-attachmentGallery.card-attachmentGallery
-            +attachmentsGalery
+            +attachmentsGallery
       hr
 
     .card-details-right