78 lines
2.7 KiB
Plaintext
78 lines
2.7 KiB
Plaintext
import { Feature } from 'motion-dom';
|
|
import { observeIntersection } from './observers.mjs';
|
|
|
|
const thresholdNames = {
|
|
some: 0,
|
|
all: 1,
|
|
};
|
|
class InViewFeature extends Feature {
|
|
constructor() {
|
|
super(...arguments);
|
|
this.hasEnteredView = false;
|
|
this.isInView = false;
|
|
}
|
|
startObserver() {
|
|
this.stopObserver?.();
|
|
const { viewport = {} } = this.node.getProps();
|
|
const { root, margin: rootMargin, amount = "some", once } = viewport;
|
|
const options = {
|
|
root: root ? root.current : undefined,
|
|
rootMargin,
|
|
threshold: typeof amount === "number" ? amount : thresholdNames[amount],
|
|
};
|
|
const onIntersectionUpdate = (entry) => {
|
|
const { isIntersecting } = entry;
|
|
/**
|
|
* If there's been no change in the viewport state, early return.
|
|
*/
|
|
if (this.isInView === isIntersecting)
|
|
return;
|
|
this.isInView = isIntersecting;
|
|
/**
|
|
* Handle hasEnteredView. If this is only meant to run once, and
|
|
* element isn't visible, early return. Otherwise set hasEnteredView to true.
|
|
*/
|
|
if (once && !isIntersecting && this.hasEnteredView) {
|
|
return;
|
|
}
|
|
else if (isIntersecting) {
|
|
this.hasEnteredView = true;
|
|
}
|
|
if (this.node.animationState) {
|
|
this.node.animationState.setActive("whileInView", isIntersecting);
|
|
}
|
|
/**
|
|
* Use the latest committed props rather than the ones in scope
|
|
* when this observer is created
|
|
*/
|
|
const { onViewportEnter, onViewportLeave } = this.node.getProps();
|
|
const callback = isIntersecting ? onViewportEnter : onViewportLeave;
|
|
callback && callback(entry);
|
|
};
|
|
this.stopObserver = observeIntersection(this.node.current, options, onIntersectionUpdate);
|
|
}
|
|
mount() {
|
|
this.startObserver();
|
|
}
|
|
update() {
|
|
if (typeof IntersectionObserver === "undefined")
|
|
return;
|
|
const { props, prevProps } = this.node;
|
|
const hasOptionsChanged = ["amount", "margin", "root"].some(hasViewportOptionChanged(props, prevProps));
|
|
if (hasOptionsChanged) {
|
|
this.startObserver();
|
|
}
|
|
}
|
|
unmount() {
|
|
this.stopObserver?.();
|
|
this.hasEnteredView = false;
|
|
this.isInView = false;
|
|
}
|
|
}
|
|
function hasViewportOptionChanged({ viewport = {} }, { viewport: prevViewport = {} } = {}) {
|
|
return (name) => viewport[name] !== prevViewport[name];
|
|
}
|
|
|
|
export { InViewFeature };
|
|
//# sourceMappingURL=index.mjs.map
|