Replaced default tree node implementation with our own

git-svn-id: https://svn.alfresco.com/repos/alfresco-enterprise/alfresco/HEAD/root@4567 c4b6b30b-aa2e-2d43-bbcb-ca4b014f7261
This commit is contained in:
Gavin Cornwell
2006-12-11 13:57:34 +00:00
parent b74ed71045
commit e209f28898
4 changed files with 207 additions and 127 deletions

View File

@@ -96,26 +96,8 @@ function parseChildData(parentNode, data)
*/
function createYahooTreeNode(parentNode, nodeRef, name, icon, expanded, selected)
{
var nodeHtml = "<table><tr";
// add the node selected handler is provided
if (nodeSelectedHandler != null)
{
nodeHtml += " onclick=" + nodeSelectedHandler + "('" + nodeRef + "');"
}
nodeHtml += "><td><img src='" + WEBAPP_CONTEXT + "/images/icons/" + icon +
"-16.gif'/></td><td class='alflabel";
// add selected class to label if node is selected
if (selected)
{
nodeHtml += " alflabelselected";
}
nodeHtml += "'>" + name + "</td></tr></table>";
return new YAHOO.widget.HTMLNode({ html: nodeHtml, nodeRef: nodeRef, icon: icon }, parentNode, expanded, 1);
var nodeData = { label: name, nodeRef: nodeRef, icon: icon, selectedHandler: nodeSelectedHandler};
return new YAHOO.widget.AlfrescoNode(nodeData, parentNode, expanded, selected);
}
/**
@@ -155,4 +137,206 @@ function informOfCollapse(node)
, null);
}
/**
* Extension of the default Node object. This node always shows the
* expand/collapse arrow and an icon for the node and
*
* @namespace YAHOO.widget
* @class AlfrescoNode
* @extends YAHOO.widget.Node
* @constructor
* @param oData {object} an object containing the data that will
* be used to render this node
* @param oParent {YAHOO.widget.Node} this node's parent node
* @param expanded {boolean} the initial expanded/collapsed state
* @param selected {boolean} the initial selected state
*/
YAHOO.widget.AlfrescoNode = function(oData, oParent, expanded, selected)
{
if (oData)
{
this.init(oData, oParent, expanded);
this.initContent(oData, selected);
}
};
YAHOO.extend(YAHOO.widget.AlfrescoNode, YAHOO.widget.Node,
{
/**
* The label for the node
* @property label
* @type string
*/
label: null,
/**
* The nodeRef of the item this node is representing
* @property nodeRef
* @type string
*/
nodeRef: null,
/**
* The name of the icon to use for the node, defaults to 'space-icon-default'.
* @property icon
* @type string
*/
icon: "space-icon-default",
/**
* The number of pixels to indent a child node from it's parent.
* @property indentSize
* @type int
*/
indentSize: 14,
/**
* The name of the function to call when this node is clicked.
* @property selectedHandler
* @type string
*/
selectedHandler: null,
/**
* The node's selected state
* @property selected
* @type boolean
*/
selected: false,
/**
* The generated id that will contain the data passed in by the implementer.
* @property contentElId
* @type string
*/
contentElId: null,
/**
* Sets up the node label
* @property initContent
* @param {object} An object containing the nodeRef of the item, it's icon,
* the selectedHandler and the ident size to use for child nodes
*/
initContent: function(oData, selected)
{
this.label = oData.label;
this.nodeRef = oData.nodeRef;
this.selected = selected;
this.contentElId = "ygtvcontentel" + this.index;
if (oData.icon != null)
{
this.icon = oData.icon;
}
if (oData.indentSize != null)
{
this.indentSize = oData.indentSize;
}
if (oData.selectedHandler != null)
{
this.selectedHandler = oData.selectedHandler;
}
},
/**
* Returns the outer html element for this node's content
* @method getContentEl
* @return {HTMLElement} the element
*/
getContentEl: function()
{
return document.getElementById(this.contentElId);
},
// overrides YAHOO.widget.Node
getNodeHtml: function()
{
var sb = [];
sb[sb.length] = '<div class="treeNode"';
// calculate the margin required depending on the depth of this node
if (this.depth > 0)
{
var depthSize = this.indentSize * this.depth;
sb[sb.length] = ' style="margin-left: ' + depthSize + 'px;"';
}
sb[sb.length] = '>';
sb[sb.length] = '<table cellpadding="0" cellspacing="0" border="0"><tr>';
// render the toggle image (take into account this.expanded)
sb[sb.length] = '<td><img';
sb[sb.length] = ' id="' + this.getToggleElId() + '"';
sb[sb.length] = ' class="' + this.getStyle() + '"';
sb[sb.length] = ' onclick="javascript:' + this.getToggleLink() + '"';
sb[sb.length] = ' src="' + WEBAPP_CONTEXT + "/images/icons/arrow_";
if (this.expanded)
{
sb[sb.length] = 'open';
}
else
{
sb[sb.length] = 'closed';
}
sb[sb.length] = '.gif"></td>';
// render the icon (with node selected handler)
sb[sb.length] = '<td';
if (this.selectedHandler != null)
{
sb[sb.length] = ' onclick=' + this.selectedHandler + '("' + this.nodeRef + '");';
}
sb[sb.length] = '><img src="' + WEBAPP_CONTEXT + '/images/icons/' + this.icon + '-16.gif"';
sb[sb.length] = ' class="treeNodeIcon"></td>';
// render the label (with node selected handler) (apply selected css class if approp.) (add contentElId)
sb[sb.length] = '<td id="' + this.contentElId + '"';
if (this.selectedHandler != null)
{
sb[sb.length] = ' onclick=' + this.selectedHandler + '("' + this.nodeRef + '");';
}
sb[sb.length] = '><span class="treeNodeLabel';
if (this.selected)
{
sb[sb.length] = ' treeNodeSelected';
}
sb[sb.length] = '">&nbsp;' + this.label + '</span></td>';
// close off the containing row, table and div
sb[sb.length] = '</tr></table></div>';
return sb.join("");
},
updateIcon: function()
{
var el = this.getToggleEl();
if (el)
{
if (this.isLoading)
{
el.src = WEBAPP_CONTEXT + '/scripts/ajax/yahoo/treeview/assets/loading.gif';
}
else if (this.expanded)
{
el.src = WEBAPP_CONTEXT + '/images/icons/arrow_open.gif';
}
else
{
el.src = WEBAPP_CONTEXT + '/images/icons/arrow_closed.gif';
}
}
},
toString: function()
{
return "AlfrescoNode (" + this.index + ")";
}
});