widget-buttons-debug.js revision 2cbd03cf7d25ed7f8942ecaf21a4b58d7f41ff11
/**
*
* @module widget-buttons
* @author tilomitra
*/
var BOUNDING_BOX = "boundingBox",
VISIBLE = "visible",
CLICK = "click",
RENDER_UI = "renderUI",
BIND_UI = "bindUI",
SYNC_UI = "syncUI",
BTN = "button",
BTN_CONTENT = "button-content",
BTN_WRAPPER = "button-wrapper",
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 property used to define the default attribute
* configuration introduced by WidgetButtons.
*
* @property WidgetButtons.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>
*/
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 WidgetButtons.DEFAULT_BUTTONS
* @static
* @type object
*/
"close": {
value:'<div style="background:url(../../assets/skins/sam/sprite_icons.gif) no-repeat; width:13px; height:13px; background-position: 0 2px;"></div>',
action: function(e) {
e.preventDefault();
this.hide();
},
}
};
/**
* Static hash of default class names used for the inner <span> ("content"), the <a> ("button"), and the outer span ("wrapper")
*
* @property WidgetButtons.BUTTON_CLASS_NAMES
* @static
* @type object
*/
};
/**
* <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 WidgetButtons.TEMPLATES
* @static
* @type object
*/
defaultTemplate: "<a href={href} class='"+WidgetButtons.BUTTON_CLASS_NAMES.button+"'><span class='"+WidgetButtons.BUTTON_CLASS_NAMES.content+"'>{value}</a>",
};
// *** Instance Members *** //
_hdBtnNode : null,
_ftBtnNode : null,
_buttonsArray : [],
_uiHandlesButtons : [],
/**
* 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._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;
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 () {
template = '',
html = '',
node,
self = this,
//Check to see if the type property is defined, and if a button corresponds to that type.
}
});
//create Y.Node instance of button
//push the node onto an array of all the buttons
//append it to the wrapper node
}
}
else {
Y.log("Warning: One of the buttons did not have the specified sections property, and was not attached to the appropriate section.");
}
});
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 = [];
}
}