File: button/js/group.js
- /**
- * A Widget to create groups of buttons
- *
- * @module button-group
- * @since 3.5.0
- */
-
- var CONTENT_BOX = "contentBox",
- CLICK_EVENT = "click",
- CLASS_NAMES = Y.ButtonCore.CLASS_NAMES;
-
- /**
- * Creates a ButtonGroup
- *
- * @class ButtonGroup
- * @extends Widget
- * @param config {Object} Configuration object
- * @constructor
- */
- function ButtonGroup() {
- ButtonGroup.superclass.constructor.apply(this, arguments);
- }
-
- /* ButtonGroup extends Widget */
- Y.ButtonGroup = Y.extend(ButtonGroup, Y.Widget, {
-
- /**
- * @method renderUI
- * @description Creates a visual representation of the widget based on existing parameters.
- * @public
- */
- renderUI: function() {
- this.getButtons().plug(Y.Plugin.Button);
- },
-
- /**
- * @method bindUI
- * @description Hooks up events for the widget
- * @public
- */
- bindUI: function() {
- var group = this,
- cb = group.get(CONTENT_BOX);
-
- cb.delegate(CLICK_EVENT, group._handleClick, Y.ButtonGroup.BUTTON_SELECTOR, group);
- group.after('disabledChange', group._afterDisabledChange);
- },
-
- _afterDisabledChange: function (e) {
- this.getButtons().each(e.newVal
- ? Y.ButtonCore.prototype.disable
- : Y.ButtonCore.prototype.enable
- );
- },
-
- /**
- * @method getButtons
- * @description Returns all buttons inside this this button group
- * @public
- */
- getButtons: function() {
- var cb = this.get(CONTENT_BOX);
-
- return cb.all(Y.ButtonGroup.BUTTON_SELECTOR);
- },
-
- /**
- * @method getSelectedButtons
- * @description Returns all Y.Buttons instances that are selected
- * @public
- */
- getSelectedButtons: function() {
- var group = this,
- selected = [],
- buttons = group.getButtons(),
- selectedClass = ButtonGroup.CLASS_NAMES.SELECTED;
-
- buttons.each(function(node){
- if (node.hasClass(selectedClass)){
- selected.push(node);
- }
- });
-
- return selected;
- },
-
- /**
- * @method getSelectedValues
- * @description Returns the values of all Y.Button instances that are selected
- * @public
- */
- getSelectedValues: function() {
- var selected = this.getSelectedButtons(),
- values = [],
- value;
-
- Y.Array.each(selected, function(node){
- value = node.getContent();
- values.push(value);
- });
-
- return values;
- },
-
- /**
- * @method _handleClick
- * @description A delegated click handler for when any button is clicked in the content box
- * @param e {Object} An event object
- * @private
- */
- _handleClick: function(e){
- var group = this,
- clickedNode = e.target.ancestor('.' + ButtonGroup.CLASS_NAMES.BUTTON, true),
- type = group.get('type'),
- selectedClass = ButtonGroup.CLASS_NAMES.SELECTED,
- isSelected = clickedNode.hasClass(selectedClass),
- buttons;
-
- // TODO: Anything for 'push' groups?
- if (type === 'checkbox') {
- clickedNode.toggleClass(selectedClass, !isSelected);
- /**
- * @event selectionChange
- * @description fires when any button in the group changes its checked status
- * @param {Event} the event object. It contains an "originEvent" property
- * linking to the original DOM event that triggered the selection change
- */
- group.fire('selectionChange', {originEvent: e});
- }
- else if (type === 'radio' && !isSelected) {
- buttons = group.getButtons(); // Todo: getSelectedButtons()? Need it to return an arraylist then.
- buttons.removeClass(selectedClass);
- clickedNode.addClass(selectedClass);
- group.fire('selectionChange', {originEvent: e});
- }
- }
-
- }, {
- // Y.ButtonGroup static properties
-
- /**
- * The identity of the widget.
- *
- * @property NAME
- * @type {String}
- * @default 'buttongroup'
- * @readOnly
- * @protected
- * @static
- */
- NAME: 'buttongroup',
-
- /**
- * Static property used to define the default attribute configuration of
- * the Widget.
- *
- * @property ATTRS
- * @type {Object}
- * @protected
- * @static
- */
- ATTRS: {
-
- /**
- * @attribute type
- * @type String
- */
- type: {
- writeOnce: 'initOnly',
- value: 'radio'
- }
- },
-
- /**
- * List of class names to use for ButtonGroups
- *
- * @property CLASS_NAMES
- * @type {Object}
- * @static
- */
- CLASS_NAMES: CLASS_NAMES,
-
- /**
- * Selector used to find buttons inside a ButtonGroup
- * @property BUTTON_SELECTOR
- * @type {String}
- */
- BUTTON_SELECTOR: "button, input[type=button], input[type=reset], input[type=submit], input[type=radio], input[type=checkbox]"
- });
-
-