/* Copyright (c) 2008, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt version: 3.0.0pr1 */ YUI.add('dom-screen', function(Y) { /** * Adds position and region management functionality to DOM. * @module dom * @submodule dom-screen * @for DOM */ var OFFSET_TOP = 'offsetTop', DOCUMENT_ELEMENT = 'documentElement', COMPAT_MODE = 'compatMode', OFFSET_LEFT = 'offsetLeft', OFFSET_PARENT = 'offsetParent', POSITION = 'position', FIXED = 'fixed', RELATIVE = 'relative', LEFT = 'left', TOP = 'top', SCROLL_LEFT = 'scrollLeft', SCROLL_TOP = 'scrollTop', _BACK_COMPAT = 'BackCompat', MEDIUM = 'medium', HEIGHT = 'height', WIDTH = 'width', BORDER_LEFT_WIDTH = 'borderLeftWidth', BORDER_TOP_WIDTH = 'borderTopWidth', GET_BOUNDING_CLIENT_RECT = 'getBoundingClientRect', GET_COMPUTED_STYLE = 'getComputedStyle', RE_TABLE = /^t(?:able|d|h)$/i; Y.mix(Y.DOM, { /** * Returns the inner height of the viewport (exludes scrollbar). * @method winHeight * @return {Int} The pixel height of the viewport. */ winHeight: function(node) { var h = Y.DOM._getWinSize(node)[HEIGHT]; return h; }, /** * Returns the inner width of the viewport (exludes scrollbar). * @method winWidth * @return {Int} The pixel width of the viewport. */ winWidth: function(node) { var w = Y.DOM._getWinSize(node)[WIDTH]; return w; }, /** * Document height * @method docHeight * @return {Int} The pixel height of the document. */ docHeight: function(node) { var h = Y.DOM._getDocSize(node)[HEIGHT]; return Math.max(h, Y.DOM._getWinSize(node)[HEIGHT]); }, /** * Document width * @method docWidth * @return {Int} The pixel width of the document. */ docWidth: function(node) { var w = Y.DOM._getDocSize(node)[WIDTH]; return Math.max(w, Y.DOM._getWinSize(node)[WIDTH]); }, /** * Amount page has been scroll vertically * @method docScrollX * @return {Int} The scroll amount in pixels. */ docScrollX: function(node) { var doc = Y.DOM._getDoc(); return Math.max(doc[DOCUMENT_ELEMENT][SCROLL_LEFT], doc.body[SCROLL_LEFT]); }, /** * Amount page has been scroll horizontally * @method docScrollY * @return {Int} The scroll amount in pixels. */ docScrollY: function(node) { var doc = Y.DOM._getDoc(); return Math.max(doc[DOCUMENT_ELEMENT][SCROLL_TOP], doc.body[SCROLL_TOP]); }, /** * Gets the current position of an element based on page coordinates. * Element must be part of the DOM tree to have page coordinates * (display:none or elements not appended return false). * @method getXY * @param element The target element * @return {Array} The XY position of the element TODO: test inDocument/display */ getXY: function() { if (document[DOCUMENT_ELEMENT][GET_BOUNDING_CLIENT_RECT]) { return function(node) { if (!node) { return false; } var scrollLeft = Y.DOM.docScrollX(node), scrollTop = Y.DOM.docScrollY(node), box = node[GET_BOUNDING_CLIENT_RECT](), doc = Y.DOM._getDoc(node), //Round the numbers so we get sane data back xy = [Math.floor(box[LEFT]), Math.floor(box[TOP])]; if (Y.UA.ie) { var off1 = 2, off2 = 2, mode = doc[COMPAT_MODE], bLeft = Y.DOM[GET_COMPUTED_STYLE](doc[DOCUMENT_ELEMENT], BORDER_LEFT_WIDTH), bTop = Y.DOM[GET_COMPUTED_STYLE](doc[DOCUMENT_ELEMENT], BORDER_TOP_WIDTH); if (Y.UA.ie === 6) { if (mode !== _BACK_COMPAT) { off1 = 0; off2 = 0; } } if ((mode == _BACK_COMPAT)) { if (bLeft !== MEDIUM) { off1 = parseInt(bLeft, 10); } if (bTop !== MEDIUM) { off2 = parseInt(bTop, 10); } } xy[0] -= off1; xy[1] -= off2; } if ((scrollTop || scrollLeft)) { xy[0] += scrollLeft; xy[1] += scrollTop; } // gecko may return sub-pixel (non-int) values xy[0] = Math.floor(xy[0]); xy[1] = Math.floor(xy[1]); return xy; }; } else { return function(node) { // manually calculate by crawling up offsetParents //Calculate the Top and Left border sizes (assumes pixels) var xy = [node[OFFSET_LEFT], node[OFFSET_TOP]], parentNode = node, bCheck = ((Y.UA.gecko || (Y.UA.webkit > 519)) ? true : false); while ((parentNode = parentNode[OFFSET_PARENT])) { xy[0] += parentNode[OFFSET_LEFT]; xy[1] += parentNode[OFFSET_TOP]; if (bCheck) { xy = Y.DOM._calcBorders(parentNode, xy); } } // account for any scrolled ancestors if (Y.DOM.getStyle(node, POSITION) != FIXED) { parentNode = node; var scrollTop, scrollLeft; while ((parentNode = parentNode.parentNode)) { scrollTop = parentNode[SCROLL_TOP]; scrollLeft = parentNode[SCROLL_LEFT]; //Firefox does something funky with borders when overflow is not visible. if (Y.UA.gecko && (Y.DOM.getStyle(parentNode, 'overflow') !== 'visible')) { xy = Y.DOM._calcBorders(parentNode, xy); } if (scrollTop || scrollLeft) { xy[0] -= scrollLeft; xy[1] -= scrollTop; } } xy[0] += Y.DOM.docScrollX(node); xy[1] += Y.DOM.docScrollY(node); } else { //Fix FIXED position -- add scrollbars if (Y.UA.opera) { xy[0] -= Y.DOM.docScrollX(node); xy[1] -= Y.DOM.docScrollY(node); } else if (Y.UA.webkit || Y.UA.gecko) { xy[0] += Y.DOM.docScrollX(node); xy[1] += Y.DOM.docScrollY(node); } } //Round the numbers so we get sane data back xy[0] = Math.floor(xy[0]); xy[1] = Math.floor(xy[1]); return xy; }; } }(),// NOTE: Executing for loadtime branching /** * Gets the current X position of an element based on page coordinates. * Element must be part of the DOM tree to have page coordinates * (display:none or elements not appended return false). * @method getX * @param element The target element * @return {Int} The X position of the element */ getX: function(node) { return Y.DOM.getXY(node)[0]; }, /** * Gets the current Y position of an element based on page coordinates. * Element must be part of the DOM tree to have page coordinates * (display:none or elements not appended return false). * @method getY * @param element The target element * @return {Int} The Y position of the element */ getY: function(node) { return Y.DOM.getXY(node)[1]; }, /** * Set the position of an html element in page coordinates. * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). * @method setXY * @param element The target element * @param {Array} xy Contains X & Y values for new position (coordinates are page-based) * @param {Boolean} noRetry By default we try and set the position a second time if the first fails */ setXY: function(node, xy, noRetry) { var pos = Y.DOM.getStyle(node, POSITION), setStyle = Y.DOM.setStyle, delta = [ // assuming pixels; if not we will have to retry parseInt( Y.DOM[GET_COMPUTED_STYLE](node, LEFT), 10 ), parseInt( Y.DOM[GET_COMPUTED_STYLE](node, TOP), 10 ) ]; if (pos == 'static') { // default to relative pos = RELATIVE; setStyle(node, POSITION, pos); } var currentXY = Y.DOM.getXY(node); if (currentXY === false) { // has to be part of doc to have xy return false; } if ( isNaN(delta[0]) ) {// in case of 'auto' delta[0] = (pos == RELATIVE) ? 0 : node[OFFSET_LEFT]; } if ( isNaN(delta[1]) ) { // in case of 'auto' delta[1] = (pos == RELATIVE) ? 0 : node[OFFSET_TOP]; } if (xy[0] !== null) { setStyle(node, LEFT, xy[0] - currentXY[0] + delta[0] + 'px'); } if (xy[1] !== null) { setStyle(node, TOP, xy[1] - currentXY[1] + delta[1] + 'px'); } if (!noRetry) { var newXY = Y.DOM.getXY(node); // if retry is true, try one more time if we miss if ( (xy[0] !== null && newXY[0] != xy[0]) || (xy[1] !== null && newXY[1] != xy[1]) ) { Y.DOM.setXY(node, xy, true); } } }, /** * Set the X position of an html element in page coordinates, regardless of how the element is positioned. * The element(s) must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). * @method setX * @param element The target element * @param {Int} x The X values for new position (coordinates are page-based) */ setX: function(node, x) { return Y.DOM.setXY(node, [x, null]); }, /** * Set the Y position of an html element in page coordinates, regardless of how the element is positioned. * The element(s) must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). * @method setY * @param element The target element * @param {Int} y The Y values for new position (coordinates are page-based) */ setY: function(node, y) { return Y.DOM.setXY(node, [null, y]); }, _calcBorders: function(node, xy2) { var t = parseInt(Y.DOM[GET_COMPUTED_STYLE](node, BORDER_TOP_WIDTH), 10) || 0, l = parseInt(Y.DOM[GET_COMPUTED_STYLE](node, BORDER_LEFT_WIDTH), 10) || 0; if (Y.UA.gecko) { if (RE_TABLE.test(node.tagName)) { t = 0; l = 0; } } xy2[0] += l; xy2[1] += t; return xy2; }, _getWinSize: function(node) { var doc = Y.DOM._getDoc(), win = doc.defaultView || doc.parentWindow, mode = doc[COMPAT_MODE], h = win.innerHeight, w = win.innerWidth, root = doc[DOCUMENT_ELEMENT]; if ( mode && !Y.UA.opera ) { // IE, Gecko if (mode != 'CSS1Compat') { // Quirks root = doc.body; } h = root.clientHeight; w = root.clientWidth; } return { height: h, width: w }; }, _getDocSize: function(node) { var doc = Y.DOM._getDoc(), root = doc[DOCUMENT_ELEMENT]; if (doc[COMPAT_MODE] != 'CSS1Compat') { root = doc.body; } return { height: root.scrollHeight, width: root.scrollWidth }; } }); /** * Adds position and region management functionality to DOM. * @module dom * @submodule dom-screen * @for DOM */ var OFFSET_WIDTH = 'offsetWidth', OFFSET_HEIGHT = 'offsetHeight', TAG_NAME = 'tagName'; var getOffsets = function(r1, r2) { var t = Math.max(r1.top, r2.top ), r = Math.min(r1.right, r2.right ), b = Math.min(r1.bottom, r2.bottom), l = Math.max(r1.left, r2.left ); return { top: t, bottom: b, left: l, right: r }; }; Y.mix(Y.DOM, { /** * Returns an Object literal containing the following about this element: (top, right, bottom, left) * @method region * @param {HTMLElement} element The DOM element. @return {Object} Object literal containing the following about this element: (top, right, bottom, left) */ region: function(node) { var x = Y.DOM.getXY(node), ret = false; if (x) { ret = { '0': x[0], '1': x[1], top: x[1], right: x[0] + node[OFFSET_WIDTH], bottom: x[1] + node[OFFSET_HEIGHT], left: x[0], height: node[OFFSET_HEIGHT], width: node[OFFSET_WIDTH] }; } return ret; }, /** * Find the intersect information for the passes nodes. * @method intersect * @param {HTMLElement} element The first element * @param {HTMLElement | Object} element2 The element or region to check the interect with * @param {Object} altRegion An object literal containing the region for the first element if we already have the data (for performance i.e. DragDrop) @return {Object} Object literal containing the following intersection data: (top, right, bottom, left, area, yoff, xoff, inRegion) */ intersect: function(node, node2, altRegion) { var r = altRegion || Y.DOM.region(node), region = {}; var n = node2; if (n[TAG_NAME]) { region = Y.DOM.region(n); } else if (Y.Lang.isObject(node2)) { region = node2; } else { return false; } var off = getOffsets(region, r); return { top: off.top, right: off.right, bottom: off.bottom, left: off.left, area: ((off.bottom - off.top) * (off.right - off.left)), yoff: ((off.bottom - off.top)), xoff: (off.right - off.left), inRegion: Y.DOM.inRegion(node, node2, false, altRegion) }; }, /** * Check if any part of this node is in the passed region * @method inRegion * @param {Object} node2 The node to get the region from or an Object literal of the region * $param {Boolean} all Should all of the node be inside the region * @param {Object} altRegion An object literal containing the region for this node if we already have the data (for performance i.e. DragDrop) * @return {Boolean} True if in region, false if not. */ inRegion: function(node, node2, all, altRegion) { var region = {}, r = altRegion || Y.DOM.region(node); var n = node2; if (n[TAG_NAME]) { region = Y.DOM.region(n); } else if (Y.Lang.isObject(node2)) { region = node2; } else { return false; } if (all) { return ( r.left >= region.left && r.right <= region.right && r.top >= region.top && r.bottom <= region.bottom ); } else { var off = getOffsets(region, r); if (off.bottom >= off.top && off.right >= off.left) { return true; } else { return false; } } }, /** * Check if any part of this element is in the viewport * @method inViewportRegion * @param {HTMLElement} element The DOM element. * @param {Boolean} all Should all of the node be inside the region * @param {Object} altRegion An object literal containing the region for this node if we already have the data (for performance i.e. DragDrop) * @return {Boolean} True if in region, false if not. */ inViewportRegion: function(node, all, altRegion) { return Y.DOM.inRegion(node, Y.DOM.viewportRegion(node), all, altRegion); }, /** * Returns an Object literal containing the following about the visible region of viewport: (top, right, bottom, left) * @method viewportRegion @return {Object} Object literal containing the following about the visible region of the viewport: (top, right, bottom, left) */ viewportRegion: function(node) { node = node || Y.config.doc.documentElement; var r = { top: Y.DOM.docScrollY(node), right: Y.DOM.winWidth(node) + Y.DOM.docScrollX(node), bottom: (Y.DOM.docScrollY(node) + Y.DOM.winHeight(node)), left: Y.DOM.docScrollX(node) }; return r; } }); }, '3.0.0pr1' ,{skinnable:false, requires:['dom-base', 'dom-style']});