[richfaces-svn-commits] JBoss Rich Faces SVN: r2298 - trunk/ui/tooltip/src/main/resources/org/richfaces/renderkit/html/scripts.
richfaces-svn-commits at lists.jboss.org
richfaces-svn-commits at lists.jboss.org
Thu Aug 16 11:23:03 EDT 2007
Author: dbiatenia
Date: 2007-08-16 11:23:03 -0400 (Thu, 16 Aug 2007)
New Revision: 2298
Modified:
trunk/ui/tooltip/src/main/resources/org/richfaces/renderkit/html/scripts/tooltip.js
Log:
tooltip positioning improvement
Modified: trunk/ui/tooltip/src/main/resources/org/richfaces/renderkit/html/scripts/tooltip.js
===================================================================
--- trunk/ui/tooltip/src/main/resources/org/richfaces/renderkit/html/scripts/tooltip.js 2007-08-16 15:06:42 UTC (rev 2297)
+++ trunk/ui/tooltip/src/main/resources/org/richfaces/renderkit/html/scripts/tooltip.js 2007-08-16 15:23:03 UTC (rev 2298)
@@ -140,18 +140,34 @@
this.hintParentElement = e.srcElement;
- this.setToolTipPosition(e);
if(this.mode == 'ajax'){
if(this.toolTipDefaultContent){
- this.toolTipContent.innerHTML = this.toolTipDefaultContent.innerHTML;
+ this.toolTipContent.innerHTML = this.toolTipDefaultContent.innerHTML;
+ /*
+ this.toolTip.style.visibility = "hidden";
+ this.toolTip.style.display = 'block';
+ */
+ this.setToolTipPosition(e);
}
var event = e;
var ajaxOptions = this.ajaxOptions;
if(this.clientAjaxParams){
+ if(e.clientX){
+ this.clientAjaxParams['clientX'] = e.clientX;
+ this.clientAjaxParams['clientY'] = e.clientY;
+ } else {
+ this.clientAjaxParams['event.pageX'] = e.pageX;
+ this.clientAjaxParams['event.pageY'] = e.pageY;
+
+ }
+
Object.extend(ajaxOptions['parameters'], this.clientAjaxParams);
}
eval(this.ajaxExecuteString);
+ } else {
+ this.setToolTipPosition(e);
}
+
if(this.delay > 0){
setTimeout('Richfaces.tooltips[\'' + this.parentId + '\'].displayDiv()', this.delay);
} else {
@@ -190,7 +206,9 @@
if (!fakeEvent) {
this.isMouseOvered = false;
+ this.toolTip.style.visibility = "hidden";
this.toolTip.style.display = "none";
+
if(this.iframe){
this.iframe.style.display = "none";
}
@@ -207,86 +225,168 @@
this.disabled = true;
},
+ /*
+ * we can pass here not event only, but also object {'clientX':XXX, 'clientY':XXX}
+ */
setToolTipPosition: function(e){
-// var offsets = Position.cumulativeOffset(this.toolTip.parentNode);
-
var toolTipX=0;
var toolTipY=0;
-
+
var x = Event.pointerX(e);
var y = Event.pointerY(e);
+//
+// var toolTipDim = Element.getDimensions(this.toolTip);
+// this.toolTipW = toolTipDim.width;
+// this.toolTipH = toolTipDim.height;
+
+ var elementDim = Richfaces.Position.getOffsetDimensions(this.toolTip);
- var toolTipDim = Element.getDimensions(this.toolTip);
- this.toolTipW = toolTipDim.width;
- this.toolTipH = toolTipDim.height;
-
var offsets = Position.cumulativeOffset(this.toolTip);
+
offsets[0] -= this.toolTip.offsetLeft || 0;
offsets[1] -= this.toolTip.offsetTop || 0;
toolTipX = x - offsets[0];
toolTipY = y - offsets[1];
- var windowDim = this.windowSize();
- if(this.direction == "top-left"){
+// var windowDim = this.windowSize();
+
+ var regExpression = /^(top|bottom)-(left|right)$/;
+ var match = this.direction.match(regExpression);
+
+ var horizontalDirection = match[2];
+ var verticalDirection = match[1];
+
+ this.prePosition({'x':toolTipX, 'y':toolTipY}, elementDim, horizontalDirection, verticalDirection, {'x':this.horizontalOffset, 'y':this.verticalOffset});
+
+ var coords = this.fitToolTip(e.clientX, e.clientY, {'x':toolTipX , 'y':toolTipY},elementDim, horizontalDirection, verticalDirection, {'x':this.horizontalOffset, 'y':this.verticalOffset});
+
+
+// if(this.direction == "top-left"){
+//
+// if(e.clientY - this.verticalOffset - this.toolTipH < 0){
+// toolTipY = toolTipY + this.verticalOffset;
+// } else {
+// toolTipY = toolTipY - this.verticalOffset - this.toolTipH;
+// }
+//
+// if(e.clientX - this.horizontalOffset - this.toolTipW < 0){
+// toolTipX = toolTipX + this.horizontalOffset;
+// } else {
+// toolTipX = toolTipX - this.horizontalOffset - this.toolTipW;
+// }
+//
+// } else if(this.direction == "bottom-left"){
+//
+// if(e.clientY + this.verticalOffset + this.toolTipH > windowDim[1]){
+// toolTipY = toolTipY - this.verticalOffset - this.toolTipH;
+// } else {
+// toolTipY = toolTipY + this.verticalOffset;
+// }
+//
+// if(e.clientX - this.horizontalOffset - this.toolTipW < 0){
+// toolTipX = toolTipX + this.horizontalOffset;
+// } else {
+// toolTipX = toolTipX - this.horizontalOffset - this.toolTipW;
+// }
+//
+// } else if(this.direction == "top-right"){
+//
+// if(e.clientY - this.verticalOffset - this.toolTipH < 0){
+// toolTipY = toolTipY + this.verticalOffset;
+// } else {
+// toolTipY = toolTipY - this.verticalOffset - this.toolTipH;
+// }
+// if(e.clientX + this.horizontalOffset + this.toolTipW > windowDim[0]){
+// toolTipX = toolTipX - this.horizontalOffset - this.toolTipW;
+// } else {
+// toolTipX = toolTipX + this.horizontalOffset;
+// }
+//
+// } else {
+//
+// if(e.clientY + this.verticalOffset + this.toolTipH > windowDim[1]){
+// toolTipY = toolTipY - this.verticalOffset - this.toolTipH;
+// } else {
+// toolTipY = toolTipY + this.verticalOffset;
+// }
+//
+// if(e.clientX + this.horizontalOffset + this.toolTipW > windowDim[0]){
+// toolTipX = toolTipX - this.horizontalOffset - this.toolTipW;
+// } else {
+// toolTipX = toolTipX + this.horizontalOffset;
+// }
+// }
+// Element.setStyle(this.toolTip, {"left": toolTipX + "px", "top": toolTipY + "px"});
+ Element.setStyle(this.toolTip, {"left": coords.x + "px", "top": coords.y + "px"});
+ },
+
+ prePosition: function(basePoint, elementDim, horizontalDirection, verticalDirection, offset){
+ var returnX, returnY;
+ returnX = horizontalDirection=='left' ? basePoint.x - elementDim.width - offset.x : basePoint.x += offset.x;
+ returnY = verticalDirection == 'top' ? basePoint.y - elementDim.height - offset.y : basePoint.y + offset.y;
+ return {'x':returnX, 'y':returnY};
+ },
+
+ fitToolTip: function(clientX, clientY,basePoint,elementDim, horizontalDirection, verticalDirection, offset){
+ var winDim = Richfaces.Position.getWindowDimensions();
+ var deltaLeft = clientX - offset.x - elementDim.width;
+ var deltaRight = winDim.width - (clientX + offset.x + elementDim.width);
+ var deltaTop = clientY - offset.y - elementDim.height;
+ var deltaBottom = winDim.height - (clientY + offset.y + elementDim.height);
- if(e.clientY - this.verticalOffset - this.toolTipH < 0){
- toolTipY = toolTipY + this.verticalOffset;
- } else {
- toolTipY = toolTipY - this.verticalOffset - this.toolTipH;
+ if(deltaLeft < 0){
+ // in this case new direction will be right
+ this.prePosition({'x':basePoint.x , 'y':basePoint.y},elementDim, 'right', verticalDirection, offset);
+ var newDeltaRight = winDim.width - (clientX + offset.x + elementDim.width);
+ if(newDeltaRight > 0){
+ horizontalDirection = 'right';
+ } else {
+ if(newDeltaRight > deltaLeft){
+ horizontalDirection = 'right';
+ }
+ }
+ } else if(deltaRight < 0){
+ // in this case new direction will be left
+ this.prePosition({'x':basePoint.x , 'y':basePoint.y},elementDim, 'left', verticalDirection, offset);
+ var newDeltaLeft = clientX - offset.x - elementDim.width;
+ if(newDeltaLeft > 0){
+ horizontalDirection = 'left';
+ } else {
+ if(newDeltaLeft > deltaRight){
+ horizontalDirection = 'left';
+ }
+ }
}
- if(e.clientX - this.horizontalOffset - this.toolTipW < 0){
- toolTipX = toolTipX + this.horizontalOffset;
- } else {
- toolTipX = toolTipX - this.horizontalOffset - this.toolTipW;
+ if(deltaTop < 0){
+ // in this case new direction will be right
+ this.prePosition({'x':basePoint.x , 'y':basePoint.y},elementDim, horizontalDirection, 'bottom', offset);
+ var newDeltaBottom = winDim.height - (clientY + offset.y + elementDim.height);
+ if(newDeltaBottom > 0){
+ verticalDirection = 'bottom';
+ } else {
+ if(newDeltaBottom > deltaTop){
+ verticalDirection = 'bottom';
+ }
+ }
+ } else if(deltaBottom < 0){
+ this.prePosition({'x':basePoint.x , 'y':basePoint.y},elementDim, horizontalDirection, 'top', offset);
+ var newDeltaTop = clientY - offset.y - elementDim.height;
+ if(newDeltaTop > 0){
+ verticalDirection = 'top';
+ } else {
+ if(newDeltaTop > deltaBottom){
+ verticalDirection = 'top';
+ }
+ }
}
-
- } else if(this.direction == "bottom-left"){
-
- if(e.clientY + this.verticalOffset + this.toolTipH > windowDim[1]){
- toolTipY = toolTipY - this.verticalOffset - this.toolTipH;
- } else {
- toolTipY = toolTipY + this.verticalOffset;
- }
-
- if(e.clientX - this.horizontalOffset - this.toolTipW < 0){
- toolTipX = toolTipX + this.horizontalOffset;
- } else {
- toolTipX = toolTipX - this.horizontalOffset - this.toolTipW;
- }
-
- } else if(this.direction == "top-right"){
-
- if(e.clientY - this.verticalOffset - this.toolTipH < 0){
- toolTipY = toolTipY + this.verticalOffset;
- } else {
- toolTipY = toolTipY - this.verticalOffset - this.toolTipH;
- }
- if(e.clientX + this.horizontalOffset + this.toolTipW > windowDim[0]){
- toolTipX = toolTipX - this.horizontalOffset - this.toolTipW;
- } else {
- toolTipX = toolTipX + this.horizontalOffset;
- }
-
- } else {
-
- if(e.clientY + this.verticalOffset + this.toolTipH > windowDim[1]){
- toolTipY = toolTipY - this.verticalOffset - this.toolTipH;
- } else {
- toolTipY = toolTipY + this.verticalOffset;
- }
-
- if(e.clientX + this.horizontalOffset + this.toolTipW > windowDim[0]){
- toolTipX = toolTipX - this.horizontalOffset - this.toolTipW;
- } else {
- toolTipX = toolTipX + this.horizontalOffset;
- }
- }
- Element.setStyle(this.toolTip, {"left": toolTipX + "px", "top": toolTipY + "px"});
+ var coords = this.prePosition({'x':basePoint.x , 'y':basePoint.y},elementDim, horizontalDirection, verticalDirection, offset);
+ return coords;
},
+
windowSize: function() {
var wWidth = 0, wHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
@@ -306,8 +406,41 @@
},
displayDiv: function(){
+ //this.toolTip.style.display = 'block';
if(this.isMouseOvered){
+
+ if(this.mode == 'ajax'){
+ if(this.clientAjaxParams){
+ /*
+ if(this.toolTipDefaultContent){
+ this.toolTip.style.visibility = "hidden";
+ this.toolTip.style.display = "block";
+ }
+ */
+ var xVarName;
+ if(this.clientAjaxParams.clientX){
+ xVarName = 'clientX';
+ } else {
+ xVarName = 'pageX';
+ }
+ // = this.clientAjaxParams.clientX || this.clientAjaxParams.pageX;
+ var yVarName;
+ if(this.clientAjaxParams.clientY) {
+ yVarName = 'clientY';
+ } else {
+ yVarName = 'pageY';
+ }
+ var obj = {};
+ obj[xVarName] = this.clientAjaxParams[xVarName];
+ obj[yVarName] = this.clientAjaxParams[yVarName];
+ //var xValue = this.clientAjaxParams[xVarName];
+ //var yValue = this.clientAjaxParams[yVarName];
+ this.setToolTipPosition(obj);
+ }
+ }
+
this.toolTip.style.display = "block";
+ this.toolTip.style.visibility = "visible";
if(this.iframe){
this.iframe.style.top = parseInt(this.toolTip.style.top) - this.toolTipBorderHeight;
this.iframe.style.left = parseInt(this.toolTip.style.left) - this.toolTipBorderWidth;
More information about the richfaces-svn-commits
mailing list