65 lines
2.1 KiB
JavaScript
65 lines
2.1 KiB
JavaScript
|
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();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|