-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathsidebar.js
120 lines (101 loc) · 3.66 KB
/
sidebar.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
111
112
113
114
115
116
117
118
119
120
import { Editor } from './editor.js';
import { Tooltip } from './tooltip.js';
import { TaskButton } from './task-button.js';
const Sidebar = (() => {
const sidebar = document.querySelector('.sidebar');
const overlay = document.querySelector('.sidebar-overlay');
const editor = document.querySelector('.editor');
const projectsList = document.querySelector('.projects-list-container');
const toggleProjectsVisibility = () => {
const sidebarProjectsButton = document.querySelector(
'.sidebar-projects-button'
);
const arrow = document.querySelector('.sidebar-projects-arrow-icon');
sidebarProjectsButton.addEventListener('click', () => {
arrow.classList.toggle('expanded');
projectsList.classList.toggle('expanded');
});
};
const addSelectedClassToButton = (button) => button.classList.add('selected');
const removeSelectedButtonClass = () => {
const sidebarButtons = document.querySelectorAll('.sidebar-button');
for (const button of sidebarButtons) {
button.classList.contains('selected') &&
button.classList.remove('selected');
}
};
const changeTabTitle = (tabName) => (document.title = `${tabName}: Todoist`);
const addVisibleClass = () => {
sidebar.classList.add('is-visible');
Editor.addSidebarVisibleClass();
Tooltip.changeMenuTooltipTextClose();
};
const removeVisibleClass = () => {
sidebar.classList.remove('is-visible');
Editor.removeSidebarVisibleClass();
Tooltip.changeMenuTooltipTextOpen();
};
const toggleOverlayVisibility = () =>
document.querySelector('.sidebar-overlay').classList.toggle('is-visible');
const toggleSidebarVisibility = () => {
const menuToggleButtons = document.querySelectorAll('.menu-button');
for (const button of menuToggleButtons) {
button.addEventListener('click', () => {
sidebar.classList.toggle('is-visible');
editor.classList.toggle('is-sidebar-visible');
toggleOverlayVisibility();
if (sidebar.classList.contains('is-visible')) {
Tooltip.changeMenuTooltipTextClose();
return;
}
Tooltip.changeMenuTooltipTextOpen();
});
}
};
const controlSidebarVisibility = () => {
window.innerWidth > 750 && addVisibleClass();
window.addEventListener('resize', () => {
const isSidebarVisible = sidebar.classList.contains('is-visible');
const isOverlayVisible = overlay.classList.contains('is-visible');
const windowWidth = window.innerWidth;
if (isOverlayVisible) {
return;
}
if (isSidebarVisible && windowWidth <= 750) {
removeVisibleClass();
return;
}
if (!isSidebarVisible && windowWidth > 750) {
addVisibleClass();
}
});
};
const getSelectedButton = () =>
document.querySelector('.sidebar-button.selected');
const selectDefaultTab = () => {
const inboxButton = document.querySelector('.sidebar-button-inbox');
const defaultButtonTabName = inboxButton.dataset.tabName;
Editor.changeContent(inboxButton, defaultButtonTabName);
};
const updateTaskButtonIdsOnTabChange = () => {
const sidebarButtons = document.querySelectorAll('.sidebar-button');
for (const button of sidebarButtons) {
button.addEventListener('click', () => {
TaskButton.updateTaskButtonIds();
TaskButton.updateTaskButtonDefaultProjectTaskIds();
});
}
};
toggleSidebarVisibility();
toggleProjectsVisibility();
controlSidebarVisibility();
updateTaskButtonIdsOnTabChange();
return {
changeTabTitle,
addSelectedClassToButton,
removeSelectedButtonClass,
getSelectedButton,
selectDefaultTab,
};
})();
export { Sidebar };