Skip to content

Hints and Blocking

The buttons we created in the last chapter are also useful to demonstrate some builtin functionality. We will add now five buttons and two placeholders. The new buttons will call the methods block, unblock and hint of the application instance with different arguments:

apps/custom-buttons.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
async function justWait() {
  await new Promise(resolve => setTimeout(resolve, 2000));
}
export default {
  alerts: {
    replace: "[wait1][wait2][wait3]"
  },
  blocks: {
    replace: "[block1][block2]"
  },
  hints: {
    replace: "[hint1][hint2][hint3]"
  },
  wait1: {
    class: "info",
    html: '<i class="fas fa-info-circle mr-1"></i> {0}',
    text: "Just Wait",
    click: justWait
  },
  wait2: {
    class: "info",
    html: '{0} <i class="fas fa-info-circle mx-1"></i> {1}',
    block: false,
    text: ["Not", "Blocking"],
    click: justWait
  },
  wait3: {
    class: "info",
    text: "My Message",
    block: "My own blocking message",
    click: justWait
  },
  block1: {
    class: "info",
    text: "block",
    block: false,
    click: async (app) => {
      app.block("Test Message for 2 sec");
      await justWait();
      app.unblock();
    }
  },
  block2: {
    class: "danger",
    text: "block",
    block: false,
    click: async (app) => {
      app.block("error", "Test Error for 2 sec");
      await justWait();
      app.unblock();
    }
  },
  hint1: {
    class: "success",
    text: "hint",
    click: async (app) => {
      app.hint("success", "Success");
    }
  },
  hint2: {
    class: "info",
    text: "hint",
    click: async (app) => {
      app.hint("info", "Info");
    }
  },
  hint3: {
    class: "danger",
    text: "hint",
    click: async (app) => {
      app.hint("error", "Error");
    }
  }
};

Now let's use them in our application:

apps/testing-buttons.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
import { Application } from "@codecoupler/cc-ui";
import buttons from "./custom-buttons";
export default class extends Application {
  static ui = {
    name: "Testing Buttons",
    iconHtml: '<i class="fas fa-seedling fa-fw"></i>'
  };
  async init() {
    await super.init({
      panel: {
        panelSize: "820 600",
        headerTitle: "My First Title",
        footerToolbar:
          '<i class="far fa-hand-point-right mx-1"></i> [blocks][hints][alerts][close]'
      },
      buttons: buttons
    });
  }
}

Starting the application you can use the buttons to block the application or show hints in different themes.