Module: button-set

A set of UI buttons that interact as one group. The Button Set supports two modes: toggling the buttons between the on and off state, as well as toggling through an arbitrary list of ordered values.

In the on/off mode, each button will be turned to on when clicked. When one button is selected, it turns all other buttons that are in the on state to off.

In the arbitrary toggle mode, each button will cycle through its own toggle values. When one button is selected, it will remove the active toggle value from any other button that currently has one. Those buttons will be reset, and begin the cycle at the first toggle value the next time they are clicked.

Examples

<!-- In this example, the buttons toggle on and off -->

<!--The following HTML includes a couple button set components with the same data-pcc-name
so that they are included in the same set. An element is specified as a button set by setting
the data-pcc-component attribute to "buttonset".-->
<button data-pcc-component="buttonset" 
        data-pcc-name="mousetools" 
        data-pcc-value="SignatureTemplate"
        class="pcc-button">
    <span data-pcc-icon="pcc-icon-signature"></span>
    <label>Signature</label>
</button>
<button data-pcc-component="buttonset" 
        data-pcc-name="mousetools" 
        data-pcc-value="InitialsTemplate"
        class="pcc-button">
    <span data-pcc-icon="pcc-icon-initials"></span>
    <label>Initials</label>
</button>

<!-- In this example, the buttons toggle among arbitrary values -->
<button data-pcc-component="buttonset" 
        data-pcc-name="mousetools" 
        data-pcc-value="SignatureTemplate"
        data-pcc-toggle="on,sticky"
        class="pcc-button">
    <span data-pcc-icon="pcc-icon-signature"></span>
    <label>Signature</label>
</button>

// Require the button set module.
var ButtonSet = require('../elements/button-set.js');
var mySet;

// Pass each button set element to the button set module to initialize each button.
// parent is the element that contains the button set elements.
$(parent).find('[data-pcc-component="buttonset"]').each(function() {
    // ButtonSet will return the entire set of buttons that have been added
    // using the same 'data-pcc-name' value
    mySet = ButtonSet(this);
});

mySet.on('change', function(ev, data) {
    // data about the buttonset
    console.log(data);
});

(require("button-set"))(el) → {HTMLElement}

Parses and initializes a button set.

Parameters:

Name	Type	Description
`el`	HTMLElement	The parent element in which to parse for the button set component.

Returns:

The parsed button set element.

Type: HTMLElement

Members

(static) pccElements :Object

The button elements in the button set.

Type:

Object

off :module:event-store~off

Removes an event handler from the button set.

Type:

module:event-store~off

on :module:event-store~on

Registers an event handler on the button set.

Type:

module:event-store~on

Methods

destroy()

Destroys the button set component.

value(val) → {Object}

Gets or sets the value of the button set. The values are specified in the HTML for each button using the data-pcc-value attribute.

Parameters:

Name	Type	Description
`val`	string	The value of the button to make active.

Returns:

The button set element if a value is passed. Otherwise, the current value is returned.

Type: Object