116 lines
2.5 KiB
JavaScript
116 lines
2.5 KiB
JavaScript
export default class View {
|
|
constructor() {
|
|
this.form = document.querySelector("#add_form")
|
|
this.input = document.querySelector("#input_todo")
|
|
this.list = document.querySelector("#todos_list")
|
|
this.tabs = document.querySelector("#todos_filter")
|
|
this.loader = document.querySelector("#loader")
|
|
}
|
|
|
|
_getTodo() {
|
|
return this.input.value
|
|
}
|
|
|
|
_resetInput() {
|
|
this.input.value = ''
|
|
}
|
|
|
|
_getNewTodoElement(todo){
|
|
let div = document.createElement("div")
|
|
div.classList.add("box","is-flex","is-align-items-center","m-2")
|
|
div.dataset.id = todo.id
|
|
|
|
let input = document.createElement("input")
|
|
input.type = "checkbox"
|
|
input.classList.add("mr-3")
|
|
|
|
let span = document.createElement("p")
|
|
span.classList.add("mb-0","is-size-3","mr-auto")
|
|
span.textContent = todo.text
|
|
span.setAttribute("contenteditable",true)
|
|
|
|
|
|
let button = document.createElement("button")
|
|
button.classList.add("delete","is-large")
|
|
|
|
|
|
if (todo.done){
|
|
span.classList.add("strike")
|
|
input.checked = true
|
|
}
|
|
|
|
div.append(input,span,button)
|
|
|
|
return div
|
|
|
|
}
|
|
|
|
setLoader(){
|
|
this.loader.classList.add("is-loading")
|
|
}
|
|
unsetLoader(){
|
|
this.loader.classList.remove("is-loading")
|
|
}
|
|
|
|
setFilterTabs(filter){
|
|
let li = this.tabs.querySelectorAll("li")
|
|
li.forEach( tab => {
|
|
tab.classList.remove("is-active")
|
|
})
|
|
let active = this.tabs.querySelector(`#${filter}`)
|
|
active.parentNode.classList.add("is-active")
|
|
}
|
|
|
|
renderTodoList(todos) {
|
|
let list = new DocumentFragment()
|
|
for (let todo of todos){
|
|
list.appendChild(this._getNewTodoElement(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
|
|
this.list.addEventListener("click", (e) => {
|
|
let selection = e.target;
|
|
if (selection.tagName === "BUTTON"){
|
|
let id = selection.parentNode.dataset.id;
|
|
handler(id);
|
|
}
|
|
});
|
|
}
|
|
|
|
bindEditTodo(handler) {
|
|
this.list.addEventListener("keydown", (e) => {
|
|
let selection = e.target;
|
|
if (selection.tagName === "P" && e.key === "Enter"){
|
|
let id = selection.parentNode.dataset.id;
|
|
let texte = selection.textContent;
|
|
handler(id, texte);
|
|
}
|
|
});
|
|
}
|
|
|
|
bindToggleTodo(handler) {
|
|
this.list.addEventListener("change", (e) => {
|
|
let selection = e.target;
|
|
if (selection.tagName === "INPUT"){
|
|
let id = selection.parentNode.dataset.id;
|
|
handler(id);
|
|
}
|
|
});
|
|
}
|
|
}
|