lib/yuilib/3.13.0/button/button.js

   1 /*
   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/
   6 */
   7
   8 YUI.add('button', function (Y, NAME) {
   9
  10 /**
  11  * A Button Widget
  12  *
  13  * @module button
  14  * @since 3.5.0
  15  */
  16
  17 var ButtonCore = Y.ButtonCore,
  18     CLASS_NAMES = ButtonCore.CLASS_NAMES,
  19     ARIA_STATES = ButtonCore.ARIA_STATES,
  20     ARIA_ROLES = ButtonCore.ARIA_ROLES;
  21
  22 /**
  23  * Creates a Button
  24  *
  25  * @class Button
  26  * @extends Widget
  27  * @uses ButtonCore
  28  * @param config {Object} Configuration object
  29  * @constructor
  30  */
  31 function Button() {
  32     Button.superclass.constructor.apply(this, arguments);
  33 }
  34
  35 /* Button extends Widget */
  36 Y.extend(Button, Y.Widget,  {
  37
  38     // Y.Button prototype properties
  39
  40     /**
  41      * Bounding box template that will contain the Button's DOM subtree.
  42      *
  43      * @property BOUNDING_TEMPLATE
  44      * @type {String}
  45      * @default <button/>
  46      */
  47     BOUNDING_TEMPLATE : ButtonCore.prototype.TEMPLATE,
  48
  49     /**
  50      * Content box template
  51      *
  52      * @property CONTENT_TEMPLATE
  53      * @type {String}
  54      * @default null
  55      */
  56     CONTENT_TEMPLATE : null
  57
  58 }, {
  59
  60     // Y.Button static properties
  61
  62     /**
  63      * The identity of the widget.
  64      *
  65      * @property NAME
  66      * @type String
  67      * @default 'button'
  68      * @readOnly
  69      * @protected
  70      * @static
  71      */
  72     NAME: ButtonCore.NAME,
  73
  74     /**
  75      * Static property used to define the default attribute configuration of
  76      * the Widget.
  77      *
  78      * @property ATTRS
  79      * @type {Object}
  80      * @protected
  81      * @static
  82      */
  83     ATTRS: ButtonCore.ATTRS,
  84
  85     /**
  86      * The text of the button's label
  87      *
  88      * @attribute label
  89      * @type String
  90      */
  91
  92     /**
  93      * The HTML of the button's label
  94      *
  95      * This attribute accepts HTML and inserts it into the DOM **without**
  96      * sanitization.  This attribute should only be used with HTML that has
  97      * either been escaped (using `Y.Escape.html`), or sanitized according to
  98      * the requirements of your application.
  99      *
 100      * If all you need is support for text labels, please use the `label`
 101      * attribute instead.
 102      *
 103      * @attribute labelHTML
 104      * @type HTML
 105      */
 106
 107     /**
 108      * @property HTML_PARSER
 109      * @type {Object}
 110      * @protected
 111      * @static
 112      */
 113     HTML_PARSER: {
 114         labelHTML: ButtonCore._getHTMLFromNode,
 115         disabled: ButtonCore._getDisabledFromNode
 116     },
 117
 118     /**
 119      * List of class names used in the Button's DOM
 120      *
 121      * @property CLASS_NAMES
 122      * @type Object
 123      * @static
 124      */
 125     CLASS_NAMES: CLASS_NAMES
 126 });
 127
 128 Y.mix(Button.prototype, ButtonCore.prototype);
 129
 130 /**
 131  * Creates a ToggleButton
 132  *
 133  * @class ToggleButton
 134  * @extends Button
 135  * @param config {Object} Configuration object
 136  * @constructor
 137  */
 138 function ToggleButton() {
 139     Button.superclass.constructor.apply(this, arguments);
 140 }
 141
 142 // TODO: move to ButtonCore subclass to enable toggle plugin, widget, etc.
 143 /* ToggleButton extends Button */
 144 Y.extend(ToggleButton, Button,  {
 145
 146     /**
 147      *
 148      *
 149      * @property trigger
 150      * @type {String}
 151      * @default
 152      */
 153     trigger: 'click',
 154
 155     /**
 156      *
 157      *
 158      * @property selectedAttrName
 159      * @type {String}
 160      * @default
 161      */
 162     selectedAttrName: '',
 163
 164     /**
 165      *
 166      * @method initializer
 167      */
 168     initializer: function (config) {
 169         var button = this,
 170             type = button.get('type'),
 171             selectedAttrName = (type === "checkbox" ? 'checked' : 'pressed'),
 172             selectedState = config[selectedAttrName] || false;
 173
 174         // Create the checked/pressed attribute
 175         button.addAttr(selectedAttrName, {
 176             value: selectedState
 177         });
 178
 179         button.selectedAttrName = selectedAttrName;
 180     },
 181
 182     /**
 183      *
 184      * @method destructor
 185      */
 186     destructor: function () {
 187         delete this.selectedAttrName;
 188     },
 189
 190     /**
 191      * @method bindUI
 192      * @description Hooks up events for the widget
 193      */
 194     bindUI: function() {
 195          var button = this,
 196              cb = button.get('contentBox');
 197
 198         ToggleButton.superclass.bindUI.call(button);
 199
 200         cb.on(button.trigger, button.toggle, button);
 201         button.after(button.selectedAttrName + 'Change', button._afterSelectedChange);
 202     },
 203
 204     /**
 205      * @method syncUI
 206      * @description Syncs the UI for the widget
 207      */
 208     syncUI: function() {
 209         var button = this,
 210             cb = button.get('contentBox'),
 211             type = button.get('type'),
 212             ROLES = ToggleButton.ARIA_ROLES,
 213             role = (type === 'checkbox' ? ROLES.CHECKBOX : ROLES.TOGGLE),
 214             selectedAttrName = button.selectedAttrName;
 215
 216         ToggleButton.superclass.syncUI.call(button);
 217
 218         cb.set('role', role);
 219         button._uiSetSelected(button.get(selectedAttrName));
 220     },
 221
 222     /**
 223      * @method _afterSelectedChange
 224      * @private
 225      */
 226     _afterSelectedChange: function(e){
 227         this._uiSetSelected(e.newVal);
 228     },
 229
 230     /**
 231      * @method _uiSetSelected
 232      * @private
 233      */
 234     _uiSetSelected: function(value) {
 235         var button = this,
 236             cb = button.get('contentBox'),
 237             STATES = ToggleButton.ARIA_STATES,
 238             type = button.get('type'),
 239             ariaState = (type === 'checkbox' ? STATES.CHECKED : STATES.PRESSED);
 240
 241         cb.toggleClass(Button.CLASS_NAMES.SELECTED, value);
 242         cb.set(ariaState, value);
 243     },
 244
 245     /**
 246      * @method toggle
 247      * @description Toggles the selected/pressed/checked state of a ToggleButton
 248      * @public
 249      */
 250     toggle: function() {
 251         var button = this;
 252         button._set(button.selectedAttrName, !button.get(button.selectedAttrName));
 253     }
 254
 255 }, {
 256
 257     /**
 258      * The identity of the widget.
 259      *
 260      * @property NAME
 261      * @type {String}
 262      * @default 'buttongroup'
 263      * @readOnly
 264      * @protected
 265      * @static
 266      */
 267     NAME: 'toggleButton',
 268
 269     /**
 270      * Static property used to define the default attribute configuration of
 271      * the Widget.
 272      *
 273      * @property ATTRS
 274      * @type {Object}
 275      * @protected
 276      * @static
 277      */
 278     ATTRS: {
 279
 280        /**
 281         *
 282         *
 283         * @attribute type
 284         * @type String
 285         */
 286         type: {
 287             value: 'toggle',
 288             writeOnce: 'initOnly'
 289         }
 290     },
 291
 292     /**
 293      * @property HTML_PARSER
 294      * @type {Object}
 295      * @protected
 296      * @static
 297      */
 298     HTML_PARSER: {
 299         checked: function(node) {
 300             return node.hasClass(CLASS_NAMES.SELECTED);
 301         },
 302         pressed: function(node) {
 303             return node.hasClass(CLASS_NAMES.SELECTED);
 304         }
 305     },
 306
 307     /**
 308      * @property ARIA_STATES
 309      * @type {Object}
 310      * @protected
 311      * @static
 312      */
 313     ARIA_STATES: ARIA_STATES,
 314
 315     /**
 316      * @property ARIA_ROLES
 317      * @type {Object}
 318      * @protected
 319      * @static
 320      */
 321     ARIA_ROLES: ARIA_ROLES,
 322
 323     /**
 324      * Array of static constants used to identify the classnames applied to DOM nodes
 325      *
 326      * @property CLASS_NAMES
 327      * @type Object
 328      * @static
 329      */
 330     CLASS_NAMES: CLASS_NAMES
 331
 332 });
 333
 334 // Export
 335 Y.Button = Button;
 336 Y.ToggleButton = ToggleButton;
 337
 338
 339 }, '3.13.0', {"requires": ["button-core", "cssbutton", "widget"]});