[Summary view] [Print] [Text view]

   1  /*
   2  YUI 3.17.2 (build 9c3c78e)
   3  Copyright 2014 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.17.2', {"requires": ["button-core", "cssbutton", "widget"]});