mirror of
https://github.com/Alfresco/alfresco-community-repo.git
synced 2025-08-14 17:58:59 +00:00
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
@@ -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;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 193 B After Width: | Height: | Size: 168 B |
Binary file not shown.
|
Before Width: | Height: | Size: 192 B After Width: | Height: | Size: 168 B |
224
source/web/scripts/ajax/yahoo-tree.js
vendored
224
source/web/scripts/ajax/yahoo-tree.js
vendored
@@ -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] = '"> ' + 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 + ")";
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user