Skip to content

Loading Components: Blocking Messages

In addition to loading modal applications, the level block is also suitable for temporarily or permanently blocking components or individual stages. For this we do not load an application component but the already known centered message component into this level.

What are we learning here?

  • How to block a stage with CenteredMessage
  • How to disable splash modules while loading components

Let's add one more buttons 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
<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>
</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
import { Box, MockApplication, CenteredMessage } 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=modal-message]").on("click", async () => {
      let message = await $this.getStage("root").load({
        component: CenteredMessage,
        options: { text: "You are blocked!" },
        level: "block"
      });
      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 block the widget and show a message. Luckily the loaded component CenteredMessage will be removed after 2 seconds with "destroy()". The blocking layer also disappears automatically.

The component CenteredMessage have a public setter with which you can update the message. This is perfect to show the user a progress. Newlines can be used in the text property:

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
import { Box, MockApplication, CenteredMessage } 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=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(), 750));
        message.text = `Please Wait\n${x}% Progress`;
      }
      await new Promise((r) => setTimeout(() => r(), 2000));
      message.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");
    });
  }
}