/** * @class Ext.dom.Element */ Ext.dom.Element.override((function() { var doc = document, win = window, alignRe = /^([a-z]+)-([a-z]+)(\?)?$/, round = Math.round; return { /** * Gets the x,y coordinates specified by the anchor position on the element. * @param {String} [anchor='c'] The specified anchor position. See {@link #alignTo} * for details on supported anchor positions. * @param {Boolean} [local] True to get the local (element top/left-relative) anchor position instead * of page coordinates * @param {Object} [size] 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 {Number[]} [x, y] An array containing the element's x and y coordinates */ getAnchorXY: function(anchor, local, mySize) { //Passing a different size is useful for pre-calculating anchors, //especially for anchored animations that change the el size. anchor = (anchor || "tl").toLowerCase(); mySize = mySize || {}; var me = this, isViewport = me.dom == doc.body || me.dom == doc, myWidth = mySize.width || isViewport ? Ext.dom.Element.getViewWidth() : me.getWidth(), myHeight = mySize.height || isViewport ? Ext.dom.Element.getViewHeight() : me.getHeight(), xy, myPos = me.getXY(), scroll = me.getScroll(), extraX = isViewport ? scroll.left : !local ? myPos[0] : 0, extraY = isViewport ? scroll.top : !local ? myPos[1] : 0; // Calculate anchor position. // Test most common cases for picker alignment first. switch (anchor) { case 'tl' : xy = [ 0, 0]; break; case 'bl' : xy = [ 0, myHeight]; break; case 'tr' : xy = [ myWidth, 0]; break; case 'c' : xy = [ round(myWidth * 0.5), round(myHeight * 0.5)]; break; case 't' : xy = [ round(myWidth * 0.5), 0]; break; case 'l' : xy = [ 0, round(myHeight * 0.5)]; break; case 'r' : xy = [ myWidth, round(myHeight * 0.5)]; break; case 'b' : xy = [ round(myWidth * 0.5), myHeight]; break; case 'br' : xy = [ myWidth, myHeight]; } return [xy[0] + extraX, xy[1] + extraY]; }, /** * Gets the x,y coordinates to align this element with another element. See {@link #alignTo} for more info on the * supported position values. * @param {String/HTMLElement/Ext.Element} element The element to align to. * @param {String} [position="tl-bl?"] The position to align to (defaults to ) * @param {Number[]} [offsets] Offset the positioning by [x, y] * @return {Number[]} [x, y] */ getAlignToXY : function(alignToEl, posSpec, offset) { alignToEl = Ext.get(alignToEl); if (!alignToEl || !alignToEl.dom) { //<debug> Ext.Error.raise({ sourceClass: 'Ext.dom.Element', sourceMethod: 'getAlignToXY', msg: 'Attempted to align an element that doesn\'t exist' }); //</debug> } offset = offset || [0,0]; posSpec = (!posSpec || posSpec == "?" ? "tl-bl?" : (!(/-/).test(posSpec) && posSpec !== "" ? "tl-" + posSpec : posSpec || "tl-bl")).toLowerCase(); var me = this, myPosition, alignToElPosition, x, y, myWidth, myHeight, alignToElRegion, viewportWidth = Ext.dom.Element.getViewWidth() - 10, // 10px of margin for ie viewportHeight = Ext.dom.Element.getViewHeight() - 10, // 10px of margin for ie p1y, p1x, p2y, p2x, swapY, swapX, docElement = doc.documentElement, docBody = doc.body, scrollX = (docElement.scrollLeft || docBody.scrollLeft || 0),// + 5, WHY was 5 ever added? scrollY = (docElement.scrollTop || docBody.scrollTop || 0),// + 5, It means align will fail if the alignTo el was at less than 5,5 constrain, //constrain to viewport align1, align2, alignMatch = posSpec.match(alignRe); //<debug> if (!alignMatch) { Ext.Error.raise({ sourceClass: 'Ext.dom.Element', sourceMethod: 'getAlignToXY', el: alignToEl, position: posSpec, offset: offset, msg: 'Attemmpted to align an element with an invalid position: "' + posSpec + '"' }); } //</debug> align1 = alignMatch[1]; align2 = alignMatch[2]; constrain = !!alignMatch[3]; //Subtract the aligned el's internal xy from the target's offset xy //plus custom offset to get this Element's new offset xy myPosition = me.getAnchorXY(align1, true); alignToElPosition = alignToEl.getAnchorXY(align2, false); x = alignToElPosition[0] - myPosition[0] + offset[0]; y = alignToElPosition[1] - myPosition[1] + offset[1]; // If position spec ended with a "?", then constrain to viewport is necessary if (constrain) { myWidth = me.getWidth(); myHeight = me.getHeight(); alignToElRegion = alignToEl.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 = align1.charAt(0); p1x = align1.charAt(align1.length - 1); p2y = align2.charAt(0); p2x = align2.charAt(align2.length - 1); swapY = ((p1y == "t" && p2y == "b") || (p1y == "b" && p2y == "t")); swapX = ((p1x == "r" && p2x == "l") || (p1x == "l" && p2x == "r")); if (x + myWidth > viewportWidth + scrollX) { x = swapX ? alignToElRegion.left - myWidth : viewportWidth + scrollX - myWidth; } if (x < scrollX) { x = swapX ? alignToElRegion.right : scrollX; } if (y + myHeight > viewportHeight + scrollY) { y = swapY ? alignToElRegion.top - myHeight : viewportHeight + scrollY - myHeight; } if (y < scrollY) { y = swapY ? alignToElRegion.bottom : scrollY; } } return [x,y]; }, /** * Anchors an element to another element and realigns it when the window is resized. * @param {String/HTMLElement/Ext.Element} element The element to align to. * @param {String} position The position to align to. * @param {Number[]} [offsets] Offset the positioning by [x, y] * @param {Boolean/Object} [animate] True for the default animation or a standard Element animation config object * @param {Boolean/Number} [monitorScroll] 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 */ 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(win, '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.dom.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(win, 'scroll', anchor.fn); } delete anchor.fn; } return me; }, getAlignVector: function(el, spec, offset) { var me = this, myPos = me.getXY(), alignedPos = me.getAlignToXY(el, spec, offset); el = Ext.get(el); //<debug> if (!el || !el.dom) { Ext.Error.raise({ sourceClass: 'Ext.dom.Element', sourceMethod: 'getAlignVector', msg: 'Attempted to align an element that doesn\'t exist' }); } //</debug> alignedPos[0] -= myPos[0]; alignedPos[1] -= myPos[1]; return alignedPos; }, /** * 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: * * - **Blank**: Defaults to aligning the element's top-left corner to the target's bottom-left corner ("tl-bl"). * - **One anchor (deprecated)**: 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. *This method has been * deprecated in favor of the newer two anchor syntax below*. * - **Two anchors**: 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. * * 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: * * // 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]); * * @param {String/HTMLElement/Ext.Element} element The element to align to. * @param {String} [position="tl-bl?"] The position to align to * @param {Number[]} [offsets] Offset the positioning by [x, y] * @param {Boolean/Object} [animate] 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.anim && !!animate ? me.anim(animate) : false); }, /** * 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 {Ext.Element/Ext.util.Region} constrainTo The Element or Region into which this element is to be constrained. * @param {Number[]} proposedPosition A proposed `[X, Y]` position to test for validity and to produce a vector for instead * of using this Element's current position; * @returns {Number[]/Boolean} **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; // Shift this region to occupy the proposed position if (proposedPosition) { thisRegion.translateBy(proposedPosition[0] - thisRegion.x, proposedPosition[1] - thisRegion.y); } // 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); } // 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 } // 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 {Number[]} The x, y values [x, y] */ getCenterXY : function(){ return this.getAlignToXY(doc, 'c-c'); }, /** * Centers the Element in either the viewport, or another Element. * @param {String/HTMLElement/Ext.Element} [centerIn] The element in which to center the element. */ center : function(centerIn){ return this.alignTo(centerIn || doc, 'c-c'); } }; }()));