84 lines
1.5 KiB
JavaScript
84 lines
1.5 KiB
JavaScript
|
class View {
|
||
|
|
charLimit = 70;
|
||
|
|
|
||
|
|
constructor() {
|
||
|
|
this.form = document.querySelector("#add_form")
|
||
|
|
this.input = document.querySelector("#input_todo")
|
||
|
|
this.list = document.querySelector("#todos_list")
|
||
|
|
this.tabs = document.querySelectorAll("#add_form span a")
|
||
|
|
this.loader = document.querySelector("#loader")
|
||
|
|
this.count = document.querySelector("#count")
|
||
|
|
|
||
|
|
|
||
|
|
this.input.addEventListener("input", (e) => {
|
||
|
|
if (e.target.value.length >= this.charLimit) {
|
||
|
|
e.target.value = e.target.value.substring(0,this.charLimit);
|
||
|
|
}
|
||
|
|
count.textContent = e.target.value.length;
|
||
|
|
});
|
||
|
|
count.nextSibling.textContent = `/${this.charLimit} characters`
|
||
|
|
}
|
||
|
|
|
||
|
|
#getTodo() {
|
||
|
|
return this.input.value
|
||
|
|
}
|
||
|
|
|
||
|
|
#resetInput() {
|
||
|
|
this.input.value = ''
|
||
|
|
count.textContent = 0
|
||
|
|
}
|
||
|
|
|
||
|
|
#createNewTodoElement(todo){
|
||
|
|
let li = document.createElement("li")
|
||
|
|
|
||
|
|
// TODO
|
||
|
|
|
||
|
|
return li
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
setFilterTabs(filter){
|
||
|
|
this.tabs.forEach( tab => {
|
||
|
|
if (filter === tab.id)
|
||
|
|
tab.classList.add("is-active")
|
||
|
|
else
|
||
|
|
tab.classList.remove("is-active")
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
renderTodoList(todos) {
|
||
|
|
let list = new DocumentFragment()
|
||
|
|
for (let todo of todos){
|
||
|
|
list.appendChild(this.#createNewTodoElement(todo))
|
||
|
|
}
|
||
|
|
this.list.replaceChildren(list)
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/** Abonnements événements **/
|
||
|
|
|
||
|
|
bindAddTodo(handler) {
|
||
|
|
this.form.addEventListener("submit", (e=>{
|
||
|
|
e.preventDefault()
|
||
|
|
let text = this.#getTodo()
|
||
|
|
handler(text)
|
||
|
|
this.#resetInput()
|
||
|
|
}))
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
bindDeleteTodo(handler) {
|
||
|
|
// TODO
|
||
|
|
}
|
||
|
|
|
||
|
|
bindEditTodo(handler) {
|
||
|
|
// TODO
|
||
|
|
}
|
||
|
|
|
||
|
|
bindToggleTodo(handler) {
|
||
|
|
// TODO
|
||
|
|
}
|
||
|
|
}
|