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.

(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

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);
});