resources/src/mediawiki/mediawiki.viewport.js

   1 ( function ( mw, $ ) {
   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                  */
  22                 makeViewportFromWindow: function () {
  23                         var $window = $( window ),
  24                                 scrollTop = $window.scrollTop(),
  25                                 scrollLeft = $window.scrollLeft();
  26
  27                         return {
  28                                 top: scrollTop,
  29                                 left: scrollLeft,
  30                                 right: scrollLeft + $window.width(),
  31                                 bottom: ( window.innerHeight ? window.innerHeight : $window.height() ) + scrollTop
  32                         };
  33                 },
  34
  35                 /**
  36                  * Check if any part of a given element is in a given viewport
  37                  *
  38                  * @method
  39                  * @param {HTMLElement} el Element that's being tested
  40                  * @param {Object} [rectangle] Viewport to test against; structured as such:
  41                  *
  42                  *      var rectangle = {
  43                  *              top: topEdge,
  44                  *              left: leftEdge,
  45                  *              right: rightEdge,
  46                  *              bottom: bottomEdge
  47                  *      }
  48                  *      Defaults to viewport made from `window`.
  49                  *
  50                  * @return {boolean}
  51                  */
  52                 isElementInViewport: function ( el, rectangle ) {
  53                         var elRect = el.getBoundingClientRect(),
  54                                 viewport = rectangle || this.makeViewportFromWindow();
  55
  56                         return (
  57                                 ( viewport.bottom >= elRect.top ) &&
  58                                 ( viewport.right >= elRect.left ) &&
  59                                 ( viewport.top <= elRect.top + elRect.height ) &&
  60                                 ( viewport.left <= elRect.left + elRect.width )
  61                         );
  62                 },
  63
  64                 /**
  65                  * Check if an element is a given threshold away in any direction from a given viewport
  66                  *
  67                  * @method
  68                  * @param {HTMLElement} el Element that's being tested
  69                  * @param {number} [threshold] Pixel distance considered "close". Must be a positive number.
  70                  *  Defaults to 50.
  71                  * @param {Object} [rectangle] Viewport to test against.
  72                  *  Defaults to viewport made from `window`.
  73                  * @return {boolean}
  74                  */
  75                 isElementCloseToViewport: function ( el, threshold, rectangle ) {
  76                         var viewport = rectangle ? $.extend( {}, rectangle ) : this.makeViewportFromWindow();
  77                         threshold = threshold || 50 ;
  78
  79                         viewport.top -= threshold;
  80                         viewport.left -= threshold;
  81                         viewport.right += threshold;
  82                         viewport.bottom += threshold;
  83                         return this.isElementInViewport( el, viewport );
  84                 }
  85
  86         };
  87
  88         mw.viewport = viewport;
  89 }( mediaWiki, jQuery ) );