resources/src/mediawiki.viewport.js

   1 ( function () {
   2         'use strict';
   3
   4         /**
   5          * Utility library for viewport-related functions
   6          *
   7          * Notable references:
   8          * - https://github.com/tuupola/jquery_lazyload
   9          * - https://github.com/luis-almeida/unveil
  10          *
  11          * @class mw.viewport
  12          * @singleton
  13          */
  14         var viewport = {
  15
  16                 /**
  17                  * This is a private method pulled inside the module for testing purposes.
  18                  *
  19                  * @ignore
  20                  * @private
  21                  * @return {Object} Viewport positions
  22                  */
  23                 makeViewportFromWindow: function () {
  24                         var $window = $( window ),
  25                                 scrollTop = $window.scrollTop(),
  26                                 scrollLeft = $window.scrollLeft();
  27
  28                         return {
  29                                 top: scrollTop,
  30                                 left: scrollLeft,
  31                                 right: scrollLeft + $window.width(),
  32                                 bottom: ( window.innerHeight ? window.innerHeight : $window.height() ) + scrollTop
  33                         };
  34                 },
  35
  36                 /**
  37                  * Check if any part of a given element is in a given viewport
  38                  *
  39                  * @method
  40                  * @param {HTMLElement} el Element that's being tested
  41                  * @param {Object} [rectangle] Viewport to test against; structured as such:
  42                  *
  43                  * var rectangle = {
  44                  *     top: topEdge,
  45                  *     left: leftEdge,
  46                  *     right: rightEdge,
  47                  *     bottom: bottomEdge
  48                  * }
  49                  *
  50                  * Defaults to viewport made from `window`.
  51                  *
  52                  * @return {boolean}
  53                  */
  54                 isElementInViewport: function ( el, rectangle ) {
  55                         var $el = $( el ),
  56                                 offset = $el.offset(),
  57                                 rect = {
  58                                         height: $el.height(),
  59                                         width: $el.width(),
  60                                         top: offset.top,
  61                                         left: offset.left
  62                                 },
  63                                 viewport = rectangle || this.makeViewportFromWindow();
  64
  65                         return (
  66                                 // Top border must be above viewport's bottom
  67                                 ( viewport.bottom >= rect.top ) &&
  68                                 // Left border must be before viewport's right border
  69                                 ( viewport.right >= rect.left ) &&
  70                                 // Bottom border must be below viewport's top
  71                                 ( viewport.top <= rect.top + rect.height ) &&
  72                                 // Right border must be after viewport's left border
  73                                 ( viewport.left <= rect.left + rect.width )
  74                         );
  75                 },
  76
  77                 /**
  78                  * Check if an element is a given threshold away in any direction from a given viewport
  79                  *
  80                  * @method
  81                  * @param {HTMLElement} el Element that's being tested
  82                  * @param {number} [threshold] Pixel distance considered "close". Must be a positive number.
  83                  *  Defaults to 50.
  84                  * @param {Object} [rectangle] Viewport to test against.
  85                  *  Defaults to viewport made from `window`.
  86                  * @return {boolean}
  87                  */
  88                 isElementCloseToViewport: function ( el, threshold, rectangle ) {
  89                         var viewport = rectangle ? $.extend( {}, rectangle ) : this.makeViewportFromWindow();
  90                         threshold = threshold || 50;
  91
  92                         viewport.top -= threshold;
  93                         viewport.left -= threshold;
  94                         viewport.right += threshold;
  95                         viewport.bottom += threshold;
  96                         return this.isElementInViewport( el, viewport );
  97                 }
  98
  99         };
 100
 101         mw.viewport = viewport;
 102 }() );