1 /*

     2 YUI 3.10.3 (build 2fb5187)

     3 Copyright 2013 Yahoo! Inc. All rights reserved.

     4 Licensed under the BSD License.

     5 http://yuilibrary.com/license/

     6 */

     7 

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

     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     Y_DOM = Y.DOM,

    34 

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

    36     // TODO: does caption matter?

    37     RE_TABLE = /^t(?:able|d|h)$/i,

    38 

    39     SCROLL_NODE;

    40 

    41 if (Y.UA.ie) {

    42     if (Y.config.doc[COMPAT_MODE] !== 'BackCompat') {

    43         SCROLL_NODE = DOCUMENT_ELEMENT; 

    44     } else {

    45         SCROLL_NODE = 'body';

    46     }

    47 }

    48 

    49 Y.mix(Y_DOM, {

    50     /**

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

    52      * @method winHeight

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

    54      */

    55     winHeight: function(node) {

    56         var h = Y_DOM._getWinSize(node).height;

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

    58         return h;

    59     },

    60 

    61     /**

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

    63      * @method winWidth

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

    65      */

    66     winWidth: function(node) {

    67         var w = Y_DOM._getWinSize(node).width;

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

    69         return w;

    70     },

    71 

    72     /**

    73      * Document height 

    74      * @method docHeight

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

    76      */

    77     docHeight:  function(node) {

    78         var h = Y_DOM._getDocSize(node).height;

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

    80         return Math.max(h, Y_DOM._getWinSize(node).height);

    81     },

    82 

    83     /**

    84      * Document width 

    85      * @method docWidth

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

    87      */

    88     docWidth:  function(node) {

    89         var w = Y_DOM._getDocSize(node).width;

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

    91         return Math.max(w, Y_DOM._getWinSize(node).width);

    92     },

    93 

    94     /**

    95      * Amount page has been scroll horizontally 

    96      * @method docScrollX

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

    98      */

    99     docScrollX: function(node, doc) {

   100         doc = doc || (node) ? Y_DOM._getDoc(node) : Y.config.doc; // perf optimization

   101         var dv = doc.defaultView,

   102             pageOffset = (dv) ? dv.pageXOffset : 0;

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

   104     },

   105 

   106     /**

   107      * Amount page has been scroll vertically 

   108      * @method docScrollY

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

   110      */

   111     docScrollY:  function(node, doc) {

   112         doc = doc || (node) ? Y_DOM._getDoc(node) : Y.config.doc; // perf optimization

   113         var dv = doc.defaultView,

   114             pageOffset = (dv) ? dv.pageYOffset : 0;

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

   116     },

   117 

   118     /**

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

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

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

   122      * @method getXY

   123      * @param element The target element

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

   125 

   126      TODO: test inDocument/display?

   127      */

   128     getXY: function() {

   129         if (Y.config.doc[DOCUMENT_ELEMENT][GET_BOUNDING_CLIENT_RECT]) {

   130             return function(node) {

   131                 var xy = null,

   132                     scrollLeft,

   133                     scrollTop,

   134                     mode,

   135                     box,

   136                     offX,

   137                     offY,

   138                     doc,

   139                     win,

   140                     inDoc,

   141                     rootNode;

   142 

   143                 if (node && node.tagName) {

   144                     doc = node.ownerDocument;

   145                     mode = doc[COMPAT_MODE];

   146 

   147                     if (mode !== _BACK_COMPAT) {

   148                         rootNode = doc[DOCUMENT_ELEMENT];

   149                     } else {

   150                         rootNode = doc.body;

   151                     }

   152 

   153                     // inline inDoc check for perf

   154                     if (rootNode.contains) {

   155                         inDoc = rootNode.contains(node); 

   156                     } else {

   157                         inDoc = Y.DOM.contains(rootNode, node);

   158                     }

   159 

   160                     if (inDoc) {

   161                         win = doc.defaultView;

   162 

   163                         // inline scroll calc for perf

   164                         if (win && 'pageXOffset' in win) {

   165                             scrollLeft = win.pageXOffset;

   166                             scrollTop = win.pageYOffset;

   167                         } else {

   168                             scrollLeft = (SCROLL_NODE) ? doc[SCROLL_NODE].scrollLeft : Y_DOM.docScrollX(node, doc);

   169                             scrollTop = (SCROLL_NODE) ? doc[SCROLL_NODE].scrollTop : Y_DOM.docScrollY(node, doc);

   170                         }

   171 

   172                         if (Y.UA.ie) { // IE < 8, quirks, or compatMode

   173                             if (!doc.documentMode || doc.documentMode < 8 || mode === _BACK_COMPAT) {

   174                                 offX = rootNode.clientLeft;

   175                                 offY = rootNode.clientTop;

   176                             }

   177                         }

   178                         box = node[GET_BOUNDING_CLIENT_RECT]();

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

   180 

   181                         if (offX || offY) {

   182                                 xy[0] -= offX;

   183                                 xy[1] -= offY;

   184                             

   185                         }

   186                         if ((scrollTop || scrollLeft)) {

   187                             if (!Y.UA.ios || (Y.UA.ios >= 4.2)) {

   188                                 xy[0] += scrollLeft;

   189                                 xy[1] += scrollTop;

   190                             }

   191                             

   192                         }

   193                     } else {

   194                         xy = Y_DOM._getOffset(node);       

   195                     }

   196                 }

   197                 return xy;                   

   198             };

   199         } else {

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

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

   202                 var xy = null,

   203                     doc,

   204                     parentNode,

   205                     bCheck,

   206                     scrollTop,

   207                     scrollLeft;

   208 

   209                 if (node) {

   210                     if (Y_DOM.inDoc(node)) {

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

   212                         doc = node.ownerDocument;

   213                         parentNode = node;

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

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

   216 

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

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

   219                             xy[0] += parentNode.offsetLeft;

   220                             xy[1] += parentNode.offsetTop;

   221                             if (bCheck) {

   222                                 xy = Y_DOM._calcBorders(parentNode, xy);

   223                             }

   224                         }

   225 

   226                         // account for any scrolled ancestors

   227                         if (Y_DOM.getStyle(node, POSITION) != FIXED) {

   228                             parentNode = node;

   229 

   230                             while ((parentNode = parentNode.parentNode)) {

   231                                 scrollTop = parentNode.scrollTop;

   232                                 scrollLeft = parentNode.scrollLeft;

   233 

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

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

   236                                         xy = Y_DOM._calcBorders(parentNode, xy);

   237                                 }

   238                                 

   239 

   240                                 if (scrollTop || scrollLeft) {

   241                                     xy[0] -= scrollLeft;

   242                                     xy[1] -= scrollTop;

   243                                 }

   244                             }

   245                             xy[0] += Y_DOM.docScrollX(node, doc);

   246                             xy[1] += Y_DOM.docScrollY(node, doc);

   247 

   248                         } else {

   249                             //Fix FIXED position -- add scrollbars

   250                             xy[0] += Y_DOM.docScrollX(node, doc);

   251                             xy[1] += Y_DOM.docScrollY(node, doc);

   252                         }

   253                     } else {

   254                         xy = Y_DOM._getOffset(node);

   255                     }

   256                 }

   257 

   258                 return xy;                

   259             };

   260         }

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

   262 

   263     /**

   264     Gets the width of vertical scrollbars on overflowed containers in the body

   265     content.

   266 

   267     @method getScrollbarWidth

   268     @return {Number} Pixel width of a scrollbar in the current browser

   269     **/

   270     getScrollbarWidth: Y.cached(function () {

   271         var doc      = Y.config.doc,

   272             testNode = doc.createElement('div'),

   273             body     = doc.getElementsByTagName('body')[0],

   274             // 0.1 because cached doesn't support falsy refetch values

   275             width    = 0.1;

   276             

   277         if (body) {

   278             testNode.style.cssText = "position:absolute;visibility:hidden;overflow:scroll;width:20px;";

   279             testNode.appendChild(doc.createElement('p')).style.height = '1px';

   280             body.insertBefore(testNode, body.firstChild);

   281             width = testNode.offsetWidth - testNode.clientWidth;

   282 

   283             body.removeChild(testNode);

   284         }

   285 

   286         return width;

   287     }, null, 0.1),

   288 

   289     /**

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

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

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

   293      * @method getX

   294      * @param element The target element

   295      * @return {Number} The X position of the element

   296      */

   297 

   298     getX: function(node) {

   299         return Y_DOM.getXY(node)[0];

   300     },

   301 

   302     /**

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

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

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

   306      * @method getY

   307      * @param element The target element

   308      * @return {Number} The Y position of the element

   309      */

   310 

   311     getY: function(node) {

   312         return Y_DOM.getXY(node)[1];

   313     },

   314 

   315     /**

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

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

   318      * @method setXY

   319      * @param element The target element

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

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

   322      */

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

   324         var setStyle = Y_DOM.setStyle,

   325             pos,

   326             delta,

   327             newXY,

   328             currentXY;

   329 

   330         if (node && xy) {

   331             pos = Y_DOM.getStyle(node, POSITION);

   332 

   333             delta = Y_DOM._getOffset(node);       

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

   335                 pos = RELATIVE;

   336                 setStyle(node, POSITION, pos);

   337             }

   338             currentXY = Y_DOM.getXY(node);

   339 

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

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

   342             }

   343 

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

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

   346             }

   347 

   348             if (!noRetry) {

   349                 newXY = Y_DOM.getXY(node);

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

   351                     Y_DOM.setXY(node, xy, true); 

   352                 }

   353             }

   354           

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

   356         } else {

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

   358         }

   359     },

   360 

   361     /**

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

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

   364      * @method setX

   365      * @param element The target element

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

   367      */

   368     setX: function(node, x) {

   369         return Y_DOM.setXY(node, [x, null]);

   370     },

   371 

   372     /**

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

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

   375      * @method setY

   376      * @param element The target element

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

   378      */

   379     setY: function(node, y) {

   380         return Y_DOM.setXY(node, [null, y]);

   381     },

   382 

   383     /**

   384      * @method swapXY

   385      * @description Swap the xy position with another node

   386      * @param {Node} node The node to swap with

   387      * @param {Node} otherNode The other node to swap with

   388      * @return {Node}

   389      */

   390     swapXY: function(node, otherNode) {

   391         var xy = Y_DOM.getXY(node);

   392         Y_DOM.setXY(node, Y_DOM.getXY(otherNode));

   393         Y_DOM.setXY(otherNode, xy);

   394     },

   395 

   396     _calcBorders: function(node, xy2) {

   397         var t = parseInt(Y_DOM[GET_COMPUTED_STYLE](node, BORDER_TOP_WIDTH), 10) || 0,

   398             l = parseInt(Y_DOM[GET_COMPUTED_STYLE](node, BORDER_LEFT_WIDTH), 10) || 0;

   399         if (Y.UA.gecko) {

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

   401                 t = 0;

   402                 l = 0;

   403             }

   404         }

   405         xy2[0] += l;

   406         xy2[1] += t;

   407         return xy2;

   408     },

   409 

   410     _getWinSize: function(node, doc) {

   411         doc  = doc || (node) ? Y_DOM._getDoc(node) : Y.config.doc;

   412         var win = doc.defaultView || doc.parentWindow,

   413             mode = doc[COMPAT_MODE],

   414             h = win.innerHeight,

   415             w = win.innerWidth,

   416             root = doc[DOCUMENT_ELEMENT];

   417 

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

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

   420                 root = doc.body; 

   421             }

   422             h = root.clientHeight;

   423             w = root.clientWidth;

   424         }

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

   426     },

   427 

   428     _getDocSize: function(node) {

   429         var doc = (node) ? Y_DOM._getDoc(node) : Y.config.doc,

   430             root = doc[DOCUMENT_ELEMENT];

   431 

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

   433             root = doc.body;

   434         }

   435 

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

   437     }

   438 });

   439 

   440 })(Y);

   441 (function(Y) {

   442 var TOP = 'top',

   443     RIGHT = 'right',

   444     BOTTOM = 'bottom',

   445     LEFT = 'left',

   446 

   447     getOffsets = function(r1, r2) {

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

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

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

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

   452             ret = {};

   453         

   454         ret[TOP] = t;

   455         ret[RIGHT] = r;

   456         ret[BOTTOM] = b;

   457         ret[LEFT] = l;

   458         return ret;

   459     },

   460 

   461     DOM = Y.DOM;

   462 

   463 Y.mix(DOM, {

   464     /**

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

   466      * @for DOM

   467      * @method region

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

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

   470      */

   471     region: function(node) {

   472         var xy = DOM.getXY(node),

   473             ret = false;

   474         

   475         if (node && xy) {

   476             ret = DOM._getRegion(

   477                 xy[1], // top

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

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

   480                 xy[0] // left

   481             );

   482         }

   483 

   484         return ret;

   485     },

   486 

   487     /**

   488      * Find the intersect information for the passed nodes.

   489      * @method intersect

   490      * @for DOM

   491      * @param {HTMLElement} element The first element 

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

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

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

   495      */

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

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

   498             n = node2,

   499             off;

   500 

   501         if (n.tagName) {

   502             region = DOM.region(n);

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

   504             region = node2;

   505         } else {

   506             return false;

   507         }

   508         

   509         off = getOffsets(region, r);

   510         return {

   511             top: off[TOP],

   512             right: off[RIGHT],

   513             bottom: off[BOTTOM],

   514             left: off[LEFT],

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

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

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

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

   519         };

   520         

   521     },

   522     /**

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

   524      * @method inRegion

   525      * @for DOM

   526      * @param {Object} node The node to get the region from

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

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

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

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

   531      */

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

   533         var region = {},

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

   535             n = node2,

   536             off;

   537 

   538         if (n.tagName) {

   539             region = DOM.region(n);

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

   541             region = node2;

   542         } else {

   543             return false;

   544         }

   545             

   546         if (all) {

   547             return (

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

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

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

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

   552         } else {

   553             off = getOffsets(region, r);

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

   555                 return true;

   556             } else {

   557                 return false;

   558             }

   559             

   560         }

   561     },

   562 

   563     /**

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

   565      * @method inViewportRegion

   566      * @for DOM

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

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

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

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

   571      */

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

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

   574             

   575     },

   576 

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

   578         var region = {};

   579 

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

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

   582         region[BOTTOM] = b;

   583         region[RIGHT] = r;

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

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

   586 

   587         return region;

   588     },

   589 

   590     /**

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

   592      * @method viewportRegion

   593      * @for DOM

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

   595      */

   596     viewportRegion: function(node) {

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

   598         var ret = false,

   599             scrollX,

   600             scrollY;

   601 

   602         if (node) {

   603             scrollX = DOM.docScrollX(node);

   604             scrollY = DOM.docScrollY(node);

   605 

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

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

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

   609                 scrollX); // left

   610         }

   611 

   612         return ret;

   613     }

   614 });

   615 })(Y);

   616 

   617 

   618 }, '3.10.3', {"requires": ["dom-base", "dom-style"]});