Have ideas to improve npm?Join in the discussion! »

    intersection-observer-admin
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.2 • Public • Published

    intersection-observer-admin

    Download count all time npm version

    Why use an administrator to manage all the elements on my page?

    This library is used in ember-in-viewport and ember-infinity. This library is particularly important for re-using the IntersectionObserver API.

    Most implementations have one Intersection Observer for each target element or so called sentinel. However, IntersectionObserver.observe can observer multiple sentinels. So this library will resuse the IntersectionObserver instance for another element on the page with the same set of observer options and root element. This can dramatically improve performance for pages with lots of elements and observers.

    Note: A companion library is also available for requestAnimationFrame: https://github.com/snewcomer/raf-pool

    Installation

    npm install intersection-observer-admin --save
    

    Usage

    API

    1. element: DOM Node to observe
    2. enterCallback: Function
      • callback function to perform logic in your own application
    3. exitCallback: Function
      • callback function to perform when element is leaving the viewport
    4. observerOptions: Object
    import IntersectionObserverAdmin from 'intersection-observer-admin';
    
    const intersectionObserverAdmin = new IntersectionObserverAdmin();
    
    // Add callbacks that will be called when observer detects entering and leaving viewport
    intersectionObserverAdmin.addEnterCallback(element, enterCallback);
    intersectionObserverAdmin.addExitCallback(element, exitCallback);
    
    // add an element to static administrator with window as scrollable area
    intersectionObserverAdmin.observe(element, { root, rootMargin: '0px 0px 100px 0px', threshold: 0 });
    
    // add an element in a scrolling container
    intersectionObserverAdmin.observe(element, { root, rootMargin: '0px 0px 100px 0px', threshold: 0 });
    
    // Use in cleanup lifecycle hooks (if applicable) from the element being observed
    intersectionObserverAdmin.unobserve(element, observerOptions);
    
    // Use in cleanup lifecycle hooks of your application as a whole
    // This will remove the in memory data store holding onto all of the observers
    intersectionObserverAdmin.destroy();

    IntersectionObserver's Browser Support

    Out of the box

    Chrome 51 [1]
    Firefox (Gecko) 55 [2]
    MS Edge 15
    Internet Explorer Not supported
    Opera [1] 38
    Safari 12.1
    Chrome for Android 59
    Android Browser 56
    Opera Mobile 37
    • [1] Reportedly available, it didn't trigger the events on initial load and lacks isIntersecting until later versions.
    • [2] This feature was implemented in Gecko 53.0 (Firefox 53.0 / Thunderbird 53.0 / SeaMonkey 2.50) behind the preference dom.IntersectionObserver.enabled.

    Install

    npm i intersection-observer-admin

    DownloadsWeekly Downloads

    33,892

    Version

    0.3.2

    License

    ISC

    Unpacked Size

    116 kB

    Total Files

    19

    Last publish

    Collaborators

    • avatar