Using Modals

The launcher uses Modals to display simple text and get a yes/no answer from the user.

Launching a Modal is done from the main process. Every single Modal available in the launcher is contained in the src/fsolauncher/library/modal.js class.

To add a new modal, you need to add a new method to the src/fsolauncher/library/modal.js class.

/**
 * Container class for all the Modal windows.
 *
 * @class Modal
 */
class Modal {
  /**
   * Modal dialog to ask for a response from the user.
   */
  static showMyInteractiveModal() {
    Modal.IPC.sendModal(
      'The Modal title',
      'The Modal body',
      'Affirmative answer', // or global.locale.MODAL_OK / global.locale.MODAL_START
      'Negative answer', // or global.locale.MODAL_CANCEL
      'MODAL_RESPONSE_ID'
    );
  }

  /**
   * Modal dialog to only inform the user.
   */
  static showMyInformativeModal() {
    Modal.IPC.sendModal(
      'The Modal title',
      'The Modal body',
      'Close' // or global.locale.MODAL_OK
    );
  }

  // ... rest of modals
}

In the first method, we’re asking the user a question and receiving a response. The response will be delivered back to the main process using the IPC id specified in the 5th argument (in the example it’s "MODAL_RESPONSE_ID").

To receive the IPC event, this is done in src/fsolauncher/event-handlers.js. You should define the event in defineEvents and create a handler method:

/**
 * Handles all events from the client.
 *
 * @class EventHandlers
 */
class EventHandlers {
  /**
   * Defines all the currently supported client events.
   */
  defineEvents() {
    const onModalResponseId = new RendererEvent( 'MODAL_RESPONSE_ID' );

    onModalResponseId
      .onFire( this.onModalResponseId.bind( this ) );
  }
  /**
   * Fires when the MODAL_RESPONSE_ID modal answer is received.
   *
   * @param {object} e The IPC event object.
   * @param {boolean} yes The user clicked the affirmative option in the dialog.
   */
  onModalResponseId( e, yes ) {
    if ( yes ) {
      // do something.
    }
  }