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 | import {
Box,
MockApplication,
CenteredMessage,
Hint
} from "@codecoupler/cc-ui";
import template from "./index.html";
export default class extends Box {
async finalize() {
super.finalize();
this.$box.html(template);
let $this = this.options.target || this.env.parent;
this.$box.find("[data-role=hint-splash]").on("click", async () => {
let splash = await $this.hint("splash", "Splash Hint");
await new Promise((r) => setTimeout(() => r(), 2000));
splash.destroy();
});
this.$box.find("[data-role=hint-error-p]").on("click", async () => {
await $this.hint("error-permanent", "Permanent Error");
});
this.$box.find("[data-role=hint-success-p]").on("click", async () => {
await $this.hint("success-permanent", "Permanent Success");
});
this.$box.find("[data-role=hint-info-p]").on("click", async () => {
await $this.hint("info-permanent", "Permanent Info");
});
this.$box.find("[data-role=hint-error]").on("click", async () => {
await $this.hint("error", "A spectacular success hint");
});
this.$box.find("[data-role=hint-success]").on("click", async () => {
await $this.hint("success", "A spectacular success hint");
});
this.$box.find("[data-role=hint-info]").on("click", async () => {
await $this.getStage("root").load(Hint, {
type: "info",
text: "A spectacular info hint"
});
});
this.$box.find("[data-role=modal-error]").on("click", async () => {
let normalMessage = await $this.block("info", "A Normal Message");
await new Promise((r) => setTimeout(() => r(), 2000));
let errorMessage = await $this.block("error", "An Error Message");
await new Promise((r) => setTimeout(() => r(), 2000));
errorMessage.destroy();
await new Promise((r) => setTimeout(() => r(), 2000));
normalMessage.destroy();
});
this.$box.find("[data-role=modal-message]").on("click", async () => {
let message = await $this.getStage("root").load({
component: CenteredMessage,
options: { text: "You are blocked!" },
level: "block"
});
for (let x = 0; x <= 100; x += 25) {
await new Promise((r) => setTimeout(() => r(), 7500));
message.text = `Please Wait\n${x}% Progress`;
}
await new Promise((r) => setTimeout(() => r(), 2000));
message.destroy();
});
this.$box.find("[data-role=modal-multi-app]").on("click", async () => {
let firstApp = await $this.getStage("root").load({
component: MockApplication,
id: "first-app",
level: "block",
options: {
"@codecoupler": {
application: {
panel: { position: "left-center left-center 70px" }
}
}
}
});
await new Promise((r) => setTimeout(() => r(), 2000));
let secondApp = await $this.getStage("root").load({
component: MockApplication,
id: "second-app",
level: "block",
options: {
"@codecoupler": {
application: {
panel: { position: "right-center right-center -70px" }
}
}
}
});
await new Promise((r) => setTimeout(() => r(), 2000));
firstApp.front();
await new Promise((r) => setTimeout(() => r(), 2000));
firstApp.destroy();
await new Promise((r) => setTimeout(() => r(), 2000));
secondApp.destroy();
});
this.$box.find("[data-role=modal-app]").on("click", async () => {
await $this.getStage("root").load({
component: MockApplication,
level: "block"
});
});
this.$box.find("[data-role=inline-app-noid]").on("click", async () => {
await $this.stage.load(MockApplication);
});
this.$box.find("[data-role=inline-app-id]").on("click", async () => {
await $this.stage.load(MockApplication, "some-id");
});
}
}
|