1 YUI.add('button', function (Y, NAME) {

     2 

     3 /**

     4  * A Button Widget

     5  *

     6  * @module button

     7  * @since 3.5.0

     8  */

     9 

    10 var ButtonCore = Y.ButtonCore,

    11     CLASS_NAMES = ButtonCore.CLASS_NAMES,

    12     ARIA_STATES = ButtonCore.ARIA_STATES,

    13     ARIA_ROLES = ButtonCore.ARIA_ROLES;

    14 

    15 /**

    16  * Creates a Button

    17  *

    18  * @class Button

    19  * @extends Widget

    20  * @uses ButtonCore

    21  * @param config {Object} Configuration object

    22  * @constructor

    23  */

    24 function Button() {

    25     Button.superclass.constructor.apply(this, arguments);

    26 }

    27 

    28 /* Button extends Widget */

    29 Y.extend(Button, Y.Widget,  {

    30 

    31     // Y.Button prototype properties

    32 

    33     /**

    34      * Bounding box template that will contain the Button's DOM subtree.

    35      *

    36      * @property BOUNDING_TEMPLATE

    37      * @type {String}

    38      * @default <button/>

    39      */

    40     BOUNDING_TEMPLATE : ButtonCore.prototype.TEMPLATE,

    41 

    42     /**

    43      * Content box template

    44      *

    45      * @property CONTENT_TEMPLATE

    46      * @type {String}

    47      * @default null

    48      */

    49     CONTENT_TEMPLATE : null

    50 

    51 }, {

    52 

    53     // Y.Button static properties

    54 

    55     /**

    56      * The identity of the widget.

    57      *

    58      * @property NAME

    59      * @type String

    60      * @default 'button'

    61      * @readOnly

    62      * @protected

    63      * @static

    64      */

    65     NAME: ButtonCore.NAME,

    66 

    67     /**

    68      * Static property used to define the default attribute configuration of

    69      * the Widget.

    70      *

    71      * @property ATTRS

    72      * @type {Object}

    73      * @protected

    74      * @static

    75      */

    76     ATTRS: ButtonCore.ATTRS,

    77 

    78     /**

    79      * The text of the button's label

    80      *

    81      * @attribute label

    82      * @type String

    83      */

    84 

    85     /**

    86      * The HTML of the button's label

    87      *

    88      * This attribute accepts HTML and inserts it into the DOM **without**

    89      * sanitization.  This attribute should only be used with HTML that has

    90      * either been escaped (using `Y.Escape.html`), or sanitized according to

    91      * the requirements of your application.

    92      *

    93      * If all you need is support for text labels, please use the `label`

    94      * attribute instead.

    95      *

    96      * @attribute labelHTML

    97      * @type HTML

    98      */

    99 

   100     /**

   101      * @property HTML_PARSER

   102      * @type {Object}

   103      * @protected

   104      * @static

   105      */

   106     HTML_PARSER: {

   107         labelHTML: ButtonCore._getHTMLFromNode,

   108         disabled: ButtonCore._getDisabledFromNode

   109     },

   110 

   111     /**

   112      * List of class names used in the Button's DOM

   113      *

   114      * @property CLASS_NAMES

   115      * @type Object

   116      * @static

   117      */

   118     CLASS_NAMES: CLASS_NAMES

   119 });

   120 

   121 Y.mix(Button.prototype, ButtonCore.prototype);

   122 

   123 /**

   124  * Creates a ToggleButton

   125  *

   126  * @class ToggleButton

   127  * @extends Button

   128  * @param config {Object} Configuration object

   129  * @constructor

   130  */

   131 function ToggleButton() {

   132     Button.superclass.constructor.apply(this, arguments);

   133 }

   134 

   135 // TODO: move to ButtonCore subclass to enable toggle plugin, widget, etc.

   136 /* ToggleButton extends Button */

   137 Y.extend(ToggleButton, Button,  {

   138 

   139     /**

   140      *

   141      *

   142      * @property trigger

   143      * @type {String}

   144      * @default

   145      */

   146     trigger: 'click',

   147 

   148     /**

   149      *

   150      *

   151      * @property selectedAttrName

   152      * @type {String}

   153      * @default

   154      */

   155     selectedAttrName: '',

   156 

   157     /**

   158      *

   159      * @method initializer

   160      */

   161     initializer: function (config) {

   162         var button = this,

   163             type = button.get('type'),

   164             selectedAttrName = (type === "checkbox" ? 'checked' : 'pressed'),

   165             selectedState = config[selectedAttrName] || false;

   166 

   167         // Create the checked/pressed attribute

   168         button.addAttr(selectedAttrName, {

   169             value: selectedState

   170         });

   171 

   172         button.selectedAttrName = selectedAttrName;

   173     },

   174 

   175     /**

   176      *

   177      * @method destructor

   178      */

   179     destructor: function () {

   180         delete this.selectedAttrName;

   181     },

   182 

   183     /**

   184      * @method bindUI

   185      * @description Hooks up events for the widget

   186      */

   187     bindUI: function() {

   188          var button = this,

   189              cb = button.get('contentBox');

   190 

   191         ToggleButton.superclass.bindUI.call(button);

   192 

   193         cb.on(button.trigger, button.toggle, button);

   194         button.after(button.selectedAttrName + 'Change', button._afterSelectedChange);

   195     },

   196 

   197     /**

   198      * @method syncUI

   199      * @description Syncs the UI for the widget

   200      */

   201     syncUI: function() {

   202         var button = this,

   203             cb = button.get('contentBox'),

   204             type = button.get('type'),

   205             ROLES = ToggleButton.ARIA_ROLES,

   206             role = (type === 'checkbox' ? ROLES.CHECKBOX : ROLES.TOGGLE),

   207             selectedAttrName = button.selectedAttrName;

   208 

   209         ToggleButton.superclass.syncUI.call(button);

   210 

   211         cb.set('role', role);

   212         button._uiSetSelected(button.get(selectedAttrName));

   213     },

   214 

   215     /**

   216      * @method _afterSelectedChange

   217      * @private

   218      */

   219     _afterSelectedChange: function(e){

   220         this._uiSetSelected(e.newVal);

   221     },

   222 

   223     /**

   224      * @method _uiSetSelected

   225      * @private

   226      */

   227     _uiSetSelected: function(value) {

   228         var button = this,

   229             cb = button.get('contentBox'),

   230             STATES = ToggleButton.ARIA_STATES,

   231             type = button.get('type'),

   232             ariaState = (type === 'checkbox' ? STATES.CHECKED : STATES.PRESSED);

   233 

   234         cb.toggleClass(Button.CLASS_NAMES.SELECTED, value);

   235         cb.set(ariaState, value);

   236     },

   237 

   238     /**

   239      * @method toggle

   240      * @description Toggles the selected/pressed/checked state of a ToggleButton

   241      * @public

   242      */

   243     toggle: function() {

   244         var button = this;

   245         button._set(button.selectedAttrName, !button.get(button.selectedAttrName));

   246     }

   247 

   248 }, {

   249 

   250     /**

   251      * The identity of the widget.

   252      *

   253      * @property NAME

   254      * @type {String}

   255      * @default 'buttongroup'

   256      * @readOnly

   257      * @protected

   258      * @static

   259      */

   260     NAME: 'toggleButton',

   261 

   262     /**

   263      * Static property used to define the default attribute configuration of

   264      * the Widget.

   265      *

   266      * @property ATTRS

   267      * @type {Object}

   268      * @protected

   269      * @static

   270      */

   271     ATTRS: {

   272 

   273        /**

   274         *

   275         *

   276         * @attribute type

   277         * @type String

   278         */

   279         type: {

   280             value: 'toggle',

   281             writeOnce: 'initOnly'

   282         }

   283     },

   284 

   285     /**

   286      * @property HTML_PARSER

   287      * @type {Object}

   288      * @protected

   289      * @static

   290      */

   291     HTML_PARSER: {

   292         checked: function(node) {

   293             return node.hasClass(CLASS_NAMES.SELECTED);

   294         },

   295         pressed: function(node) {

   296             return node.hasClass(CLASS_NAMES.SELECTED);

   297         }

   298     },

   299 

   300     /**

   301      * @property ARIA_STATES

   302      * @type {Object}

   303      * @protected

   304      * @static

   305      */

   306     ARIA_STATES: ARIA_STATES,

   307 

   308     /**

   309      * @property ARIA_ROLES

   310      * @type {Object}

   311      * @protected

   312      * @static

   313      */

   314     ARIA_ROLES: ARIA_ROLES,

   315 

   316     /**

   317      * Array of static constants used to identify the classnames applied to DOM nodes

   318      *

   319      * @property CLASS_NAMES

   320      * @type Object

   321      * @static

   322      */

   323     CLASS_NAMES: CLASS_NAMES

   324 

   325 });

   326 

   327 // Export

   328 Y.Button = Button;

   329 Y.ToggleButton = ToggleButton;

   330 

   331 

   332 }, '@VERSION@', {"requires": ["button-core", "cssbutton", "widget"]});