API Docs for: 3.18.1
Show:

File: button/js/group.js

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