X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6:/src/core/Element.alignment.js..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/src/core/src/dom/Element.alignment.js
diff --git a/src/core/Element.alignment.js b/src/core/src/dom/Element.alignment.js
similarity index 55%
rename from src/core/Element.alignment.js
rename to src/core/src/dom/Element.alignment.js
index d9e321c5..aa389181 100644
--- a/src/core/Element.alignment.js
+++ b/src/core/src/dom/Element.alignment.js
@@ -1,13 +1,7 @@
-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
/**
- * @class Ext.Element
+ * @class Ext.core.Element
*/
-Ext.Element.addMethods({
+Ext.core.Element.addMethods({
/**
* 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}
@@ -21,33 +15,33 @@ Ext.Element.addMethods({
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();
+ 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];
+
+ var me = this,
+ vp = me.dom == document.body || me.dom == document,
+ w = s.width || vp ? Ext.core.Element.getViewWidth() : me.getWidth(),
+ h = s.height || vp ? Ext.core.Element.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];
},
/**
@@ -59,10 +53,10 @@ Ext.Element.addMethods({
* @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 The function to call after the animation finishes
- * @return {Ext.Element} this
+ * @return {Ext.core.Element} this
*/
- anchorTo : function(el, alignment, offsets, animate, monitorScroll, callback){
- var me = this,
+ anchorTo : function(el, alignment, offsets, animate, monitorScroll, callback){
+ var me = this,
dom = me.dom,
scroll = !Ext.isEmpty(monitorScroll),
action = function(){
@@ -70,7 +64,7 @@ Ext.Element.addMethods({
Ext.callback(callback, Ext.fly(dom));
},
anchor = this.getAnchor();
-
+
// previous listener anchor, remove it
this.removeAnchor();
Ext.apply(anchor, {
@@ -79,7 +73,7 @@ Ext.Element.addMethods({
});
Ext.EventManager.onWindowResize(action, null);
-
+
if(scroll){
Ext.EventManager.on(window, 'scroll', action, null,
{buffer: !isNaN(monitorScroll) ? monitorScroll : 50});
@@ -87,15 +81,15 @@ Ext.Element.addMethods({
action.call(me); // align immediately
return me;
},
-
+
/**
* Remove any anchor to this element. See {@link #anchorTo}.
- * @return {Ext.Element} this
+ * @return {Ext.core.Element} this
*/
removeAnchor : function(){
var me = this,
anchor = this.getAnchor();
-
+
if(anchor && anchor.fn){
Ext.EventManager.removeResizeListener(anchor.fn);
if(anchor.scroll){
@@ -105,22 +99,42 @@ Ext.Element.addMethods({
}
return me;
},
-
+
// private
getAnchor : function(){
- var data = Ext.Element.data,
+ var data = Ext.core.Element.data,
dom = this.dom;
if (!dom) {
return;
}
var anchor = data(dom, '_anchor');
-
+
if(!anchor){
anchor = data(dom, '_anchor', {});
}
return anchor;
},
+ getAlignVector: function(el, spec, offset) {
+ var me = this,
+ side = {t:"top", l:"left", r:"right", b: "bottom"},
+ thisRegion = me.getRegion(),
+ elRegion;
+
+ el = Ext.get(el);
+ if(!el || !el.dom){
+ //
Returns the [X, Y]
vector by which this element must be translated to make a best attempt
+ * to constrain within the passed constraint. Returns false
is this element does not need to be moved.
Priority is given to constraining the top and left within the constraint.
+ *The constraint may either be an existing element into which this element is to be constrained, or + * an {@link Ext.util.Region Region} into which this element is to be constrained.
+ * @param constrainTo {Mixed} The Element or {@link Ext.util.Region Region} into which this element is to be constrained. + * @param proposedPosition {Array} A proposed[X, Y]
position to test for validity and to produce a vector for instead
+ * of using this Element's current position;
+ * @returns {Array} If this element needs to be translated, an [X, Y]
+ * vector by which this element must be translated. Otherwise, false
.
+ */
+ getConstrainVector: function(constrainTo, proposedPosition) {
+ if (!(constrainTo instanceof Ext.util.Region)) {
+ constrainTo = Ext.get(constrainTo).getViewRegion();
+ }
+ var thisRegion = this.getRegion(),
+ vector = [0, 0],
+ shadowSize = this.shadow && this.shadow.offset,
+ overflowed = false;
- vw -= offsets.right;
- vh -= offsets.bottom;
+ // Shift this region to occupy the proposed position
+ if (proposedPosition) {
+ thisRegion.translateBy(proposedPosition[0] - thisRegion.x, proposedPosition[1] - thisRegion.y);
+ }
- 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;
+ // Reduce the constrain region to allow for shadow
+ // TODO: Rewrite the Shadow class. When that's done, get the extra for each side from the Shadow.
+ if (shadowSize) {
+ constrainTo.adjust(0, -shadowSize, -shadowSize, shadowSize);
+ }
- // only move it if it needs it
- var moved = false;
+ // Constrain the X coordinate by however much this Element overflows
+ if (thisRegion.right > constrainTo.right) {
+ overflowed = true;
+ vector[0] = (constrainTo.right - thisRegion.right); // overflowed the right
+ }
+ if (thisRegion.left + vector[0] < constrainTo.left) {
+ overflowed = true;
+ vector[0] = (constrainTo.left - thisRegion.left); // overflowed the left
+ }
- // 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;
+ // Constrain the Y coordinate by however much this Element overflows
+ if (thisRegion.bottom > constrainTo.bottom) {
+ overflowed = true;
+ vector[1] = (constrainTo.bottom - thisRegion.bottom); // overflowed the bottom
+ }
+ if (thisRegion.top + vector[1] < constrainTo.top) {
+ overflowed = true;
+ vector[1] = (constrainTo.top - thisRegion.top); // overflowed the top
+ }
+ return overflowed ? vector : false;
},
-
+
/**
* Calculates the x, y to center this element on the screen
* @return {Array} The x, y values [x, y]
@@ -412,6 +377,6 @@ el.alignTo("other-el", "c-bl", [-6, 0]);
* @param {Mixed} centerIn (optional) The element in which to center the element.
*/
center : function(centerIn){
- return this.alignTo(centerIn || document, 'c-c');
- }
+ return this.alignTo(centerIn || document, 'c-c');
+ }
});