[Typescript] threshold wrongly typed?

intersection-observer-admin

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

element: DOM Node to observe
enterCallback: Function
- callback function to perform logic in your own application
exitCallback: Function
- callback function to perform when element is leaving the viewport
observerOptions: Object
- list of options to pass to Intersection Observer constructor (https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver)

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.

	export interface IOptions {
	root?: HTMLElement;
	rootMargin?: string;
	threshold?: number;
	[key: string]: any;
	}

	if (Array.isArray(threshold)) {
	threshold = threshold[threshold.length - 1];
	}

snewcomer / intersection-observer-admin Goto Github PK

intersection-observer-admin's Introduction

intersection-observer-admin

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

Installation

Usage

API

Out of the box

intersection-observer-admin's People

Contributors

Stargazers

Watchers

Forkers

intersection-observer-admin's Issues

Recommend Projects

Recommend Topics

Recommend Org