/** * @class Ext.Element */ Ext.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} * 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]; }, /** * 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; }, /** * 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; }, /** * 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]; }, /** * 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; }, /** * 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'); }, /** * 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'); } });