Menu
▾
▴
[BorgWorX-Commits] r390 - trunk/Web/Controls/client_scripts/TreeView
|
From: <bor...@li...> - 2006-02-06 19:50:10
|
Author: gst...@bo...
Date: 2006-02-06 20:49:51 +0100 (Mon, 06 Feb 2006)
New Revision: 390
Modified:
trunk/Web/Controls/client_scripts/TreeView/TreeNode.js
trunk/Web/Controls/client_scripts/TreeView/TreeViewKernel.js
Log:
treeview:
* forkimage renamed to plusMinus (was: confusing)
* some mouse events not attached when not needed (DnD events)
* margin, padding syntax 'div.style.margin = "0px 0px 0px 0px"' replaced with 'div.style.margin = "0px"' for performance in firefox (no joke)
* smaller performance gains
Modified: trunk/Web/Controls/client_scripts/TreeView/TreeNode.js
===================================================================
--- trunk/Web/Controls/client_scripts/TreeView/TreeNode.js 2006-02-06 17:41:46 UTC (rev 389)
+++ trunk/Web/Controls/client_scripts/TreeView/TreeNode.js 2006-02-06 19:49:51 UTC (rev 390)
@@ -34,6 +34,7 @@
var _value = ""; // Allow value assignement
var _selected = false; // is this node selected
+ var _hovered = false; // is this node hovered
var _folderIconFile = null;
@@ -98,7 +99,18 @@
this.GetSelected = function() { return _selected; }
this.SetSelected = function( newSelected ) {
_selected = newSelected;
+
+ self.UpdateCssClass();
}
+
+ // is node hovered
+ this.IsHovered = function() { return _hovered; }
+ this.GetHovered = function() { return _hovered; }
+ this.SetHovered = function( newHovered ) {
+ _hovered = newHovered;
+
+ self.UpdateCssClass();
+ }
////// Styles
// CssClass
@@ -206,9 +218,10 @@
FillIndentsContainer( indentsContainer );
// append: fork to nodecontainer
- var forkImageContainer = GetForkImageContainer();
- nodeContainer.appendChild( forkImageContainer );
- FillForkImageContainer( forkImageContainer );
+ var pmImageContainer = GetPlusMinusImageContainer();
+ nodeContainer.appendChild( pmImageContainer );
+ FillPlusMinusImageContainer( pmImageContainer );
+ self.UpdatePlusMinusImage();
// append: content to nodecontainer
var contentContainer = GetContentContainer();
@@ -227,11 +240,8 @@
if ( self.IsOpen() || self.IsRootFolder() ) {
self.Expand( true );
- } else {
- self.Collapse();
- }
+ }
- self.UpdateNode();
}
this.Clear = function() {
@@ -256,8 +266,8 @@
ClearTextSpan();
ClearContentContainer();
- DetachForkImageContainerEvents();
- ClearForkImageContainer();
+ DetachPlusMinusImageContainerEvents();
+ ClearPlusMinusImageContainer();
ClearIndentsContainer();
@@ -410,19 +420,19 @@
if ( prog == null ) {
_origCaption = self.GetCaption();
self.SetCaption("Loading ...");
- UpdateForkIcon();
+ self.UpdatePlusMinusImage();
window.setTimeout( DynLoadSubnodes, 0 ); // Use settiomeout to allow gui update e.g. showing Loading... message
return;
} else {
self.SetOpen( false );
- UpdateForkIcon();
+ self.UpdatePlusMinusImage();
}
} else {
CreateChildNodes();
self.SetOpen( true );
self.GetSubNodesContainer().style.display = "block";
- UpdateForkIcon();
+ self.UpdatePlusMinusImage();
}
}
@@ -472,8 +482,10 @@
if ( div == null ) {
div = document.createElement("div");
- div.style.margin = "0px 0px 0px 0px";
- div.style.padding = "0px 0px 0px 0px";
+ /*div.style.margin = "0px 0px 0px 0px";
+ div.style.padding = "0px 0px 0px 0px";*/
+ div.style.margin = "0px";
+ div.style.padding = "0px";
// workaround for IE-expanding box-problem
if (_toolkit.GetBrowser() != "IE") {
@@ -496,9 +508,11 @@
if ( div == null ) {
div = document.createElement("div");
div.style.height = _nodeHeight + "px";
- div.style.margin = "0px 0px 0px 0px";
- div.style.padding = "0px 0px 0px 0px";
-
+ /*div.style.margin = "0px 0px 0px 0px";
+ div.style.padding = "0px 0px 0px 0px";*/
+ div.style.margin = "0px";
+ div.style.padding = "0px";
+
// workaround for IE-expanding box-problem
if (_toolkit.GetBrowser() == "IE") {
div.style.overflow = "hidden";
@@ -520,10 +534,10 @@
var div = document.getElementById( self.GetId() + _mySubNodesContainerID );
if ( div == null ) {
div = document.createElement("div");
- //div.style.border = "solid 1px #0000FF";
+
div.style.margin = "0px 0px 0px 0px";
div.style.padding = "0px 0px 0px 0px";
-
+
// workaround for IE-expanding box-problem
if (_toolkit.GetBrowser() != "IE") {
div.style.whiteSpace = "nowrap";
@@ -564,18 +578,23 @@
contentContainer = document.createElement("span");
contentContainer.id = self.GetId() + _myContentSpanID;
- contentContainer.style.margin = "0px 0px 0px 0px";
- contentContainer.style.padding = "0px 0px 0px 0px";
+/* contentContainer.style.margin = "0px 0px 0px 0px";
+ contentContainer.style.padding = "0px 0px 0px 0px";*/
+ contentContainer.style.margin = "0px";
+ contentContainer.style.padding = "0px";
- // events
+ // mouse events
_toolkit.AddEvent( contentContainer, 'mouseover', OnMouseOverContent );
_toolkit.AddEvent( contentContainer, 'mouseout', OnMouseOutContent );
- _toolkit.AddEvent( contentContainer, 'mousedown', OnMouseDownOverContent );
- _toolkit.AddEvent( contentContainer, 'mousemove', OnMouseMoveOverContent );
- _toolkit.AddEvent( contentContainer, 'mouseup', OnMouseUpOverContent );
_toolkit.AddEvent( contentContainer, 'click', OnClickOverContent );
+
+ // these events only needed for DnD
+ if ( self.GetTreeView().GetDragAndDropEnabled() ) {
+ _toolkit.AddEvent( contentContainer, 'mousedown', OnMouseDownOverContent );
+ _toolkit.AddEvent( contentContainer, 'mouseup', OnMouseUpOverContent );
+ _toolkit.AddEvent( contentContainer, 'mousemove', OnMouseMoveOverContent );
+ }
-
// workaround for IE-expanding box-problem
if ( _toolkit.GetBrowser() != "IE") {
contentContainer.style.whiteSpace = "nowrap";
@@ -593,6 +612,7 @@
var textSpan = GetTextSpan();
FillTextSpan( textSpan );
+
contentContainer.appendChild( textSpan );
}
@@ -606,10 +626,15 @@
if ( contentContainer != null ) {
_toolkit.RemoveEvent( contentContainer, 'mouseover', OnMouseOverContent );
_toolkit.RemoveEvent( contentContainer, 'mouseout', OnMouseOutContent );
- _toolkit.RemoveEvent( contentContainer, 'mousedown', OnMouseDownOverContent );
- _toolkit.RemoveEvent( contentContainer, 'mousemove', OnMouseMoveOverContent );
- _toolkit.RemoveEvent( contentContainer, 'mouseup', OnMouseUpOverContent );
_toolkit.RemoveEvent( contentContainer, 'click', OnClickOverContent );
+
+ // these events only needed for DnD
+ if ( self.GetTreeView().GetDragAndDropEnabled() ) {
+ _toolkit.RemoveEvent( contentContainer, 'mousedown', OnMouseDownOverContent );
+ _toolkit.RemoveEvent( contentContainer, 'mouseup', OnMouseUpOverContent );
+ _toolkit.RemoveEvent( contentContainer, 'mousemove', OnMouseMoveOverContent );
+ }
+
}
}
@@ -663,6 +688,7 @@
container = document.createElement("img");
container.style.margin = "0px 0px 0px 0px";
container.style.padding = "0px 0px 0px 0px";
+
container.id = self.GetId() + _myImageID;
if ( self.GetIconFile() != null ) {
@@ -716,8 +742,12 @@
if ( div == null ) {
var level = self.GetLevel();
div = document.createElement("div");
- div.style.margin = "0px 0px 0px 0px";
- div.style.padding = "0px 0px 0px 0px";
+
+ //div.style.margin = "0px 0px 0px 0px"; *** replaced by the two lines below for performance
+ //div.style.padding = "0px 0px 0px 0px";
+ div.style.margin = "0px";
+ div.style.padding = "0px";
+
var summWidth = 0
if ( level > 0 ) {
summWidth = (level-1) * _nodeHeight;
@@ -747,8 +777,11 @@
} else {
img = document.createElement("img");
img.border = 0;
- img.style.margin = "0px 0px 0px 0px";
- img.style.padding = "0px 0px 0px 0px";
+ /*img.style.margin = "0px 0px 0px 0px";
+ img.style.padding = "0px 0px 0px 0px";*/
+ img.style.margin = "0px";
+ img.style.padding = "0px";
+
img.style.width = "19px";
img.style.height = "100%";
img.width = "19px";
@@ -772,15 +805,18 @@
/*
* Get/Create empty fork icon image div container
*/
- function GetForkImageContainer() {
+ function GetPlusMinusImageContainer() {
var div = document.getElementById( self.GetId() + _myPlusMinusID );
if ( div == null ) {
var div = document.createElement("div");
+
+ div.id = self.GetId() + _myPlusMinusID;
- div.style.margin = "0px 0px 0px 0px";
- div.style.padding = "0px 0px 0px 0px";
- div.id = self.GetId() + _myPlusMinusID;
+ /* div.style.margin = "0px 0px 0px 0px";
+ div.style.padding = "0px 0px 0px 0px";*/
+ div.style.margin = "0px";
+ div.style.padding = "0px";
div.style.styleFloat = "left";
div.style.cssFloat = "left";
div.style.height = _nodeHeight + "px";
@@ -794,19 +830,19 @@
/*
* Fill fork Icon image container
*/
- function FillForkImageContainer( forkImageContainer ) {
- forkImageContainer.appendChild( document.createElement( "img" ) );
+ function FillPlusMinusImageContainer( pmImageContainer ) {
+ pmImageContainer.appendChild( document.createElement( "img" ) );
}
- function ClearForkImageContainer() {
+ function ClearPlusMinusImageContainer() {
EmptyContainer( document.getElementById( self.GetId() + _myPlusMinusID ) );
}
- function DetachForkImageContainerEvents() {
- var forkImageContainer = document.getElementById( self.GetId() + _myPlusMinusID );
+ function DetachPlusMinusImageContainerEvents() {
+ var pmImageContainer = document.getElementById( self.GetId() + _myPlusMinusID );
- if ( forkImageContainer != null ) {
- _toolkit.RemoveEvent( forkImageContainer, 'click', OnPlusMinusIconClicked );
+ if ( pmImageContainer != null ) {
+ _toolkit.RemoveEvent( pmImageContainer, 'click', OnPlusMinusIconClicked );
}
}
@@ -838,7 +874,7 @@
*/
this.UpdateNode = function( recursive ) {
UpdateCaption();
- UpdateForkIcon();
+ self.UpdatePlusMinusImage();
self.UpdateCssClass();
if ( recursive && _createdChildNodes ) {
@@ -862,12 +898,12 @@
/*
* Update the fork Icon e.g. +/- sign
*/
- function UpdateForkIcon() {
- var forkImageContainer = GetForkImageContainer();
+ this.UpdatePlusMinusImage = function() {
+ var pmImageContainer = GetPlusMinusImageContainer();
var currPlusMinusIcon = GetCurrPlusMinusIcon();
- forkImageContainer.firstChild.src = currPlusMinusIcon[1];
- forkImageContainer.style.backgroundImage = "url( " + currPlusMinusIcon[0] + ")";
+ pmImageContainer.firstChild.src = currPlusMinusIcon[1];
+ pmImageContainer.style.backgroundImage = "url( " + currPlusMinusIcon[0] + ")";
if ( currPlusMinusIcon[2] ) {
var pos = ""
@@ -878,10 +914,10 @@
intend--;
pos = "0px -" + intend + "px";
}
- forkImageContainer.style.backgroundPosition = pos;
- forkImageContainer.style.backgroundRepeat = "no-repeat";
+ pmImageContainer.style.backgroundPosition = pos;
+ pmImageContainer.style.backgroundRepeat = "no-repeat";
} else {
- forkImageContainer.style.backgroundRepeat = "repeat-y";
+ pmImageContainer.style.backgroundRepeat = "repeat-y";
}
}
@@ -896,12 +932,20 @@
return;
}
- if ( ! self.IsSelected() /*&& self.GetTreeView().GetSelectedNode() != self*/ ) {
+ //if ( ! self.IsSelected() /*&& self.GetTreeView().GetSelectedNode() != self*/ ) {
+ //} lse
+ if ( self.IsSelected() ) {
+ if ( self.GetSelectedCssClass() != null ) {
+ textSpan.className = self.GetSelectedCssClass();
+ }
+ } else if ( self.IsHovered() ) {
+ if ( self.GetHoverCssClass() != null ) {
+ GetTextSpan().className = self.GetHoverCssClass();
+ }
+ } else {
if ( self.GetCssClass() != null ) {
textSpan.className = self.GetCssClass();
- }
- } else if ( self.GetSelectedCssClass() != null ) {
- textSpan.className = self.GetSelectedCssClass();
+ }
}
}
@@ -1315,15 +1359,14 @@
/*** Event Handles ***/
function OnMouseOverContent() {
- if ( self.GetHoverCssClass() != null ) {
- GetTextSpan().className = self.GetHoverCssClass();
- }
+ self.GetTreeView().SetHoveredNode( self );
}
- function OnMouseOutContent() {
- self.UpdateCssClass();
+ function OnMouseOutContent() {
+ self.GetTreeView().SetHoveredNode( null );
}
+
// content got clicked
function OnClickOverContent ( e ) {
if ( ! e ) var e = window.event;
Modified: trunk/Web/Controls/client_scripts/TreeView/TreeViewKernel.js
===================================================================
--- trunk/Web/Controls/client_scripts/TreeView/TreeViewKernel.js 2006-02-06 17:41:46 UTC (rev 389)
+++ trunk/Web/Controls/client_scripts/TreeView/TreeViewKernel.js 2006-02-06 19:49:51 UTC (rev 390)
@@ -20,6 +20,7 @@
var _linesDir = "Images/TreeView/"; // with final slash; e.g. "Images/"
var _singleSelection = true;
var _selectedNode = null;
+ var _hoveredNode = null;
var _dataBindMethod = null;
var _postDataDindSelectedValue = null; // Value to select after databind returned
var _containerID = containerID;
@@ -270,24 +271,34 @@
}
this.SetSelectedNode = function( node ) {
-
- // remove old selection, if there is one
- if ( _selectedNode != null ) {
- if ( __self.GetSingleSelection() ) {
- UpdateSelection( _selectedNode, node );
+ if ( node != null ) { // given param node should never be null, but given the case ..
+
+ if ( __self.GetSingleSelection() && _selectedNode != null ) { // deselect old
+ _selectedNode.SetSelected( false );
}
- }
-
- _selectedNode = node; // set new selection
+
+ node.SetSelected( true ); // select new one
+ _selectedNode = node;
- // execute select script hooks
- if ( node != null ) {
+ // execute select script hooks
for( var i = 0; i < __self.GetSelectScriptHooks().length; i++ ) {
eval( __self.GetSelectScriptHooks()[i] );
}
}
}
+ this.SetHoveredNode = function( node ) {
+ if ( node != null ) {
+ node.SetHovered( true ); // hover new one
+ }
+
+ if ( _hoveredNode != null ) { // de-"hover" old
+ _hoveredNode.SetHovered( false );
+ }
+
+ _hoveredNode = node;
+ }
+
this.AddDataBindScriptHook = function( hook ) {
_dataBindScriptHooks[_dataBindScriptHooks.length] = hook;
}
@@ -305,15 +316,14 @@
/*** Private Stuff ***/
function UpdateSelection ( currNode, selectedNode ) {
- if ( currNode != selectedNode ) {
+ if ( currNode != null && currNode != selectedNode ) {
+ currNode.
+ currNode.UpdateCssClass();
+ }
- currNode.SetSelected( false ); // deselect old
- currNode.UpdateCssClass();
-
- selectedNode.SetSelected( true ); // select new
- selectedNode.UpdateCssClass();
-
- }
+ selectedNode.SetSelected( true ); // select new
+ selectedNode.UpdateCssClass();
+
}
/*** End Private ***/
|
