Closes #2
+71
-23
Diff
round #0
+1
-1
app/archived.html
+1
-1
app/archived.html
···
4
4
<title>todo</title>
5
5
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
6
6
<link rel="stylesheet" type="text/css" href="./style.css">
7
-
<script src="./archived.js" defer></script>
7
+
<script src="./todos.js" defer></script>
8
8
</head>
9
9
<body class="default">
10
10
<header>
+1
-1
app/index.html
+1
-1
app/index.html
···
4
4
<title>todo</title>
5
5
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
6
6
<link rel="stylesheet" type="text/css" href="./style.css">
7
-
<script src="./index.js" defer></script>
7
+
<script src="./todos.js" defer></script>
8
8
</head>
9
9
<body class="default">
10
10
<header>
+69
-21
app/index.js
app/todos.js
+69
-21
app/index.js
app/todos.js
···
46
46
}
47
47
}
48
48
49
-
document.getElementById("createTodo").addEventListener("click", () => {
49
+
const archivedElement = document.getElementById("archived");
50
+
const todosElement = document.getElementById("todos");
51
+
const completedElement = document.getElementById("todos-completed");
52
+
53
+
const page = (archivedElement) ? "archived" : "home";
54
+
55
+
if (page == "home") document.getElementById("createTodo").addEventListener("click", () => {
50
56
51
57
document.documentElement.scrollTop = 0;
52
58
···
62
68
backupData();
63
69
});
64
70
65
-
const todosCompleted = document.getElementById("todos-completed");
66
-
67
71
const doShowCompleted = (backup = false) => {
68
72
69
73
if (theme.showCompleted) {
70
74
71
-
todosCompleted.classList.remove("hidden");
75
+
completedElement.classList.remove("hidden");
72
76
} else {
73
77
74
-
todosCompleted.classList.add("hidden");
78
+
completedElement.classList.add("hidden");
75
79
}
76
80
77
81
if (backup) backupData();
78
82
}
79
83
80
-
doShowCompleted()
84
+
if (page == "home") doShowCompleted();
81
85
82
-
document.getElementById("showCompleted").addEventListener("click", () => {
86
+
if (page == "home") document.getElementById("showCompleted").addEventListener("click", () => {
83
87
84
88
theme.showCompleted = !theme.showCompleted;
85
89
doShowCompleted(true);
86
90
resizeTextHeights();
87
91
});
88
92
89
-
const todosElement = document.getElementById("todos");
90
-
const completedElement = document.getElementById("todos-completed");
91
-
92
-
const todoElement = (item, index, isCompleted) => {
93
+
const todoElement = (item, index, isCompleted = false) => {
93
94
94
-
let completedText = (isCompleted) ? "completed" : "uncompleted";
95
+
let targetText = (isCompleted) ? "completed" : (page == "archived") ? "archived" : "uncompleted";
95
96
96
97
return `
97
-
<todo id="todo-${completedText}-${index}">
98
-
<div id="todo-${completedText}-${index}-completion" class="completion">
98
+
<todo id="todo-${targetText}-${index}">
99
+
<div id="todo-${targetText}-${index}-completion" class="completion ${(page == 'archived') ? 'hidden' : ''}">
99
100
${(isCompleted) ? '<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\'><path fill=\'currentColor\' d=\'m10.6 13.8l-2.15-2.15q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7L9.9 15.9q.3.3.7.3t.7-.3l5.65-5.65q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275zM12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22\' /></svg>' : '<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\'><path fill=\'currentColor\' d=\'M12 20a8 8 0 0 1-8-8a8 8 0 0 1 8-8a8 8 0 0 1 8 8a8 8 0 0 1-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2\' /></svg>'}
100
101
</div>
101
102
<div class="data">
102
-
<textarea id="todo-${completedText}-${index}-description">${item.description}</textarea>
103
+
<textarea id="todo-${targetText}-${index}-description">${item.description}</textarea>
103
104
<div>
104
-
<p id="todo-${completedText}-${index}-archive">archive</p>
105
-
<p id="todo-${completedText}-${index}-delete">delete</p>
105
+
<p id="todo-${targetText}-${index}-${(page == 'home') ? 'archive' : 'restore'}">${(page == 'home') ? 'archive' : 'restore'}</p>
106
+
<p id="todo-${targetText}-${index}-delete">delete</p>
106
107
</div>
107
108
</div>
108
109
</todo>
···
122
123
123
124
resizeTextHeights();
124
125
125
-
for (var i = 0; i < todos.uncompleted.length; i++) {
126
+
if (page == "archived") for (var i = 0; i < archived.length; i++) {
127
+
128
+
let index = i; // fixes scoping issue - what a disaster
129
+
130
+
document.getElementById(`todo-archived-${i}-description`).addEventListener("input", (event) => {
131
+
132
+
event.target.style.height = "0";
133
+
event.target.style.height = event.target.scrollHeight + "px";
134
+
135
+
archived[index].description = event.target.value;
136
+
137
+
backupData();
138
+
});
139
+
140
+
document.getElementById(`todo-archived-${i}-restore`).addEventListener("click", (event) => {
141
+
142
+
todos.uncompleted = [
143
+
archived[index]
144
+
].concat(todos.uncompleted);
145
+
archived.splice(index, 1);
146
+
147
+
hydrateTodos();
148
+
backupData();
149
+
});
150
+
151
+
document.getElementById(`todo-archived-${i}-delete`).addEventListener("click", (event) => {
152
+
153
+
archived.splice(index, 1);
154
+
155
+
hydrateTodos();
156
+
backupData();
157
+
});
158
+
}
159
+
160
+
if (page == "home") for (var i = 0; i < todos.uncompleted.length; i++) {
126
161
127
162
let index = i; // fixes scoping issue - what a disaster
128
163
···
167
202
});
168
203
}
169
204
170
-
for (var i = 0; i < todos.completed.length; i++) {
205
+
if (page == "home") for (var i = 0; i < todos.completed.length; i++) {
171
206
172
207
let index = i; // fixes scoping issue - what a disaster
173
208
···
210
245
}
211
246
}
212
247
248
+
const hydrateArchived = () => {
249
+
250
+
if (archived.length > 0) archivedElement.innerHTML = archived
251
+
.map((x, index) => todoElement(x, index))
252
+
.join("");
253
+
else archivedElement.innerHTML = "<p>no archived todos for now…</p>";
254
+
};
255
+
213
256
const hydrateUncompleted = () => {
214
257
215
258
todosElement.innerHTML = todos.uncompleted
···
226
269
227
270
const hydrateTodos = () => {
228
271
229
-
hydrateUncompleted();
230
-
hydrateCompleted();
272
+
if (page == "archived") hydrateArchived();
273
+
if (page == "home") {
274
+
275
+
hydrateUncompleted();
276
+
hydrateCompleted();
277
+
}
231
278
232
279
applyListeners();
233
280
};
234
281
235
282
hydrateTodos();
236
283
284
+
237
285
const updateTheme = (force = false) => {
238
286
239
287
if (theme.colorScheme != "default") {
History
1 round
0 comments
autumn.bsky.gay
submitted
#0
1 commit
expand
collapse
Merge archived.js and home.js into todos.js
merge conflicts detected
expand
collapse
expand
collapse
- app/archived.html:4
- app/index.html:4