From 3b403a1a4b33443ee853556e40d4fe89d3399387 Mon Sep 17 00:00:00 2001 From: Frederic Guillot Date: Sun, 12 Apr 2015 18:44:42 -0400 Subject: Add screenshot support for tasks (copy/paste images directly) --- assets/js/src/base.js | 5 +++ assets/js/src/screenshot.js | 102 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 107 insertions(+) create mode 100644 assets/js/src/screenshot.js (limited to 'assets/js/src') diff --git a/assets/js/src/base.js b/assets/js/src/base.js index 0aea1691..7ca3c234 100644 --- a/assets/js/src/base.js +++ b/assets/js/src/base.js @@ -263,6 +263,11 @@ var Kanboard = (function() { } } }); + + // Screenshot + if (Kanboard.Exists("screenshot-zone")) { + Kanboard.Screenshot.Init(); + } } }; diff --git a/assets/js/src/screenshot.js b/assets/js/src/screenshot.js new file mode 100644 index 00000000..fef37356 --- /dev/null +++ b/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 + }; +})(); \ No newline at end of file -- cgit v1.2.3