-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathproject-button.js
110 lines (87 loc) · 3.41 KB
/
project-button.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
105
106
107
108
109
110
import { Editor } from './editor.js';
import { Icons } from './icons.js';
import { Sidebar } from './sidebar.js';
import { Storage } from './storage.js';
import { TaskModal } from './task-modal.js';
const ProjectButton = (() => {
const inboxSidebarButton = document.querySelector('.sidebar-button-inbox');
const getNewProjectButton = (projectIcon, projectName) => {
const newProjectButton = document.createElement('button');
const newProjectNameSpan = document.createElement('span');
const deleteButton = Icons.getDeleteIcon();
deleteButton.classList.add('delete-project-icon');
newProjectButton.classList.add(
'project-button',
'sidebar-button',
'tab-link'
);
newProjectNameSpan.classList.add('project-name');
newProjectButton.dataset.tabName = projectName;
newProjectNameSpan.textContent = projectName;
newProjectButton.append(projectIcon, newProjectNameSpan, deleteButton);
return newProjectButton;
};
const getProjectButtonListItem = (projectButton) => {
const listItem = document.createElement('li');
listItem.appendChild(projectButton);
return listItem;
};
const updateProjectButtonIds = () => {
const projectButtons = document.querySelectorAll('.project-button');
for (let i = 0; i < projectButtons.length; i++)
projectButtons[i].dataset.projectId = i;
};
const removeProjectButton = (projectButton) =>
projectButton.parentNode.remove();
const addButtonEventListener = (projectButton) => {
const tabName = projectButton.dataset.tabName;
const deleteButton = projectButton.childNodes[2];
projectButton.addEventListener(
'click',
(e) =>
e.target === projectButton && Editor.changeContent(e.target, tabName)
);
deleteButton.addEventListener('click', () => {
Sidebar.selectDefaultTab();
const projectButtonId = projectButton.dataset.projectId;
removeProjectButton(projectButton);
TaskModal.removeProjectSelectorOption(projectButtonId);
Storage.removeProject(projectButtonId);
updateProjectButtonIds();
TaskModal.updateProjectSelectorIds();
Storage.updateProjectIds();
Storage.updateTaskProjectIds();
});
};
const addProjectButtonToSidebarList = (projectButton) => {
const projects = document.querySelector('#projects-list');
const listItem = getProjectButtonListItem(projectButton);
projects.appendChild(listItem);
};
const getTotalProjectButtonsAmount = () =>
document.querySelectorAll('.project-button').length;
const addProjectButtonId = (projectButton) => {
const projectButtonsAmount = getTotalProjectButtonsAmount();
const projectId = projectButtonsAmount - 1;
projectButton.dataset.projectId = projectId;
};
const addProjectButton = (projectName) => {
const icon = Icons.getProjectIcon();
const newButton = getNewProjectButton(icon, projectName);
addProjectButtonToSidebarList(newButton);
addProjectButtonId(newButton);
addButtonEventListener(newButton);
};
const addExistingProjectButtons = () => {
const projects = Storage.getProjects();
for (let i = 0; i < projects.length; i++) {
const project = projects[i];
const projectName = project.name;
addProjectButton(projectName);
}
};
addExistingProjectButtons();
Editor.changeContent(inboxSidebarButton, inboxSidebarButton.dataset.tabName);
return { addProjectButton };
})();
export { ProjectButton };