generated from microverseinc/readme-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
HandleTasks.js
104 lines (91 loc) · 3.2 KB
/
HandleTasks.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
export default class HandleTasks {
constructor(store, UI) {
this.store = store;
this.UI = UI;
}
addItem() {
this.input = document.getElementById('add-task');
this.arrowIcon = document.querySelector('.arrow-icon');
this.input.addEventListener('keydown', (e) => {
const i = (this.store.getItems().length) + 1;
if (e.key === 'Enter' && e.target.value) {
const obj = {
description: e.target.value,
completed: false,
index: i,
};
this.input.value = '';
this.store.add(obj);
this.UI.generateHtmlTasks();
e.preventDefault();
}
});
this.arrowIcon.addEventListener('click', () => {
const i = this.store.getItems().lenght;
if (this.input.value) {
const obj = {
description: this.input.value,
completed: false,
index: i,
};
this.input.value = '';
this.store.add(obj);
this.UI.generateHtmlTasks();
}
});
}
removeItem(index) {
this.store.remove(index);
this.UI.generateHtmlTasks();
}
clearAll() {
this.clearBtn = document.getElementById('clear-tasks');
this.clearBtn.addEventListener('click', () => {
this.store.removeAllCompleted();
this.UI.generateHtmlTasks();
});
}
removeAllTrashIcons() {
this.trash = document.querySelectorAll('.trash-icon');
this.ellipsis = document.querySelectorAll('.fa-ellipsis-v');
this.trash.forEach((trash, index) => {
trash.setAttribute('class', 'trash-icon ms-auto text-secundary d-none');
this.ellipsis[index].setAttribute('class', 'icon ellipsis-icon fas fa-ellipsis-v ms-auto text-secondary');
});
}
toggleAllElementTrashIcon(element) {
this.trash = element.parentElement.querySelector('.trash-icon');
this.ellipsis = element.parentElement.querySelector('.fa-ellipsis-v');
this.trash.setAttribute('class', 'trash-icon ms-auto text-secundary d-none');
this.ellipsis.setAttribute('class', 'icon ellipsis-icon fas fa-ellipsis-v ms-auto text-secondary');
}
toggleElementTrashIcon(element) {
this.trash = element.parentElement.querySelector('.trash-icon');
this.ellipsis = element.parentElement.querySelector('.fa-ellipsis-v');
this.trash.classList.remove('d-none');
this.ellipsis.setAttribute('class', 'icon ellipsis-icon fas fa-ellipsis-v ms-auto text-secondary d-none');
}
updateValue() {
window.addEventListener('click', (e) => {
if (e.target.className.includes('text-description')) {
const nodeListInputs = document.querySelectorAll('.text-description');
const index = parseInt(e.target.id.slice(11), 10);
const trash = e.target.parentElement.querySelector('.trash-icon');
nodeListInputs.forEach((input) => {
if (input !== e.target) {
this.toggleAllElementTrashIcon(input);
}
});
this.toggleElementTrashIcon(e.target);
trash.addEventListener('click', () => {
this.removeItem(index);
});
e.target.addEventListener('blur', () => {
this.store.updateDescription(index, e.target.value);
});
} else {
this.removeAllTrashIcons();
}
});
}
}