button-debug.js revision d0f9ee99aee2d631a24062cd95d30c1d6955fc0f
5f40f927dba3cf399373572f6ed6fe59a376376eTodd KlootsYUI.add('button', function(Y) {
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots/**
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots* A Button Widget
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots*
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots* @module button
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots* @since 3.5.0
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots*/
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Klootsvar CLASS_NAMES = Y.ButtonCore.CLASS_NAMES;
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots/**
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots* Creates a ButtonWidget
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots*
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots* @class ButtonWidget
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots* @extends Widget
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots* @param config {Object} Configuration object
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots* @constructor
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots*/
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Klootsfunction ButtonWidget(config) {
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots ButtonWidget.superclass.constructor.apply(this, arguments);
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots}
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots/* ButtonWidget extends Widget */
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd KlootsY.extend(ButtonWidget, Y.Widget, {
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots BOUNDING_TEMPLATE: Y.ButtonCore.prototype.TEMPLATE,
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots CONTENT_TEMPLATE: null,
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots /**
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots * @method initializer
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots * @description Internal init() handler.
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots * @param config {Object} Config object.
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots * @private
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots */
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots initializer: function(config) {
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots this._host = this.get('boundingBox');
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots },
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots /**
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots * bindUI implementation
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots *
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots * @description Hooks up events for the widget
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots * @method bindUI
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots */
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots bindUI: function() {
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots var button = this;
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots button.after('labelChange', button._afterLabelChange);
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots button.after('disabledChange', button._afterDisabledChange);
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots button.after('selectedChange', button._afterSelectedChange);
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots },
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots /**
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * @method syncUI
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * @description
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots */
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots syncUI: function() {
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots var button = this;
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots button._setLabel(button.get('label'));
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots button._setDisabled(button.get('disabled'));
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots button._setSelected(button.get('selected'));
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots },
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots /**
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * @method _setSelected
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * @description
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * @private
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots */
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots _setSelected: function(value) {
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots this.get('contentBox').toggleClass(ButtonWidget.CLASS_NAMES.SELECTED, value).set('aria-pressed', value); // TODO should support aria-checked (if applicable)
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots },
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots /**
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * @method _afterLabelChange
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * @description
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * @private
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots */
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots _afterLabelChange: function(e) {
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots this._setLabel(e.newVal);
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots },
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots /**
de413b3e25c9cba63ab4b3003f5a4524d49f9f05Todd Kloots * @method _afterDisabledChange
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * @description
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * @private
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots */
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots _afterDisabledChange: function(e) {
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots this._setDisabled(e.newVal);
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots },
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots /**
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * @method _afterSelectedChange
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots * @description
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * @private
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots */
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots _afterSelectedChange: function(e) {
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots this._setSelected(e.newVal);
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots }
de413b3e25c9cba63ab4b3003f5a4524d49f9f05Todd Kloots
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots}, {
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots // Y.Button static properties
de413b3e25c9cba63ab4b3003f5a4524d49f9f05Todd Kloots
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots /**
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * The identity of the widget.
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots *
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * @property NAME
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots * @type String
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * @default 'button'
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * @readOnly
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots * @protected
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * @static
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots */
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots NAME: 'button',
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots /**
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * Static property used to define the default attribute configuration of
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * the Widget.
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots *
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * @property ATTRS
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * @type {Object}
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * @protected
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots * @static
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots */
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots ATTRS: {
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots label: {
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots value: Y.ButtonCore.ATTRS.label.value
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots },
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots disabled: {
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots value: false
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots },
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots selected: {
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots value: false
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots }
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots },
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots /**
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * TODO
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots *
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * @property HTML_PARSER
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * @type {Object}
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * @protected
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * @static
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots */
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots HTML_PARSER: {
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots label: function(node) {
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots this._host = node; // TODO: remove
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots return this._getLabel();
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots },
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots disabled: function(node) {
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots return node.getDOMNode().disabled;
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots },
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots selected: function(node) {
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots return node.hasClass(ButtonWidget.CLASS_NAMES.SELECTED);
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots }
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots },
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots /**
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * List of class names used in the ButtonGroup's DOM
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots *
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * @property CLASS_NAMES
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * @type Object
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * @static
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots */
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots CLASS_NAMES: CLASS_NAMES
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots});
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots
5f40f927dba3cf399373572f6ed6fe59a376376eTodd KlootsY.mix(ButtonWidget.prototype, Y.ButtonCore.prototype);
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots/**
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots* Creates a ToggleButton
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots*
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots* @class ToggleButton
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots* @extends ButtonWidget
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots* @param config {Object} Configuration object
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots* @constructor
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots*/
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Klootsfunction ToggleButton(config) {
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots ButtonWidget.superclass.constructor.apply(this, arguments);
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots}
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots// TODO: move to ButtonCore subclass to enable toggle plugin, widget, etc.
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots/* ButtonWidget extends ButtonWidget */
5f40f927dba3cf399373572f6ed6fe59a376376eTodd KlootsY.extend(ToggleButton, ButtonWidget, {
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots trigger: 'click',
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots /**
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * bindUI implementation
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots *
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * Hooks up events for the widget
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * @method bindUI
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots */
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots bindUI: function() {
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots var button = this;
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots ToggleButton.superclass.bindUI.call(button);
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots button.get('contentBox').set('role', 'toggle');
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots button.get('contentBox').on(button.trigger, button.toggle, button);
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots },
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots /**
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots * @method select
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * @description
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots * @public
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots */
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots select: function() {
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots this.set('selected', true);
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots },
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots /**
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots * @method unselect
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots * @description
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots * @public
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots */
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots unselect: function() {
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots this.set('selected', false);
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots },
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots /**
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots * @method toggle
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots * @description
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots * @public
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots */
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots toggle: function() {
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots var button = this;
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots button.set('selected', !button.get('selected'));
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots }
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots}, {
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots NAME: 'toggleButton'
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots});
5f40f927dba3cf399373572f6ed6fe59a376376eTodd Kloots
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots// Export
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd KlootsY.Button = ButtonWidget;
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd KlootsY.ToggleButton = ToggleButton;
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots}, '@VERSION@' ,{requires:['button-core', 'cssbutton', 'widget']});
9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6Todd Kloots