Position in the last article of Prototype1.5 rc2 Guide

Position is an object defined in prototype. It provides methods for operating the location-related DOM. To better understand the Position of elements on the page, refer to this article: Relatively Absolute.

The specific code is as follows. According to the Code, English is the author's note, and the Chinese Red is the even description or English translation comment, use the top annotation method (comment on the code to be described)

// Set to true if needed, warning: firefox performance problems
// NOT neeeded for page scrolling, only if draggable contained in
// Scrollable elements
// You must set the element to true only when the element is contained in the scroll bar.
Includescroloffsets: false,

// Must be called before calling withinincludingscroloffset, every time
// Page is scrolled
// Call this method when the page is scrolled and withinincludingscroloffset is used
Prepare: function (){
// The scroll distance of the horizontal scroll bar
This. deltaX = window. pageXOffset
| Document.doc umentElement. scrollLeft
| Document. body. scrollLeft
| 0;
// The scroll distance of the vertical scroll bar
This. deltaY = window. pageYOffset
| Document.doc umentElement. scrollTop
| Document. body. scrollTop
| 0;
},

// The total distance between elements due to the scroll bar offset
RealOffset: function (element ){
Var valueT = 0, valueL = 0;
Do {
ValueT + = element. scrollTop | 0;
ValueL + = element. scrollLeft | 0;
Element = element. parentNode;
} While (element );
Return [valueL, valueT];
},

// Offset accumulated by offsetParent on the page. If neither of the offsetParent has a scroll bar, it is the position of the element on the page.
CumulativeOffset: function (element ){
Var valueT = 0, valueL = 0;
Do {
ValueT + = element. offsetTop | 0;
ValueL + = element. offsetLeft | 0;
Element = element. offsetParent;
} While (element );
Return [valueL, valueT];
},

// The position of the element relative to the containing block ("nearest positioned ancestor"), that is, the position of the ancestor node set to relative or absolute relative to the nearest position, if not, it is the position relative to the body, with the style. top, style. like left?
PositionedOffset: function (element ){
Var valueT = 0, valueL = 0;
Do {
ValueT + = element. offsetTop | 0;
ValueL + = element. offsetLeft | 0;
Element = element. offsetParent;
If (element ){
If (element. tagName = 'body') break;
Var p = Element. getStyle (element, 'position ');
If (p = 'relative '| p = 'absolute') break;
}
} While (element );
Return [valueL, valueT];
},

// OffsetParent
OffsetParent: function (element ){
If (element. offsetParent) return element. offsetParent;
If (element = document. body) return element;

While (element = element. parentNode) & element! = Document. body)
If (Element. getStyle (element, 'position ')! = 'Static ')
Return element;

Return document. body;
},

// Caches x/y coordinate pair to use with overlap
// Determine whether the specified position is within the element
Within: function (element, x, y ){
If (this. includescroloffsets)
Return this. withinincludingscroloffsets (element, x, y );
This. xcomp = x;
This. ycomp = y;
This. offset = this. cumulativeOffset (element );

Return (y> = this. offset [1] &
Y <this. offset [1] + element. offsetHeight &&
X> = this. offset [0] &
X <this. offset [0] + element. offsetWidth );
},

// Similar to within, but considering the scroll bar, it may be on the element but not directly on it, because the scroll bar may have made the element invisible.
Withinincludingscroloffsets: function (element, x, y ){
Var offsetcache = this. realOffset (element );

This. xcomp = x + offsetcache [0]-this. deltaX;
This. ycomp = y + offsetcache [1]-this. deltaY;
This. offset = this. cumulativeOffset (element );

Return (this. ycomp> = this. offset [1] &
This. ycomp <this. offset [1] + element. offsetHeight &&
This. xcomp> = this. offset [0] &
This. xcomp <this. offset [0] + element. offsetWidth );
},

// Within must be called directly before
// Before calling this method, you must call within to return the percentage occupied by the position specified by with in the horizontal or vertical direction.
Overlap: function (mode, element ){
If (! Mode) return 0;
If (mode = 'vertical ')
Return (this. offset [1] + element. offsetHeight)-this. ycomp )/
Element. offsetHeight;
If (mode = 'horizontal ')
Return (this. offset [0] + element. offsetWidth)-this. xcomp )/
Element. offsetWidth;
},

// Returns the actual location of the element relative to the page.
Page: function (forElement ){
Var valueT = 0, valueL = 0;

Var element = forElement;
Do {
ValueT + = element. offsetTop | 0;
ValueL + = element. offsetLeft | 0;

// Safari fix
If (element. offsetParent = document. body)
If (Element. getStyle (element, 'position') = 'abort') break;

} While (element = element. offsetParent );

Element = forElement;
Do {
If (! Window. opera | element. tagName = 'body '){
ValueT-= element. scrollTop | 0;
ValueL-= element. scrollLeft | 0;
}
} While (element = element. parentNode );

Return [valueL, valueT];
},

// Set the position and size of target to source.
Clone: function (source, target ){
Var options = Object. extend ({
SetLeft: true,
SetTop: true,
SetWidth: true,
SetHeight: true,
OffsetTop: 0,
OffsetLeft: 0
}, Arguments [2] || {})

// Find page position of source
Source = $ (source );
Var p = Position. page (source );

// Find coordinate system to use
Target = $ (target );
Var delta = [0, 0];
Var parent = null;
// Delta [0, 0] will do fine with position: fixed elements,
// Position: absolute needs offsetParent deltas
If (Element. getStyle (target, 'position') = 'absolute '){
Parent = Position. offsetParent (target );
Delta = Position. page (parent );
}

// Correct by body offsets (fixes Safari)
If (parent = document. body ){
Delta [0]-= document. body. offsetLeft;
Delta [1]-= document. body. offsetTop;
}

// Set position
If (options. setLeft) target. style. left = (p [0]-delta [0] + options. offsetLeft) + 'px ';
If (options. setTop) target. style. top = (p [1]-delta [1] + options. offsetTop) + 'px ';
If (options. setWidth) target. style. width = source. offsetWidth + 'px ';
If (options. setHeight) target. style. height = source. offsetHeight + 'px ';
},

// Set the position of the element to the absolute mode.
Absolutize: function (element ){
Element = $ (element );
If (element. style. position = 'absolute ') return;
Position. prepare ();

Var offsets = Position. positionedOffset (element );
Var top = offsets [1];
Var left = offsets [0];
Var width = element. clientWidth;
Var height = element. clientHeight;

Element. _ originalLeft = left-parseFloat (element. style. left | 0 );
Element. _ originalTop = top-parseFloat (element. style. top | 0 );
Element. _ originalWidth = element. style. width;
Element. _ originalHeight = element. style. height;

Element. style. position = 'absolute ';
Element. style. top = top + 'px ';;
Element. style. left = left + 'px ';;
Element. style. width = width + 'px ';;
Element. style. height = height + 'px ';;
},

// Set the position of the element to the absolute mode.
Relativize: function (element ){
Element = $ (element );
If (element. style. position = 'relative ') return;
Position. prepare ();

Element. style. position = 'relative ';
Var top = parseFloat (element. style. top | 0)-(element. _ originalTop | 0 );
Var left = parseFloat (element. style. left | 0)-(element. _ originalLeft | 0 );

Element. style. top = top + 'px ';
Element. style. left = left + 'px ';
Element. style. height = element. _ originalHeight;
Element. style. width = element. _ originalWidth;
}
}

// Safari returns margins on body which is incorrect if the child is absolutely
// Positioned. For performance reasons, redefine Position. cumulativeOffset
// KHTML/WebKit only.
If (/Konqueror | Safari | KHTML/. test (navigator. userAgent )){
Position. cumulativeOffset = function (element ){
Var valueT = 0, valueL = 0;
Do {
ValueT + = element. offsetTop | 0;
ValueL + = element. offsetLeft | 0;
If (element. offsetParent = document. body)
If (Element. getStyle (element, 'position') = 'abort') break;

Element = element. offsetParent;
} While (element );

Return [valueL, valueT];
}
}

I finally finished writing all parts of Prototype. Haha, I admire my endurance more and more.

Next, I decided to write Scriptaculous, a super popular performance library.