File yui3/src/dom/js/dom-screen.js
(function(Y) {
/**
* Adds position and region management functionality to DOM.
* @module dom
* @submodule dom-screen
* @for DOM
*/
var DOCUMENT_ELEMENT = 'documentElement',
COMPAT_MODE = 'compatMode',
POSITION = 'position',
FIXED = 'fixed',
RELATIVE = 'relative',
LEFT = 'left',
TOP = 'top',
_BACK_COMPAT = 'BackCompat',
MEDIUM = 'medium',
BORDER_LEFT_WIDTH = 'borderLeftWidth',
BORDER_TOP_WIDTH = 'borderTopWidth',
GET_BOUNDING_CLIENT_RECT = 'getBoundingClientRect',
GET_COMPUTED_STYLE = 'getComputedStyle',
Y_DOM = Y.DOM,
// TODO: how about thead/tbody/tfoot/tr?
// TODO: does caption matter?
RE_TABLE = /^t(?:able|d|h)$/i,
SCROLL_NODE;
if (Y.UA.ie) {
if (Y.config.doc[COMPAT_MODE] !== 'BackCompat') {
SCROLL_NODE = DOCUMENT_ELEMENT;
} else {
SCROLL_NODE = 'body';
}
}
Y.mix(Y_DOM, {
/**
* Returns the inner height of the viewport (exludes scrollbar).
* @method winHeight
* @return {Number} The current height of the viewport.
*/
winHeight: function(node) {
var h = Y_DOM._getWinSize(node).height;
Y.log('winHeight returning ' + h, 'info', 'dom-screen');
return h;
},
/**
* Returns the inner width of the viewport (exludes scrollbar).
* @method winWidth
* @return {Number} The current width of the viewport.
*/
winWidth: function(node) {
var w = Y_DOM._getWinSize(node).width;
Y.log('winWidth returning ' + w, 'info', 'dom-screen');
return w;
},
/**
* Document height
* @method docHeight
* @return {Number} The current height of the document.
*/
docHeight: function(node) {
var h = Y_DOM._getDocSize(node).height;
Y.log('docHeight returning ' + h, 'info', 'dom-screen');
return Math.max(h, Y_DOM._getWinSize(node).height);
},
/**
* Document width
* @method docWidth
* @return {Number} The current width of the document.
*/
docWidth: function(node) {
var w = Y_DOM._getDocSize(node).width;
Y.log('docWidth returning ' + w, 'info', 'dom-screen');
return Math.max(w, Y_DOM._getWinSize(node).width);
},
/**
* Amount page has been scroll horizontally
* @method docScrollX
* @return {Number} The current amount the screen is scrolled horizontally.
*/
docScrollX: function(node, doc) {
doc = doc || (node) ? Y_DOM._getDoc(node) : Y.config.doc; // perf optimization
var dv = doc.defaultView,
pageOffset = (dv) ? dv.pageXOffset : 0;
return Math.max(doc[DOCUMENT_ELEMENT].scrollLeft, doc.body.scrollLeft, pageOffset);
},
/**
* Amount page has been scroll vertically
* @method docScrollY
* @return {Number} The current amount the screen is scrolled vertically.
*/
docScrollY: function(node, doc) {
doc = doc || (node) ? Y_DOM._getDoc(node) : Y.config.doc; // perf optimization
var dv = doc.defaultView,
pageOffset = (dv) ? dv.pageYOffset : 0;
return Math.max(doc[DOCUMENT_ELEMENT].scrollTop, doc.body.scrollTop, pageOffset);
},
/**
* 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 (Y.config.doc[DOCUMENT_ELEMENT][GET_BOUNDING_CLIENT_RECT]) {
return function(node) {
var xy = null,
scrollLeft,
scrollTop,
mode,
box,
offX,
offY,
doc,
win,
inDoc,
rootNode;
if (node && node.tagName) {
doc = node.ownerDocument;
mode = doc[COMPAT_MODE];
if (mode !== _BACK_COMPAT) {
rootNode = doc[DOCUMENT_ELEMENT];
} else {
rootNode = doc.body;
}
// inline inDoc check for perf
if (rootNode.contains) {
inDoc = rootNode.contains(node);
} else {
inDoc = Y.DOM.contains(rootNode, node);
}
if (inDoc) {
win = doc.defaultView;
// inline scroll calc for perf
if (win && 'pageXOffset' in win) {
scrollLeft = win.pageXOffset;
scrollTop = win.pageYOffset;
} else {
scrollLeft = (SCROLL_NODE) ? doc[SCROLL_NODE].scrollLeft : Y_DOM.docScrollX(node, doc);
scrollTop = (SCROLL_NODE) ? doc[SCROLL_NODE].scrollTop : Y_DOM.docScrollY(node, doc);
}
if (Y.UA.ie) { // IE < 8, quirks, or compatMode
if (!doc.documentMode || doc.documentMode < 8 || mode === _BACK_COMPAT) {
offX = rootNode.clientLeft;
offY = rootNode.clientTop;
}
}
box = node[GET_BOUNDING_CLIENT_RECT]();
xy = [box.left, box.top];
if (offX || offY) {
xy[0] -= offX;
xy[1] -= offY;
}
if ((scrollTop || scrollLeft)) {
if (!Y.UA.ios || (Y.UA.ios >= 4.2)) {
xy[0] += scrollLeft;
xy[1] += scrollTop;
}
}
} else {
xy = Y_DOM._getOffset(node);
}
}
return xy;
};
} else {
return function(node) { // manually calculate by crawling up offsetParents
//Calculate the Top and Left border sizes (assumes pixels)
var xy = null,
doc,
parentNode,
bCheck,
scrollTop,
scrollLeft;
if (node) {
if (Y_DOM.inDoc(node)) {
xy = [node.offsetLeft, node.offsetTop];
doc = node.ownerDocument;
parentNode = node;
// TODO: refactor with !! or just falsey
bCheck = ((Y.UA.gecko || Y.UA.webkit > 519) ? true : false);
// TODO: worth refactoring for TOP/LEFT only?
while ((parentNode = parentNode.offsetParent)) {
xy[0] += parentNode.offsetLeft;
xy[1] += parentNode.offsetTop;
if (bCheck) {
xy = Y_DOM._calcBorders(parentNode, xy);
}
}
// account for any scrolled ancestors
if (Y_DOM.getStyle(node, POSITION) != FIXED) {
parentNode = node;
while ((parentNode = parentNode.parentNode)) {
scrollTop = parentNode.scrollTop;
scrollLeft = parentNode.scrollLeft;
//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, doc);
xy[1] += Y_DOM.docScrollY(node, doc);
} else {
//Fix FIXED position -- add scrollbars
xy[0] += Y_DOM.docScrollX(node, doc);
xy[1] += Y_DOM.docScrollY(node, doc);
}
} else {
xy = Y_DOM._getOffset(node);
}
}
return xy;
};
}
}(),// NOTE: Executing for loadtime branching
/**
Gets the width of vertical scrollbars on overflowed containers in the body
content.
@method getScrollbarWidth
@return {Number} Pixel width of a scrollbar in the current browser
**/
getScrollbarWidth: Y.cached(function () {
var doc = Y.config.doc,
testNode = doc.createElement('div'),
body = doc.getElementsByTagName('body')[0],
// 0.1 because cached doesn't support falsy refetch values
width = 0.1;
if (body) {
testNode.style.cssText = "position:absolute;visibility:hidden;overflow:scroll;width:20px;";
testNode.appendChild(doc.createElement('p')).style.height = '1px';
body.insertBefore(testNode, body.firstChild);
width = testNode.offsetWidth - testNode.clientWidth;
body.removeChild(testNode);
}
return width;
}, null, 0.1),
/**
* 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 {Number} 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 {Number} 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 setStyle = Y_DOM.setStyle,
pos,
delta,
newXY,
currentXY,
offsetDir,
dir,
x;
if (node && xy) {
pos = Y_DOM.getStyle(node, POSITION);
offsetDir = Y_DOM.OFFSET_XY;
if (!offsetDir) {
dir = Y_DOM.getComputedStyle(node, 'direction');
offsetDir = (dir === 'rtl' ? 'right' : LEFT);
}
delta = Y_DOM._getOffset(node, offsetDir);
if (pos == 'static') { // default to relative
pos = RELATIVE;
setStyle(node, POSITION, pos);
}
currentXY = Y_DOM._getDirXY(node, offsetDir);
x = xy[0];
if (offsetDir === 'right') {
x = Y_DOM.winWidth() - (xy[0] + parseInt(Y_DOM.getComputedStyle(node, 'width'), 10));
if (!delta[0] && !noRetry) {
noRetry = false;
}
}
if (x !== null) {
setStyle(node, offsetDir, x - currentXY[0] + delta[0] + 'px');
}
if (xy[1] !== null) {
setStyle(node, TOP, xy[1] - currentXY[1] + delta[1] + 'px');
}
if (!noRetry) {
newXY = Y_DOM.getXY(node);
if (newXY[0] !== xy[0] || newXY[1] !== xy[1]) {
Y_DOM.setXY(node, xy, true);
}
}
Y.log('setXY setting position to ' + xy, 'info', 'dom-screen');
} else {
Y.log('setXY failed to set ' + node + ' to ' + xy, 'info', 'dom-screen');
}
},
/**
* 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 {Number} 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 {Number} y The Y values for new position (coordinates are page-based)
*/
setY: function(node, y) {
return Y_DOM.setXY(node, [null, y]);
},
/**
* @method swapXY
* @description Swap the xy position with another node
* @param {Node} node The node to swap with
* @param {Node} otherNode The other node to swap with
* @return {Node}
*/
swapXY: function(node, otherNode) {
var xy = Y_DOM.getXY(node);
Y_DOM.setXY(node, Y_DOM.getXY(otherNode));
Y_DOM.setXY(otherNode, xy);
},
_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, doc) {
doc = doc || (node) ? Y_DOM._getDoc(node) : Y.config.doc;
var 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 = (node) ? Y_DOM._getDoc(node) : Y.config.doc,
root = doc[DOCUMENT_ELEMENT];
if (doc[COMPAT_MODE] != 'CSS1Compat') {
root = doc.body;
}
return { height: root.scrollHeight, width: root.scrollWidth };
},
_getDirXY: function(node, dir) {
var xy = Y_DOM.getXY(node);
if (dir === 'right') {
xy[0] = (Y_DOM.winWidth() - (xy[0] + parseInt(Y_DOM.getComputedStyle(node, 'width'), 10)));
}
return xy;
}
});
})(Y);