Dialogs

Displaying native dialogs is awesome, but the syntax for the core Cordova dialog plugins sucks.

We wrapped the core dialogs and promisified them. Nothing more, just the goods.

Dialogs are blocking

Note that dialogs will block JavaScript execution on the page underneath while they are displayed.

Alert

Alerts are the simplest dialog: just a title, an optional message and a button to dismiss the dialog.

API Reference: supersonic.ui.dialog.alert()

Shows a native alert dialog.

Example usage

var options = {
  message: "A longer message with \n\n\n\nmultiple lines.",
  buttonLabel: "Close"
};

supersonic.ui.dialog.alert("Custom title!", options).then(function() {
  supersonic.logger.log("Alert closed.");
});
options =
  message: "A longer message with \n\n\n\nmultiple lines."
  buttonLabel: "Close"

supersonic.ui.dialog.alert("Custom title!", options).then ->
  supersonic.logger.log "Alert closed."

Parameters

supersonic.ui.dialog.alert : (
  title?: String,
  options?: {
    message?: String,
    buttonName?: String
  }
) => Promise
Name Type Default Details
title String "Alert"

Alert dialog title text.

options Object {}

An optional options object.

message String ""

Optional message text shown under the title.

buttonLabel String "OK"

Custom button text for the alert dialog.

Returns

A Promise, resolved when the the button in the alert dialog is tapped.

Also supports callbacks.

Confirm

Confirm is one step more complex than alert: it allows you to specify multiple buttons and determine which one was tapped.

API Reference: supersonic.ui.dialog.confirm()

Shows a native confirm dialog.

Example usage

var options = {
  message: "Please reply honestly, now.",
  buttonLabels: ["Yes", "No"]
};

supersonic.ui.dialog.confirm("Are you awesome?", options).then(function(index) {
  if (index == 0) {
    supersonic.logger.log("User is awesome!");
  } else {
    supersonic.logger.log("User wasn't awesome. :(");
  }
});
options =
  message: "Please reply honestly, now."
  buttonLabels: ["Yes", "No"]

supersonic.ui.dialog.confirm("Are you awesome?", options).then (index) ->
  if result.index is 0
    supersonic.logger.log "User is awesome!"
  else
    supersonic.logger.log "User wasn't awesome. :("

Parameters

supersonic.ui.dialog.confirm : (
  title?: String,
  options?: {
    message?: String,
    buttonLabels?: Array<String>
  }
) => Promise buttonIndex: Integer
Name Type Default Details
title String "Confirm"

Title text for the confirm dialog.

options Object {}

Optional options object.

message String ""

Additional message

buttonLabels Array<String> ["OK","Cancel"]

Array of strings specifying button labels.

Returns

Returns a Promise. Once the confirm dialog is dismissed (by tapping on one of the buttons), the promise resolves with the index of the button tapped.

Name Type Details
buttonIndex Integer

Index of the button tapped by the user.

Also supports callbacks.

Prompt

In addition to multiple buttons, prompts allow the user to also input text.

API Reference: supersonic.ui.dialog.prompt()

Displays a native prompt dialog.

Example usage

var options = {
  title: "Please type some text and click on the desired color",
  buttonLabels: ["Blue", "Red", "Yellow"],
  defaultText: "Type here"
};

supersonic.ui.dialog.prompt("Colorize text", options).then(function(result) {
  supersonic.logger.log("User clicked button number " + result.buttonIndex + " with text " + result.input);
});
options =
  title: "Please type some text and click on the desired color"
  buttonLabels: ["Blue", "Red", "Yellow"]
  defaultText: "Type here"

supersonic.ui.dialog.prompt("Colorize text", options).then (result) ->
  supersonic.logger.log "User clicked button number #{result.buttonIndex} with text #{result.input}"

Parameters

supersonic.ui.dialog.prompt : (
  title?: String,
  options?: {
    message?: String,
    buttonLabels?: Array<String>,
    defaultText?: String
  }
) => Promise { buttonIndex: Integer, input: String }
Name Type Default Details
title String "Prompt"

Title text for the prompt dialog.

options Object {}

Optional options object.

message String ""

Additional message shown under the title.

buttonLables Array<String> ["OK","Cancel"]

Array of strings specifying button labels.

defaultText String ""

Default value for the prompt input textbox.

Returns

Returns a Promise. Once the prompt dialog is dismissed (by tapping on one of the buttons), the promise is resolved with an object that has the following properties.

Name Type Details
result Object

Result object.

buttonIndex Integer

Index of the button tapped by the user.

input String

String inputted by user.

Also supports callbacks.