5 * Utility library for viewport-related functions
8 * - https://github.com/tuupola/jquery_lazyload
9 * - https://github.com/luis-almeida/unveil
17 * This is a private method pulled inside the module for testing purposes.
22 makeViewportFromWindow: function () {
23 var $window
= $( window
),
24 scrollTop
= $window
.scrollTop(),
25 scrollLeft
= $window
.scrollLeft();
30 right
: scrollLeft
+ $window
.width(),
31 bottom
: ( window
.innerHeight
? window
.innerHeight
: $window
.height() ) + scrollTop
36 * Check if any part of a given element is in a given viewport
39 * @param {HTMLElement} el Element that's being tested
40 * @param {Object} [rectangle] Viewport to test against; structured as such:
48 * Defaults to viewport made from `window`.
52 isElementInViewport: function ( el
, rectangle
) {
53 var elRect
= el
.getBoundingClientRect(),
54 viewport
= rectangle
|| this.makeViewportFromWindow();
57 ( viewport
.bottom
>= elRect
.top
) &&
58 ( viewport
.right
>= elRect
.left
) &&
59 ( viewport
.top
<= elRect
.top
+ elRect
.height
) &&
60 ( viewport
.left
<= elRect
.left
+ elRect
.width
)
65 * Check if an element is a given threshold away in any direction from a given viewport
68 * @param {HTMLElement} el Element that's being tested
69 * @param {number} [threshold] Pixel distance considered "close". Must be a positive number.
71 * @param {Object} [rectangle] Viewport to test against.
72 * Defaults to viewport made from `window`.
75 isElementCloseToViewport: function ( el
, threshold
, rectangle
) {
76 var viewport
= rectangle
? $.extend( {}, rectangle
) : this.makeViewportFromWindow();
77 threshold
= threshold
|| 50 ;
79 viewport
.top
-= threshold
;
80 viewport
.left
-= threshold
;
81 viewport
.right
+= threshold
;
82 viewport
.bottom
+= threshold
;
83 return this.isElementInViewport( el
, viewport
);
88 mw
.viewport
= viewport
;
89 }( mediaWiki
, jQuery
) );