[Summary view] [Print] [Text view]

   1  /*
   2  YUI 3.17.2 (build 9c3c78e)
   3  Copyright 2014 Yahoo! Inc. All rights reserved.
   4  Licensed under the BSD License.
   5  http://yuilibrary.com/license/
   6  */
   7  
   8  YUI.add('button-group', function (Y, NAME) {
   9  
  10  /**
  11   * A Widget to create groups of buttons
  12   *
  13   * @module button-group
  14   * @since 3.5.0
  15   */
  16  
  17  var CONTENT_BOX = "contentBox",
  18      CLICK_EVENT = "click",
  19      CLASS_NAMES = Y.ButtonCore.CLASS_NAMES;
  20  
  21  /**
  22   * Creates a ButtonGroup
  23   *
  24   * @class ButtonGroup
  25   * @extends Widget
  26   * @param config {Object} Configuration object
  27   * @constructor
  28   */
  29  function ButtonGroup() {
  30      ButtonGroup.superclass.constructor.apply(this, arguments);
  31  }
  32  
  33  /* ButtonGroup extends Widget */
  34  Y.ButtonGroup = Y.extend(ButtonGroup, Y.Widget, {
  35  
  36      /**
  37       * @method renderUI
  38       * @description Creates a visual representation of the widget based on existing parameters.
  39       * @public
  40       */
  41      renderUI: function() {
  42          this.getButtons().plug(Y.Plugin.Button);
  43      },
  44  
  45      /**
  46       * @method bindUI
  47       * @description Hooks up events for the widget
  48       * @public
  49       */
  50      bindUI: function() {
  51          var group = this,
  52              cb = group.get(CONTENT_BOX);
  53  
  54          cb.delegate(CLICK_EVENT, group._handleClick, Y.ButtonGroup.BUTTON_SELECTOR, group);
  55          group.after('disabledChange', group._afterDisabledChange);
  56      },
  57  
  58      _afterDisabledChange: function (e) {
  59          this.getButtons().each(e.newVal
  60              ? Y.ButtonCore.prototype.disable
  61              : Y.ButtonCore.prototype.enable
  62          );
  63      },
  64  
  65      /**
  66       * @method getButtons
  67       * @description Returns all buttons inside this this button group
  68       * @public
  69       */
  70      getButtons: function() {
  71          var cb = this.get(CONTENT_BOX);
  72  
  73          return cb.all(Y.ButtonGroup.BUTTON_SELECTOR);
  74      },
  75  
  76      /**
  77       * @method getSelectedButtons
  78       * @description Returns all Y.Buttons instances that are selected
  79       * @public
  80       */
  81      getSelectedButtons: function() {
  82          var group = this,
  83              selected = [],
  84              buttons = group.getButtons(),
  85              selectedClass = ButtonGroup.CLASS_NAMES.SELECTED;
  86  
  87          buttons.each(function(node){
  88              if (node.hasClass(selectedClass)){
  89                  selected.push(node);
  90              }
  91          });
  92  
  93          return selected;
  94      },
  95  
  96      /**
  97       * @method getSelectedValues
  98       * @description Returns the values of all Y.Button instances that are selected
  99       * @public
 100       */
 101      getSelectedValues: function() {
 102          var selected = this.getSelectedButtons(),
 103              values = [],
 104              value;
 105  
 106          Y.Array.each(selected, function(node){
 107              value = node.getContent();
 108              values.push(value);
 109          });
 110  
 111          return values;
 112      },
 113  
 114      /**
 115       * @method _handleClick
 116       * @description A delegated click handler for when any button is clicked in the content box
 117       * @param e {Object} An event object
 118       * @private
 119       */
 120      _handleClick: function(e){
 121          var group = this,
 122              clickedNode = e.target.ancestor('.' + ButtonGroup.CLASS_NAMES.BUTTON, true),
 123              type = group.get('type'),
 124              selectedClass = ButtonGroup.CLASS_NAMES.SELECTED,
 125              isSelected = clickedNode.hasClass(selectedClass),
 126              buttons;
 127  
 128          // TODO: Anything for 'push' groups?
 129          if (type === 'checkbox') {
 130              clickedNode.toggleClass(selectedClass, !isSelected);
 131              /**
 132               * @event selectionChange
 133               * @description fires when any button in the group changes its checked status
 134               * @param {Event} the event object. It contains an "originEvent" property
 135               * linking to the original DOM event that triggered the selection change
 136               */
 137              group.fire('selectionChange', {originEvent: e});
 138          }
 139          else if (type === 'radio' && !isSelected) {
 140              buttons = group.getButtons(); // Todo: getSelectedButtons()? Need it to return an arraylist then.
 141              buttons.removeClass(selectedClass);
 142              clickedNode.addClass(selectedClass);
 143              group.fire('selectionChange', {originEvent: e});
 144          }
 145      }
 146  
 147  }, {
 148      // Y.ButtonGroup static properties
 149  
 150      /**
 151       * The identity of the widget.
 152       *
 153       * @property NAME
 154       * @type {String}
 155       * @default 'buttongroup'
 156       * @readOnly
 157       * @protected
 158       * @static
 159       */
 160      NAME: 'buttongroup',
 161  
 162      /**
 163       * Static property used to define the default attribute configuration of
 164       * the Widget.
 165       *
 166       * @property ATTRS
 167       * @type {Object}
 168       * @protected
 169       * @static
 170       */
 171      ATTRS: {
 172  
 173          /**
 174           * @attribute type
 175           * @type String
 176           */
 177          type: {
 178              writeOnce: 'initOnly',
 179              value: 'radio'
 180          }
 181      },
 182  
 183      /**
 184       * List of class names to use for ButtonGroups
 185       *
 186       * @property CLASS_NAMES
 187       * @type {Object}
 188       * @static
 189       */
 190      CLASS_NAMES: CLASS_NAMES,
 191  
 192      /**
 193       * Selector used to find buttons inside a ButtonGroup
 194       * @property BUTTON_SELECTOR
 195       * @type {String}
 196       */
 197      BUTTON_SELECTOR: "button, input[type=button], input[type=reset], input[type=submit], input[type=radio], input[type=checkbox]"
 198  });
 199  
 200  
 201  }, '3.17.2', {"requires": ["button-plugin", "cssbutton", "widget"]});