r866 - branches/experimental/ui
Author: paul.bakaus
Date: Wed Nov 5 06:13:02 2008
New Revision: 866
Modified:
branches/experimental/ui/ui.core.position.js
Log:
core(experimental): positionTo now properly handles auto wrapping cases,
introduced a forceDirection option to force the direction.
Implemented "left/right/adove/below" for positioning related to elements,
and any combination of "left/right" + "above/below" for mouse related
positiong (i.e. "right below")
Modified: branches/experimental/ui/ui.core.position.js
==============================================================================
--- branches/experimental/ui/ui.core.position.js (original)
+++ branches/experimental/ui/ui.core.position.js Wed Nov 5 06:13:02 2008
@@ -1,54 +1,29 @@
$.fn.positionTo = function(e, o) {
- var parentOffset = this.parent().offset();
+ var leftOffset = 0, topOffset = 0;
+ var height = this[0].offsetHeight, width = this[0].offsetWidth;
+ var parentOffset = this.offsetParent().offset();
parentOffset = {
- top: this.parent()[0] == document.body ? 0 : parentOffset.top,
- left: this.parent()[0] == document.body ? 0 : parentOffset.left
+ top: this.offsetParent()[0] == document.body ? 0 : parentOffset.top,
+ left: this.offsetParent()[0] == document.body ? 0 : parentOffset.left
};
var options = $.extend({
relativeTo: 'mouse',
- direction: 'default'
+ direction: 'default',
+ forceDirection: false
}, o);
- if($(options.relativeTo).length && $(options.relativeTo)[0].nodeName) {
+ if($(options.relativeTo).length && $(options.relativeTo)[0].nodeName) {
//If relativeTo is an element
var element = $(options.relativeTo),offset = element.offset();
var relHeight = element[0].offsetHeight, relWidth =
element[0].offsetWidth, height = this[0].offsetHeight, width =
this[0].offsetWidth;
- var leftOffset = 0, topOffset = 0;
-
if((/(left|right)/).test(options.direction)) {
- leftOffset = options.direction == 'left' ? -(width) : relWidth;
+ leftOffset = ( options.direction == 'left' ? (offset.left > width ||
options.forceDirection) : ($(window).width()-offset.left-relWidth < width
&& !options.forceDirection) ) ? -(width) : relWidth;
topOffset = e ? ( $(window).height()-offset.top < height ?
-(height-relHeight) : 0 ) : 0;
- } else {
-
- if(options.direction == 'above') {
- topOffset = -(height);
- } else if(options.direction == 'below') {
- topOffset = relHeight;
- } else {
- topOffset = $(window).height()-offset.top < height ? -(height) :
relHeight;
- }
-
- }
-
-
- switch(options.direction) {
- case 'right':
- leftOffset = relWidth;
- topOffset = e ? ( $(window).height()-offset.top < height ?
-(height-relHeight) : 0 ) : 0;
- break;
- case 'left':
- leftOffset = -(width);
- topOffset = e ? ( $(window).height()-offset.top < height ?
-(height-relHeight) : 0 ) : 0;
- break;
- case 'above':
- topOffset = -(height);
- break;
- case 'below':
- topOffset = relHeight;
- break;
+ } else {
+ topOffset = ( options.direction == 'above' ? (offset.top > height ||
options.forceDirection) : ($(window).height()-offset.top-relHeight < height
&& !options.forceDirection) ) ? -(height) : relHeight;
}
this.css({
@@ -58,9 +33,21 @@
} else {
+ if((/(below|default)/).test(options.direction)) {
+ topOffset = $(window).height()-e.pageY < height
&& !options.forceDirection ? -(height) : 0;
+ } else if ((/above/).test(options.direction)) {
+ topOffset = e.pageY > height || options.forceDirection ? -(height) : 0;
+ }
+
+ if((/(right|default)/).test(options.direction)) {
+ leftOffset = $(window).width()-e.pageX < width
&& !options.forceDirection ? -(width) : 0;
+ } else if ((/left/).test(options.direction)) {
+ leftOffset = e.pageX > width || options.forceDirection ? -(width) : 0;
+ }
+
this.css({
- left: e.pageX - parentOffset.left,
- top: e.pageY - parentOffset.top
+ left: e.pageX - parentOffset.left + leftOffset,
+ top: e.pageY - parentOffset.top + topOffset
});
}