YUI recommends YUI 3.
YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.
/**
* This implementation takes either a string or object for the
* oData argument. If is it a string, we will use it for the display
* of this node (and it can contain any html code). If the parameter
* is an object, we look for a parameter called "html" that will be
* used for this node's display.
* @namespace YAHOO.widget
* @class HTMLNode
* @extends YAHOO.widget.Node
* @constructor
* @param oData {object} a string or object containing the data that will
* be used to render this node.
* Valid configuration properties:
* <dl>
* <dt>html</dt>
* <dd>The html content for the node</dd>
* </dl>
* All other attributes are made available in noderef.data, which
* can be used to store custom attributes. TreeView.getNode(s)ByProperty
* can be used to retreive a node by one of the attributes.
* @param oParent {YAHOO.widget.Node} this node's parent node
* @param expanded {boolean} the initial expanded/collapsed state
* @param hasIcon {boolean} specifies whether or not leaf nodes should
* be rendered with or without a horizontal line line icon. If the icon
* is not displayed, the content fills the space it would have occupied.
* This option operates independently of the leaf node presentation logic
* for dynamic nodes.
*/
YAHOO.widget.HTMLNode = function(oData, oParent, expanded, hasIcon) {
if (oData) {
this.init(oData, oParent, expanded);
this.initContent(oData, hasIcon);
}
};
YAHOO.extend(YAHOO.widget.HTMLNode, YAHOO.widget.Node, {
/**
* The CSS class for the html content container. Defaults to ygtvhtml, but
* can be overridden to provide a custom presentation for a specific node.
* @property contentStyle
* @type string
*/
contentStyle: "ygtvhtml",
/**
* The generated id that will contain the data passed in by the implementer.
* @property contentElId
* @type string
*/
contentElId: null,
/**
* The HTML content to use for this node's display
* @property html
* @type string
*/
html: null,
/**
* Sets up the node label
* @property initContent
* @param oData {object} An html string or object containing an html property
* @param hasIcon {boolean} determines if the node will be rendered with an
* icon or not
*/
initContent: function(oData, hasIcon) {
this.setHtml(oData);
this.contentElId = "ygtvcontentel" + this.index;
this.hasIcon = hasIcon;
this.logger = new YAHOO.widget.LogWriter(this.toString());
},
/**
* Synchronizes the node.data, node.html, and the node's content
* @property setHtml
* @param o {object} An html string or object containing an html property
*/
setHtml: function(o) {
this.data = o;
this.html = (typeof o === "string") ? o : o.html;
var el = this.getContentEl();
if (el) {
el.innerHTML = this.html;
}
},
/**
* 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() {
this.logger.log("Generating html");
var sb = [];
sb[sb.length] = '<table border="0" cellpadding="0" cellspacing="0">';
sb[sb.length] = '<tr>';
for (var i=0;i<this.depth;++i) {
//sb[sb.length] = '<td class="' + this.getDepthStyle(i) + '"> </td>';
sb[sb.length] = '<td class="' + this.getDepthStyle(i) + '"><div class="ygtvspacer"></div></td>';
}
if (this.hasIcon) {
sb[sb.length] = '<td';
sb[sb.length] = ' id="' + this.getToggleElId() + '"';
sb[sb.length] = ' class="' + this.getStyle() + '"';
sb[sb.length] = ' onclick="javascript:' + this.getToggleLink() + '"';
if (this.hasChildren(true)) {
sb[sb.length] = ' onmouseover="this.className=';
sb[sb.length] = 'YAHOO.widget.TreeView.getNode(\'';
sb[sb.length] = this.tree.id + '\',' + this.index + ').getHoverStyle()"';
sb[sb.length] = ' onmouseout="this.className=';
sb[sb.length] = 'YAHOO.widget.TreeView.getNode(\'';
sb[sb.length] = this.tree.id + '\',' + this.index + ').getStyle()"';
}
//sb[sb.length] = '> </td>';
sb[sb.length] = '><div class="ygtvspacer"></div></td>';
}
sb[sb.length] = '<td';
sb[sb.length] = ' id="' + this.contentElId + '"';
sb[sb.length] = ' class="' + this.contentStyle + '"';
sb[sb.length] = (this.nowrap) ? ' nowrap="nowrap" ' : '';
sb[sb.length] = ' >';
sb[sb.length] = this.html;
sb[sb.length] = '</td>';
sb[sb.length] = '</tr>';
sb[sb.length] = '</table>';
return sb.join("");
},
toString: function() {
return "HTMLNode (" + this.index + ")";
}
});