2
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
3
Code licensed under the BSD License:
4
http://developer.yahoo.net/yui/license.txt
7
YUI.add('dom-screen', function(Y) {
10
* Adds position and region management functionality to DOM.
12
* @submodule dom-screen
16
var OFFSET_TOP = 'offsetTop',
17
DOCUMENT_ELEMENT = 'documentElement',
18
COMPAT_MODE = 'compatMode',
19
OFFSET_LEFT = 'offsetLeft',
20
OFFSET_PARENT = 'offsetParent',
21
POSITION = 'position',
23
RELATIVE = 'relative',
26
SCROLL_LEFT = 'scrollLeft',
27
SCROLL_TOP = 'scrollTop',
28
_BACK_COMPAT = 'BackCompat',
32
BORDER_LEFT_WIDTH = 'borderLeftWidth',
33
BORDER_TOP_WIDTH = 'borderTopWidth',
34
GET_BOUNDING_CLIENT_RECT = 'getBoundingClientRect',
35
GET_COMPUTED_STYLE = 'getComputedStyle',
36
RE_TABLE = /^t(?:able|d|h)$/i;
40
* Returns the inner height of the viewport (exludes scrollbar).
42
* @return {Int} The pixel height of the viewport.
44
winHeight: function(node) {
45
var h = Y.DOM._getWinSize(node)[HEIGHT];
50
* Returns the inner width of the viewport (exludes scrollbar).
52
* @return {Int} The pixel width of the viewport.
54
winWidth: function(node) {
55
var w = Y.DOM._getWinSize(node)[WIDTH];
62
* @return {Int} The pixel height of the document.
64
docHeight: function(node) {
65
var h = Y.DOM._getDocSize(node)[HEIGHT];
66
return Math.max(h, Y.DOM._getWinSize(node)[HEIGHT]);
72
* @return {Int} The pixel width of the document.
74
docWidth: function(node) {
75
var w = Y.DOM._getDocSize(node)[WIDTH];
76
return Math.max(w, Y.DOM._getWinSize(node)[WIDTH]);
80
* Amount page has been scroll vertically
82
* @return {Int} The scroll amount in pixels.
84
docScrollX: function(node) {
85
var doc = Y.DOM._getDoc();
86
return Math.max(doc[DOCUMENT_ELEMENT][SCROLL_LEFT], doc.body[SCROLL_LEFT]);
90
* Amount page has been scroll horizontally
92
* @return {Int} The scroll amount in pixels.
94
docScrollY: function(node) {
95
var doc = Y.DOM._getDoc();
96
return Math.max(doc[DOCUMENT_ELEMENT][SCROLL_TOP], doc.body[SCROLL_TOP]);
100
* Gets the current position of an element based on page coordinates.
101
* Element must be part of the DOM tree to have page coordinates
102
* (display:none or elements not appended return false).
104
* @param element The target element
105
* @return {Array} The XY position of the element
107
TODO: test inDocument/display
110
if (document[DOCUMENT_ELEMENT][GET_BOUNDING_CLIENT_RECT]) {
111
return function(node) {
115
var scrollLeft = Y.DOM.docScrollX(node),
116
scrollTop = Y.DOM.docScrollY(node),
117
box = node[GET_BOUNDING_CLIENT_RECT](),
118
doc = Y.DOM._getDoc(node),
119
//Round the numbers so we get sane data back
120
xy = [Math.floor(box[LEFT]), Math.floor(box[TOP])];
123
var off1 = 2, off2 = 2,
124
mode = doc[COMPAT_MODE],
125
bLeft = Y.DOM[GET_COMPUTED_STYLE](doc[DOCUMENT_ELEMENT], BORDER_LEFT_WIDTH),
126
bTop = Y.DOM[GET_COMPUTED_STYLE](doc[DOCUMENT_ELEMENT], BORDER_TOP_WIDTH);
129
if (mode !== _BACK_COMPAT) {
135
if ((mode == _BACK_COMPAT)) {
136
if (bLeft !== MEDIUM) {
137
off1 = parseInt(bLeft, 10);
139
if (bTop !== MEDIUM) {
140
off2 = parseInt(bTop, 10);
148
if ((scrollTop || scrollLeft)) {
153
// gecko may return sub-pixel (non-int) values
154
xy[0] = Math.floor(xy[0]);
155
xy[1] = Math.floor(xy[1]);
160
return function(node) { // manually calculate by crawling up offsetParents
161
//Calculate the Top and Left border sizes (assumes pixels)
162
var xy = [node[OFFSET_LEFT], node[OFFSET_TOP]],
164
bCheck = ((Y.UA.gecko || (Y.UA.webkit > 519)) ? true : false);
166
while ((parentNode = parentNode[OFFSET_PARENT])) {
167
xy[0] += parentNode[OFFSET_LEFT];
168
xy[1] += parentNode[OFFSET_TOP];
170
xy = Y.DOM._calcBorders(parentNode, xy);
174
// account for any scrolled ancestors
175
if (Y.DOM.getStyle(node, POSITION) != FIXED) {
177
var scrollTop, scrollLeft;
179
while ((parentNode = parentNode.parentNode)) {
180
scrollTop = parentNode[SCROLL_TOP];
181
scrollLeft = parentNode[SCROLL_LEFT];
183
//Firefox does something funky with borders when overflow is not visible.
184
if (Y.UA.gecko && (Y.DOM.getStyle(parentNode, 'overflow') !== 'visible')) {
185
xy = Y.DOM._calcBorders(parentNode, xy);
189
if (scrollTop || scrollLeft) {
194
xy[0] += Y.DOM.docScrollX(node);
195
xy[1] += Y.DOM.docScrollY(node);
198
//Fix FIXED position -- add scrollbars
200
xy[0] -= Y.DOM.docScrollX(node);
201
xy[1] -= Y.DOM.docScrollY(node);
202
} else if (Y.UA.webkit || Y.UA.gecko) {
203
xy[0] += Y.DOM.docScrollX(node);
204
xy[1] += Y.DOM.docScrollY(node);
207
//Round the numbers so we get sane data back
208
xy[0] = Math.floor(xy[0]);
209
xy[1] = Math.floor(xy[1]);
214
}(),// NOTE: Executing for loadtime branching
217
* Gets the current X position of an element based on page coordinates.
218
* Element must be part of the DOM tree to have page coordinates
219
* (display:none or elements not appended return false).
221
* @param element The target element
222
* @return {Int} The X position of the element
225
getX: function(node) {
226
return Y.DOM.getXY(node)[0];
230
* Gets the current Y position of an element based on page coordinates.
231
* Element must be part of the DOM tree to have page coordinates
232
* (display:none or elements not appended return false).
234
* @param element The target element
235
* @return {Int} The Y position of the element
238
getY: function(node) {
239
return Y.DOM.getXY(node)[1];
243
* Set the position of an html element in page coordinates.
244
* The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
246
* @param element The target element
247
* @param {Array} xy Contains X & Y values for new position (coordinates are page-based)
248
* @param {Boolean} noRetry By default we try and set the position a second time if the first fails
250
setXY: function(node, xy, noRetry) {
251
var pos = Y.DOM.getStyle(node, POSITION),
252
setStyle = Y.DOM.setStyle,
253
delta = [ // assuming pixels; if not we will have to retry
254
parseInt( Y.DOM[GET_COMPUTED_STYLE](node, LEFT), 10 ),
255
parseInt( Y.DOM[GET_COMPUTED_STYLE](node, TOP), 10 )
258
if (pos == 'static') { // default to relative
260
setStyle(node, POSITION, pos);
263
var currentXY = Y.DOM.getXY(node);
265
if (currentXY === false) { // has to be part of doc to have xy
269
if ( isNaN(delta[0]) ) {// in case of 'auto'
270
delta[0] = (pos == RELATIVE) ? 0 : node[OFFSET_LEFT];
272
if ( isNaN(delta[1]) ) { // in case of 'auto'
273
delta[1] = (pos == RELATIVE) ? 0 : node[OFFSET_TOP];
276
if (xy[0] !== null) {
277
setStyle(node, LEFT, xy[0] - currentXY[0] + delta[0] + 'px');
280
if (xy[1] !== null) {
281
setStyle(node, TOP, xy[1] - currentXY[1] + delta[1] + 'px');
285
var newXY = Y.DOM.getXY(node);
287
// if retry is true, try one more time if we miss
288
if ( (xy[0] !== null && newXY[0] != xy[0]) ||
289
(xy[1] !== null && newXY[1] != xy[1]) ) {
290
Y.DOM.setXY(node, xy, true);
297
* Set the X position of an html element in page coordinates, regardless of how the element is positioned.
298
* The element(s) must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
300
* @param element The target element
301
* @param {Int} x The X values for new position (coordinates are page-based)
303
setX: function(node, x) {
304
return Y.DOM.setXY(node, [x, null]);
308
* Set the Y position of an html element in page coordinates, regardless of how the element is positioned.
309
* The element(s) must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
311
* @param element The target element
312
* @param {Int} y The Y values for new position (coordinates are page-based)
314
setY: function(node, y) {
315
return Y.DOM.setXY(node, [null, y]);
318
_calcBorders: function(node, xy2) {
319
var t = parseInt(Y.DOM[GET_COMPUTED_STYLE](node, BORDER_TOP_WIDTH), 10) || 0,
320
l = parseInt(Y.DOM[GET_COMPUTED_STYLE](node, BORDER_LEFT_WIDTH), 10) || 0;
322
if (RE_TABLE.test(node.tagName)) {
332
_getWinSize: function(node) {
333
var doc = Y.DOM._getDoc(),
334
win = doc.defaultView || doc.parentWindow,
335
mode = doc[COMPAT_MODE],
338
root = doc[DOCUMENT_ELEMENT];
340
if ( mode && !Y.UA.opera ) { // IE, Gecko
341
if (mode != 'CSS1Compat') { // Quirks
344
h = root.clientHeight;
345
w = root.clientWidth;
347
return { height: h, width: w };
350
_getDocSize: function(node) {
351
var doc = Y.DOM._getDoc(),
352
root = doc[DOCUMENT_ELEMENT];
354
if (doc[COMPAT_MODE] != 'CSS1Compat') {
358
return { height: root.scrollHeight, width: root.scrollWidth };
363
* Adds position and region management functionality to DOM.
365
* @submodule dom-screen
369
var OFFSET_WIDTH = 'offsetWidth',
370
OFFSET_HEIGHT = 'offsetHeight',
371
TAG_NAME = 'tagName';
373
var getOffsets = function(r1, r2) {
375
var t = Math.max(r1.top, r2.top ),
376
r = Math.min(r1.right, r2.right ),
377
b = Math.min(r1.bottom, r2.bottom),
378
l = Math.max(r1.left, r2.left );
390
* Returns an Object literal containing the following about this element: (top, right, bottom, left)
392
* @param {HTMLElement} element The DOM element.
393
@return {Object} Object literal containing the following about this element: (top, right, bottom, left)
395
region: function(node) {
396
var x = Y.DOM.getXY(node),
404
right: x[0] + node[OFFSET_WIDTH],
405
bottom: x[1] + node[OFFSET_HEIGHT],
407
height: node[OFFSET_HEIGHT],
408
width: node[OFFSET_WIDTH]
416
* Find the intersect information for the passes nodes.
418
* @param {HTMLElement} element The first element
419
* @param {HTMLElement | Object} element2 The element or region to check the interect with
420
* @param {Object} altRegion An object literal containing the region for the first element if we already have the data (for performance i.e. DragDrop)
421
@return {Object} Object literal containing the following intersection data: (top, right, bottom, left, area, yoff, xoff, inRegion)
423
intersect: function(node, node2, altRegion) {
424
var r = altRegion || Y.DOM.region(node), region = {};
428
region = Y.DOM.region(n);
429
} else if (Y.Lang.isObject(node2)) {
435
var off = getOffsets(region, r);
441
area: ((off.bottom - off.top) * (off.right - off.left)),
442
yoff: ((off.bottom - off.top)),
443
xoff: (off.right - off.left),
444
inRegion: Y.DOM.inRegion(node, node2, false, altRegion)
449
* Check if any part of this node is in the passed region
451
* @param {Object} node2 The node to get the region from or an Object literal of the region
452
* $param {Boolean} all Should all of the node be inside the region
453
* @param {Object} altRegion An object literal containing the region for this node if we already have the data (for performance i.e. DragDrop)
454
* @return {Boolean} True if in region, false if not.
456
inRegion: function(node, node2, all, altRegion) {
458
r = altRegion || Y.DOM.region(node);
462
region = Y.DOM.region(n);
463
} else if (Y.Lang.isObject(node2)) {
470
return ( r.left >= region.left &&
471
r.right <= region.right &&
472
r.top >= region.top &&
473
r.bottom <= region.bottom );
475
var off = getOffsets(region, r);
476
if (off.bottom >= off.top && off.right >= off.left) {
486
* Check if any part of this element is in the viewport
487
* @method inViewportRegion
488
* @param {HTMLElement} element The DOM element.
489
* @param {Boolean} all Should all of the node be inside the region
490
* @param {Object} altRegion An object literal containing the region for this node if we already have the data (for performance i.e. DragDrop)
491
* @return {Boolean} True if in region, false if not.
493
inViewportRegion: function(node, all, altRegion) {
494
return Y.DOM.inRegion(node, Y.DOM.viewportRegion(node), all, altRegion);
499
* Returns an Object literal containing the following about the visible region of viewport: (top, right, bottom, left)
500
* @method viewportRegion
501
@return {Object} Object literal containing the following about the visible region of the viewport: (top, right, bottom, left)
503
viewportRegion: function(node) {
504
node = node || Y.config.doc.documentElement;
506
top: Y.DOM.docScrollY(node),
507
right: Y.DOM.winWidth(node) + Y.DOM.docScrollX(node),
508
bottom: (Y.DOM.docScrollY(node) + Y.DOM.winHeight(node)),
509
left: Y.DOM.docScrollX(node)
517
}, '3.0.0pr1' ,{skinnable:false, requires:['dom-base', 'dom-style']});