Add screenshot support for tasks (copy/paste images directly)

assets/css/app.css

@@ -769,7 +769,7 @@ nav .active a {
 
 /* board table */
 #board-container {
-    padding-bottom: 180px; /* Space to avoid dropdown menu truncated */
+    padding-bottom: 200px; /* Space to avoid dropdown menu truncated */
     overflow-x: scroll;
 }
 
@@ -1083,17 +1083,21 @@ span.task-board-date-overdue {
 .task-link-closed {
     text-decoration: line-through;
 }
+
 .task-show-images {
     list-style-type: none;
 }
+
 .task-show-images li img {
     width: 100%;
 }
+
 .task-show-images li .img_container {
     width: 250px;
     height: 100px;
     overflow: hidden;
 }
+
 .task-show-images li {
     padding: 10px;
     overflow: auto;
@@ -1102,20 +1106,44 @@ span.task-board-date-overdue {
     display: inline-block;
     vertical-align: top;
 }
+
 .task-show-images li p{
     padding: 5px;
     font-weight: bold;
 }
+
 .task-show-images li:hover {
     background: #eee;
 }
+
 .task-show-image-actions {
     margin-left: 5px;
 }
+
 .task-show-file-table {
     width: auto;
 }
-/* comments */
+
+/* screenshots */
+#screenshot-zone {
+    position: relative;
+    border: 2px dashed #ccc;
+    width: 90%;
+    height: 250px;
+    overflow: auto;
+}
+
+#screenshot-inner {
+    position: absolute;
+    left: 0;
+    bottom: 48%;
+    width: 100%;
+    text-align: center;
+}
+
+#screenshot-zone.screenshot-pasted {
+    border: 2px solid #333;
+}/* comments */
 .comment {
     margin-bottom: 20px;
 }

assets/css/src/board.css

@@ -20,7 +20,7 @@
 
 /* board table */
 #board-container {
-    padding-bottom: 180px; /* Space to avoid dropdown menu truncated */
+    padding-bottom: 200px; /* Space to avoid dropdown menu truncated */
     overflow-x: scroll;
 }
 

assets/css/src/task.css

@@ -243,17 +243,21 @@ span.task-board-date-overdue {
 .task-link-closed {
     text-decoration: line-through;
 }
+
 .task-show-images {
     list-style-type: none;
 }
+
 .task-show-images li img {
     width: 100%;
 }
+
 .task-show-images li .img_container {
     width: 250px;
     height: 100px;
     overflow: hidden;
 }
+
 .task-show-images li {
     padding: 10px;
     overflow: auto;
@@ -262,16 +266,41 @@ span.task-board-date-overdue {
     display: inline-block;
     vertical-align: top;
 }
+
 .task-show-images li p{
     padding: 5px;
     font-weight: bold;
 }
+
 .task-show-images li:hover {
     background: #eee;
 }
+
 .task-show-image-actions {
     margin-left: 5px;
 }
+
 .task-show-file-table {
     width: auto;
 }
+
+/* screenshots */
+#screenshot-zone {
+    position: relative;
+    border: 2px dashed #ccc;
+    width: 90%;
+    height: 250px;
+    overflow: auto;
+}
+
+#screenshot-inner {
+    position: absolute;
+    left: 0;
+    bottom: 48%;
+    width: 100%;
+    text-align: center;
+}
+
+#screenshot-zone.screenshot-pasted {
+    border: 2px solid #333;
+}

assets/js/src/base.js

@@ -263,6 +263,11 @@ var Kanboard = (function() {
                     }
                 }
             });
+
+            // Screenshot
+            if (Kanboard.Exists("screenshot-zone")) {
+                Kanboard.Screenshot.Init();
+            }
         }
     };
 

assets/js/src/screenshot.js

@@ -0,0 +1,102 @@
+Kanboard.Screenshot = (function() {
+
+    var pasteCatcher = null;
+
+    // Setup event listener and workarounds
+    function init()
+    {
+        if (! window.Clipboard) {
+
+            // Create a contenteditable element
+            pasteCatcher = document.createElement("div");
+            pasteCatcher.setAttribute("contenteditable", "");
+            pasteCatcher.style.opacity = 0;
+            document.body.appendChild(pasteCatcher);
+
+            // Make sure it is always in focus
+            pasteCatcher.focus();
+            document.addEventListener("click", function() { pasteCatcher.focus(); });
+        }
+
+        window.addEventListener("paste", pasteHandler);
+    }
+
+    // Paste event callback
+    function pasteHandler(e)
+    {
+        // Firefox doesn't have the property e.clipboardData.items (only Chrome)
+        if (e.clipboardData && e.clipboardData.items) {
+
+            var items = e.clipboardData.items;
+
+            if (items) {
+
+                for (var i = 0; i < items.length; i++) {
+
+                    // Find an image in pasted elements
+                    if (items[i].type.indexOf("image") !== -1) {
+
+                        var blob = items[i].getAsFile();
+
+                        // Get the image as base64 data
+                        var reader = new FileReader();
+                        reader.onload = function(event) {
+                            createImage(event.target.result);
+                        };
+
+                        reader.readAsDataURL(blob);
+                    }
+                }
+            }
+        }
+        else {
+
+            // Handle Firefox
+            setTimeout(checkInput, 100);
+        }
+    }
+
+    // Parse the input in the paste catcher element
+    function checkInput()
+    {
+        var child = pasteCatcher.childNodes[0];
+        pasteCatcher.innerHTML = "";
+
+        if (child) {
+            // If the user pastes an image, the src attribute
+            // will represent the image as a base64 encoded string.
+            if (child.tagName === "IMG") {
+                createImage(child.src);
+            }
+        }
+    }
+
+    // Creates a new image from a given source
+    function createImage(blob)
+    {
+        var pastedImage = new Image();
+        pastedImage.src = blob;
+
+        // Send the image content to the form variable
+        pastedImage.onload = function() {
+            var sourceSplit = blob.split("base64,");
+            var sourceString = sourceSplit[1];
+            $("input[name=screenshot]").val(sourceString);
+        };
+
+        document.getElementById("screenshot-inner").style.display = "none";
+        document.getElementById("screenshot-zone").className = "screenshot-pasted";
+        document.getElementById("screenshot-zone").appendChild(pastedImage);
+    }
+
+    jQuery(document).ready(function() {
+
+        if (Kanboard.Exists("screenshot-zone")) {
+            init();
+        }
+    });
+
+    return {
+        Init: init
+    };
+})();