widget-buttons.js revision 0eae691d93468d00d205010e40475ecce06776ed
/**
*
* @module widget-buttons
* @author tilomitra
*/
var BOUNDING_BOX = "boundingBox",
VISIBLE = "visible",
CLICK = "click",
RENDER_UI = "renderUI",
BIND_UI = "bindUI",
SYNC_UI = "syncUI",
BTN = "button",
BUTTON_CHANGE = "buttonsChange",
/**
* Widget extension, which can be used to add header/footer buttons support to a widget that implements the WidgetStdMod extension,
*
* @class WidgetButtons
* @param {Object} config User configuration object
*/
function WidgetButtons(config) {
}
/**
* Static hash of default class names used for the inner <span> ("content"),
* the <a> ("button"), and the outer span ("wrapper").
*
* @property BUTTON_CLASS_NAMES
* @static
* @type object
*/
};
/**
* Static property used to define the default attribute
* configuration introduced by WidgetButtons.
*
* @property ATTRS
* @type Object
* @static
*/
WidgetButtons.ATTRS = {
/**
* @attribute buttons
* @type {Array}
* @default [
{
type: "close"
}
],
* @description <p>An array of objects, with each object corresponding to a button that you want to be added to the widget. Each button can have upto 4 properties:</p>
*
* <p>type: {string} Use one of the default buttons provided by the WidgetButtons class. Set this to "close" if you want the
* [x] at the top-right corner of the window. If this key has a value, then values for the remaining properties below don't need to be provided.</p>
*
* <p>value: {string} HTML string or text that should be shown on the button</p>
* <p>action: {function} The callback function that should be executed when the button is clicked.</p>
* <p>href: {string} (optional) The link to redirect to if the button is clicked> If not supplied, defaults to "#"</p>
* <p>section: {String|Object} Whether the button should be placed in the header or footer. Represented as "header" or "footer"</p>
* <p>classNames: {String|Array[String]} A set of additional CSS class names which would be added to the button node.</p>
*/
buttons: {
value: [
{
type: "close"
}
],
}
};
/**
* Static hash of buttons that have all their properties defined, so that they can be used by supplying a value to the "type" property in the button attribute.
* The "close" button is currently defined in this object (sets the [x] in the top-right of the header).
*
* @property DEFAULT_BUTTONS
* @static
* @type object
*/
"close": {
action : function (e) {
e.preventDefault();
this.hide();
}
}
};
/**
* <p>Object used to specify the HTML template for the buttons. Consists of the following properties</p>
* <p>defaultTemplate: Specifies the HTML markup for each button</p>
* <p>wrapper: Specifies the HTML markup for the wrapper, which is a DOM Element that wraps around all the buttons</p>
*
* @property TEMPLATES
* @static
* @type object
*/
};
// *** Instance Members *** //
_hdBtnNode : null,
_ftBtnNode : null,
_buttonsArray : null,
_uiHandlesButtons: null,
destructor: function () {
this._detachEventsFromButtons();
},
/**
* Creates the button nodes based on whether they are defined as being in the header or footer
* <p>
* This method is invoked after renderUI is invoked for the Widget class
* using YUI's aop infrastructure.
* </p>
* @method _renderUIButtons
* @protected
*/
_renderUIButtons : function () {
this._buttonsArray = [];
this._removeButtonNode(true,true);
this._createButtons();
},
/**
* Binds event listeners to listen for events on the buttons.
* <p>
* This method is invoked after bindUI is invoked for the Widget class
* using YUI's aop infrastructure.
* </p>
* @method _bindUIButtons
* @protected
*/
_bindUIButtons : function () {
var self = this;
this._uiHandlesButtons = [];
Y.each(this._buttonsArray, function(o) {
});
},
/**
* Binds event listeners to listen for events on the buttons
* <p>
* This method is invoked after bindUI is invoked for the Widget class
* using YUI's aop infrastructure.
* </p>
* @method _bindUIButtons
* @protected
*/
_syncUIButtons : function () {
if (this._hdBtnNode.hasChildNodes()) {
}
if (this._ftBtnNode.hasChildNodes()) {
}
},
/**
* Add a button to the existing set of buttons
*
* @method _bindUIButtons
* @param button {object} The object literal consisting of the button's properties and callback function
* @public
*/
},
/**
* Iterate through the buttons attribute, create Y.Node instances of each button and append them to either the _hdBtnNode or _ftBtnNode nodes.
*
* @method _createButtons
* @protected
*/
_createButtons: function () {
hdBtnNode = this._hdBtnNode,
ftBtnNode = this._ftBtnNode,
buttonsArray = this._buttonsArray;
// Make sure we actually have some Object.
// Check to see if the `type` property is defined,
// and if a button corresponds to that type.
}
});
// Create Y.Node instance of button.
// Add any classes to the Node.
// Push the Node onto the Array of all the buttons.
// Append button to wrapper Node.
case header:
break;
case footer:
break;
default:
}
});
return true;
},
/**
* Attaches the event listeners to execute the callback function after button click.
*
* @method _attachEventsToButton
* @protected
*/
_attachEventsToButton : function (o) {
},
/**
* Attaches the event listeners to execute the callback function after button click.
*
* @method _attachEventsToButton
* @protected
*/
_afterButtonsChange : function (e) {
this._detachEventsFromButtons();
this._renderUIButtons();
this._bindUIButtons();
this._syncUIButtons();
},
/**
* Removes the header and footer button wrappers from the DOM if they exist
*
* @method _removeButtonNode
* @param fromHd {bool} Whether to remove the header button wrapper
* @param fromFt {bool} Whether to remove the footer button wrapper
* @protected
*/
this._hdBtnNode.remove();
this._hdBtnNode = null;
}
this._ftBtnNode.remove();
this._ftBtnNode = null;
}
},
/**
* Detaches all event listeners from the buttons
*
* @method _detachEventsFromButtons
* @protected
*/
_detachEventsFromButtons : function () {
Y.each(this._uiHandlesButtons, function(h){
h.detach();
});
this._uiHandlesButtons = [];
}
};