added ability to edit cards

diff --git a/index.html b/index.html
index 659fb9a2180a5302c3fc2f03e3e335684899df01..ff47c2378f2c8127d2eb6188407e32d76eaaca26 100644 (file)
--- a/index.html
+++ b/index.html
@@ -145,8 +145,8 @@ h2 {
 
     <div id="dialog" class="dialog">
         <div class="dialog-content">
-            <div contenteditable=true class="card-title">Card title...</div>
-            <div contenteditable=true class="card-content">Card title...</div>
+            <div id="dialogTitle" contenteditable=true class="card-title">Card title...</div>
+            <div id="dialogContent" contenteditable=true class="card-content">Card title...</div>
         </div>
     </div>
 
@@ -178,16 +178,26 @@ h2 {
         data.id = "";
     }
 
-    const dblclick = (ev) => {
-        dialog.classList.add("visible"); 
-    }
-
     window.onclick = (ev) => {
-        if (ev.target === dialog) {
-            dialog.classList.remove("visible"); 
+        if (ev.target == dialog) {
+            dialog.classList.remove("visible");
+            const card = document.getElementById("selected-card");
+            if (card) {
+                card.children[0].innerHTML = dialogTitle.innerHTML;
+                card.children[1].innerHTML = dialogContent.innerHTML;
+            }
         }
     }
 
+    const mkclickfun = (card) => {
+        return (ev) => {
+            dialogTitle.innerHTML = card.children[0].innerHTML;
+            dialogContent.innerHTML = card.children[1].innerHTML;
+            dialog.classList.add("visible");
+            card.id = "selected-card";
+        };
+    }
+
     for (let i = 0; i < board.children.length; i++) {
         board.children[i].ondrop = drag_drop;
         board.children[i].ondragover = drag_over;
@@ -195,7 +205,7 @@ h2 {
 
     const cards = document.getElementsByClassName("card");
     for (let i = 0; i < cards.length; i++) {
-        cards[i].ondblclick = dblclick;
+        cards[i].ondblclick = mkclickfun(cards[i]);
         cards[i].ondragstart = drag_start;
         cards[i].draggable = true;
     }