progress report

mridun-gupta · Aug 30, 2024 · 0b4ee9a · 0b4ee9a
1 parent f547280
commit 0b4ee9a
Showing 1 changed file with 49 additions and 44 deletions.
diff --git a/js/view/item.js b/js/view/item.js
@@ -2,62 +2,67 @@ import DropZone from "./dropzone.js";
 import KanbanAPI from "../api/kanbanAPI.js";
 
 export default class Item {
-	constructor(id, content) {
-		const bottomDropZone = DropZone.createDropZone();
+    constructor(id, content) {
+        const bottomDropZone = DropZone.createDropZone();
 
-		this.elements = {};
-		this.elements.root = Item.createRoot();
-		this.elements.input = this.elements.root.querySelector(".item-input");
+        this.elements = {};
+        this.elements.root = Item.createRoot();
+        this.elements.input = this.elements.root.querySelector(".item-input");
 
-		this.elements.root.dataset.id = id;
-		this.elements.input.textContent = content;
-		this.content = content;
-		this.elements.root.appendChild(bottomDropZone);
+        this.elements.root.dataset.id = id;
+        this.elements.input.textContent = content;
+        this.content = content;
+        this.elements.root.appendChild(bottomDropZone);
 
-		const onBlur = () => {
-			const newContent = this.elements.input.textContent.trim();
+        const onBlur = () => {
+            const newContent = this.elements.input.textContent.trim();
 
-			if (newContent == this.content) {
-				return;
-			}
+            if (newContent == this.content) {
+                return;
+            }
 
-			this.content = newContent;
+            this.content = newContent;
 
-			KanbanAPI.updateItem(id, {
-				content: this.content
-			});
-		};
+            KanbanAPI.updateItem(id, {
+                content: this.content
+            });
+        };
 
-		this.elements.input.addEventListener("blur", onBlur);
-		this.elements.root.addEventListener("dblclick", () => {
-			const check = confirm("Are you sure you want to delete this item?");
+        this.elements.input.addEventListener("blur", onBlur);
+        this.elements.root.addEventListener("dblclick", () => {
+            const check = confirm("Are you sure you want to delete this item?");
 
-			if (check) {
-				KanbanAPI.deleteItem(id);
+            if (check) {
+                KanbanAPI.deleteItem(id);
 
-				this.elements.input.removeEventListener("blur", onBlur);
-				this.elements.root.parentElement.removeChild(this.elements.root);
-			}
-		});
+                this.elements.input.removeEventListener("blur", onBlur);
+                this.elements.root.parentElement.removeChild(this.elements.root);
+            }
+        });
 
-		this.elements.root.addEventListener("dragstart", e => {
-			e.dataTransfer.setData("text/plain", id);
-		});
+        this.elements.root.addEventListener("dragstart", e => {
+            e.dataTransfer.setData("text/plain", id);
+            this.elements.root.classList.add("dragging");
+        });
 
-		this.elements.input.addEventListener("drop", e => {
-			e.preventDefault();
-		});
-	}
+        this.elements.root.addEventListener("dragend", () => {
+            this.elements.root.classList.remove("dragging");
+        });
 
-	static createRoot() {
-		const range = document.createRange();
+        this.elements.input.addEventListener("drop", e => {
+            e.preventDefault();
+        });
+    }
 
-		range.selectNode(document.body);
+    static createRoot() {
+        const range = document.createRange();
 
-		return range.createContextualFragment(`
-			<div class="items" draggable="true">
-				<div contenteditable class="item-input"></div>
-			</div>
-		`).children[0];
-	}
+        range.selectNode(document.body);
+
+        return range.createContextualFragment(`
+            <div class="items" draggable="true">
+                <div contenteditable class="item-input"></div>
+            </div>
+        `).children[0];
+    }
 }