431 lines
16 KiB
HTML
431 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>The source code</title>
|
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
|
<style type="text/css">
|
|
.highlight { display: block; background-color: #ddd; }
|
|
</style>
|
|
<script type="text/javascript">
|
|
function highlight() {
|
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="prettyPrint(); highlight();">
|
|
<pre class="prettyprint lang-js"><span id='Ext-Element'>/**
|
|
</span> * @class Ext.Element
|
|
*/
|
|
Ext.Element.addMethods({
|
|
<span id='Ext-Element-method-getAnchorXY'> /**
|
|
</span> * Gets the x,y coordinates specified by the anchor position on the element.
|
|
* @param {String} anchor (optional) The specified anchor position (defaults to "c"). See {@link #alignTo}
|
|
* for details on supported anchor positions.
|
|
* @param {Boolean} local (optional) True to get the local (element top/left-relative) anchor position instead
|
|
* of page coordinates
|
|
* @param {Object} size (optional) An object containing the size to use for calculating anchor position
|
|
* {width: (target width), height: (target height)} (defaults to the element's current size)
|
|
* @return {Array} [x, y] An array containing the element's x and y coordinates
|
|
*/
|
|
getAnchorXY : function(anchor, local, s){
|
|
//Passing a different size is useful for pre-calculating anchors,
|
|
//especially for anchored animations that change the el size.
|
|
anchor = (anchor || "tl").toLowerCase();
|
|
s = s || {};
|
|
|
|
var me = this,
|
|
vp = me.dom == document.body || me.dom == document,
|
|
w = s.width || vp ? Ext.lib.Dom.getViewWidth() : me.getWidth(),
|
|
h = s.height || vp ? Ext.lib.Dom.getViewHeight() : me.getHeight(),
|
|
xy,
|
|
r = Math.round,
|
|
o = me.getXY(),
|
|
scroll = me.getScroll(),
|
|
extraX = vp ? scroll.left : !local ? o[0] : 0,
|
|
extraY = vp ? scroll.top : !local ? o[1] : 0,
|
|
hash = {
|
|
c : [r(w * 0.5), r(h * 0.5)],
|
|
t : [r(w * 0.5), 0],
|
|
l : [0, r(h * 0.5)],
|
|
r : [w, r(h * 0.5)],
|
|
b : [r(w * 0.5), h],
|
|
tl : [0, 0],
|
|
bl : [0, h],
|
|
br : [w, h],
|
|
tr : [w, 0]
|
|
};
|
|
|
|
xy = hash[anchor];
|
|
return [xy[0] + extraX, xy[1] + extraY];
|
|
},
|
|
|
|
<span id='Ext-Element-method-anchorTo'> /**
|
|
</span> * Anchors an element to another element and realigns it when the window is resized.
|
|
* @param {Mixed} element The element to align to.
|
|
* @param {String} position The position to align to.
|
|
* @param {Array} offsets (optional) Offset the positioning by [x, y]
|
|
* @param {Boolean/Object} animate (optional) True for the default animation or a standard Element animation config object
|
|
* @param {Boolean/Number} monitorScroll (optional) True to monitor body scroll and reposition. If this parameter
|
|
* is a number, it is used as the buffer delay (defaults to 50ms).
|
|
* @param {Function} callback (optional) The function to call after the animation finishes
|
|
* @return {Ext.Element} this
|
|
*/
|
|
anchorTo : function(el, alignment, offsets, animate, monitorScroll, callback){
|
|
var me = this,
|
|
dom = me.dom,
|
|
scroll = !Ext.isEmpty(monitorScroll),
|
|
action = function(){
|
|
Ext.fly(dom).alignTo(el, alignment, offsets, animate);
|
|
Ext.callback(callback, Ext.fly(dom));
|
|
},
|
|
anchor = this.getAnchor();
|
|
|
|
// previous listener anchor, remove it
|
|
this.removeAnchor();
|
|
Ext.apply(anchor, {
|
|
fn: action,
|
|
scroll: scroll
|
|
});
|
|
|
|
Ext.EventManager.onWindowResize(action, null);
|
|
|
|
if(scroll){
|
|
Ext.EventManager.on(window, 'scroll', action, null,
|
|
{buffer: !isNaN(monitorScroll) ? monitorScroll : 50});
|
|
}
|
|
action.call(me); // align immediately
|
|
return me;
|
|
},
|
|
|
|
<span id='Ext-Element-method-removeAnchor'> /**
|
|
</span> * Remove any anchor to this element. See {@link #anchorTo}.
|
|
* @return {Ext.Element} this
|
|
*/
|
|
removeAnchor : function(){
|
|
var me = this,
|
|
anchor = this.getAnchor();
|
|
|
|
if(anchor && anchor.fn){
|
|
Ext.EventManager.removeResizeListener(anchor.fn);
|
|
if(anchor.scroll){
|
|
Ext.EventManager.un(window, 'scroll', anchor.fn);
|
|
}
|
|
delete anchor.fn;
|
|
}
|
|
return me;
|
|
},
|
|
|
|
// private
|
|
getAnchor : function(){
|
|
var data = Ext.Element.data,
|
|
dom = this.dom;
|
|
if (!dom) {
|
|
return;
|
|
}
|
|
var anchor = data(dom, '_anchor');
|
|
|
|
if(!anchor){
|
|
anchor = data(dom, '_anchor', {});
|
|
}
|
|
return anchor;
|
|
},
|
|
|
|
<span id='Ext-Element-method-getAlignToXY'> /**
|
|
</span> * Gets the x,y coordinates to align this element with another element. See {@link #alignTo} for more info on the
|
|
* supported position values.
|
|
* @param {Mixed} element The element to align to.
|
|
* @param {String} position (optional, defaults to "tl-bl?") The position to align to.
|
|
* @param {Array} offsets (optional) Offset the positioning by [x, y]
|
|
* @return {Array} [x, y]
|
|
*/
|
|
getAlignToXY : function(el, p, o){
|
|
el = Ext.get(el);
|
|
|
|
if(!el || !el.dom){
|
|
throw "Element.alignToXY with an element that doesn't exist";
|
|
}
|
|
|
|
o = o || [0,0];
|
|
p = (!p || p == "?" ? "tl-bl?" : (!(/-/).test(p) && p !== "" ? "tl-" + p : p || "tl-bl")).toLowerCase();
|
|
|
|
var me = this,
|
|
d = me.dom,
|
|
a1,
|
|
a2,
|
|
x,
|
|
y,
|
|
//constrain the aligned el to viewport if necessary
|
|
w,
|
|
h,
|
|
r,
|
|
dw = Ext.lib.Dom.getViewWidth() -10, // 10px of margin for ie
|
|
dh = Ext.lib.Dom.getViewHeight()-10, // 10px of margin for ie
|
|
p1y,
|
|
p1x,
|
|
p2y,
|
|
p2x,
|
|
swapY,
|
|
swapX,
|
|
doc = document,
|
|
docElement = doc.documentElement,
|
|
docBody = doc.body,
|
|
scrollX = (docElement.scrollLeft || docBody.scrollLeft || 0)+5,
|
|
scrollY = (docElement.scrollTop || docBody.scrollTop || 0)+5,
|
|
c = false, //constrain to viewport
|
|
p1 = "",
|
|
p2 = "",
|
|
m = p.match(/^([a-z]+)-([a-z]+)(\?)?$/);
|
|
|
|
if(!m){
|
|
throw "Element.alignTo with an invalid alignment " + p;
|
|
}
|
|
|
|
p1 = m[1];
|
|
p2 = m[2];
|
|
c = !!m[3];
|
|
|
|
//Subtract the aligned el's internal xy from the target's offset xy
|
|
//plus custom offset to get the aligned el's new offset xy
|
|
a1 = me.getAnchorXY(p1, true);
|
|
a2 = el.getAnchorXY(p2, false);
|
|
|
|
x = a2[0] - a1[0] + o[0];
|
|
y = a2[1] - a1[1] + o[1];
|
|
|
|
if(c){
|
|
w = me.getWidth();
|
|
h = me.getHeight();
|
|
r = el.getRegion();
|
|
//If we are at a viewport boundary and the aligned el is anchored on a target border that is
|
|
//perpendicular to the vp border, allow the aligned el to slide on that border,
|
|
//otherwise swap the aligned el to the opposite border of the target.
|
|
p1y = p1.charAt(0);
|
|
p1x = p1.charAt(p1.length-1);
|
|
p2y = p2.charAt(0);
|
|
p2x = p2.charAt(p2.length-1);
|
|
swapY = ((p1y=="t" && p2y=="b") || (p1y=="b" && p2y=="t"));
|
|
swapX = ((p1x=="r" && p2x=="l") || (p1x=="l" && p2x=="r"));
|
|
|
|
|
|
if (x + w > dw + scrollX) {
|
|
x = swapX ? r.left-w : dw+scrollX-w;
|
|
}
|
|
if (x < scrollX) {
|
|
x = swapX ? r.right : scrollX;
|
|
}
|
|
if (y + h > dh + scrollY) {
|
|
y = swapY ? r.top-h : dh+scrollY-h;
|
|
}
|
|
if (y < scrollY){
|
|
y = swapY ? r.bottom : scrollY;
|
|
}
|
|
}
|
|
return [x,y];
|
|
},
|
|
|
|
<span id='Ext-Element-method-alignTo'> /**
|
|
</span> * Aligns this element with another element relative to the specified anchor points. If the other element is the
|
|
* document it aligns it to the viewport.
|
|
* The position parameter is optional, and can be specified in any one of the following formats:
|
|
* <ul>
|
|
* <li><b>Blank</b>: Defaults to aligning the element's top-left corner to the target's bottom-left corner ("tl-bl").</li>
|
|
* <li><b>One anchor (deprecated)</b>: The passed anchor position is used as the target element's anchor point.
|
|
* The element being aligned will position its top-left corner (tl) to that point. <i>This method has been
|
|
* deprecated in favor of the newer two anchor syntax below</i>.</li>
|
|
* <li><b>Two anchors</b>: If two values from the table below are passed separated by a dash, the first value is used as the
|
|
* element's anchor point, and the second value is used as the target's anchor point.</li>
|
|
* </ul>
|
|
* In addition to the anchor points, the position parameter also supports the "?" character. If "?" is passed at the end of
|
|
* the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to
|
|
* the viewport if necessary. Note that the element being aligned might be swapped to align to a different position than
|
|
* that specified in order to enforce the viewport constraints.
|
|
* Following are all of the supported anchor positions:
|
|
<pre>
|
|
Value Description
|
|
----- -----------------------------
|
|
tl The top left corner (default)
|
|
t The center of the top edge
|
|
tr The top right corner
|
|
l The center of the left edge
|
|
c In the center of the element
|
|
r The center of the right edge
|
|
bl The bottom left corner
|
|
b The center of the bottom edge
|
|
br The bottom right corner
|
|
</pre>
|
|
Example Usage:
|
|
<pre><code>
|
|
// align el to other-el using the default positioning ("tl-bl", non-constrained)
|
|
el.alignTo("other-el");
|
|
|
|
// align the top left corner of el with the top right corner of other-el (constrained to viewport)
|
|
el.alignTo("other-el", "tr?");
|
|
|
|
// align the bottom right corner of el with the center left edge of other-el
|
|
el.alignTo("other-el", "br-l?");
|
|
|
|
// align the center of el with the bottom left corner of other-el and
|
|
// adjust the x position by -6 pixels (and the y position by 0)
|
|
el.alignTo("other-el", "c-bl", [-6, 0]);
|
|
</code></pre>
|
|
* @param {Mixed} element The element to align to.
|
|
* @param {String} position (optional, defaults to "tl-bl?") The position to align to.
|
|
* @param {Array} offsets (optional) Offset the positioning by [x, y]
|
|
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
|
|
* @return {Ext.Element} this
|
|
*/
|
|
alignTo : function(element, position, offsets, animate){
|
|
var me = this;
|
|
return me.setXY(me.getAlignToXY(element, position, offsets),
|
|
me.preanim && !!animate ? me.preanim(arguments, 3) : false);
|
|
},
|
|
|
|
// private ==> used outside of core
|
|
adjustForConstraints : function(xy, parent, offsets){
|
|
return this.getConstrainToXY(parent || document, false, offsets, xy) || xy;
|
|
},
|
|
|
|
// private ==> used outside of core
|
|
getConstrainToXY : function(el, local, offsets, proposedXY){
|
|
var os = {top:0, left:0, bottom:0, right: 0};
|
|
|
|
return function(el, local, offsets, proposedXY){
|
|
el = Ext.get(el);
|
|
offsets = offsets ? Ext.applyIf(offsets, os) : os;
|
|
|
|
var vw, vh, vx = 0, vy = 0;
|
|
if(el.dom == document.body || el.dom == document){
|
|
vw =Ext.lib.Dom.getViewWidth();
|
|
vh = Ext.lib.Dom.getViewHeight();
|
|
}else{
|
|
vw = el.dom.clientWidth;
|
|
vh = el.dom.clientHeight;
|
|
if(!local){
|
|
var vxy = el.getXY();
|
|
vx = vxy[0];
|
|
vy = vxy[1];
|
|
}
|
|
}
|
|
|
|
var s = el.getScroll();
|
|
|
|
vx += offsets.left + s.left;
|
|
vy += offsets.top + s.top;
|
|
|
|
vw -= offsets.right;
|
|
vh -= offsets.bottom;
|
|
|
|
var vr = vx + vw,
|
|
vb = vy + vh,
|
|
xy = proposedXY || (!local ? this.getXY() : [this.getLeft(true), this.getTop(true)]),
|
|
x = xy[0], y = xy[1],
|
|
offset = this.getConstrainOffset(),
|
|
w = this.dom.offsetWidth + offset,
|
|
h = this.dom.offsetHeight + offset;
|
|
|
|
// only move it if it needs it
|
|
var moved = false;
|
|
|
|
// first validate right/bottom
|
|
if((x + w) > vr){
|
|
x = vr - w;
|
|
moved = true;
|
|
}
|
|
if((y + h) > vb){
|
|
y = vb - h;
|
|
moved = true;
|
|
}
|
|
// then make sure top/left isn't negative
|
|
if(x < vx){
|
|
x = vx;
|
|
moved = true;
|
|
}
|
|
if(y < vy){
|
|
y = vy;
|
|
moved = true;
|
|
}
|
|
return moved ? [x, y] : false;
|
|
};
|
|
}(),
|
|
|
|
|
|
|
|
// el = Ext.get(el);
|
|
// offsets = Ext.applyIf(offsets || {}, {top : 0, left : 0, bottom : 0, right : 0});
|
|
|
|
// var me = this,
|
|
// doc = document,
|
|
// s = el.getScroll(),
|
|
// vxy = el.getXY(),
|
|
// vx = offsets.left + s.left,
|
|
// vy = offsets.top + s.top,
|
|
// vw = -offsets.right,
|
|
// vh = -offsets.bottom,
|
|
// vr,
|
|
// vb,
|
|
// xy = proposedXY || (!local ? me.getXY() : [me.getLeft(true), me.getTop(true)]),
|
|
// x = xy[0],
|
|
// y = xy[1],
|
|
// w = me.dom.offsetWidth, h = me.dom.offsetHeight,
|
|
// moved = false; // only move it if it needs it
|
|
//
|
|
//
|
|
// if(el.dom == doc.body || el.dom == doc){
|
|
// vw += Ext.lib.Dom.getViewWidth();
|
|
// vh += Ext.lib.Dom.getViewHeight();
|
|
// }else{
|
|
// vw += el.dom.clientWidth;
|
|
// vh += el.dom.clientHeight;
|
|
// if(!local){
|
|
// vx += vxy[0];
|
|
// vy += vxy[1];
|
|
// }
|
|
// }
|
|
|
|
// // first validate right/bottom
|
|
// if(x + w > vx + vw){
|
|
// x = vx + vw - w;
|
|
// moved = true;
|
|
// }
|
|
// if(y + h > vy + vh){
|
|
// y = vy + vh - h;
|
|
// moved = true;
|
|
// }
|
|
// // then make sure top/left isn't negative
|
|
// if(x < vx){
|
|
// x = vx;
|
|
// moved = true;
|
|
// }
|
|
// if(y < vy){
|
|
// y = vy;
|
|
// moved = true;
|
|
// }
|
|
// return moved ? [x, y] : false;
|
|
// },
|
|
|
|
// private, used internally
|
|
getConstrainOffset : function(){
|
|
return 0;
|
|
},
|
|
|
|
<span id='Ext-Element-method-getCenterXY'> /**
|
|
</span> * Calculates the x, y to center this element on the screen
|
|
* @return {Array} The x, y values [x, y]
|
|
*/
|
|
getCenterXY : function(){
|
|
return this.getAlignToXY(document, 'c-c');
|
|
},
|
|
|
|
<span id='Ext-Element-method-center'> /**
|
|
</span> * Centers the Element in either the viewport, or another Element.
|
|
* @param {Mixed} centerIn (optional) The element in which to center the element.
|
|
*/
|
|
center : function(centerIn){
|
|
return this.alignTo(centerIn || document, 'c-c');
|
|
}
|
|
});
|
|
</pre>
|
|
</body>
|
|
</html>
|