thomas

TP2/EX3/View.js

@@ -0,0 +1,65 @@
+class View {
+    constructor() {
+        this.app = document.getElementById('root');
+        this.form = this.app.querySelector('.todo-form');
+        this.input = this.form.querySelector('.todo-input');
+        this.todoList = this.app.querySelector('.todo-list');
+        this.filterTabs = this.app.querySelector('.tabs');
+    }
+
+    // ... autres méthodes de la classe View
+
+    bindAddTodo(handler) {
+        this.form.addEventListener('submit', event => {
+            event.preventDefault();
+            const text = this.input.value.trim();
+            if (text !== '') {
+                handler(text);
+                this.input.value = '';
+            }
+        });
+    }
+
+    bindDeleteTodo(handler) {
+        this.todoList.addEventListener('click', event => {
+            if (event.target.classList.contains('delete-button')) {
+                const id = parseInt(event.target.closest('li').dataset.id);
+                handler(id);
+            }
+        });
+    }
+
+    bindToggleTodo(handler) {
+        this.todoList.addEventListener('click', event => {
+            if (event.target.type === 'checkbox') {
+                const id = parseInt(event.target.closest('li').dataset.id);
+                handler(id);
+            }
+        });
+    }
+
+    bindEditTodo(handler) {
+        // Événement 'blur' pour détecter la fin de l'édition d'une tâche
+        this.todoList.addEventListener('blur', event => {
+            if (event.target.classList.contains('editable-text')) {
+                const id = parseInt(event.target.closest('li').dataset.id);
+                const newText = event.target.textContent.trim();
+                handler(id, newText);
+            }
+        }, true);
+    }
+
+    // Méthode pour le double-clic
+    bindDoubleClickTodo(handler) {
+        this.todoList.addEventListener('dblclick', event => {
+            const li = event.target.closest('li');
+            if (li) {
+                const textElement = li.querySelector('.editable-text');
+                if (textElement) {
+                    textElement.contentEditable = true;
+                    textElement.focus();
+                }
+            }
+        });
+    }
+}