Skip to content

Loading Components: Hints & Blocks

Wait a moment. Isn't a splash screen better to show in the blocking level? Well, yes and no. In a real world application the splash screen would be shown before the component is visible. And therefore there would be nothing to block. But this all it's up to you.

There is a third argument in the shortcut to make this possible: hint(type,text,level). This will override the default level hint to any other. Like block or error. Use it wisely.

What are we learning here?

  • Show an hint in block layer
  • Update text in a hint
  • Regular hints will never get blocked

Furthermore all hints have the same possibilty like the centered message component to update the text. Note: The argument text accepts newlines.

With all that knowledge, let's demonstrate the following: Open a hint of type splash, overriding the level into block, show a progress and then open another (regular) hint to see that it will be shown even the componet is blocked.

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<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>
  <button class="btn btn-xs btn-success" data-role="hint-success">
    <i class="fas fa-check-circle"></i>
  </button>
  <button class="btn btn-xs btn-danger" data-role="hint-error">
    <i class="fas fa-exclamation-circle"></i>
  </button>
  <button class="btn btn-xs btn-info" data-role="hint-info-p">
    <i class="fas fa-info-circle"></i> Perm
  </button>
  <button class="btn btn-xs btn-success" data-role="hint-success-p">
    <i class="fas fa-check-circle"></i> Perm
  </button>
  <button class="btn btn-xs btn-danger" data-role="hint-error-p">
    <i class="fas fa-exclamation-circle"></i> Perm
  </button>
  <button class="btn btn-xs btn-warning" data-role="hint-splash">
    <i class="fas fa-exclamation-circle"></i> Splash
  </button>
  <button class="btn btn-xs btn-warning" data-role="hint-splash-block">
    <i class="fas fa-exclamation-circle"></i> Block
  </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
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
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-block]").on("click", async () => {
      let splash = await $this.hint("splash", "Please", "block");
      for (let x = 0; x <= 100; x += 25) {
        await new Promise((r) => setTimeout(() => r(), 750));
        splash.text = `Please Wait\n${x}% Progress`;
      }
      await new Promise((r) => setTimeout(() => r(), 2000));
      await $this.hint("success", "You are blocked, but I am free!");
      await new Promise((r) => setTimeout(() => r(), 4000));
      splash.destroy();
    });
    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");
    });
  }
}