BVB Source Codes

in-view Show in-view.js Source code

Return Download in-view: download in-view.js Source code - Download in-view Source code - Type:.js
  1. import Registry from './registry';
  2. import { inViewport } from './viewport';
  3. import { throttle } from 'lodash';
  4.  
  5. /**
  6. * Create and return the inView function.
  7. */
  8. const inView = () => {
  9.  
  10.     /**
  11.     * Fallback if window is undefined.
  12.     */
  13.     if (typeof window === 'undefined') return;
  14.  
  15.     /**
  16.     * How often and on what events we should check
  17.     * each registry.
  18.     */
  19.     const interval = 100;
  20.     const triggers = ['scroll', 'resize', 'load'];
  21.  
  22.     /**
  23.     * Maintain a hashmap of all registries, a history
  24.     * of selectors to enumerate, and an options object.
  25.     */
  26.     let selectors = { history: [] };
  27.     let options   = { offset: {}, threshold: 0, test: inViewport };
  28.  
  29.     /**
  30.     * Check each registry from selector history,
  31.     * throttled to interval.
  32.     */
  33.     const check = throttle(() => {
  34.         selectors.history.forEach(selector => {
  35.             selectors[selector].check();
  36.         });
  37.     }, interval);
  38.  
  39.     /**
  40.     * For each trigger event on window, add a listener
  41.     * which checks each registry.
  42.     */
  43.     triggers.forEach(event =>
  44.         addEventListener(event, check));
  45.  
  46.     /**
  47.     * If supported, use MutationObserver to watch the
  48.     * DOM and run checks on mutation.
  49.     */
  50.     if (window.MutationObserver) {
  51.         addEventListener('DOMContentLoaded', () => {
  52.             new MutationObserver(check)
  53.                 .observe(document.body, { attributes: true, childList: true, subtree: true });
  54.         });
  55.     }
  56.  
  57.     /**
  58.     * The main interface. Take a selector and retrieve
  59.     * the associated registry or create a new one.
  60.     */
  61.     let control = (selector) => {
  62.  
  63.         if (typeof selector !== 'string') return;
  64.  
  65.         // Get an up-to-date list of elements.
  66.         let elements = [].slice.call(document.querySelectorAll(selector));
  67.  
  68.         // If the registry exists, update the elements.
  69.         if (selectors.history.indexOf(selector) > -1) {
  70.             selectors[selector].elements = elements;
  71.         }
  72.  
  73.         // If it doesn't exist, create a new registry.
  74.         else {
  75.             selectors[selector] = Registry(elements, options);
  76.             selectors.history.push(selector);
  77.         }
  78.  
  79.         return selectors[selector];
  80.     };
  81.  
  82.     /**
  83.     * Mutate the offset object with either an object
  84.     * or a number.
  85.     */
  86.     control.offset = o => {
  87.         if (o === undefined) return options.offset;
  88.         const isNum = n => typeof n === 'number';
  89.         ['top', 'right', 'bottom', 'left']
  90.             .forEach(isNum(o) ?
  91.                 dim => options.offset[dim] = o :
  92.                 dim => isNum(o[dim]) ? options.offset[dim] = o[dim] : null
  93.             );
  94.         return options.offset;
  95.     };
  96.  
  97.     /**
  98.     * Set the threshold with a number.
  99.     */
  100.     control.threshold = n => {
  101.         return typeof n === 'number' && n >= 0 && n <= 1
  102.             ? options.threshold = n
  103.             : options.threshold;
  104.     };
  105.  
  106.     /**
  107.     * Use a custom test, overriding inViewport, to
  108.     * determine element visibility.
  109.     */
  110.     control.test = fn => {
  111.         return typeof fn === 'function'
  112.             ? options.test = fn
  113.             : options.test;
  114.     };
  115.  
  116.     /**
  117.     * Add proxy for test function, set defaults,
  118.     * and return the interface.
  119.     */
  120.     control.is = el => options.test(el, options);
  121.     control.offset(0);
  122.     return control;
  123.  
  124. };
  125.  
  126. // Export a singleton.
  127. export default inView();
  128.  
downloadin-view.js Source code - Download in-view Source code
Related Source Codes/Software:
magictools - 2017-01-09
elm-compiler - Compiler for Elm, a functional language for reliab... 2017-01-09
Twig - Twig, the flexible, fast, and secure template lang... 2017-01-09
android-testing - A collection of samples demonstrating different fr... 2017-01-09
lib-flexible - Scalable layout scheme 2017-01-09
sinon - Test spies, stubs and mocks for JavaScript. ... 2017-01-09
docker-gitlab - Dockerized GitLab http://www.da... 2017-01-09
Side-Menu.Android - Side menu with some categories to choose. ... 2017-01-09
libsodium - A modern and easy-to-use crypto library. 2017-01-09
prerender - Node server that uses phantomjs to render a javasc... 2017-01-09
CRYENGINE - CRYENGINE is a powerful real-time game development... 2017-06-11
postal - 2017-06-11
reactide - Reactide is the first dedicated IDE for React web ... 2017-06-11
rkt - rkt is a pod-native container engine for Linux. It... 2017-06-11
uWebSockets - Tiny WebSockets https://for... 2017-06-11
realworld - TodoMVC for the RealWorld - Exemplary fullstack Me... 2017-06-11
goreplay - GoReplay is an open-source tool for capturing and ... 2017-06-10
pyenv - Simple Python version management 2017-06-10
redux-saga - An alternative side effect model for Redux apps ... 2017-06-10
angular-starter - 2017-06-10

 Back to top