1 /*

     2 Copyright (c) 2009, Yahoo! Inc. All rights reserved.

     3 Code licensed under the BSD License:

     4 http://developer.yahoo.net/yui/license.txt

     5 version: 3.0.0b1

     6 build: 1163

     7 */

     8 YUI.add('dom-screen', function(Y) {

     9 

    10 (function(Y) {

    11 

    12 /**

    13  * Adds position and region management functionality to DOM.

    14  * @module dom

    15  * @submodule dom-screen

    16  * @for DOM

    17  */

    18 

    19 var DOCUMENT_ELEMENT = 'documentElement',

    20     COMPAT_MODE = 'compatMode',

    21     POSITION = 'position',

    22     FIXED = 'fixed',

    23     RELATIVE = 'relative',

    24     LEFT = 'left',

    25     TOP = 'top',

    26     _BACK_COMPAT = 'BackCompat',

    27     MEDIUM = 'medium',

    28     BORDER_LEFT_WIDTH = 'borderLeftWidth',

    29     BORDER_TOP_WIDTH = 'borderTopWidth',

    30     GET_BOUNDING_CLIENT_RECT = 'getBoundingClientRect',

    31     GET_COMPUTED_STYLE = 'getComputedStyle',

    32 

    33     // TODO: how about thead/tbody/tfoot/tr?

    34     // TODO: does caption matter?

    35     RE_TABLE = /^t(?:able|d|h)$/i;

    36 

    37 Y.mix(Y.DOM, {

    38     /**

    39      * Returns the inner height of the viewport (exludes scrollbar). 

    40      * @method winHeight

    41      * @return {Number} The current height of the viewport.

    42      */

    43     winHeight: function(node) {

    44         var h = Y.DOM._getWinSize(node).height;

    45         Y.log('winHeight returning ' + h, 'info', 'dom-screen');

    46         return h;

    47     },

    48 

    49     /**

    50      * Returns the inner width of the viewport (exludes scrollbar). 

    51      * @method winWidth

    52      * @return {Number} The current width of the viewport.

    53      */

    54     winWidth: function(node) {

    55         var w = Y.DOM._getWinSize(node).width;

    56         Y.log('winWidth returning ' + w, 'info', 'dom-screen');

    57         return w;

    58     },

    59 

    60     /**

    61      * Document height 

    62      * @method docHeight

    63      * @return {Number} The current height of the document.

    64      */

    65     docHeight:  function(node) {

    66         var h = Y.DOM._getDocSize(node).height;

    67         Y.log('docHeight returning ' + h, 'info', 'dom-screen');

    68         return Math.max(h, Y.DOM._getWinSize(node).height);

    69     },

    70 

    71     /**

    72      * Document width 

    73      * @method docWidth

    74      * @return {Number} The current width of the document.

    75      */

    76     docWidth:  function(node) {

    77         var w = Y.DOM._getDocSize(node).width;

    78         Y.log('docWidth returning ' + w, 'info', 'dom-screen');

    79         return Math.max(w, Y.DOM._getWinSize(node).width);

    80     },

    81 

    82     /**

    83      * Amount page has been scroll horizontally 

    84      * @method docScrollX

    85      * @return {Number} The current amount the screen is scrolled horizontally.

    86      */

    87     docScrollX: function(node) {

    88         var doc = Y.DOM._getDoc(node);

    89         return Math.max(doc[DOCUMENT_ELEMENT].scrollLeft, doc.body.scrollLeft);

    90     },

    91 

    92     /**

    93      * Amount page has been scroll vertically 

    94      * @method docScrollY

    95      * @return {Number} The current amount the screen is scrolled vertically.

    96      */

    97     docScrollY:  function(node) {

    98         var doc = Y.DOM._getDoc(node);

    99         return Math.max(doc[DOCUMENT_ELEMENT].scrollTop, doc.body.scrollTop);

   100     },

   101 

   102     /**

   103      * Gets the current position of an element based on page coordinates. 

   104      * Element must be part of the DOM tree to have page coordinates

   105      * (display:none or elements not appended return false).

   106      * @method getXY

   107      * @param element The target element

   108      * @return {Array} The XY position of the element

   109 

   110      TODO: test inDocument/display?

   111      */

   112     getXY: function() {

   113         if (document[DOCUMENT_ELEMENT][GET_BOUNDING_CLIENT_RECT]) {

   114             return function(node) {

   115                 var xy = null,

   116                     scrollLeft,

   117                     scrollTop,

   118                     box,

   119                     off1, off2,

   120                     bLeft, bTop,

   121                     mode,

   122                     doc;

   123 

   124                 if (node) {

   125                     if (Y.DOM.inDoc(node)) {

   126                         scrollLeft = Y.DOM.docScrollX(node);

   127                         scrollTop = Y.DOM.docScrollY(node);

   128                         box = node[GET_BOUNDING_CLIENT_RECT]();

   129                         doc = Y.DOM._getDoc(node);

   130                         xy = [box.left, box.top];

   131 

   132                             if (Y.UA.ie) {

   133                                 off1 = 2;

   134                                 off2 = 2;

   135                                 mode = doc[COMPAT_MODE];

   136                                 bLeft = Y.DOM[GET_COMPUTED_STYLE](doc[DOCUMENT_ELEMENT], BORDER_LEFT_WIDTH);

   137                                 bTop = Y.DOM[GET_COMPUTED_STYLE](doc[DOCUMENT_ELEMENT], BORDER_TOP_WIDTH);

   138 

   139                                 if (Y.UA.ie === 6) {

   140                                     if (mode !== _BACK_COMPAT) {

   141                                         off1 = 0;

   142                                         off2 = 0;

   143                                     }

   144                                 }

   145                                 

   146                                 if ((mode == _BACK_COMPAT)) {

   147                                     if (bLeft !== MEDIUM) {

   148                                         off1 = parseInt(bLeft, 10);

   149                                     }

   150                                     if (bTop !== MEDIUM) {

   151                                         off2 = parseInt(bTop, 10);

   152                                     }

   153                                 }

   154                                 

   155                                 xy[0] -= off1;

   156                                 xy[1] -= off2;

   157 

   158                             }

   159 

   160                         if ((scrollTop || scrollLeft)) {

   161                             xy[0] += scrollLeft;

   162                             xy[1] += scrollTop;

   163                         }

   164                     } else { // default to current offsets

   165                         xy = Y.DOM._getOffset(node);

   166                     }

   167                 }

   168                 return xy;                   

   169             };

   170         } else {

   171             return function(node) { // manually calculate by crawling up offsetParents

   172                 //Calculate the Top and Left border sizes (assumes pixels)

   173                 var xy = null,

   174                     parentNode,

   175                     bCheck,

   176                     scrollTop,

   177                     scrollLeft;

   178 

   179                 if (node) {

   180                     if (Y.DOM.inDoc(node)) {

   181                         xy = [node.offsetLeft, node.offsetTop];

   182                         parentNode = node;

   183                         // TODO: refactor with !! or just falsey

   184                         bCheck = ((Y.UA.gecko || Y.UA.webkit > 519) ? true : false);

   185 

   186                         // TODO: worth refactoring for TOP/LEFT only?

   187                         while ((parentNode = parentNode.offsetParent)) {

   188                             xy[0] += parentNode.offsetLeft;

   189                             xy[1] += parentNode.offsetTop;

   190                             if (bCheck) {

   191                                 xy = Y.DOM._calcBorders(parentNode, xy);

   192                             }

   193                         }

   194 

   195                         // account for any scrolled ancestors

   196                         if (Y.DOM.getStyle(node, POSITION) != FIXED) {

   197                             parentNode = node;

   198 

   199                             while ((parentNode = parentNode.parentNode)) {

   200                                 scrollTop = parentNode.scrollTop;

   201                                 scrollLeft = parentNode.scrollLeft;

   202 

   203                                 //Firefox does something funky with borders when overflow is not visible.

   204                                 if (Y.UA.gecko && (Y.DOM.getStyle(parentNode, 'overflow') !== 'visible')) {

   205                                         xy = Y.DOM._calcBorders(parentNode, xy);

   206                                 }

   207                                 

   208 

   209                                 if (scrollTop || scrollLeft) {

   210                                     xy[0] -= scrollLeft;

   211                                     xy[1] -= scrollTop;

   212                                 }

   213                             }

   214                             xy[0] += Y.DOM.docScrollX(node);

   215                             xy[1] += Y.DOM.docScrollY(node);

   216 

   217                         } else {

   218                             //Fix FIXED position -- add scrollbars

   219                             xy[0] += Y.DOM.docScrollX(node);

   220                             xy[1] += Y.DOM.docScrollY(node);

   221                         }

   222                     } else {

   223                         xy = Y.DOM._getOffset(node);

   224                     }

   225                 }

   226 

   227                 return xy;                

   228             };

   229         }

   230     }(),// NOTE: Executing for loadtime branching

   231 

   232     _getOffset: function(node) {

   233         var pos,

   234             xy = null;

   235 

   236         if (node) {

   237             pos = Y.DOM.getStyle(node, POSITION);

   238             xy = [

   239                 parseInt(Y.DOM[GET_COMPUTED_STYLE](node, LEFT), 10),

   240                 parseInt(Y.DOM[GET_COMPUTED_STYLE](node, TOP), 10)

   241             ];

   242 

   243             if ( isNaN(xy[0]) ) { // in case of 'auto'

   244                 xy[0] = parseInt(Y.DOM.getStyle(node, LEFT), 10); // try inline

   245                 if ( isNaN(xy[0]) ) { // default to offset value

   246                     xy[0] = (pos === RELATIVE) ? 0 : node.offsetLeft || 0;

   247                 }

   248             } 

   249 

   250             if ( isNaN(xy[1]) ) { // in case of 'auto'

   251                 xy[1] = parseInt(Y.DOM.getStyle(node, TOP), 10); // try inline

   252                 if ( isNaN(xy[1]) ) { // default to offset value

   253                     xy[1] = (pos === RELATIVE) ? 0 : node.offsetTop || 0;

   254                 }

   255             } 

   256         }

   257 

   258         return xy;

   259 

   260     },

   261 

   262     /**

   263      * Gets the current X position of an element based on page coordinates. 

   264      * Element must be part of the DOM tree to have page coordinates

   265      * (display:none or elements not appended return false).

   266      * @method getX

   267      * @param element The target element

   268      * @return {Int} The X position of the element

   269      */

   270 

   271     getX: function(node) {

   272         return Y.DOM.getXY(node)[0];

   273     },

   274 

   275     /**

   276      * Gets the current Y position of an element based on page coordinates. 

   277      * Element must be part of the DOM tree to have page coordinates

   278      * (display:none or elements not appended return false).

   279      * @method getY

   280      * @param element The target element

   281      * @return {Int} The Y position of the element

   282      */

   283 

   284     getY: function(node) {

   285         return Y.DOM.getXY(node)[1];

   286     },

   287 

   288     /**

   289      * Set the position of an html element in page coordinates.

   290      * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).

   291      * @method setXY

   292      * @param element The target element

   293      * @param {Array} xy Contains X & Y values for new position (coordinates are page-based)

   294      * @param {Boolean} noRetry By default we try and set the position a second time if the first fails

   295      */

   296     setXY: function(node, xy, noRetry) {

   297         var setStyle = Y.DOM.setStyle,

   298             pos,

   299             delta,

   300             newXY,

   301             currentXY;

   302 

   303         if (node && xy) {

   304             pos = Y.DOM.getStyle(node, POSITION);

   305 

   306             delta = Y.DOM._getOffset(node);       

   307 

   308             if (pos == 'static') { // default to relative

   309                 pos = RELATIVE;

   310                 setStyle(node, POSITION, pos);

   311             }

   312 

   313             currentXY = Y.DOM.getXY(node);

   314 

   315             if (xy[0] !== null) {

   316                 setStyle(node, LEFT, xy[0] - currentXY[0] + delta[0] + 'px');

   317             }

   318 

   319             if (xy[1] !== null) {

   320                 setStyle(node, TOP, xy[1] - currentXY[1] + delta[1] + 'px');

   321             }

   322 

   323             if (!noRetry) {

   324                 newXY = Y.DOM.getXY(node);

   325                 if (newXY[0] !== xy[0] || newXY[1] !== xy[1]) {

   326                     Y.DOM.setXY(node, xy, true); 

   327                 }

   328             }

   329           

   330             Y.log('setXY setting position to ' + xy, 'info', 'dom-screen');

   331         } else {

   332             Y.log('setXY failed to set ' + node + ' to ' + xy, 'info', 'dom-screen');

   333         }

   334     },

   335 

   336     /**

   337      * Set the X position of an html element in page coordinates, regardless of how the element is positioned.

   338      * The element(s) must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).

   339      * @method setX

   340      * @param element The target element

   341      * @param {Int} x The X values for new position (coordinates are page-based)

   342      */

   343     setX: function(node, x) {

   344         return Y.DOM.setXY(node, [x, null]);

   345     },

   346 

   347     /**

   348      * Set the Y position of an html element in page coordinates, regardless of how the element is positioned.

   349      * The element(s) must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).

   350      * @method setY

   351      * @param element The target element

   352      * @param {Int} y The Y values for new position (coordinates are page-based)

   353      */

   354     setY: function(node, y) {

   355         return Y.DOM.setXY(node, [null, y]);

   356     },

   357 

   358     _calcBorders: function(node, xy2) {

   359         var t = parseInt(Y.DOM[GET_COMPUTED_STYLE](node, BORDER_TOP_WIDTH), 10) || 0,

   360             l = parseInt(Y.DOM[GET_COMPUTED_STYLE](node, BORDER_LEFT_WIDTH), 10) || 0;

   361         if (Y.UA.gecko) {

   362             if (RE_TABLE.test(node.tagName)) {

   363                 t = 0;

   364                 l = 0;

   365             }

   366         }

   367         xy2[0] += l;

   368         xy2[1] += t;

   369         return xy2;

   370     },

   371 

   372     _getWinSize: function(node) {

   373         var doc = Y.DOM._getDoc(),

   374             win = doc.defaultView || doc.parentWindow,

   375             mode = doc[COMPAT_MODE],

   376             h = win.innerHeight,

   377             w = win.innerWidth,

   378             root = doc[DOCUMENT_ELEMENT];

   379 

   380         if ( mode && !Y.UA.opera ) { // IE, Gecko

   381             if (mode != 'CSS1Compat') { // Quirks

   382                 root = doc.body; 

   383             }

   384             h = root.clientHeight;

   385             w = root.clientWidth;

   386         }

   387         return { height: h, width: w }; 

   388     },

   389 

   390     _getDocSize: function(node) {

   391         var doc = Y.DOM._getDoc(),

   392             root = doc[DOCUMENT_ELEMENT];

   393 

   394         if (doc[COMPAT_MODE] != 'CSS1Compat') {

   395             root = doc.body;

   396         }

   397 

   398         return { height: root.scrollHeight, width: root.scrollWidth };

   399     }

   400 });

   401 })(Y);

   402 (function(Y) {

   403 var TOP = 'top',

   404     RIGHT = 'right',

   405     BOTTOM = 'bottom',

   406     LEFT = 'left',

   407 

   408     getOffsets = function(r1, r2) {

   409         var t = Math.max(r1[TOP], r2[TOP]),

   410             r = Math.min(r1[RIGHT], r2[RIGHT]),

   411             b = Math.min(r1[BOTTOM], r2[BOTTOM]),

   412             l = Math.max(r1[LEFT], r2[LEFT]),

   413             ret = {};

   414         

   415         ret[TOP] = t;

   416         ret[RIGHT] = r;

   417         ret[BOTTOM] = b;

   418         ret[LEFT] = l;

   419         return ret;

   420     },

   421 

   422     DOM = Y.DOM;

   423 

   424 Y.mix(DOM, {

   425     /**

   426      * Returns an Object literal containing the following about this element: (top, right, bottom, left)

   427      * @method region

   428      * @param {HTMLElement} element The DOM element. 

   429      @return {Object} Object literal containing the following about this element: (top, right, bottom, left)

   430      */

   431     region: function(node) {

   432         var xy = DOM.getXY(node),

   433             ret = false;

   434         

   435         if (node && xy) {

   436             ret = DOM._getRegion(

   437                 xy[1], // top

   438                 xy[0] + node.offsetWidth, // right

   439                 xy[1] + node.offsetHeight, // bottom

   440                 xy[0] // left

   441             );

   442         }

   443 

   444         return ret;

   445     },

   446 

   447     /**

   448      * Find the intersect information for the passes nodes.

   449      * @method intersect

   450      * @param {HTMLElement} element The first element 

   451      * @param {HTMLElement | Object} element2 The element or region to check the interect with

   452      * @param {Object} altRegion An object literal containing the region for the first element if we already have the data (for performance i.e. DragDrop)

   453      @return {Object} Object literal containing the following intersection data: (top, right, bottom, left, area, yoff, xoff, inRegion)

   454      */

   455     intersect: function(node, node2, altRegion) {

   456         var r = altRegion || DOM.region(node), region = {},

   457             n = node2,

   458             off;

   459 

   460         if (n.tagName) {

   461             region = DOM.region(n);

   462         } else if (Y.Lang.isObject(node2)) {

   463             region = node2;

   464         } else {

   465             return false;

   466         }

   467         

   468         off = getOffsets(region, r);

   469         return {

   470             top: off[TOP],

   471             right: off[RIGHT],

   472             bottom: off[BOTTOM],

   473             left: off[LEFT],

   474             area: ((off[BOTTOM] - off[TOP]) * (off[RIGHT] - off[LEFT])),

   475             yoff: ((off[BOTTOM] - off[TOP])),

   476             xoff: (off[RIGHT] - off[LEFT]),

   477             inRegion: DOM.inRegion(node, node2, false, altRegion)

   478         };

   479         

   480     },

   481     /**

   482      * Check if any part of this node is in the passed region

   483      * @method inRegion

   484      * @param {Object} node2 The node to get the region from or an Object literal of the region

   485      * $param {Boolean} all Should all of the node be inside the region

   486      * @param {Object} altRegion An object literal containing the region for this node if we already have the data (for performance i.e. DragDrop)

   487      * @return {Boolean} True if in region, false if not.

   488      */

   489     inRegion: function(node, node2, all, altRegion) {

   490         var region = {},

   491             r = altRegion || DOM.region(node),

   492             n = node2,

   493             off;

   494 

   495         if (n.tagName) {

   496             region = DOM.region(n);

   497         } else if (Y.Lang.isObject(node2)) {

   498             region = node2;

   499         } else {

   500             return false;

   501         }

   502             

   503         if (all) {

   504             return (

   505                 r[LEFT]   >= region[LEFT]   &&

   506                 r[RIGHT]  <= region[RIGHT]  && 

   507                 r[TOP]    >= region[TOP]    && 

   508                 r[BOTTOM] <= region[BOTTOM]  );

   509         } else {

   510             off = getOffsets(region, r);

   511             if (off[BOTTOM] >= off[TOP] && off[RIGHT] >= off[LEFT]) {

   512                 return true;

   513             } else {

   514                 return false;

   515             }

   516             

   517         }

   518     },

   519 

   520     /**

   521      * Check if any part of this element is in the viewport

   522      * @method inViewportRegion

   523      * @param {HTMLElement} element The DOM element. 

   524      * @param {Boolean} all Should all of the node be inside the region

   525      * @param {Object} altRegion An object literal containing the region for this node if we already have the data (for performance i.e. DragDrop)

   526      * @return {Boolean} True if in region, false if not.

   527      */

   528     inViewportRegion: function(node, all, altRegion) {

   529         return DOM.inRegion(node, DOM.viewportRegion(node), all, altRegion);

   530             

   531     },

   532 

   533     _getRegion: function(t, r, b, l) {

   534         var region = {};

   535 

   536         region[TOP] = region[1] = t;

   537         region[LEFT] = region[0] = l;

   538         region[BOTTOM] = b;

   539         region[RIGHT] = r;

   540         region.width = region[RIGHT] - region[LEFT];

   541         region.height = region[BOTTOM] - region[TOP];

   542 

   543         return region;

   544     },

   545 

   546     /**

   547      * Returns an Object literal containing the following about the visible region of viewport: (top, right, bottom, left)

   548      * @method viewportRegion

   549      @return {Object} Object literal containing the following about the visible region of the viewport: (top, right, bottom, left)

   550      */

   551     viewportRegion: function(node) {

   552         node = node || Y.config.doc.documentElement;

   553         var ret = false,

   554             scrollX,

   555             scrollY;

   556 

   557         if (node) {

   558             scrollX = DOM.docScrollX(node);

   559             scrollY = DOM.docScrollY(node);

   560 

   561             ret = DOM._getRegion(scrollY, // top

   562                 DOM.winWidth(node) + scrollX, // right

   563                 scrollY + DOM.winHeight(node), // bottom

   564                 scrollX); // left

   565         }

   566 

   567         return ret;

   568     }

   569 });

   570 })(Y);

   571 

   572 

   573 }, '3.0.0b1' ,{requires:['dom-base', 'dom-style'], skinnable:false});