Skip to content

Loading Components: Hints

Now let's look to the level hint. It is the highest level and components in there will be even displayed in front of the blocking layers. So they never get blocked. They are perfect for showing short timed messages.

There is a special component for this case called Hint. This component show a message for a short time and close automatically. Hint components will be loaded by default into the level hint.

What are we learning here?

  • How to use a Hint component

Let's add one button into our HTML structure:

src/demo/widgets/loading-components/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
<div class="border rounded d-inline-block p-1 mr-2 mt-2">
  Hint
  <button class="btn btn-xs btn-info" data-role="hint-info">
    <i class="fas fa-info-circle"></i>
  </button>
</div>
<div class="border rounded d-inline-block p-1 mr-2 mt-2">
  Blocking
  <button class="btn btn-xs btn-info" data-role="modal-app">
    <i class="fas fa-check-circle"></i> App
  </button>
  <button class="btn btn-xs btn-info" data-role="modal-multi-app">
    <i class="fas fa-check-circle"></i> MultiApp
  </button>
  <button class="btn btn-xs btn-info" data-role="modal-message">
    <i class="fas fa-check-circle"></i> Message
  </button>
  <button class="btn btn-xs btn-danger" data-role="modal-error">
    <i class="fas fa-check-circle"></i> Error
  </button>
</div>
<div class="border rounded d-inline-block p-1 mr-2 mt-2">
  App
  <button class="btn btn-xs btn-info" data-role="inline-app-noid">
    <i class="fas fa-times-circle"></i>
  </button>
  <button class="btn btn-xs btn-info" data-role="inline-app-id">
    <i class="fas fa-check-circle"></i>
  </button>
</div>

And attach some handlers:

src/demo/widgets/loading-components/index.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
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-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");
    });
  }
}

Now you can see the hint component that are loaded by default into the level hint in action.