2 YUI 3.13.0 (build 508226d)
3 Copyright 2013 Yahoo! Inc. All rights reserved.
4 Licensed under the BSD License.
5 http://yuilibrary.com/license/
8 YUI.add('button-core', function (Y, NAME) {
11 * Provides an interface for working with button-like DOM nodes
16 var getClassName = Y.ClassNameManager.getClassName,
17 AttributeCore = Y.AttributeCore;
24 * @param config {Object} Configuration object
27 function ButtonCore(config) {
28 this.initializer(config);
31 ButtonCore.prototype = {
39 TEMPLATE: '<button/>',
43 * @property constructor
48 constructor: ButtonCore,
52 * @description Internal init() handler.
53 * @param config {Object} Config object.
56 initializer: function(config) {
57 this._initNode(config);
58 this._initAttributes(config);
59 this._renderUI(config);
64 * @description Node initializer
65 * @param config {Object} Config object.
68 _initNode: function(config) {
70 this._host = Y.one(config.host);
72 this._host = Y.Node.create(this.TEMPLATE);
77 * @method _initAttributes
78 * @description Attribute initializer
79 * @param config {Object} Config object.
82 _initAttributes: function(config) {
83 AttributeCore.call(this, ButtonCore.ATTRS, config);
88 * @description Renders any UI/DOM elements for Button instances
89 * @param config {Object} Config object.
92 _renderUI: function() {
93 var node = this.getNode(),
94 nodeName = node.get('nodeName').toLowerCase();
96 // Set some default node attributes
97 node.addClass(ButtonCore.CLASS_NAMES.BUTTON);
99 if (nodeName !== 'button' && nodeName !== 'input') {
100 node.set('role', 'button');
106 * @description Sets the button's `disabled` DOM attribute to `false`
110 this.set('disabled', false);
115 * @description Sets the button's `disabled` DOM attribute to `true`
118 disable: function() {
119 this.set('disabled', true);
124 * @description Gets the button's host node
125 * @return {Node} The host node instance
128 getNode: function() {
130 // If this._host doesn't exist, that means this._initNode
131 // was never executed, meaning this is likely a Widget and
132 // the host node should point to the boundingBox.
133 this._host = this.get('boundingBox');
141 * @description Getter for a button's `label` ATTR
142 * @return {String} The text label of the button
145 _getLabel: function () {
146 var node = this.getNode(),
147 label = ButtonCore._getTextLabelFromNode(node);
153 * @method _getLabelHTML
154 * @description Getter for a button's `labelHTML` ATTR
155 * @return {HTML} The HTML label of the button
158 _getLabelHTML: function () {
159 var node = this.getNode(),
160 labelHTML = ButtonCore._getHTMLFromNode(node);
167 * @description Setter for a button's `label` ATTR
168 * @param value (String) The value to set for `label`
169 * @param name (String) The name of this ATTR (`label`)
170 * @param opts (Object) Additional options
171 * @param opts.src (String) A string identifying the callee.
172 * `internal` will not sync this value with the `labelHTML` ATTR
173 * @return {String} The text label for the given node
176 _setLabel: function (value, name, opts) {
177 var label = Y.Escape.html(value);
179 if (!opts || opts.src !== 'internal') {
180 this.set('labelHTML', label, {src: 'internal'});
187 * @method _setLabelHTML
188 * @description Setter for a button's `labelHTML` ATTR
189 * @param value (HTML) The value to set for `labelHTML`
190 * @param name (String) The name of this ATTR (`labelHTML`)
191 * @param opts (Object) Additional options
192 * @param opts.src (String) A string identifying the callee.
193 * `internal` will not sync this value with the `label` ATTR
194 * @return {HTML} The HTML label for the given node
197 _setLabelHTML: function (value, name, opts) {
198 var node = this.getNode(),
199 labelNode = ButtonCore._getLabelNodeFromParent(node),
200 nodeName = node.get('nodeName').toLowerCase();
202 if (nodeName === 'input') {
203 labelNode.set('value', value);
206 labelNode.setHTML(value);
209 if (!opts || opts.src !== 'internal') {
210 this.set('label', value, {src: 'internal'});
217 * @method _setDisabled
218 * @description Setter for the `disabled` ATTR
219 * @param value {boolean}
222 _setDisabled: function(value) {
223 var node = this.getNode();
225 node.getDOMNode().disabled = value; // avoid rerunning setter when this === node
226 node.toggleClass(ButtonCore.CLASS_NAMES.DISABLED, value);
232 // ButtonCore inherits from AttributeCore
233 Y.mix(ButtonCore.prototype, AttributeCore.prototype);
236 * Attribute configuration.
246 * The text of the button's label
258 * The HTML of the button's label
260 * This attribute accepts HTML and inserts it into the DOM **without**
261 * sanitization. This attribute should only be used with HTML that has
262 * either been escaped (using `Y.Escape.html`), or sanitized according to
263 * the requirements of your application.
265 * If all you need is support for text labels, please use the `label`
272 setter: '_setLabelHTML',
273 getter: '_getLabelHTML',
278 * The button's enabled/disabled state
285 setter: '_setDisabled',
291 * Name of this component.
297 ButtonCore.NAME = "button";
300 * Array of static constants used to identify the classnames applied to DOM nodes
302 * @property CLASS_NAMES
307 ButtonCore.CLASS_NAMES = {
308 BUTTON : getClassName('button'),
309 DISABLED: getClassName('button', 'disabled'),
310 SELECTED: getClassName('button', 'selected'),
311 LABEL : getClassName('button', 'label')
315 * Array of static constants used to for applying ARIA states
317 * @property ARIA_STATES
322 ButtonCore.ARIA_STATES = {
323 PRESSED : 'aria-pressed',
324 CHECKED : 'aria-checked'
328 * Array of static constants used to for applying ARIA roles
330 * @property ARIA_ROLES
335 ButtonCore.ARIA_ROLES = {
337 CHECKBOX: 'checkbox',
342 * Finds the label node within a button
344 * @method _getLabelNodeFromParent
345 * @param node {Node} The parent node
346 * @return {Node} The label node
350 ButtonCore._getLabelNodeFromParent = function (node) {
351 var labelNode = (node.one('.' + ButtonCore.CLASS_NAMES.LABEL) || node);
357 * Gets a text label from a node
359 * @method _getTextLabelFromNode
360 * @param node {Node} The parent node
361 * @return {String} The text label for a given node
365 ButtonCore._getTextLabelFromNode = function (node) {
366 var labelNode = ButtonCore._getLabelNodeFromParent(node),
367 nodeName = labelNode.get('nodeName').toLowerCase(),
368 label = labelNode.get(nodeName === 'input' ? 'value' : 'text');
374 * A utility method that gets an HTML label from a given node
376 * @method _getHTMLFromNode
377 * @param node {Node} The parent node
378 * @return {HTML} The HTML label for a given node
382 ButtonCore._getHTMLFromNode = function (node) {
383 var labelNode = ButtonCore._getLabelNodeFromParent(node),
384 label = labelNode.getHTML();
390 * Gets the disabled attribute from a node
392 * @method _getDisabledFromNode
393 * @param node {Node} The parent node
394 * @return {boolean} The disabled state for a given node
398 ButtonCore._getDisabledFromNode = function (node) {
399 return node.get('disabled');
403 Y.ButtonCore = ButtonCore;
406 }, '3.13.0', {"requires": ["attribute-core", "classnamemanager", "node-base", "escape"]});