Choice Bubble - fapnip/openeos GitHub Wiki

Create and display a list of options for selection

Example:

// Create and display new Choice instance
var someChoices = new Choice({
  options: [
    {
      label: "Page 1",
      onSelect: function () {
        pages.goto('page-1') 
      },
    },
    {
      label: "The Best Button",
      keep: true, // Don't close choices after click
      onSelect: function () {
        // Keep changing button name
        this.label(this.label().match(/^The/) ? "A different name" : "The Best Button")
      },
    },
    {
      label: "Turn me off",
      keep: true, // Don't close choices after click
      onSelect: function () {
        // Hide this button
        this.visible(false)
      },
    },
    {
      label: "Turn me on",
      visible: false, // Hide, for now
      color: '#330022',
      onSelect: function () {
        pages.goto('hidden-page')
      },
    },
  ],
})
// Show "Turn me on" button (index #3) after 2 seconds
setTimeout(function(){someChoices.get(3).visible(true)}, 2000)

Choice

Constructor Options

options

Required. An array of Option objects

onComplete

Optional callback function. Called after an option that does not have its 'keep' property set has been selected, or choice has been cancelled by a page change or other operation.

A single argument, the Option object that triggered the complete, if any, is passed.

onContinue

Optional callback function. Called if choice has been cancelled by a page change or other operation.

Instance Methods

get(index)

Return an Option instance for the given index.

Throws an exception if index is out of range.

active([boolean])

Get or set if choice is active

cancel()

Will cancel the choice, just like if the page changed.

Option

Constructor Options

label

Required String. HTML (xss filtered) to display in the option.

onSelect

Required Function. Called when button is clicked.

visible

Optional Boolean. If not supplied, will default to true.

keep

Optional Boolean. Will default to false.

color

Optional String. HTML background color of option.

Instance Methods

label([string])

Get or set the option's label

visible([boolean])

Get or set if the option is visible

keep([boolean])

Get or set if the option should complete the choice action or not

color([string])

Get or set the option's color

index()

Return the option's index

parent()

Return the Choice instance for this option