-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
93 lines (82 loc) · 3.23 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WidgetX library</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>WidgetX library</h1>
<!-- DOM tree -->
<div id="root" class="tree">
<div widget="widgets/a">
<div widget="widgets/b"></div>
</div>
<div widget="widgets/c"></div>
</div>
<!-- Buttons -->
<div class="buttons">
<button id="initBtn" class="btn">Init</button>
<button id="destroyBtn" class="btn">Destroy</button>
<button id="doneBtn" class="btn">Done</button>
<button id="failBtn" class="btn">Fail</button>
</div>
<!-- Info block -->
<fieldset class="info-block">
<legend>InfoBox:</legend>
<div id="info"></div>
</fieldset>
<script type="module">
// Library import
import { X } from "./src/X.js";
const xLib = new X(); // Library instance
const rootNode = document.getElementById("root"); // DOM root node
const infoBlock = document.getElementById("info"); // Info block for messages
// Event listener for the Init button
document.getElementById("initBtn").addEventListener("click", () => {
xLib.init(rootNode, (errors) => {
if (errors) {
infoBlock.innerHTML = `Errors: ${errors
.map((e) => e.message)
.join(", ")}`;
} else {
infoBlock.innerHTML =
"Widgets initialized triggered: All widgets initialized successfully";
}
});
});
// Event listener for the Destroy button
document.getElementById("destroyBtn").addEventListener("click", () => {
xLib.destroy(rootNode);
infoBlock.innerHTML = "Widgets destroyed triggered";
});
// Event listener for the Done button to mark all widgets as finished
document.getElementById("doneBtn").addEventListener("click", () => {
const widgets = rootNode.querySelectorAll("[widget]"); // Select all widget nodes
widgets.forEach((widgetNode) => {
const widgetInstance = xLib.widgets.get(widgetNode); // Retrieve widget instance
if (widgetInstance) {
widgetInstance.finish(); // Call the finish method on each widget
}
});
infoBlock.innerHTML =
"Done action triggered: Widgets marked as finished"; // Update info block
});
// Event listener for the Fail button to simulate failure
document.getElementById("failBtn").addEventListener("click", () => {
const customError = new Error(
"Simulated failure in widget initialization."
);
const widgets = rootNode.querySelectorAll("[widget]"); // Select all widget nodes
widgets.forEach((widgetNode) => {
const widgetInstance = xLib.widgets.get(widgetNode); // Retrieve widget instance
if (widgetInstance) {
widgetInstance.fail(customError); // Call the fail method on each widget
}
});
infoBlock.innerHTML = `Fail action triggered: Widgets failed to initialize. Error: ${customError.message}`; // Update info block
});
</script>
</body>
</html>