API Docs for: 3.8.0
Show:

File: button/js/button.js

  1. /**
  2. * A Button Widget
  3. *
  4. * @module button
  5. * @since 3.5.0
  6. */

  7. var CLASS_NAMES = Y.ButtonCore.CLASS_NAMES,
  8.     ARIA_STATES = Y.ButtonCore.ARIA_STATES,
  9.     ARIA_ROLES  = Y.ButtonCore.ARIA_ROLES;

  10. /**
  11. * Creates a Button
  12. *
  13. * @class Button
  14. * @extends Widget
  15. * @param config {Object} Configuration object
  16. * @constructor
  17. */
  18. function Button(config) {
  19.     Button.superclass.constructor.apply(this, arguments);
  20. }

  21. /* Button extends Widget */
  22. Y.extend(Button, Y.Widget,  {

  23.     BOUNDING_TEMPLATE: Y.ButtonCore.prototype.TEMPLATE,

  24.     CONTENT_TEMPLATE: null,

  25.     /**
  26.     * @method initializer
  27.     * @description Internal init() handler.
  28.     * @param config {Object} Config object.
  29.     * @private
  30.     */
  31.     initializer: function(config) {
  32.         this._host = this.get('boundingBox');
  33.     },

  34.     /**
  35.      * bindUI implementation
  36.      *
  37.      * @description Hooks up events for the widget
  38.      * @method bindUI
  39.      */
  40.     bindUI: function() {
  41.         var button = this;
  42.         button.after('labelChange', button._afterLabelChange);
  43.         button.after('disabledChange', button._afterDisabledChange);
  44.     },

  45.     /**
  46.      * @method syncUI
  47.      * @description Updates button attributes
  48.      */
  49.     syncUI: function() {
  50.         var button = this;
  51.         button._uiSetLabel(button.get('label'));
  52.         button._uiSetDisabled(button.get('disabled'));
  53.     },

  54.     /**
  55.     * @method _afterLabelChange
  56.     * @private
  57.     */
  58.     _afterLabelChange: function(e) {
  59.         this._uiSetLabel(e.newVal);
  60.     },

  61.     /**
  62.     * @method _afterDisabledChange
  63.     * @private
  64.     */
  65.     _afterDisabledChange: function(e) {
  66.         this._uiSetDisabled(e.newVal);
  67.     }

  68. }, {
  69.     // Y.Button static properties

  70.     /**
  71.      * The identity of the widget.
  72.      *
  73.      * @property NAME
  74.      * @type String
  75.      * @default 'button'
  76.      * @readOnly
  77.      * @protected
  78.      * @static
  79.      */
  80.     NAME: 'button',

  81.     /**
  82.     * Static property used to define the default attribute configuration of
  83.     * the Widget.
  84.     *
  85.     * @property ATTRS
  86.     * @type {Object}
  87.     * @protected
  88.     * @static
  89.     */
  90.     ATTRS: {
  91.         label: {
  92.             value: Y.ButtonCore.ATTRS.label.value
  93.         },

  94.         disabled: {
  95.             value: false
  96.         }
  97.     },

  98.     /**
  99.     * @property HTML_PARSER
  100.     * @type {Object}
  101.     * @protected
  102.     * @static
  103.     */
  104.     HTML_PARSER: {
  105.         label: function(node) {
  106.             this._host = node; // TODO: remove
  107.             return this._getLabel();
  108.         },

  109.         disabled: function(node) {
  110.             return node.getDOMNode().disabled;
  111.         }
  112.     },

  113.     /**
  114.      * List of class names used in the ButtonGroup's DOM
  115.      *
  116.      * @property CLASS_NAMES
  117.      * @type Object
  118.      * @static
  119.      */
  120.     CLASS_NAMES: CLASS_NAMES
  121. });

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

  123. /**
  124. * Creates a ToggleButton
  125. *
  126. * @class ToggleButton
  127. * @extends Button
  128. * @param config {Object} Configuration object
  129. * @constructor
  130. */
  131. function ToggleButton(config) {
  132.     Button.superclass.constructor.apply(this, arguments);
  133. }

  134. // TODO: move to ButtonCore subclass to enable toggle plugin, widget, etc.
  135. /* ToggleButton extends Button */
  136. Y.extend(ToggleButton, Button,  {
  137.    
  138.     trigger: 'click',
  139.     selectedAttrName: '',
  140.    
  141.     initializer: function (config) {
  142.         var button = this,
  143.             type = button.get('type'),
  144.             selectedAttrName = (type === "checkbox" ? 'checked' : 'pressed'),
  145.             selectedState = config[selectedAttrName] || false;
  146.        
  147.         // Create the checked/pressed attribute
  148.         button.addAttr(selectedAttrName, {
  149.             value: selectedState
  150.         });
  151.        
  152.         button.selectedAttrName = selectedAttrName;
  153.     },
  154.    
  155.     destructor: function () {
  156.         delete this.selectedAttrName;
  157.     },
  158.    
  159.     /**
  160.      * @method bindUI
  161.      * @description Hooks up events for the widget
  162.      */
  163.     bindUI: function() {
  164.          var button = this,
  165.              cb = button.get('contentBox');
  166.        
  167.         ToggleButton.superclass.bindUI.call(button);
  168.        
  169.         cb.on(button.trigger, button.toggle, button);
  170.         button.after(button.selectedAttrName + 'Change', button._afterSelectedChange);
  171.     },

  172.     /**
  173.      * @method syncUI
  174.      * @description Syncs the UI for the widget
  175.      */
  176.     syncUI: function() {
  177.         var button = this,
  178.             cb = button.get('contentBox'),
  179.             type = button.get('type'),
  180.             ROLES = ToggleButton.ARIA_ROLES,
  181.             role = (type === 'checkbox' ? ROLES.CHECKBOX : ROLES.TOGGLE),
  182.             selectedAttrName = button.selectedAttrName;

  183.         ToggleButton.superclass.syncUI.call(button);
  184.        
  185.         cb.set('role', role);
  186.         button._uiSetSelected(button.get(selectedAttrName));
  187.     },
  188.    
  189.     _afterSelectedChange: function(e){
  190.         this._uiSetSelected(e.newVal);
  191.     },
  192.    
  193.     /**
  194.     * @method _uiSetSelected
  195.     * @private
  196.     */
  197.     _uiSetSelected: function(value) {
  198.         var button = this,
  199.             cb = button.get('contentBox'),
  200.             STATES = ToggleButton.ARIA_STATES,
  201.             type = button.get('type'),
  202.             ariaState = (type === 'checkbox' ? STATES.CHECKED : STATES.PRESSED);
  203.        
  204.         cb.toggleClass(Button.CLASS_NAMES.SELECTED, value);
  205.         cb.set(ariaState, value);
  206.     },
  207.    
  208.     /**
  209.     * @method toggle
  210.     * @description Toggles the selected/pressed/checked state of a ToggleButton
  211.     * @public
  212.     */
  213.     toggle: function() {
  214.         var button = this;
  215.         button._set(button.selectedAttrName, !button.get(button.selectedAttrName));
  216.     }

  217. }, {
  218.    
  219.     /**
  220.     * The identity of the widget.
  221.     *
  222.     * @property NAME
  223.     * @type {String}
  224.     * @default 'buttongroup'
  225.     * @readOnly
  226.     * @protected
  227.     * @static
  228.     */
  229.     NAME: 'toggleButton',
  230.    
  231.     /**
  232.     * Static property used to define the default attribute configuration of
  233.     * the Widget.
  234.     *
  235.     * @property ATTRS
  236.     * @type {Object}
  237.     * @protected
  238.     * @static
  239.     */
  240.     ATTRS: {
  241.         type: {
  242.             value: 'toggle',
  243.             writeOnce: 'initOnly'
  244.         }
  245.     },
  246.    
  247.     /**
  248.     * @property HTML_PARSER
  249.     * @type {Object}
  250.     * @protected
  251.     * @static
  252.     */
  253.     HTML_PARSER: {
  254.         checked: function(node) {
  255.             return node.hasClass(CLASS_NAMES.SELECTED);
  256.         },
  257.         pressed: function(node) {
  258.             return node.hasClass(CLASS_NAMES.SELECTED);
  259.         }
  260.     },
  261.    
  262.     /**
  263.     * @property ARIA_STATES
  264.     * @type {Object}
  265.     * @protected
  266.     * @static
  267.     */
  268.     ARIA_STATES: ARIA_STATES,

  269.     /**
  270.     * @property ARIA_ROLES
  271.     * @type {Object}
  272.     * @protected
  273.     * @static
  274.     */
  275.     ARIA_ROLES: ARIA_ROLES,

  276.     /**
  277.      * Array of static constants used to identify the classnames applied to DOM nodes
  278.      *
  279.      * @property CLASS_NAMES
  280.      * @type Object
  281.      * @static
  282.      */
  283.     CLASS_NAMES: CLASS_NAMES
  284.    
  285. });

  286. // Export
  287. Y.Button = Button;
  288. Y.ToggleButton = ToggleButton;

  289.