Skip to content

Loading Components: Modal Applications

Now let's have a look at the stage level block. This level have always a semi-transparent background and will block any levels below as soon a component was loaded into it. This is perfect for modal applications.

In addition to the level block we will use the stage root. This ensures that always the entire component will be blocked.

What are we learning here?

  • A component can be loaded with this.load(ComponentStart)
  • How to load an Application component as modal

Let's add one more 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
<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>
</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
import { Box, MockApplication } 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-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");
    });
  }
}

And now you have loaded an application into the root stage in it's blocking layer. You will not get access to the widget below until you close the application component.