blob: 2f09deba38969d3b3420dc4818225d061a7efd10 (
plain)
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
|
import "./style.css";
import { fetchTodos } from "./todos";
const happy = "happy" as const;
const angry = "angry" as const;
type Emotion = typeof happy | typeof angry;
function emotionOpposite(emotion: Emotion): Emotion {
if (emotion === happy) {
return angry;
} else {
return happy;
}
}
function emotionElement(emotion: Emotion): HTMLDivElement {
return document.querySelector<HTMLDivElement>(`.slogan.${emotion}`)!;
}
function emotionElementHeight(emotion: Emotion): number {
return emotionElement(emotion).clientHeight;
}
function updateBodyTopPadding(emotion: Emotion): void {
document.body.style.paddingTop = `${emotionElementHeight(emotion)}px`;
}
const sloganEmotionKey = "sloganEmotion";
const savedEmotion =
(localStorage.getItem(sloganEmotionKey) as Emotion | null) ?? happy;
if (savedEmotion !== happy && savedEmotion !== angry) {
console.error(`Invalid saved emotion: ${savedEmotion}`);
}
updateBodyTopPadding(savedEmotion);
// Then we add transition animation.
setTimeout(() => {
document.body.style.transition = "padding-top 1s";
});
const sloganContainer = document.querySelector(
".slogan-container",
) as HTMLDivElement;
setTimeout(() => {
sloganContainer.dataset.sloganEmotion = savedEmotion;
}, 500);
const sloganLoadedPromise = new Promise<void>((resolve) => {
setTimeout(() => {
resolve();
}, 1500);
});
for (const emotion of [happy, angry]) {
emotionElement(emotion).addEventListener("click", () => {
const opposite = emotionOpposite(emotion);
localStorage.setItem(sloganEmotionKey, opposite);
sloganContainer.dataset.sloganEmotion = opposite;
updateBodyTopPadding(opposite);
});
}
async function loadTodos(syncWith: Promise<unknown>): Promise<void> {
const todoMessage = document.getElementById("todo-message")!;
const todoContainer = document.getElementById("todo-container")!;
try {
const todosPromise = fetchTodos();
await syncWith; // Let's wait this first.
const todos = await todosPromise;
todos.forEach((item, index) => {
const { status, title, closed } = item;
const li = document.createElement("li");
li.dataset.status = closed ? "closed" : "open";
li.style.animationDelay = `${index * 0.04}s`;
// The color from api server is kind of ugly at present.
// li.style.background = color;
const statusSpan = document.createElement("span");
const titleSpan = document.createElement("span");
statusSpan.textContent = status;
titleSpan.textContent = title;
li.appendChild(statusSpan);
li.append(" : ");
li.append(titleSpan);
todoContainer.appendChild(li);
});
todoMessage.parentElement!.removeChild(todoMessage);
} catch (e) {
todoMessage.style.color = "red";
todoMessage.textContent = (e as Error).message;
}
}
loadTodos(sloganLoadedPromise);
|
