Extends the Element native object to include methods useful positioning elements relative to others.
(function(){
var original = Element.prototype.position;
Element.implement({
position: function(options){
call original position if the options are x/y values
if (options && (options.x != null || options.y != null)){
return original ? original.apply(this, arguments) : this;
}
Object.each(options || {}, function(v, k){
if (v == null) delete options[k];
});
options = Object.merge({
minimum: { x: 0, y: 0 }, maximum: { x: 0, y: 0},
relativeTo: document.body,
position: {
x: 'center', //left, center, right
y: 'center' //top, center, bottom
},
edge: false,
offset: {x: 0, y: 0},
returnPos: false,
relFixedPosition: false,
ignoreMargins: false,
ignoreScroll: false,
allowNegative: false
}, options);
compute the offset of the parent positioned element if this element is in one
var parentOffset = {x: 0, y: 0},
parentPositioned = false;
dollar around getOffsetParent should not be necessary, but as it does not return * a mootools extended element in IE, an error occurs on the call to expose. See: * http://mootools.lighthouseapp.com/projects/2706/tickets/333-element-getoffsetparent-inconsistency-between-ie-and-other-browsers
var offsetParent = this.measure(function(){
return document.id(this.getOffsetParent());
});
if (offsetParent && offsetParent != this.getDocument().body){
parentOffset = offsetParent.measure(function(){
return this.getPosition();
});
parentPositioned = offsetParent != document.id(options.relativeTo);
options.offset.x = options.offset.x - parentOffset.x;
options.offset.y = options.offset.y - parentOffset.y;
}
upperRight, bottomRight, centerRight, upperLeft, bottomLeft, centerLeft topRight, topLeft, centerTop, centerBottom, center
var fixValue = function(option){
if (typeOf(option) != 'string') return option;
option = option.toLowerCase();
var val = {};
if (option.test('left')){
val.x = 'left';
} else if (option.test('right')){
val.x = 'right';
} else {
val.x = 'center';
}
if (option.test('upper') || option.test('top')){
val.y = 'top';
} else if (option.test('bottom')){
val.y = 'bottom';
} else {
val.y = 'center';
}
return val;
};
options.edge = fixValue(options.edge);
options.position = fixValue(options.position);
if (!options.edge){
if (options.position.x == 'center' && options.position.y == 'center') options.edge = {x:'center', y:'center'};
else options.edge = {x:'left', y:'top'};
}
this.setStyle('position', 'absolute');
var rel = document.id(options.relativeTo) || document.body,
calc = rel == document.body ? window.getScroll() : rel.getPosition(),
top = calc.y, left = calc.x;
var dim = this.getDimensions({
computeSize: true,
styles:['padding', 'border','margin']
});
var pos = {},
prefY = options.offset.y,
prefX = options.offset.x,
winSize = window.getSize();
switch(options.position.x){
case 'left':
pos.x = left + prefX;
break;
case 'right':
pos.x = left + prefX + rel.offsetWidth;
break;
default: //center
pos.x = left + ((rel == document.body ? winSize.x : rel.offsetWidth)/2) + prefX;
break;
}
switch(options.position.y){
case 'top':
pos.y = top + prefY;
break;
case 'bottom':
pos.y = top + prefY + rel.offsetHeight;
break;
default: //center
pos.y = top + ((rel == document.body ? winSize.y : rel.offsetHeight)/2) + prefY;
break;
}
if (options.edge){
var edgeOffset = {};
switch(options.edge.x){
case 'left':
edgeOffset.x = 0;
break;
case 'right':
edgeOffset.x = -dim.x-dim.computedRight-dim.computedLeft;
break;
default: //center
edgeOffset.x = -(dim.totalWidth/2);
break;
}
switch(options.edge.y){
case 'top':
edgeOffset.y = 0;
break;
case 'bottom':
edgeOffset.y = -dim.y-dim.computedTop-dim.computedBottom;
break;
default: //center
edgeOffset.y = -(dim.totalHeight/2);
break;
}
pos.x += edgeOffset.x;
pos.y += edgeOffset.y;
}
pos = {
left: ((pos.x >= 0 || parentPositioned || options.allowNegative) ? pos.x : 0).toInt(),
top: ((pos.y >= 0 || parentPositioned || options.allowNegative) ? pos.y : 0).toInt()
};
var xy = {left: 'x', top: 'y'};
['minimum', 'maximum'].each(function(minmax){
['left', 'top'].each(function(lr){
var val = options[minmax] ? options[minmax][xy[lr]] : null;
if (val != null && pos[lr] < val) pos[lr] = val;
});
});
if (rel.getStyle('position') == 'fixed' || options.relFixedPosition){
var winScroll = window.getScroll();
pos.top+= winScroll.y;
pos.left+= winScroll.x;
}
var relScroll = rel.getScroll();
if (options.ignoreScroll){
pos.top -= relScroll.y;
pos.left -= relScroll.x;
} else {
pos.top += relScroll.y;
pos.left += relScroll.x;
}
if (options.ignoreMargins){
pos.left += (
options.edge.x == 'right' ? dim['margin-right'] :
options.edge.x == 'center' ? -dim['margin-left'] + ((dim['margin-right'] + dim['margin-left'])/2) :
- dim['margin-left']
);
pos.top += (
options.edge.y == 'bottom' ? dim['margin-bottom'] :
options.edge.y == 'center' ? -dim['margin-top'] + ((dim['margin-bottom'] + dim['margin-top'])/2) :
- dim['margin-top']
);
}
pos.left = Math.ceil(pos.left);
pos.top = Math.ceil(pos.top);
if (options.returnPos) return pos;
else this.setStyles(pos);
return this;
}
});
})();