1 YUI.add('button-group', function (Y, NAME) {

     2 

     3 /**

     4  * A Widget to create groups of buttons

     5  *

     6  * @module button-group

     7  * @since 3.5.0

     8  */

     9 

    10 var CONTENT_BOX = "contentBox",

    11     CLICK_EVENT = "click",

    12     CLASS_NAMES = Y.ButtonCore.CLASS_NAMES;

    13 

    14 /**

    15  * Creates a ButtonGroup

    16  *

    17  * @class ButtonGroup

    18  * @extends Widget

    19  * @param config {Object} Configuration object

    20  * @constructor

    21  */

    22 function ButtonGroup() {

    23     ButtonGroup.superclass.constructor.apply(this, arguments);

    24 }

    25 

    26 /* ButtonGroup extends Widget */

    27 Y.ButtonGroup = Y.extend(ButtonGroup, Y.Widget, {

    28 

    29     /**

    30      * @method renderUI

    31      * @description Creates a visual representation of the widget based on existing parameters.

    32      * @public

    33      */

    34     renderUI: function() {

    35         this.getButtons().plug(Y.Plugin.Button);

    36     },

    37 

    38     /**

    39      * @method bindUI

    40      * @description Hooks up events for the widget

    41      * @public

    42      */

    43     bindUI: function() {

    44         var group = this,

    45             cb = group.get(CONTENT_BOX);

    46 

    47         cb.delegate(CLICK_EVENT, group._handleClick, Y.ButtonGroup.BUTTON_SELECTOR, group);

    48         group.after('disabledChange', group._afterDisabledChange);

    49     },

    50 

    51     _afterDisabledChange: function (e) {

    52         this.getButtons().each(e.newVal

    53             ? Y.ButtonCore.prototype.disable

    54             : Y.ButtonCore.prototype.enable

    55         );

    56     },

    57 

    58     /**

    59      * @method getButtons

    60      * @description Returns all buttons inside this this button group

    61      * @public

    62      */

    63     getButtons: function() {

    64         var cb = this.get(CONTENT_BOX);

    65 

    66         return cb.all(Y.ButtonGroup.BUTTON_SELECTOR);

    67     },

    68 

    69     /**

    70      * @method getSelectedButtons

    71      * @description Returns all Y.Buttons instances that are selected

    72      * @public

    73      */

    74     getSelectedButtons: function() {

    75         var group = this,

    76             selected = [],

    77             buttons = group.getButtons(),

    78             selectedClass = ButtonGroup.CLASS_NAMES.SELECTED;

    79 

    80         buttons.each(function(node){

    81             if (node.hasClass(selectedClass)){

    82                 selected.push(node);

    83             }

    84         });

    85 

    86         return selected;

    87     },

    88 

    89     /**

    90      * @method getSelectedValues

    91      * @description Returns the values of all Y.Button instances that are selected

    92      * @public

    93      */

    94     getSelectedValues: function() {

    95         var selected = this.getSelectedButtons(),

    96             values = [],

    97             value;

    98 

    99         Y.Array.each(selected, function(node){

   100             value = node.getContent();

   101             values.push(value);

   102         });

   103 

   104         return values;

   105     },

   106 

   107     /**

   108      * @method _handleClick

   109      * @description A delegated click handler for when any button is clicked in the content box

   110      * @param e {Object} An event object

   111      * @private

   112      */

   113     _handleClick: function(e){

   114         var group = this,

   115             clickedNode = e.target.ancestor('.' + ButtonGroup.CLASS_NAMES.BUTTON, true),

   116             type = group.get('type'),

   117             selectedClass = ButtonGroup.CLASS_NAMES.SELECTED,

   118             isSelected = clickedNode.hasClass(selectedClass),

   119             buttons;

   120 

   121         // TODO: Anything for 'push' groups?

   122         if (type === 'checkbox') {

   123             clickedNode.toggleClass(selectedClass, !isSelected);

   124             /**

   125              * @event selectionChange

   126              * @description fires when any button in the group changes its checked status

   127              * @param {Event} the event object. It contains an "originEvent" property

   128              * linking to the original DOM event that triggered the selection change

   129              */

   130             group.fire('selectionChange', {originEvent: e});

   131         }

   132         else if (type === 'radio' && !isSelected) {

   133             buttons = group.getButtons(); // Todo: getSelectedButtons()? Need it to return an arraylist then.

   134             buttons.removeClass(selectedClass);

   135             clickedNode.addClass(selectedClass);

   136             group.fire('selectionChange', {originEvent: e});

   137         }

   138     }

   139 

   140 }, {

   141     // Y.ButtonGroup static properties

   142 

   143     /**

   144      * The identity of the widget.

   145      *

   146      * @property NAME

   147      * @type {String}

   148      * @default 'buttongroup'

   149      * @readOnly

   150      * @protected

   151      * @static

   152      */

   153     NAME: 'buttongroup',

   154 

   155     /**

   156      * Static property used to define the default attribute configuration of

   157      * the Widget.

   158      *

   159      * @property ATTRS

   160      * @type {Object}

   161      * @protected

   162      * @static

   163      */

   164     ATTRS: {

   165 

   166         /**

   167          * @attribute type

   168          * @type String

   169          */

   170         type: {

   171             writeOnce: 'initOnly',

   172             value: 'radio'

   173         }

   174     },

   175 

   176     /**

   177      * List of class names to use for ButtonGroups

   178      *

   179      * @property CLASS_NAMES

   180      * @type {Object}

   181      * @static

   182      */

   183     CLASS_NAMES: CLASS_NAMES,

   184 

   185     /**

   186      * Selector used to find buttons inside a ButtonGroup

   187      * @property BUTTON_SELECTOR

   188      * @type {String}

   189      */

   190     BUTTON_SELECTOR: "button, input[type=button], input[type=reset], input[type=submit], input[type=radio], input[type=checkbox]"

   191 });

   192 

   193 

   194 }, '@VERSION@', {"requires": ["button-plugin", "cssbutton", "widget"]});