From 649c14789e31e5374c24cb9a2fef1435d9667384 Mon Sep 17 00:00:00 2001
From: Frederic Guillot <fred@kanboard.net>
Date: Sat, 18 Jul 2015 15:48:37 -0400
Subject: Fix bug with screenshot dropdown: scroll down on the board view and
 focus lost when clicking on the drop zone

---
 assets/js/src/screenshot.js | 61 ++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 52 insertions(+), 9 deletions(-)

(limited to 'assets/js/src/screenshot.js')

diff --git a/assets/js/src/screenshot.js b/assets/js/src/screenshot.js
index fef37356..dce49c77 100644
--- a/assets/js/src/screenshot.js
+++ b/assets/js/src/screenshot.js
@@ -5,22 +5,59 @@ Kanboard.Screenshot = (function() {
     // Setup event listener and workarounds
     function init()
     {
+        destroy();
+
         if (! window.Clipboard) {
 
             // Create a contenteditable element
             pasteCatcher = document.createElement("div");
-            pasteCatcher.setAttribute("contenteditable", "");
+            pasteCatcher.id = "screenshot-pastezone";
+            pasteCatcher.contentEditable = "true";
+
+            // Insert the content editable at the top to avoid scrolling down in the board view
             pasteCatcher.style.opacity = 0;
-            document.body.appendChild(pasteCatcher);
+            pasteCatcher.style.position = "fixed";
+            pasteCatcher.style.top = 0;
+            pasteCatcher.style.right = 0;
+            pasteCatcher.style.width = 0;
+
+            document.body.insertBefore(pasteCatcher, document.body.firstChild);
 
-            // Make sure it is always in focus
+            // Set focus on the contenteditable element
             pasteCatcher.focus();
-            document.addEventListener("click", function() { pasteCatcher.focus(); });
+
+            // Set the focus when clicked anywhere in the document
+            document.addEventListener("click", setFocus);
+
+            // Set the focus when clicked in screenshot dropzone (popover)
+            document.getElementById("screenshot-zone").addEventListener("click", setFocus);
         }
 
         window.addEventListener("paste", pasteHandler);
     }
 
+    // Set focus on the contentEditable element
+    function setFocus()
+    {
+        if (pasteCatcher !== null) {
+            pasteCatcher.focus();
+        }
+    }
+
+    // Destroy contenteditable
+    function destroy()
+    {
+        if (pasteCatcher != null) {
+            document.body.removeChild(pasteCatcher);
+        }
+        else if (document.getElementById("screenshot-pastezone")) {
+            document.body.removeChild(document.getElementById("screenshot-pastezone"));
+        }
+
+        document.removeEventListener("click", setFocus);
+        pasteCatcher = null;
+    }
+
     // Paste event callback
     function pasteHandler(e)
     {
@@ -60,7 +97,6 @@ Kanboard.Screenshot = (function() {
     function checkInput()
     {
         var child = pasteCatcher.childNodes[0];
-        pasteCatcher.innerHTML = "";
 
         if (child) {
             // If the user pastes an image, the src attribute
@@ -69,6 +105,8 @@ Kanboard.Screenshot = (function() {
                 createImage(child.src);
             }
         }
+
+        pasteCatcher.innerHTML = "";
     }
 
     // Creates a new image from a given source
@@ -84,9 +122,13 @@ Kanboard.Screenshot = (function() {
             $("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);
+        var zone = document.getElementById("screenshot-zone");
+        zone.innerHTML = "";
+        zone.className = "screenshot-pasted";
+        zone.appendChild(pastedImage);
+
+        destroy();
+        init();
     }
 
     jQuery(document).ready(function() {
@@ -97,6 +139,7 @@ Kanboard.Screenshot = (function() {
     });
 
     return {
-        Init: init
+        Init: init,
+        Destroy: destroy
     };
 })();
\ No newline at end of file
-- 
cgit v1.2.3