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) {
11
* Adds position and region management functionality to DOM.
13
* @submodule dom-screen
17
var OFFSET_TOP = 'offsetTop',
19
DOCUMENT_ELEMENT = 'documentElement',
20
COMPAT_MODE = 'compatMode',
21
OFFSET_LEFT = 'offsetLeft',
22
OFFSET_PARENT = 'offsetParent',
23
POSITION = 'position',
25
RELATIVE = 'relative',
28
SCROLL_LEFT = 'scrollLeft',
29
SCROLL_TOP = 'scrollTop',
30
_BACK_COMPAT = 'BackCompat',
34
BORDER_LEFT_WIDTH = 'borderLeftWidth',
35
BORDER_TOP_WIDTH = 'borderTopWidth',
36
GET_BOUNDING_CLIENT_RECT = 'getBoundingClientRect',
37
GET_COMPUTED_STYLE = 'getComputedStyle',
38
RE_TABLE = /^t(?:able|d|h)$/i;
44
* Returns the inner height of the viewport (exludes scrollbar).
48
winHeight: function(node) {
49
var h = Y.DOM._getWinSize(node)[HEIGHT];
54
* Returns the inner width of the viewport (exludes scrollbar).
58
winWidth: function(node) {
59
var w = Y.DOM._getWinSize(node)[WIDTH];
68
docHeight: function(node) {
69
var h = Y.DOM._getDocSize(node)[HEIGHT];
70
return Math.max(h, Y.DOM._getWinSize(node)[HEIGHT]);
78
docWidth: function(node) {
79
var w = Y.DOM._getDocSize(node)[WIDTH];
80
return Math.max(w, Y.DOM._getWinSize(node)[WIDTH]);
84
* Amount page has been scroll vertically
88
docScrollX: function(node) {
89
var doc = Y.DOM._getDoc();
90
return Math.max(doc[DOCUMENT_ELEMENT][SCROLL_LEFT], doc.body[SCROLL_LEFT]);
94
* Amount page has been scroll horizontally
98
docScrollY: function(node) {
99
var doc = Y.DOM._getDoc();
100
return Math.max(doc[DOCUMENT_ELEMENT][SCROLL_TOP], doc.body[SCROLL_TOP]);
104
* Gets the current position of an element based on page coordinates.
105
* Element must be part of the DOM tree to have page coordinates
106
* (display:none or elements not appended return false).
108
* @param element The target element
109
* @return {Array} The XY position of the element
111
TODO: test inDocument/display
118
if (document[DOCUMENT_ELEMENT][GET_BOUNDING_CLIENT_RECT]) {
119
return function(node) {
123
var scrollLeft = Y.DOM.docScrollX(node),
124
scrollTop = Y.DOM.docScrollY(node),
125
box = node[GET_BOUNDING_CLIENT_RECT](),
126
doc = Y.DOM._getDoc(node),
127
//Round the numbers so we get sane data back
128
xy = [Math.floor(box[LEFT]), Math.floor(box[TOP])];
131
var off1 = 2, off2 = 2,
132
mode = doc[COMPAT_MODE],
133
bLeft = Y.DOM[GET_COMPUTED_STYLE](doc[DOCUMENT_ELEMENT], BORDER_LEFT_WIDTH),
134
bTop = Y.DOM[GET_COMPUTED_STYLE](doc[DOCUMENT_ELEMENT], BORDER_TOP_WIDTH);
137
if (mode !== _BACK_COMPAT) {
143
if ((mode == _BACK_COMPAT)) {
144
if (bLeft !== MEDIUM) {
145
off1 = parseInt(bLeft, 10);
147
if (bTop !== MEDIUM) {
148
off2 = parseInt(bTop, 10);
160
if ((scrollTop || scrollLeft)) {
165
// gecko may return sub-pixel (non-int) values
166
xy[0] = Math.floor(xy[0]);
167
xy[1] = Math.floor(xy[1]);
172
return function(node) { // manually calculate by crawling up offsetParents
173
//Calculate the Top and Left border sizes (assumes pixels)
174
var xy = [node[OFFSET_LEFT], node[OFFSET_TOP]],
176
bCheck = ((Y.UA.gecko || (Y.UA.webkit > 519)) ? true : false);
178
while ((parentNode = parentNode[OFFSET_PARENT])) {
179
xy[0] += parentNode[OFFSET_LEFT];
180
xy[1] += parentNode[OFFSET_TOP];
182
xy = Y.DOM._calcBorders(parentNode, xy);
186
// account for any scrolled ancestors
187
if (Y.DOM.getStyle(node, POSITION) != FIXED) {
189
var scrollTop, scrollLeft;
191
while ((parentNode = parentNode.parentNode)) {
192
scrollTop = parentNode[SCROLL_TOP];
193
scrollLeft = parentNode[SCROLL_LEFT];
195
//Firefox does something funky with borders when overflow is not visible.
196
if (Y.UA.gecko && (Y.DOM.getStyle(parentNode, 'overflow') !== 'visible')) {
197
xy = Y.DOM._calcBorders(parentNode, xy);
201
if (scrollTop || scrollLeft) {
206
xy[0] += Y.DOM.docScrollX(node);
207
xy[1] += Y.DOM.docScrollY(node);
210
//Fix FIXED position -- add scrollbars
212
xy[0] -= Y.DOM.docScrollX(node);
213
xy[1] -= Y.DOM.docScrollY(node);
214
} else if (Y.UA.webkit || Y.UA.gecko) {
215
xy[0] += Y.DOM.docScrollX(node);
216
xy[1] += Y.DOM.docScrollY(node);
219
//Round the numbers so we get sane data back
220
xy[0] = Math.floor(xy[0]);
221
xy[1] = Math.floor(xy[1]);
226
}(),// NOTE: Executing for loadtime branching
229
* Gets the current X position of an element based on page coordinates.
230
* Element must be part of the DOM tree to have page coordinates
231
* (display:none or elements not appended return false).
233
* @param element The target element
234
* @return {Int} The X position of the element
237
getX: function(node) {
238
return Y.DOM.getXY(node)[0];
242
* Gets the current Y position of an element based on page coordinates.
243
* Element must be part of the DOM tree to have page coordinates
244
* (display:none or elements not appended return false).
246
* @param element The target element
247
* @return {Int} The Y position of the element
250
getY: function(node) {
251
return Y.DOM.getXY(node)[1];
255
* Set the position of an html element in page coordinates.
256
* The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
258
* @param element The target element
259
* @param {Array} xy Contains X & Y values for new position (coordinates are page-based)
260
* @param {Boolean} noRetry By default we try and set the position a second time if the first fails
262
setXY: function(node, xy, noRetry) {
263
var pos = Y.DOM.getStyle(node, POSITION),
264
setStyle = Y.DOM.setStyle,
266
delta = [ // assuming pixels; if not we will have to retry
267
parseInt( Y.DOM[GET_COMPUTED_STYLE](node, LEFT), 10 ),
268
parseInt( Y.DOM[GET_COMPUTED_STYLE](node, TOP), 10 )
271
if (pos == 'static') { // default to relative
273
setStyle(node, POSITION, pos);
276
var currentXY = Y.DOM.getXY(node);
281
if (currentXY === false) { // has to be part of doc to have xy
290
if ( isNaN(delta[0]) ) {// in case of 'auto'
291
delta[0] = (pos == RELATIVE) ? 0 : node[OFFSET_LEFT];
293
if ( isNaN(delta[1]) ) { // in case of 'auto'
294
delta[1] = (pos == RELATIVE) ? 0 : node[OFFSET_TOP];
297
if (xy[0] !== null) {
298
setStyle(node, LEFT, xy[0] - currentXY[0] + delta[0] + 'px');
301
if (xy[1] !== null) {
302
setStyle(node, TOP, xy[1] - currentXY[1] + delta[1] + 'px');
306
var newXY = Y.DOM.getXY(node);
308
// if retry is true, try one more time if we miss
309
if ( (xy[0] !== null && newXY[0] != xy[0]) ||
310
(xy[1] !== null && newXY[1] != xy[1]) ) {
311
Y.DOM.setXY(node, xy, true);
318
* Set the X position of an html element in page coordinates, regardless of how the element is positioned.
319
* The element(s) must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
321
* @param element The target element
322
* @param {Int} x The X values for new position (coordinates are page-based)
324
setX: function(node, x) {
325
return Y.DOM.setXY(node, [x, null]);
329
* Set the Y position of an html element in page coordinates, regardless of how the element is positioned.
330
* The element(s) must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
332
* @param element The target element
333
* @param {Int} y The Y values for new position (coordinates are page-based)
335
setY: function(node, y) {
336
return Y.DOM.setXY(node, [null, y]);
339
_calcBorders: function(node, xy2) {
340
var t = parseInt(Y.DOM[GET_COMPUTED_STYLE](node, BORDER_TOP_WIDTH), 10) || 0,
341
l = parseInt(Y.DOM[GET_COMPUTED_STYLE](node, BORDER_LEFT_WIDTH), 10) || 0;
343
if (RE_TABLE.test(node.tagName)) {
353
_getWinSize: function(node) {
354
var doc = Y.DOM._getDoc(),
355
win = doc.defaultView || doc.parentWindow,
356
mode = doc[COMPAT_MODE],
359
root = doc[DOCUMENT_ELEMENT];
361
if ( mode && !Y.UA.opera ) { // IE, Gecko
362
if (mode != 'CSS1Compat') { // Quirks
365
h = root.clientHeight;
366
w = root.clientWidth;
368
return { height: h, width: w };
371
_getDocSize: function(node) {
372
var doc = Y.DOM._getDoc(),
373
root = doc[DOCUMENT_ELEMENT];
375
if (doc[COMPAT_MODE] != 'CSS1Compat') {
379
return { height: root.scrollHeight, width: root.scrollWidth };
386
* Adds position and region management functionality to DOM.
388
* @submodule dom-screen
392
var OFFSET_WIDTH = 'offsetWidth',
393
OFFSET_HEIGHT = 'offsetHeight',
398
TAG_NAME = 'tagName';
400
var getOffsets = function(r1, r2) {
401
var t = Math.max(r1[TOP], r2[TOP]),
402
r = Math.min(r1[RIGHT], r2[RIGHT]),
403
b = Math.min(r1[BOTTOM], r2[BOTTOM]),
404
l = Math.max(r1[LEFT], r2[LEFT]),
414
var DOM = DOM || Y.DOM;
417
* Returns an Object literal containing the following about this element: (top, right, bottom, left)
419
* @param {HTMLElement} element The DOM element.
420
@return {Object} Object literal containing the following about this element: (top, right, bottom, left)
422
region: function(node) {
423
var x = DOM.getXY(node),
431
right: x[0] + node[OFFSET_WIDTH],
432
bottom: x[1] + node[OFFSET_HEIGHT],
434
height: node[OFFSET_HEIGHT],
435
width: node[OFFSET_WIDTH]
443
* Find the intersect information for the passes nodes.
445
* @param {HTMLElement} element The first element
446
* @param {HTMLElement | Object} element2 The element or region to check the interect with
447
* @param {Object} altRegion An object literal containing the region for the first element if we already have the data (for performance i.e. DragDrop)
448
@return {Object} Object literal containing the following intersection data: (top, right, bottom, left, area, yoff, xoff, inRegion)
450
intersect: function(node, node2, altRegion) {
451
var r = altRegion || DOM.region(node), region = {};
455
region = DOM.region(n);
456
} else if (Y.Lang.isObject(node2)) {
462
var off = getOffsets(region, r);
468
area: ((off[BOTTOM] - off[TOP]) * (off[RIGHT] - off[LEFT])),
469
yoff: ((off[BOTTOM] - off[TOP])),
470
xoff: (off[RIGHT] - off[LEFT]),
471
inRegion: DOM.inRegion(node, node2, false, altRegion)
476
* Check if any part of this node is in the passed region
478
* @param {Object} node2 The node to get the region from or an Object literal of the region
479
* $param {Boolean} all Should all of the node be inside the region
480
* @param {Object} altRegion An object literal containing the region for this node if we already have the data (for performance i.e. DragDrop)
481
* @return {Boolean} True if in region, false if not.
483
inRegion: function(node, node2, all, altRegion) {
485
r = altRegion || DOM.region(node);
489
region = DOM.region(n);
490
} else if (Y.Lang.isObject(node2)) {
498
r[LEFT] >= region[LEFT] &&
499
r[RIGHT] <= region[RIGHT] &&
500
r[TOP] >= region[TOP] &&
501
r[BOTTOM] <= region[BOTTOM] );
503
var off = getOffsets(region, r);
504
if (off[BOTTOM] >= off[TOP] && off[RIGHT] >= off[LEFT]) {
514
* Check if any part of this element is in the viewport
515
* @method inViewportRegion
516
* @param {HTMLElement} element The DOM element.
517
* @param {Boolean} all Should all of the node be inside the region
518
* @param {Object} altRegion An object literal containing the region for this node if we already have the data (for performance i.e. DragDrop)
519
* @return {Boolean} True if in region, false if not.
521
inViewportRegion: function(node, all, altRegion) {
522
return DOM.inRegion(node, DOM.viewportRegion(node), all, altRegion);
527
* Returns an Object literal containing the following about the visible region of viewport: (top, right, bottom, left)
528
* @method viewportRegion
529
@return {Object} Object literal containing the following about the visible region of the viewport: (top, right, bottom, left)
531
viewportRegion: function(node) {
532
node = node || Y.config.doc.documentElement;
534
r[TOP] = DOM.docScrollY(node);
535
r[RIGHT] = DOM.winWidth(node) + DOM.docScrollX(node);
536
r[BOTTOM] = (DOM.docScrollY(node) + DOM.winHeight(node));
537
r[LEFT] = DOM.docScrollX(node);
545
}, '3.0.0pr2' ,{skinnable:false, requires:['dom-base', 'dom-style']});
added
removed
loggerhead/static/javascript/yui/build/dom/dom-screen.js
