src/offset.js

   1 define([
   2         "./core",
   3         "./core/access",
   4         "./var/document",
   5         "./var/documentElement",
   6         "./css/var/rnumnonpx",
   7         "./css/curCSS",
   8         "./css/addGetHookIf",
   9         "./css/support",
  10
  11         "./core/init",
  12         "./css",
  13         "./selector" // contains
  14 ], function( jQuery, access, document, documentElement, rnumnonpx, curCSS, addGetHookIf, support ) {
  15
  16 /**
  17  * Gets a window from an element
  18  */
  19 function getWindow( elem ) {
  20         return jQuery.isWindow( elem ) ? elem : elem.nodeType === 9 && elem.defaultView;
  21 }
  22
  23 jQuery.offset = {
  24         setOffset: function( elem, options, i ) {
  25                 var curPosition, curLeft, curCSSTop, curTop, curOffset, curCSSLeft, calculatePosition,
  26                         position = jQuery.css( elem, "position" ),
  27                         curElem = jQuery( elem ),
  28                         props = {};
  29
  30                 // Set position first, in-case top/left are set even on static elem
  31                 if ( position === "static" ) {
  32                         elem.style.position = "relative";
  33                 }
  34
  35                 curOffset = curElem.offset();
  36                 curCSSTop = jQuery.css( elem, "top" );
  37                 curCSSLeft = jQuery.css( elem, "left" );
  38                 calculatePosition = ( position === "absolute" || position === "fixed" ) &&
  39                         ( curCSSTop + curCSSLeft ).indexOf("auto") > -1;
  40
  41                 // Need to be able to calculate position if either
  42                 // top or left is auto and position is either absolute or fixed
  43                 if ( calculatePosition ) {
  44                         curPosition = curElem.position();
  45                         curTop = curPosition.top;
  46                         curLeft = curPosition.left;
  47
  48                 } else {
  49                         curTop = parseFloat( curCSSTop ) || 0;
  50                         curLeft = parseFloat( curCSSLeft ) || 0;
  51                 }
  52
  53                 if ( jQuery.isFunction( options ) ) {
  54
  55                         // Use jQuery.extend here to allow modification of coordinates argument (gh-1848)
  56                         options = options.call( elem, i, jQuery.extend( {}, curOffset ) );
  57                 }
  58
  59                 if ( options.top != null ) {
  60                         props.top = ( options.top - curOffset.top ) + curTop;
  61                 }
  62                 if ( options.left != null ) {
  63                         props.left = ( options.left - curOffset.left ) + curLeft;
  64                 }
  65
  66                 if ( "using" in options ) {
  67                         options.using.call( elem, props );
  68
  69                 } else {
  70                         curElem.css( props );
  71                 }
  72         }
  73 };
  74
  75 jQuery.fn.extend({
  76         offset: function( options ) {
  77                 if ( arguments.length ) {
  78                         return options === undefined ?
  79                                 this :
  80                                 this.each(function( i ) {
  81                                         jQuery.offset.setOffset( this, options, i );
  82                                 });
  83                 }
  84
  85                 var docElem, win,
  86                         elem = this[ 0 ],
  87                         box = { top: 0, left: 0 },
  88                         doc = elem && elem.ownerDocument;
  89
  90                 if ( !doc ) {
  91                         return;
  92                 }
  93
  94                 docElem = doc.documentElement;
  95
  96                 // Make sure it's not a disconnected DOM node
  97                 if ( !jQuery.contains( docElem, elem ) ) {
  98                         return box;
  99                 }
 100
 101                 box = elem.getBoundingClientRect();
 102                 win = getWindow( doc );
 103                 return {
 104                         top: box.top + win.pageYOffset - docElem.clientTop,
 105                         left: box.left + win.pageXOffset - docElem.clientLeft
 106                 };
 107         },
 108
 109         position: function() {
 110                 if ( !this[ 0 ] ) {
 111                         return;
 112                 }
 113
 114                 var offsetParent, offset,
 115                         elem = this[ 0 ],
 116                         parentOffset = { top: 0, left: 0 };
 117
 118                 // Fixed elements are offset from window (parentOffset = {top:0, left: 0},
 119                 // because it is its only offset parent
 120                 if ( jQuery.css( elem, "position" ) === "fixed" ) {
 121                         // Assume getBoundingClientRect is there when computed position is fixed
 122                         offset = elem.getBoundingClientRect();
 123
 124                 } else {
 125                         // Get *real* offsetParent
 126                         offsetParent = this.offsetParent();
 127
 128                         // Get correct offsets
 129                         offset = this.offset();
 130                         if ( !jQuery.nodeName( offsetParent[ 0 ], "html" ) ) {
 131                                 parentOffset = offsetParent.offset();
 132                         }
 133
 134                         // Add offsetParent borders
 135                         parentOffset.top += jQuery.css( offsetParent[ 0 ], "borderTopWidth", true );
 136                         parentOffset.left += jQuery.css( offsetParent[ 0 ], "borderLeftWidth", true );
 137                 }
 138
 139                 // Subtract parent offsets and element margins
 140                 return {
 141                         top: offset.top - parentOffset.top - jQuery.css( elem, "marginTop", true ),
 142                         left: offset.left - parentOffset.left - jQuery.css( elem, "marginLeft", true )
 143                 };
 144         },
 145
 146         // This method will return documentElement in the following cases:
 147         // 1) For the element inside the iframe without offsetParent, this method will return
 148         //    documentElement of the parent window
 149         // 2) For the hidden or detached element
 150         // 3) For body or html element, i.e. in case of the html node - it will return itself
 151         //
 152         // but those exceptions were never presented as a real life use-cases
 153         // and might be considered as more preferable results.
 154         //
 155         // This logic, however, is not guaranteed and can change at any point in the future
 156         offsetParent: function() {
 157                 return this.map(function() {
 158                         var offsetParent = this.offsetParent;
 159
 160                         while ( offsetParent && jQuery.css( offsetParent, "position" ) === "static" ) {
 161                                 offsetParent = offsetParent.offsetParent;
 162                         }
 163
 164                         return offsetParent || documentElement;
 165                 });
 166         }
 167 });
 168
 169 // Create scrollLeft and scrollTop methods
 170 jQuery.each( { scrollLeft: "pageXOffset", scrollTop: "pageYOffset" }, function( method, prop ) {
 171         var top = "pageYOffset" === prop;
 172
 173         jQuery.fn[ method ] = function( val ) {
 174                 return access( this, function( elem, method, val ) {
 175                         var win = getWindow( elem );
 176
 177                         if ( val === undefined ) {
 178                                 return win ? win[ prop ] : elem[ method ];
 179                         }
 180
 181                         if ( win ) {
 182                                 win.scrollTo(
 183                                         !top ? val : win.pageXOffset,
 184                                         top ? val : win.pageYOffset
 185                                 );
 186
 187                         } else {
 188                                 elem[ method ] = val;
 189                         }
 190                 }, method, val, arguments.length, null );
 191         };
 192 });
 193
 194 // Support: Safari<7+, Chrome<37+
 195 // Add the top/left cssHooks using jQuery.fn.position
 196 // Webkit bug: https://bugs.webkit.org/show_bug.cgi?id=29084
 197 // Blink bug: https://code.google.com/p/chromium/issues/detail?id=229280
 198 // getComputedStyle returns percent when specified for top/left/bottom/right;
 199 // rather than make the css module depend on the offset module, just check for it here
 200 jQuery.each( [ "top", "left" ], function( i, prop ) {
 201         jQuery.cssHooks[ prop ] = addGetHookIf( support.pixelPosition,
 202                 function( elem, computed ) {
 203                         if ( computed ) {
 204                                 computed = curCSS( elem, prop );
 205                                 // If curCSS returns percentage, fallback to offset
 206                                 return rnumnonpx.test( computed ) ?
 207                                         jQuery( elem ).position()[ prop ] + "px" :
 208                                         computed;
 209                         }
 210                 }
 211         );
 212 });
 213
 214 return jQuery;
 215 });