The Button Control enables the creation of rich, graphical -* buttons that function like traditional HTML form buttons. Unlike -* traditional HTML form buttons, buttons created with the Button Control can have -* a label that is different from its value. With the inclusion of the optional -* Menu Control, the Button Control can also be -* used to create menu buttons and split buttons, controls that are not -* available natively in HTML. The Button Control can also be thought of as a -* way to create more visually engaging implementations of the browser's -* default radio-button and check-box controls.
-*The Button Control supports the following types:
-*<input>, <button>,
- * <a>, or <span> element to
- * be used to create the button.
- * @param {HTMLInputElement|
- * HTMLButtonElement|HTMLElement} p_oElement Object reference for the
- * <input>, <button>,
- * <a>, or <span> element to be
- * used to create the button.
- * @param {Object} p_oElement Object literal specifying a set of
- * configuration attributes used to create the button.
- * @param {Object} p_oAttributes Optional. Object literal specifying a set
- * of configuration attributes used to create the button.
- * @namespace YAHOO.widget
- * @class Button
- * @constructor
- * @extends YAHOO.util.Element
- */
-
-
-
- // Shorthard for utilities
-
- var Dom = YAHOO.util.Dom,
- Event = YAHOO.util.Event,
- Lang = YAHOO.lang,
- UA = YAHOO.env.ua,
- Overlay = YAHOO.widget.Overlay,
- Menu = YAHOO.widget.Menu,
-
-
- // Private member variables
-
- m_oButtons = {}, // Collection of all Button instances
- m_oOverlayManager = null, // YAHOO.widget.OverlayManager instance
- m_oSubmitTrigger = null, // The button that submitted the form
- m_oFocusedButton = null; // The button that has focus
-
-
-
- // Private methods
-
-
-
- /**
- * @method createInputElement
- * @description Creates an <input> element of the
- * specified type.
- * @private
- * @param {String} p_sType String specifying the type of
- * <input> element to create.
- * @param {String} p_sName String specifying the name of
- * <input> element to create.
- * @param {String} p_sValue String specifying the value of
- * <input> element to create.
- * @param {String} p_bChecked Boolean specifying if the
- * <input> element is to be checked.
- * @return {HTMLInputElement}
- */
- function createInputElement(p_sType, p_sName, p_sValue, p_bChecked) {
-
- var oInput,
- sInput;
-
- if (Lang.isString(p_sType) && Lang.isString(p_sName)) {
-
- if (UA.ie) {
-
- /*
- For IE it is necessary to create the element with the
- "type," "name," "value," and "checked" properties set all
- at once.
- */
-
- sInput = "<input> or <a>) that
- * map to Button configuration attributes and sets them into a collection
- * that is passed to the Button constructor.
- * @private
- * @param {HTMLInputElement|HTMLAnchorElement} p_oElement Object reference to the HTML
- * element (either <input> or <span>
- * ) used to create the button.
- * @param {Object} p_oAttributes Object reference for the collection of
- * configuration attributes used to create the button.
- */
- function setAttributesFromSrcElement(p_oElement, p_oAttributes) {
-
- var sSrcElementNodeName = p_oElement.nodeName.toUpperCase(),
- sClass = (this.CLASS_NAME_PREFIX + this.CSS_CLASS_NAME),
- me = this,
- oAttribute,
- oRootNode,
- sText;
-
-
- /**
- * @method setAttributeFromDOMAttribute
- * @description Gets the value of the specified DOM attribute and sets it
- * into the collection of configuration attributes used to configure
- * the button.
- * @private
- * @param {String} p_sAttribute String representing the name of the
- * attribute to retrieve from the DOM element.
- */
- function setAttributeFromDOMAttribute(p_sAttribute) {
-
- if (!(p_sAttribute in p_oAttributes)) {
-
- /*
- Need to use "getAttributeNode" instead of "getAttribute"
- because using "getAttribute," IE will return the innerText
- of a <button> for the value attribute
- rather than the value of the "value" attribute.
- */
-
- oAttribute = p_oElement.getAttributeNode(p_sAttribute);
-
-
- if (oAttribute && ("value" in oAttribute)) {
-
- YAHOO.log("Setting attribute \"" + p_sAttribute +
- "\" using source element's attribute value of \"" +
- oAttribute.value + "\"", "info", me.toString());
-
- p_oAttributes[p_sAttribute] = oAttribute.value;
-
- }
-
- }
-
- }
-
-
- /**
- * @method setFormElementProperties
- * @description Gets the value of the attributes from the form element
- * and sets them into the collection of configuration attributes used to
- * configure the button.
- * @private
- */
- function setFormElementProperties() {
-
- setAttributeFromDOMAttribute("type");
-
- if (p_oAttributes.type == "button") {
-
- p_oAttributes.type = "push";
-
- }
-
- if (!("disabled" in p_oAttributes)) {
-
- p_oAttributes.disabled = p_oElement.disabled;
-
- }
-
- setAttributeFromDOMAttribute("name");
- setAttributeFromDOMAttribute("value");
- setAttributeFromDOMAttribute("title");
-
- }
-
-
- switch (sSrcElementNodeName) {
-
- case "A":
-
- p_oAttributes.type = "link";
-
- setAttributeFromDOMAttribute("href");
- setAttributeFromDOMAttribute("target");
-
- break;
-
- case "INPUT":
-
- setFormElementProperties();
-
- if (!("checked" in p_oAttributes)) {
-
- p_oAttributes.checked = p_oElement.checked;
-
- }
-
- break;
-
- case "BUTTON":
-
- setFormElementProperties();
-
- oRootNode = p_oElement.parentNode.parentNode;
-
- if (Dom.hasClass(oRootNode, sClass + "-checked")) {
-
- p_oAttributes.checked = true;
-
- }
-
- if (Dom.hasClass(oRootNode, sClass + "-disabled")) {
-
- p_oAttributes.disabled = true;
-
- }
-
- p_oElement.removeAttribute("value");
-
- p_oElement.setAttribute("type", "button");
-
- break;
-
- }
-
- p_oElement.removeAttribute("id");
- p_oElement.removeAttribute("name");
-
- if (!("tabindex" in p_oAttributes)) {
-
- p_oAttributes.tabindex = p_oElement.tabIndex;
-
- }
-
- if (!("label" in p_oAttributes)) {
-
- // Set the "label" property
-
- sText = sSrcElementNodeName == "INPUT" ?
- p_oElement.value : p_oElement.innerHTML;
-
-
- if (sText && sText.length > 0) {
-
- p_oAttributes.label = sText;
-
- }
-
- }
-
- }
-
-
- /**
- * @method initConfig
- * @description Initializes the set of configuration attributes that are
- * used to instantiate the button.
- * @private
- * @param {Object} Object representing the button's set of
- * configuration attributes.
- */
- function initConfig(p_oConfig) {
-
- var oAttributes = p_oConfig.attributes,
- oSrcElement = oAttributes.srcelement,
- sSrcElementNodeName = oSrcElement.nodeName.toUpperCase(),
- me = this;
-
-
- if (sSrcElementNodeName == this.NODE_NAME) {
-
- p_oConfig.element = oSrcElement;
- p_oConfig.id = oSrcElement.id;
-
- Dom.getElementsBy(function (p_oElement) {
-
- switch (p_oElement.nodeName.toUpperCase()) {
-
- case "BUTTON":
- case "A":
- case "INPUT":
-
- setAttributesFromSrcElement.call(me, p_oElement,
- oAttributes);
-
- break;
-
- }
-
- }, "*", oSrcElement);
-
- }
- else {
-
- switch (sSrcElementNodeName) {
-
- case "BUTTON":
- case "A":
- case "INPUT":
-
- setAttributesFromSrcElement.call(this, oSrcElement,
- oAttributes);
-
- break;
-
- }
-
- }
-
- }
-
-
-
- // Constructor
-
- YAHOO.widget.Button = function (p_oElement, p_oAttributes) {
-
- if (!Overlay && YAHOO.widget.Overlay) {
-
- Overlay = YAHOO.widget.Overlay;
-
- }
-
-
- if (!Menu && YAHOO.widget.Menu) {
-
- Menu = YAHOO.widget.Menu;
-
- }
-
-
- var fnSuperClass = YAHOO.widget.Button.superclass.constructor,
- oConfig,
- oElement;
-
-
- if (arguments.length == 1 && !Lang.isString(p_oElement) && !p_oElement.nodeName) {
-
- if (!p_oElement.id) {
-
- p_oElement.id = Dom.generateId();
-
- YAHOO.log("No value specified for the button's \"id\" " +
- "attribute. Setting button id to \"" + p_oElement.id +
- "\".", "info", this.toString());
-
- }
-
- YAHOO.log("No source HTML element. Building the button " +
- "using the set of configuration attributes.", "info", this.toString());
-
- fnSuperClass.call(this, (this.createButtonElement(p_oElement.type)), p_oElement);
-
- }
- else {
-
- oConfig = { element: null, attributes: (p_oAttributes || {}) };
-
-
- if (Lang.isString(p_oElement)) {
-
- oElement = Dom.get(p_oElement);
-
- if (oElement) {
-
- if (!oConfig.attributes.id) {
-
- oConfig.attributes.id = p_oElement;
-
- }
-
- YAHOO.log("Building the button using an existing " +
- "HTML element as a source element.", "info", this.toString());
-
-
- oConfig.attributes.srcelement = oElement;
-
- initConfig.call(this, oConfig);
-
-
- if (!oConfig.element) {
-
- YAHOO.log("Source element could not be used " +
- "as is. Creating a new HTML element for " +
- "the button.", "info", this.toString());
-
- oConfig.element = this.createButtonElement(oConfig.attributes.type);
-
- }
-
- fnSuperClass.call(this, oConfig.element, oConfig.attributes);
-
- }
-
- }
- else if (p_oElement.nodeName) {
-
- if (!oConfig.attributes.id) {
-
- if (p_oElement.id) {
-
- oConfig.attributes.id = p_oElement.id;
-
- }
- else {
-
- oConfig.attributes.id = Dom.generateId();
-
- YAHOO.log("No value specified for the button's " +
- "\"id\" attribute. Setting button id to \"" +
- oConfig.attributes.id + "\".", "info", this.toString());
-
- }
-
- }
-
- YAHOO.log("Building the button using an existing HTML " +
- "element as a source element.", "info", this.toString());
-
-
- oConfig.attributes.srcelement = p_oElement;
-
- initConfig.call(this, oConfig);
-
-
- if (!oConfig.element) {
-
- YAHOO.log("Source element could not be used as is." +
- " Creating a new HTML element for the button.",
- "info", this.toString());
-
- oConfig.element = this.createButtonElement(oConfig.attributes.type);
-
- }
-
- fnSuperClass.call(this, oConfig.element, oConfig.attributes);
-
- }
-
- }
-
- };
-
-
-
- YAHOO.extend(YAHOO.widget.Button, YAHOO.util.Element, {
-
-
- // Protected properties
-
-
- /**
- * @property _button
- * @description Object reference to the button's internal
- * <a> or <button> element.
- * @default null
- * @protected
- * @type HTMLAnchorElement|HTMLButtonElement
- */
- _button: null,
-
-
- /**
- * @property _menu
- * @description Object reference to the button's menu.
- * @default null
- * @protected
- * @type {YAHOO.widget.Overlay|
- * YAHOO.widget.Menu}
- */
- _menu: null,
-
-
- /**
- * @property _hiddenFields
- * @description Object reference to the <input>
- * element, or array of HTML form elements used to represent the button
- * when its parent form is submitted.
- * @default null
- * @protected
- * @type HTMLInputElement|Array
- */
- _hiddenFields: null,
-
-
- /**
- * @property _onclickAttributeValue
- * @description Object reference to the button's current value for the
- * "onclick" configuration attribute.
- * @default null
- * @protected
- * @type Object
- */
- _onclickAttributeValue: null,
-
-
- /**
- * @property _activationKeyPressed
- * @description Boolean indicating if the key(s) that toggle the button's
- * "active" state have been pressed.
- * @default false
- * @protected
- * @type Boolean
- */
- _activationKeyPressed: false,
-
-
- /**
- * @property _activationButtonPressed
- * @description Boolean indicating if the mouse button that toggles
- * the button's "active" state has been pressed.
- * @default false
- * @protected
- * @type Boolean
- */
- _activationButtonPressed: false,
-
-
- /**
- * @property _hasKeyEventHandlers
- * @description Boolean indicating if the button's "blur", "keydown" and
- * "keyup" event handlers are assigned
- * @default false
- * @protected
- * @type Boolean
- */
- _hasKeyEventHandlers: false,
-
-
- /**
- * @property _hasMouseEventHandlers
- * @description Boolean indicating if the button's "mouseout,"
- * "mousedown," and "mouseup" event handlers are assigned
- * @default false
- * @protected
- * @type Boolean
- */
- _hasMouseEventHandlers: false,
-
-
- /**
- * @property _nOptionRegionX
- * @description Number representing the X coordinate of the leftmost edge of the Button's
- * option region. Applies only to Buttons of type "split".
- * @default 0
- * @protected
- * @type Number
- */
- _nOptionRegionX: 0,
-
-
-
- // Constants
-
- /**
- * @property CLASS_NAME_PREFIX
- * @description Prefix used for all class names applied to a Button.
- * @default "yui-"
- * @final
- * @type String
- */
- CLASS_NAME_PREFIX: "yui-",
-
-
- /**
- * @property NODE_NAME
- * @description The name of the node to be used for the button's
- * root element.
- * @default "SPAN"
- * @final
- * @type String
- */
- NODE_NAME: "SPAN",
-
-
- /**
- * @property CHECK_ACTIVATION_KEYS
- * @description Array of numbers representing keys that (when pressed)
- * toggle the button's "checked" attribute.
- * @default [32]
- * @final
- * @type Array
- */
- CHECK_ACTIVATION_KEYS: [32],
-
-
- /**
- * @property ACTIVATION_KEYS
- * @description Array of numbers representing keys that (when presed)
- * toggle the button's "active" state.
- * @default [13, 32]
- * @final
- * @type Array
- */
- ACTIVATION_KEYS: [13, 32],
-
-
- /**
- * @property OPTION_AREA_WIDTH
- * @description Width (in pixels) of the area of a split button that
- * when pressed will display a menu.
- * @default 20
- * @final
- * @type Number
- */
- OPTION_AREA_WIDTH: 20,
-
-
- /**
- * @property CSS_CLASS_NAME
- * @description String representing the CSS class(es) to be applied to
- * the button's root element.
- * @default "button"
- * @final
- * @type String
- */
- CSS_CLASS_NAME: "button",
-
-
-
- // Protected attribute setter methods
-
-
- /**
- * @method _setType
- * @description Sets the value of the button's "type" attribute.
- * @protected
- * @param {String} p_sType String indicating the value for the button's
- * "type" attribute.
- */
- _setType: function (p_sType) {
-
- if (p_sType == "split") {
-
- this.on("option", this._onOption);
-
- }
-
- },
-
-
- /**
- * @method _setLabel
- * @description Sets the value of the button's "label" attribute.
- * @protected
- * @param {String} p_sLabel String indicating the value for the button's
- * "label" attribute.
- */
- _setLabel: function (p_sLabel) {
-
- this._button.innerHTML = p_sLabel;
-
-
- /*
- Remove and add the default class name from the root element
- for Gecko to ensure that the button shrinkwraps to the label.
- Without this the button will not be rendered at the correct
- width when the label changes. The most likely cause for this
- bug is button's use of the Gecko-specific CSS display type of
- "-moz-inline-box" to simulate "inline-block" supported by IE,
- Safari and Opera.
- */
-
- var sClass,
- nGeckoVersion = UA.gecko;
-
-
- if (nGeckoVersion && nGeckoVersion < 1.9 && Dom.inDocument(this.get("element"))) {
-
- sClass = (this.CLASS_NAME_PREFIX + this.CSS_CLASS_NAME);
-
- this.removeClass(sClass);
-
- Lang.later(0, this, this.addClass, sClass);
-
- }
-
- },
-
-
- /**
- * @method _setTabIndex
- * @description Sets the value of the button's "tabindex" attribute.
- * @protected
- * @param {Number} p_nTabIndex Number indicating the value for the
- * button's "tabindex" attribute.
- */
- _setTabIndex: function (p_nTabIndex) {
-
- this._button.tabIndex = p_nTabIndex;
-
- },
-
-
- /**
- * @method _setTitle
- * @description Sets the value of the button's "title" attribute.
- * @protected
- * @param {String} p_nTabIndex Number indicating the value for
- * the button's "title" attribute.
- */
- _setTitle: function (p_sTitle) {
-
- if (this.get("type") != "link") {
-
- this._button.title = p_sTitle;
-
- }
-
- },
-
-
- /**
- * @method _setDisabled
- * @description Sets the value of the button's "disabled" attribute.
- * @protected
- * @param {Boolean} p_bDisabled Boolean indicating the value for
- * the button's "disabled" attribute.
- */
- _setDisabled: function (p_bDisabled) {
-
- if (this.get("type") != "link") {
-
- if (p_bDisabled) {
-
- if (this._menu) {
-
- this._menu.hide();
-
- }
-
- if (this.hasFocus()) {
-
- this.blur();
-
- }
-
- this._button.setAttribute("disabled", "disabled");
-
- this.addStateCSSClasses("disabled");
-
- this.removeStateCSSClasses("hover");
- this.removeStateCSSClasses("active");
- this.removeStateCSSClasses("focus");
-
- }
- else {
-
- this._button.removeAttribute("disabled");
-
- this.removeStateCSSClasses("disabled");
-
- }
-
- }
-
- },
-
-
- /**
- * @method _setHref
- * @description Sets the value of the button's "href" attribute.
- * @protected
- * @param {String} p_sHref String indicating the value for the button's
- * "href" attribute.
- */
- _setHref: function (p_sHref) {
-
- if (this.get("type") == "link") {
-
- this._button.href = p_sHref;
-
- }
-
- },
-
-
- /**
- * @method _setTarget
- * @description Sets the value of the button's "target" attribute.
- * @protected
- * @param {String} p_sTarget String indicating the value for the button's
- * "target" attribute.
- */
- _setTarget: function (p_sTarget) {
-
- if (this.get("type") == "link") {
-
- this._button.setAttribute("target", p_sTarget);
-
- }
-
- },
-
-
- /**
- * @method _setChecked
- * @description Sets the value of the button's "target" attribute.
- * @protected
- * @param {Boolean} p_bChecked Boolean indicating the value for
- * the button's "checked" attribute.
- */
- _setChecked: function (p_bChecked) {
-
- var sType = this.get("type");
-
- if (sType == "checkbox" || sType == "radio") {
-
- if (p_bChecked) {
- this.addStateCSSClasses("checked");
- }
- else {
- this.removeStateCSSClasses("checked");
- }
-
- }
-
- },
-
-
- /**
- * @method _setMenu
- * @description Sets the value of the button's "menu" attribute.
- * @protected
- * @param {Object} p_oMenu Object indicating the value for the button's
- * "menu" attribute.
- */
- _setMenu: function (p_oMenu) {
-
- var bLazyLoad = this.get("lazyloadmenu"),
- oButtonElement = this.get("element"),
- sMenuCSSClassName,
-
- /*
- Boolean indicating if the value of p_oMenu is an instance
- of YAHOO.widget.Menu or YAHOO.widget.Overlay.
- */
-
- bInstance = false,
- oMenu,
- oMenuElement,
- oSrcElement;
-
-
- function onAppendTo() {
-
- oMenu.render(oButtonElement.parentNode);
-
- this.removeListener("appendTo", onAppendTo);
-
- }
-
-
- function setMenuContainer() {
-
- oMenu.cfg.queueProperty("container", oButtonElement.parentNode);
-
- this.removeListener("appendTo", setMenuContainer);
-
- }
-
-
- function initMenu() {
-
- var oContainer;
-
- if (oMenu) {
-
- Dom.addClass(oMenu.element, this.get("menuclassname"));
- Dom.addClass(oMenu.element, this.CLASS_NAME_PREFIX + this.get("type") + "-button-menu");
-
- oMenu.showEvent.subscribe(this._onMenuShow, null, this);
- oMenu.hideEvent.subscribe(this._onMenuHide, null, this);
- oMenu.renderEvent.subscribe(this._onMenuRender, null, this);
-
-
- if (Menu && oMenu instanceof Menu) {
-
- if (bLazyLoad) {
-
- oContainer = this.get("container");
-
- if (oContainer) {
-
- oMenu.cfg.queueProperty("container", oContainer);
-
- }
- else {
-
- this.on("appendTo", setMenuContainer);
-
- }
-
- }
-
- oMenu.cfg.queueProperty("clicktohide", false);
-
- oMenu.keyDownEvent.subscribe(this._onMenuKeyDown, this, true);
- oMenu.subscribe("click", this._onMenuClick, this, true);
-
- this.on("selectedMenuItemChange", this._onSelectedMenuItemChange);
-
- oSrcElement = oMenu.srcElement;
-
- if (oSrcElement && oSrcElement.nodeName.toUpperCase() == "SELECT") {
-
- oSrcElement.style.display = "none";
- oSrcElement.parentNode.removeChild(oSrcElement);
-
- }
-
- }
- else if (Overlay && oMenu instanceof Overlay) {
-
- if (!m_oOverlayManager) {
-
- m_oOverlayManager = new YAHOO.widget.OverlayManager();
-
- }
-
- m_oOverlayManager.register(oMenu);
-
- }
-
-
- this._menu = oMenu;
-
-
- if (!bInstance && !bLazyLoad) {
-
- if (Dom.inDocument(oButtonElement)) {
-
- oMenu.render(oButtonElement.parentNode);
-
- }
- else {
-
- this.on("appendTo", onAppendTo);
-
- }
-
- }
-
- }
-
- }
-
-
- if (Overlay) {
-
- if (Menu) {
-
- sMenuCSSClassName = Menu.prototype.CSS_CLASS_NAME;
-
- }
-
- if (p_oMenu && Menu && (p_oMenu instanceof Menu)) {
-
- oMenu = p_oMenu;
- bInstance = true;
-
- initMenu.call(this);
-
- }
- else if (Overlay && p_oMenu && (p_oMenu instanceof Overlay)) {
-
- oMenu = p_oMenu;
- bInstance = true;
-
- oMenu.cfg.queueProperty("visible", false);
-
- initMenu.call(this);
-
- }
- else if (Menu && Lang.isArray(p_oMenu)) {
-
- oMenu = new Menu(Dom.generateId(), { lazyload: bLazyLoad, itemdata: p_oMenu });
-
- this._menu = oMenu;
-
- this.on("appendTo", initMenu);
-
- }
- else if (Lang.isString(p_oMenu)) {
-
- oMenuElement = Dom.get(p_oMenu);
-
- if (oMenuElement) {
-
- if (Menu && Dom.hasClass(oMenuElement, sMenuCSSClassName) ||
- oMenuElement.nodeName.toUpperCase() == "SELECT") {
-
- oMenu = new Menu(p_oMenu, { lazyload: bLazyLoad });
-
- initMenu.call(this);
-
- }
- else if (Overlay) {
-
- oMenu = new Overlay(p_oMenu, { visible: false });
-
- initMenu.call(this);
-
- }
-
- }
-
- }
- else if (p_oMenu && p_oMenu.nodeName) {
-
- if (Menu && Dom.hasClass(p_oMenu, sMenuCSSClassName) ||
- p_oMenu.nodeName.toUpperCase() == "SELECT") {
-
- oMenu = new Menu(p_oMenu, { lazyload: bLazyLoad });
-
- initMenu.call(this);
-
- }
- else if (Overlay) {
-
- if (!p_oMenu.id) {
-
- Dom.generateId(p_oMenu);
-
- }
-
- oMenu = new Overlay(p_oMenu, { visible: false });
-
- initMenu.call(this);
-
- }
-
- }
-
- }
-
- },
-
-
- /**
- * @method _setOnClick
- * @description Sets the value of the button's "onclick" attribute.
- * @protected
- * @param {Object} p_oObject Object indicating the value for the button's
- * "onclick" attribute.
- */
- _setOnClick: function (p_oObject) {
-
- /*
- Remove any existing listeners if a "click" event handler
- has already been specified.
- */
-
- if (this._onclickAttributeValue &&
- (this._onclickAttributeValue != p_oObject)) {
-
- this.removeListener("click", this._onclickAttributeValue.fn);
-
- this._onclickAttributeValue = null;
-
- }
-
-
- if (!this._onclickAttributeValue &&
- Lang.isObject(p_oObject) &&
- Lang.isFunction(p_oObject.fn)) {
-
- this.on("click", p_oObject.fn, p_oObject.obj, p_oObject.scope);
-
- this._onclickAttributeValue = p_oObject;
-
- }
-
- },
-
-
-
- // Protected methods
-
-
-
- /**
- * @method _isActivationKey
- * @description Determines if the specified keycode is one that toggles
- * the button's "active" state.
- * @protected
- * @param {Number} p_nKeyCode Number representing the keycode to
- * be evaluated.
- * @return {Boolean}
- */
- _isActivationKey: function (p_nKeyCode) {
-
- var sType = this.get("type"),
- aKeyCodes = (sType == "checkbox" || sType == "radio") ?
- this.CHECK_ACTIVATION_KEYS : this.ACTIVATION_KEYS,
-
- nKeyCodes = aKeyCodes.length,
- bReturnVal = false,
- i;
-
-
- if (nKeyCodes > 0) {
-
- i = nKeyCodes - 1;
-
- do {
-
- if (p_nKeyCode == aKeyCodes[i]) {
-
- bReturnVal = true;
- break;
-
- }
-
- }
- while (i--);
-
- }
-
- return bReturnVal;
-
- },
-
-
- /**
- * @method _isSplitButtonOptionKey
- * @description Determines if the specified keycode is one that toggles
- * the display of the split button's menu.
- * @protected
- * @param {Event} p_oEvent Object representing the DOM event object
- * passed back by the event utility (YAHOO.util.Event).
- * @return {Boolean}
- */
- _isSplitButtonOptionKey: function (p_oEvent) {
-
- var bShowMenu = (Event.getCharCode(p_oEvent) == 40);
-
-
- var onKeyPress = function (p_oEvent) {
-
- Event.preventDefault(p_oEvent);
-
- this.removeListener("keypress", onKeyPress);
-
- };
-
-
- // Prevent the browser from scrolling the window
- if (bShowMenu) {
-
- if (UA.opera) {
-
- this.on("keypress", onKeyPress);
-
- }
-
- Event.preventDefault(p_oEvent);
- }
-
- return bShowMenu;
-
- },
-
-
- /**
- * @method _addListenersToForm
- * @description Adds event handlers to the button's form.
- * @protected
- */
- _addListenersToForm: function () {
-
- var oForm = this.getForm(),
- onFormKeyPress = YAHOO.widget.Button.onFormKeyPress,
- bHasKeyPressListener,
- oSrcElement,
- aListeners,
- nListeners,
- i;
-
-
- if (oForm) {
-
- Event.on(oForm, "reset", this._onFormReset, null, this);
- Event.on(oForm, "submit", this._onFormSubmit, null, this);
-
- oSrcElement = this.get("srcelement");
-
-
- if (this.get("type") == "submit" ||
- (oSrcElement && oSrcElement.type == "submit"))
- {
-
- aListeners = Event.getListeners(oForm, "keypress");
- bHasKeyPressListener = false;
-
- if (aListeners) {
-
- nListeners = aListeners.length;
-
- if (nListeners > 0) {
-
- i = nListeners - 1;
-
- do {
-
- if (aListeners[i].fn == onFormKeyPress) {
-
- bHasKeyPressListener = true;
- break;
-
- }
-
- }
- while (i--);
-
- }
-
- }
-
-
- if (!bHasKeyPressListener) {
-
- Event.on(oForm, "keypress", onFormKeyPress);
-
- }
-
- }
-
- }
-
- },
-
-
-
- /**
- * @method _showMenu
- * @description Shows the button's menu.
- * @protected
- * @param {Event} p_oEvent Object representing the DOM event object
- * passed back by the event utility (YAHOO.util.Event) that triggered
- * the display of the menu.
- */
- _showMenu: function (p_oEvent) {
-
- if (YAHOO.widget.MenuManager) {
- YAHOO.widget.MenuManager.hideVisible();
- }
-
-
- if (m_oOverlayManager) {
- m_oOverlayManager.hideAll();
- }
-
-
- var oMenu = this._menu,
- aMenuAlignment = this.get("menualignment"),
- bFocusMenu = this.get("focusmenu"),
- fnFocusMethod;
-
-
- if (this._renderedMenu) {
-
- oMenu.cfg.setProperty("context",
- [this.get("element"), aMenuAlignment[0], aMenuAlignment[1]]);
-
- oMenu.cfg.setProperty("preventcontextoverlap", true);
- oMenu.cfg.setProperty("constraintoviewport", true);
-
- }
- else {
-
- oMenu.cfg.queueProperty("context",
- [this.get("element"), aMenuAlignment[0], aMenuAlignment[1]]);
-
- oMenu.cfg.queueProperty("preventcontextoverlap", true);
- oMenu.cfg.queueProperty("constraintoviewport", true);
-
- }
-
-
- /*
- Refocus the Button before showing its Menu in case the call to
- YAHOO.widget.MenuManager.hideVisible() resulted in another element in the
- DOM being focused after another Menu was hidden.
- */
-
- this.focus();
-
-
- if (Menu && oMenu && (oMenu instanceof Menu)) {
-
- // Since Menus automatically focus themselves when made visible, temporarily
- // replace the Menu focus method so that the value of the Button's "focusmenu"
- // attribute determines if the Menu should be focus when made visible.
-
- fnFocusMethod = oMenu.focus;
-
- oMenu.focus = function () {};
-
- if (this._renderedMenu) {
-
- oMenu.cfg.setProperty("minscrollheight", this.get("menuminscrollheight"));
- oMenu.cfg.setProperty("maxheight", this.get("menumaxheight"));
-
- }
- else {
-
- oMenu.cfg.queueProperty("minscrollheight", this.get("menuminscrollheight"));
- oMenu.cfg.queueProperty("maxheight", this.get("menumaxheight"));
-
- }
-
-
- oMenu.show();
-
- oMenu.focus = fnFocusMethod;
-
- oMenu.align();
-
-
- /*
- Stop the propagation of the event so that the MenuManager
- doesn't blur the menu after it gets focus.
- */
-
- if (p_oEvent.type == "mousedown") {
- Event.stopPropagation(p_oEvent);
- }
-
-
- if (bFocusMenu) {
- oMenu.focus();
- }
-
- }
- else if (Overlay && oMenu && (oMenu instanceof Overlay)) {
-
- if (!this._renderedMenu) {
- oMenu.render(this.get("element").parentNode);
- }
-
- oMenu.show();
- oMenu.align();
-
- }
-
- },
-
-
- /**
- * @method _hideMenu
- * @description Hides the button's menu.
- * @protected
- */
- _hideMenu: function () {
-
- var oMenu = this._menu;
-
- if (oMenu) {
-
- oMenu.hide();
-
- }
-
- },
-
-
-
-
- // Protected event handlers
-
-
- /**
- * @method _onMouseOver
- * @description "mouseover" event handler for the button.
- * @protected
- * @param {Event} p_oEvent Object representing the DOM event object
- * passed back by the event utility (YAHOO.util.Event).
- */
- _onMouseOver: function (p_oEvent) {
-
- var sType = this.get("type"),
- oElement,
- nOptionRegionX;
-
-
- if (sType === "split") {
-
- oElement = this.get("element");
- nOptionRegionX =
- (Dom.getX(oElement) + (oElement.offsetWidth - this.OPTION_AREA_WIDTH));
-
- this._nOptionRegionX = nOptionRegionX;
-
- }
-
-
- if (!this._hasMouseEventHandlers) {
-
- if (sType === "split") {
-
- this.on("mousemove", this._onMouseMove);
-
- }
-
- this.on("mouseout", this._onMouseOut);
-
- this._hasMouseEventHandlers = true;
-
- }
-
-
- this.addStateCSSClasses("hover");
-
-
- if (sType === "split" && (Event.getPageX(p_oEvent) > nOptionRegionX)) {
-
- this.addStateCSSClasses("hoveroption");
-
- }
-
-
- if (this._activationButtonPressed) {
-
- this.addStateCSSClasses("active");
-
- }
-
-
- if (this._bOptionPressed) {
-
- this.addStateCSSClasses("activeoption");
-
- }
-
-
- if (this._activationButtonPressed || this._bOptionPressed) {
-
- Event.removeListener(document, "mouseup", this._onDocumentMouseUp);
-
- }
-
- },
-
-
- /**
- * @method _onMouseMove
- * @description "mousemove" event handler for the button.
- * @protected
- * @param {Event} p_oEvent Object representing the DOM event object
- * passed back by the event utility (YAHOO.util.Event).
- */
- _onMouseMove: function (p_oEvent) {
-
- var nOptionRegionX = this._nOptionRegionX;
-
- if (nOptionRegionX) {
-
- if (Event.getPageX(p_oEvent) > nOptionRegionX) {
-
- this.addStateCSSClasses("hoveroption");
-
- }
- else {
-
- this.removeStateCSSClasses("hoveroption");
-
- }
-
- }
-
- },
-
- /**
- * @method _onMouseOut
- * @description "mouseout" event handler for the button.
- * @protected
- * @param {Event} p_oEvent Object representing the DOM event object
- * passed back by the event utility (YAHOO.util.Event).
- */
- _onMouseOut: function (p_oEvent) {
-
- var sType = this.get("type");
-
- this.removeStateCSSClasses("hover");
-
-
- if (sType != "menu") {
-
- this.removeStateCSSClasses("active");
-
- }
-
-
- if (this._activationButtonPressed || this._bOptionPressed) {
-
- Event.on(document, "mouseup", this._onDocumentMouseUp, null, this);
-
- }
-
-
- if (sType === "split" && (Event.getPageX(p_oEvent) > this._nOptionRegionX)) {
-
- this.removeStateCSSClasses("hoveroption");
-
- }
-
- },
-
-
- /**
- * @method _onDocumentMouseUp
- * @description "mouseup" event handler for the button.
- * @protected
- * @param {Event} p_oEvent Object representing the DOM event object
- * passed back by the event utility (YAHOO.util.Event).
- */
- _onDocumentMouseUp: function (p_oEvent) {
-
- this._activationButtonPressed = false;
- this._bOptionPressed = false;
-
- var sType = this.get("type"),
- oTarget,
- oMenuElement;
-
- if (sType == "menu" || sType == "split") {
-
- oTarget = Event.getTarget(p_oEvent);
- oMenuElement = this._menu.element;
-
- if (oTarget != oMenuElement &&
- !Dom.isAncestor(oMenuElement, oTarget)) {
-
- this.removeStateCSSClasses((sType == "menu" ?
- "active" : "activeoption"));
-
- this._hideMenu();
-
- }
-
- }
-
- Event.removeListener(document, "mouseup", this._onDocumentMouseUp);
-
- },
-
-
- /**
- * @method _onMouseDown
- * @description "mousedown" event handler for the button.
- * @protected
- * @param {Event} p_oEvent Object representing the DOM event object
- * passed back by the event utility (YAHOO.util.Event).
- */
- _onMouseDown: function (p_oEvent) {
-
- var sType,
- bReturnVal = true;
-
-
- function onMouseUp() {
-
- this._hideMenu();
- this.removeListener("mouseup", onMouseUp);
-
- }
-
-
- if ((p_oEvent.which || p_oEvent.button) == 1) {
-
-
- if (!this.hasFocus()) {
-
- this.focus();
-
- }
-
-
- sType = this.get("type");
-
-
- if (sType == "split") {
-
- if (Event.getPageX(p_oEvent) > this._nOptionRegionX) {
-
- this.fireEvent("option", p_oEvent);
- bReturnVal = false;
-
- }
- else {
-
- this.addStateCSSClasses("active");
-
- this._activationButtonPressed = true;
-
- }
-
- }
- else if (sType == "menu") {
-
- if (this.isActive()) {
-
- this._hideMenu();
-
- this._activationButtonPressed = false;
-
- }
- else {
-
- this._showMenu(p_oEvent);
-
- this._activationButtonPressed = true;
-
- }
-
- }
- else {
-
- this.addStateCSSClasses("active");
-
- this._activationButtonPressed = true;
-
- }
-
-
-
- if (sType == "split" || sType == "menu") {
-
- this._hideMenuTimer = Lang.later(250, this, this.on, ["mouseup", onMouseUp]);
-
- }
-
- }
-
- return bReturnVal;
-
- },
-
-
- /**
- * @method _onMouseUp
- * @description "mouseup" event handler for the button.
- * @protected
- * @param {Event} p_oEvent Object representing the DOM event object
- * passed back by the event utility (YAHOO.util.Event).
- */
- _onMouseUp: function (p_oEvent) {
-
- var sType = this.get("type"),
- oHideMenuTimer = this._hideMenuTimer,
- bReturnVal = true;
-
-
- if (oHideMenuTimer) {
-
- oHideMenuTimer.cancel();
-
- }
-
-
- if (sType == "checkbox" || sType == "radio") {
-
- this.set("checked", !(this.get("checked")));
-
- }
-
-
- this._activationButtonPressed = false;
-
-
- if (sType != "menu") {
-
- this.removeStateCSSClasses("active");
-
- }
-
-
- if (sType == "split" && Event.getPageX(p_oEvent) > this._nOptionRegionX) {
-
- bReturnVal = false;
-
- }
-
- return bReturnVal;
-
- },
-
-
- /**
- * @method _onFocus
- * @description "focus" event handler for the button.
- * @protected
- * @param {Event} p_oEvent Object representing the DOM event object
- * passed back by the event utility (YAHOO.util.Event).
- */
- _onFocus: function (p_oEvent) {
-
- var oElement;
-
- this.addStateCSSClasses("focus");
-
- if (this._activationKeyPressed) {
-
- this.addStateCSSClasses("active");
-
- }
-
- m_oFocusedButton = this;
-
-
- if (!this._hasKeyEventHandlers) {
-
- oElement = this._button;
-
- Event.on(oElement, "blur", this._onBlur, null, this);
- Event.on(oElement, "keydown", this._onKeyDown, null, this);
- Event.on(oElement, "keyup", this._onKeyUp, null, this);
-
- this._hasKeyEventHandlers = true;
-
- }
-
-
- this.fireEvent("focus", p_oEvent);
-
- },
-
-
- /**
- * @method _onBlur
- * @description "blur" event handler for the button.
- * @protected
- * @param {Event} p_oEvent Object representing the DOM event object
- * passed back by the event utility (YAHOO.util.Event).
- */
- _onBlur: function (p_oEvent) {
-
- this.removeStateCSSClasses("focus");
-
- if (this.get("type") != "menu") {
-
- this.removeStateCSSClasses("active");
-
- }
-
- if (this._activationKeyPressed) {
-
- Event.on(document, "keyup", this._onDocumentKeyUp, null, this);
-
- }
-
-
- m_oFocusedButton = null;
-
- this.fireEvent("blur", p_oEvent);
-
- },
-
-
- /**
- * @method _onDocumentKeyUp
- * @description "keyup" event handler for the document.
- * @protected
- * @param {Event} p_oEvent Object representing the DOM event object
- * passed back by the event utility (YAHOO.util.Event).
- */
- _onDocumentKeyUp: function (p_oEvent) {
-
- if (this._isActivationKey(Event.getCharCode(p_oEvent))) {
-
- this._activationKeyPressed = false;
-
- Event.removeListener(document, "keyup", this._onDocumentKeyUp);
-
- }
-
- },
-
-
- /**
- * @method _onKeyDown
- * @description "keydown" event handler for the button.
- * @protected
- * @param {Event} p_oEvent Object representing the DOM event object
- * passed back by the event utility (YAHOO.util.Event).
- */
- _onKeyDown: function (p_oEvent) {
-
- var oMenu = this._menu;
-
-
- if (this.get("type") == "split" &&
- this._isSplitButtonOptionKey(p_oEvent)) {
-
- this.fireEvent("option", p_oEvent);
-
- }
- else if (this._isActivationKey(Event.getCharCode(p_oEvent))) {
-
- if (this.get("type") == "menu") {
-
- this._showMenu(p_oEvent);
-
- }
- else {
-
- this._activationKeyPressed = true;
-
- this.addStateCSSClasses("active");
-
- }
-
- }
-
-
- if (oMenu && oMenu.cfg.getProperty("visible") &&
- Event.getCharCode(p_oEvent) == 27) {
-
- oMenu.hide();
- this.focus();
-
- }
-
- },
-
-
- /**
- * @method _onKeyUp
- * @description "keyup" event handler for the button.
- * @protected
- * @param {Event} p_oEvent Object representing the DOM event object
- * passed back by the event utility (YAHOO.util.Event).
- */
- _onKeyUp: function (p_oEvent) {
-
- var sType;
-
- if (this._isActivationKey(Event.getCharCode(p_oEvent))) {
-
- sType = this.get("type");
-
- if (sType == "checkbox" || sType == "radio") {
-
- this.set("checked", !(this.get("checked")));
-
- }
-
- this._activationKeyPressed = false;
-
- if (this.get("type") != "menu") {
-
- this.removeStateCSSClasses("active");
-
- }
-
- }
-
- },
-
-
- /**
- * @method _onClick
- * @description "click" event handler for the button.
- * @protected
- * @param {Event} p_oEvent Object representing the DOM event object
- * passed back by the event utility (YAHOO.util.Event).
- */
- _onClick: function (p_oEvent) {
-
- var sType = this.get("type"),
- oForm,
- oSrcElement,
- bReturnVal;
-
-
- switch (sType) {
-
- case "submit":
-
- if (p_oEvent.returnValue !== false) {
-
- this.submitForm();
-
- }
-
- break;
-
- case "reset":
-
- oForm = this.getForm();
-
- if (oForm) {
-
- oForm.reset();
-
- }
-
- break;
-
-
- case "split":
-
- if (this._nOptionRegionX > 0 &&
- (Event.getPageX(p_oEvent) > this._nOptionRegionX)) {
-
- bReturnVal = false;
-
- }
- else {
-
- this._hideMenu();
-
- oSrcElement = this.get("srcelement");
-
- if (oSrcElement && oSrcElement.type == "submit" &&
- p_oEvent.returnValue !== false) {
-
- this.submitForm();
-
- }
-
- }
-
- break;
-
- }
-
- return bReturnVal;
-
- },
-
-
- /**
- * @method _onDblClick
- * @description "dblclick" event handler for the button.
- * @protected
- * @param {Event} p_oEvent Object representing the DOM event object
- * passed back by the event utility (YAHOO.util.Event).
- */
- _onDblClick: function (p_oEvent) {
-
- var bReturnVal = true;
-
- if (this.get("type") == "split" && Event.getPageX(p_oEvent) > this._nOptionRegionX) {
-
- bReturnVal = false;
-
- }
-
- return bReturnVal;
-
- },
-
-
- /**
- * @method _onAppendTo
- * @description "appendTo" event handler for the button.
- * @protected
- * @param {Event} p_oEvent Object representing the DOM event object
- * passed back by the event utility (YAHOO.util.Event).
- */
- _onAppendTo: function (p_oEvent) {
-
- /*
- It is necessary to call "_addListenersToForm" using
- "setTimeout" to make sure that the button's "form" property
- returns a node reference. Sometimes, if you try to get the
- reference immediately after appending the field, it is null.
- */
-
- Lang.later(0, this, this._addListenersToForm);
-
- },
-
-
- /**
- * @method _onFormReset
- * @description "reset" event handler for the button's form.
- * @protected
- * @param {Event} p_oEvent Object representing the DOM event
- * object passed back by the event utility (YAHOO.util.Event).
- */
- _onFormReset: function (p_oEvent) {
-
- var sType = this.get("type"),
- oMenu = this._menu;
-
- if (sType == "checkbox" || sType == "radio") {
-
- this.resetValue("checked");
-
- }
-
-
- if (Menu && oMenu && (oMenu instanceof Menu)) {
-
- this.resetValue("selectedMenuItem");
-
- }
-
- },
-
-
- /**
- * @method _onFormSubmit
- * @description "submit" event handler for the button's form.
- * @protected
- * @param {Event} p_oEvent Object representing the DOM event
- * object passed back by the event utility (YAHOO.util.Event).
- */
- _onFormSubmit: function (p_oEvent) {
-
- this.createHiddenFields();
-
- },
-
-
- /**
- * @method _onDocumentMouseDown
- * @description "mousedown" event handler for the document.
- * @protected
- * @param {Event} p_oEvent Object representing the DOM event object
- * passed back by the event utility (YAHOO.util.Event).
- */
- _onDocumentMouseDown: function (p_oEvent) {
-
- var oTarget = Event.getTarget(p_oEvent),
- oButtonElement = this.get("element"),
- oMenuElement = this._menu.element;
-
-
- if (oTarget != oButtonElement &&
- !Dom.isAncestor(oButtonElement, oTarget) &&
- oTarget != oMenuElement &&
- !Dom.isAncestor(oMenuElement, oTarget)) {
-
- this._hideMenu();
-
- // In IE when the user mouses down on a focusable element
- // that element will be focused and become the "activeElement".
- // (http://msdn.microsoft.com/en-us/library/ms533065(VS.85).aspx)
- // However, there is a bug in IE where if there is a
- // positioned element with a focused descendant that is
- // hidden in response to the mousedown event, the target of
- // the mousedown event will appear to have focus, but will
- // not be set as the activeElement. This will result
- // in the element not firing key events, even though it
- // appears to have focus. The following call to "setActive"
- // fixes this bug.
-
- if (UA.ie && oTarget.focus) {
- oTarget.setActive();
- }
-
- Event.removeListener(document, "mousedown",
- this._onDocumentMouseDown);
-
- }
-
- },
-
-
- /**
- * @method _onOption
- * @description "option" event handler for the button.
- * @protected
- * @param {Event} p_oEvent Object representing the DOM event object
- * passed back by the event utility (YAHOO.util.Event).
- */
- _onOption: function (p_oEvent) {
-
- if (this.hasClass(this.CLASS_NAME_PREFIX + "split-button-activeoption")) {
-
- this._hideMenu();
-
- this._bOptionPressed = false;
-
- }
- else {
-
- this._showMenu(p_oEvent);
-
- this._bOptionPressed = true;
-
- }
-
- },
-
-
- /**
- * @method _onMenuShow
- * @description "show" event handler for the button's menu.
- * @private
- * @param {String} p_sType String representing the name of the event
- * that was fired.
- */
- _onMenuShow: function (p_sType) {
-
- Event.on(document, "mousedown", this._onDocumentMouseDown,
- null, this);
-
- var sState = (this.get("type") == "split") ? "activeoption" : "active";
-
- this.addStateCSSClasses(sState);
-
- },
-
-
- /**
- * @method _onMenuHide
- * @description "hide" event handler for the button's menu.
- * @private
- * @param {String} p_sType String representing the name of the event
- * that was fired.
- */
- _onMenuHide: function (p_sType) {
-
- var sState = (this.get("type") == "split") ? "activeoption" : "active";
-
- this.removeStateCSSClasses(sState);
-
-
- if (this.get("type") == "split") {
-
- this._bOptionPressed = false;
-
- }
-
- },
-
-
- /**
- * @method _onMenuKeyDown
- * @description "keydown" event handler for the button's menu.
- * @private
- * @param {String} p_sType String representing the name of the event
- * that was fired.
- * @param {Array} p_aArgs Array of arguments sent when the event
- * was fired.
- */
- _onMenuKeyDown: function (p_sType, p_aArgs) {
-
- var oEvent = p_aArgs[0];
-
- if (Event.getCharCode(oEvent) == 27) {
-
- this.focus();
-
- if (this.get("type") == "split") {
-
- this._bOptionPressed = false;
-
- }
-
- }
-
- },
-
-
- /**
- * @method _onMenuRender
- * @description "render" event handler for the button's menu.
- * @private
- * @param {String} p_sType String representing the name of the
- * event thatwas fired.
- */
- _onMenuRender: function (p_sType) {
-
- var oButtonElement = this.get("element"),
- oButtonParent = oButtonElement.parentNode,
- oMenu = this._menu,
- oMenuElement = oMenu.element,
- oSrcElement = oMenu.srcElement,
- oItem;
-
-
- if (oButtonParent != oMenuElement.parentNode) {
-
- oButtonParent.appendChild(oMenuElement);
-
- }
-
- this._renderedMenu = true;
-
- // If the user has designated an