From e209f2889826df2508cfe79337f14d906e3c1c30 Mon Sep 17 00:00:00 2001 From: Gavin Cornwell Date: Mon, 11 Dec 2006 13:57:34 +0000 Subject: [PATCH] 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 --- source/web/css/yahoo-tree.css | 110 +---------- source/web/images/icons/arrow_closed.gif | Bin 193 -> 168 bytes source/web/images/icons/arrow_open.gif | Bin 192 -> 168 bytes source/web/scripts/ajax/yahoo-tree.js | 224 +++++++++++++++++++++-- 4 files changed, 207 insertions(+), 127 deletions(-) diff --git a/source/web/css/yahoo-tree.css b/source/web/css/yahoo-tree.css index 0250eededb..9993988047 100644 --- a/source/web/css/yahoo-tree.css +++ b/source/web/css/yahoo-tree.css @@ -1,99 +1,3 @@ -/* first or middle sibling, no children */ -.ygtvtn -{ - width:16px; height:18px; - cursor:pointer ; - background: url(../images/icons/arrow_closed.gif) 0 0 no-repeat; -} - -/* first or middle sibling, collapsable */ -.ygtvtm -{ - width:16px; height:18px; - cursor:pointer ; - background: url(../images/icons/arrow_open.gif) 0 0 no-repeat; -} - -/* first or middle sibling, collapsable, hover */ -.ygtvtmh -{ - width:16px; height:18px; - cursor:pointer ; - background: url(../images/icons/arrow_open.gif) 0 0 no-repeat; -} - -/* first or middle sibling, expandable */ -.ygtvtp -{ - width:16px; height:18px; - cursor:pointer ; - background: url(../images/icons/arrow_closed.gif) 0 0 no-repeat; -} - -/* first or middle sibling, expandable, hover */ -.ygtvtph -{ - width:16px; height:18px; - cursor:pointer ; - background: url(../images/icons/arrow_closed.gif) 0 0 no-repeat; -} - -/* last sibling, no children */ -.ygtvln -{ - width:16px; height:18px; - cursor:pointer ; - background: url(../images/icons/arrow_closed.gif) 0 0 no-repeat; -} - -/* Last sibling, collapsable */ -.ygtvlm -{ - width:16px; height:18px; - cursor:pointer ; - background: url(../images/icons/arrow_open.gif) 0 0 no-repeat; -} - -/* Last sibling, collapsable, hover */ -.ygtvlmh -{ - width:16px; height:18px; - cursor:pointer ; - background: url(../images/icons/arrow_open.gif) 0 0 no-repeat; -} - -/* Last sibling, expandable */ -.ygtvlp -{ - width:16px; height:18px; - cursor:pointer ; - background: url(../images/icons/arrow_closed.gif) 0 0 no-repeat; -} - -/* Last sibling, expandable, hover */ -.ygtvlph -{ - width:16px; height:18px; cursor:pointer ; - background: url(../images/icons/arrow_closed.gif) 0 0 no-repeat; -} - -/* Loading icon */ -.ygtvloading -{ - width:16px; height:18px; - background: url(../scripts/ajax/yahoo/treeview/assets/loading.gif) 0 0 no-repeat; -} - -/* the style for the empty cells that are used for rendering the depth -* of the node */ -.ygtvdepthcell -{ - width:16px; height:18px; - background: url() 0 0 no-repeat; -} - -.ygtvblankdepthcell { width:16px; height:22px; } - /* the style of the div around each node */ .ygtvitem { } @@ -101,14 +5,6 @@ .ygtvchildren { } * html .ygtvchildren { height:2%; } -/* the style of the text label in ygTextNode */ -.ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover -{ - margin-left:2px; - text-decoration: none; - background-color: white; -} - .ygtvspacer { height: 10px; @@ -116,17 +12,17 @@ margin: 2px; } -.ygtvhtml +.treeNode { cursor: pointer; } -.alflabel +.treeNodeLabel { white-space: nowrap; } -.alflabelselected +.treeNodeSelected { background-color: #d3e6fe; } diff --git a/source/web/images/icons/arrow_closed.gif b/source/web/images/icons/arrow_closed.gif index 655a4d6a08ce70a2d3d9c16fd66b153614368b91..4bdc6b6fa1e255fba347d6f8a8087ad2d35cab8f 100644 GIT binary patch delta 77 zcmX@exPp<>-P6s&JW+r_Y$9ihwGIOi0ND%-thx$neJPpqGFGk2dA;pgbzq*U>sl5| f?%yU|&WT4o1Xy&AFkCQViD{W$;-P6s&JW+r_Y$9ihwGIOi0ND%-thx(S`%*IJWvp74^Ln3wcc`eTa=c3falGGH1^30M9g^-L?1$R&100tcfAOI?2 zU|`i*pxT#`IWJ??x}4Yhv_nI$uvmI8^166ggM+zyqJ;q4x+Vn%<^%ICtSE`%Vq~xe E0QeyvmH+?% diff --git a/source/web/scripts/ajax/yahoo-tree.js b/source/web/scripts/ajax/yahoo-tree.js index 6f552265f4..f1054b9d3d 100644 --- a/source/web/scripts/ajax/yahoo-tree.js +++ b/source/web/scripts/ajax/yahoo-tree.js @@ -96,26 +96,8 @@ function parseChildData(parentNode, data) */ function createYahooTreeNode(parentNode, nodeRef, name, icon, expanded, selected) { - var nodeHtml = "
" + name + "
"; - - 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] = '
0) + { + var depthSize = this.indentSize * this.depth; + sb[sb.length] = ' style="margin-left: ' + depthSize + 'px;"'; + } + + sb[sb.length] = '>'; + sb[sb.length] = ''; + + // render the toggle image (take into account this.expanded) + sb[sb.length] = ''; + + // close off the containing row, table and div + sb[sb.length] = '
'; + + 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 + ")"; + } +}); + + +