Buttons

Now let us add a buttonbar. The library jsPanel allow us to define a property footerToolbar in which you can define HTML. In addition to this in CodeCoupler you can insert shortcuts for buttons like [close]:

apps/testing-buttons.js

import { Application } from "@codecoupler/cc-ui";
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> [close]'
      }
    });
  }
}

You can even define your own button shortcuts in the configuration property buttons. Because the buttons property will get very long in this walkthrough we will outsource the content into an own file. We define a button that just do nothing for 2 seconds:

apps/custom-buttons.js

async function justWait() {
  await new Promise(resolve => setTimeout(resolve, 2000));
}
export default {
  wait1: {
    class: "info",
    html: '<i class="fas fa-info-circle mr-1"></i> {0}',
    text: "Just Wait",
    click: justWait
  }
};

Now import this object into the property buttons and use the button with the shortcut [wait1]:

apps/testing-buttons.js

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> [wait1][close]'
      },
      buttons: buttons
    });
  }
}

As you can see the button assumes always that it is calling an async function and the application will be blocked until the promise is resolved. You can modify this message with the button property block. To disable blocking you can set block to false.

The property html of each button definition will be merged with text like in printf functions. If you have more than one text variable you can use an array in text. You can also omit html completely.

Here an example with all combinations:

apps/custom-buttons.js

async function justWait() {
  await new Promise(resolve => setTimeout(resolve, 2000));
}
export default {
  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
  }
};

And how to use them in the application:

apps/testing-buttons.js

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> [wait1][wait2][wait3][close]'
      },
      buttons: buttons
    });
  }
}

Last but not least you can combine buttons in one placeholder with the button configuration property replace:

apps/custom-buttons.js

async function justWait() {
  await new Promise(resolve => setTimeout(resolve, 2000));
}
export default {
  alerts: {
    replace: "[wait1][wait2][wait3]"
  },
  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
  }
};

And how to use the new placeholder in the application:

apps/testing-buttons.js

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> [alerts][close]'
      },
      buttons: buttons
    });
  }
}