vevet
Version:
Vevet is a JavaScript library for creative development that simplifies crafting rich interactions like split text animations, carousels, marquees, preloading, and more.
272 lines • 10.3 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { Module } from '../../base/Module';
import { initVevet } from '../../global/initVevet';
import { cnToggle } from '../../internal/cn';
import { body } from '../../internal/env';
import { noopIfDestroyed } from '../../internal/noopIfDestroyed';
import { getTextDirection } from '../../internal/textDirection';
import { clamp } from '../../utils/math';
import { MUTABLE_PROPS, STATIC_PROPS } from './props';
export * from './types';
/**
* InView is a visibility detection utility that leverages the `IntersectionObserver` API to monitor when elements enter or leave the viewport.
* It provides customizable options for triggering events, delaying visibility changes, and dynamically adding CSS classes to elements based on their visibility state.
*
* [Documentation](https://vevetjs.com/docs/InView)
*
* @group Components
*/
export class InView extends Module {
/**
* Returns default static properties.
*/
_getStatic() {
return Object.assign(Object.assign({}, super._getStatic()), STATIC_PROPS);
}
/**
* Returns default mutable properties.
*/
_getMutable() {
return Object.assign(Object.assign({}, super._getMutable()), MUTABLE_PROPS);
}
/**
* Initializes the `InView` module.
*/
constructor(props, onCallbacks) {
super(props, onCallbacks);
/** Tracks whether this is the first time the elements are being observed. */
this._isInitialStart = true;
/** Stores the elements being observed. */
this._elements = [];
/** Detects if the container is RTL */
this._isRtl = false;
// get direction
this._isRtl = getTextDirection(body) === 'rtl';
this._setup();
}
/**
* Indicates whether the observation has started for the first time.
*/
get isInitialStart() {
return this._isInitialStart;
}
/**
* Returns all elements currently being observed.
*/
get elements() {
return this._elements;
}
/**
* Handles property mutations and updates observation events accordingly.
*/
_handleProps(props) {
super._handleProps(props);
this._setup();
}
/**
* Configures or reconfigures the view observation events.
*/
_setup() {
this._removeViewEvents();
if (this.props.enabled) {
this._setViewEvents();
}
}
/**
* Removes all observation events and disconnects observers.
*/
_removeViewEvents() {
var _a, _b;
(_a = this._in) === null || _a === void 0 ? void 0 : _a.disconnect();
this._in = undefined;
(_b = this._out) === null || _b === void 0 ? void 0 : _b.disconnect();
this._out = undefined;
}
/**
* Sets up `IntersectionObserver` instances to detect visibility changes.
*/
_setViewEvents() {
const { isInitialStart, props } = this;
const rootMargin = isInitialStart ? '0% 0% 0% 0%' : props.rootMargin;
this._in = new IntersectionObserver((data) => this._handleIn(data, isInitialStart), { root: null, threshold: 0, rootMargin });
this.elements.forEach((element) => { var _a; return (_a = this._in) === null || _a === void 0 ? void 0 : _a.observe(element); });
if (!props.hasOut) {
return;
}
this._out = new IntersectionObserver((data) => this._handleOut(data), {
root: null,
threshold: 0,
rootMargin: '0px 0px 0px 0px',
});
this.elements.forEach((element) => { var _a; return (_a = this._out) === null || _a === void 0 ? void 0 : _a.observe(element); });
}
/**
* Handles elements entering the viewport.
*/
_handleIn(data, isInitialStart) {
data.forEach((entry) => {
const element = entry.target;
if (!entry.isIntersecting || element.$vevetInViewBool) {
return;
}
element.$vevetInViewBool = true;
if (element.$vevetInViewTimeout) {
clearTimeout(element.$vevetInViewTimeout);
element.$vevetInViewTimeout = undefined;
}
element.$vevetInViewTimeout = setTimeout(() => this._handleInOut(entry, true, isInitialStart), this._getDelay(element));
if (!this.props.hasOut) {
this.removeElement(element);
}
});
if (this._isInitialStart) {
this._isInitialStart = false;
this._setup();
}
}
/**
* Handles elements leaving the viewport.
*/
_handleOut(data) {
data.forEach((entry) => {
const element = entry.target;
if (entry.isIntersecting || !element.$vevetInViewBool) {
return;
}
element.$vevetInViewBool = false;
if (element.$vevetInViewTimeout) {
clearTimeout(element.$vevetInViewTimeout);
element.$vevetInViewTimeout = undefined;
}
element.$vevetInViewTimeout = setTimeout(() => this._handleInOut(entry, false), 0);
});
}
/**
* Toggles visibility classes and emits events for visibility changes.
*/
_handleInOut(entry, isInView, isInitialStart = false) {
const element = entry.target;
const direction = this._getDirection(entry, isInView, isInitialStart);
this._toggleClassname(element, isInView, direction);
this.callbacks.emit(isInView ? 'in' : 'out', { element, direction });
}
/** Toggles visibility classes */
_toggleClassname(element, isInView, direction) {
var _a;
const classNames = element.getAttribute('data-in-view-class');
if (!classNames) {
return;
}
const split = classNames.split('|');
const direct = split[0].trim();
const reverse = ((_a = split[1]) === null || _a === void 0 ? void 0 : _a.trim()) || direct;
if (!direct) {
return;
}
if (isInView) {
const isReverse = direction === 'fromRight' || direction === 'fromTop';
const className = isReverse ? reverse.trim() : direct.trim();
cnToggle(element, className, isInView);
return;
}
cnToggle(element, direct, isInView);
cnToggle(element, reverse, isInView);
}
/** Gets element direction */
_getDirection(entry, isInView, isInitialStart) {
const app = initVevet();
const bounding = entry.boundingClientRect;
if (this.props.scrollDirection === 'horizontal') {
let direction = 'fromRight';
if ((isInView && !isInitialStart) || !isInView) {
if (bounding.left > app.width / 2) {
direction = 'fromRight';
}
else if (bounding.right < app.width / 2) {
direction = 'fromLeft';
}
}
return direction;
}
let direction = 'fromBottom';
if ((isInView && !isInitialStart) || !isInView) {
if (bounding.top > app.height / 2) {
direction = 'fromBottom';
}
else if (bounding.bottom < app.height / 2) {
direction = 'fromTop';
}
}
return direction;
}
/**
* Calculates the delay before triggering an element's visibility event.
*/
_getDelay(element) {
const { scrollDirection, maxInitialDelay } = this.props;
const app = initVevet();
if (!this.isInitialStart || maxInitialDelay <= 0) {
return 0;
}
const bounding = element.getBoundingClientRect();
const rootBounding = {
top: 0,
left: 0,
width: app.width,
height: app.height,
};
let progress = clamp(scrollDirection === 'horizontal'
? (bounding.left - rootBounding.left) / rootBounding.width
: (bounding.top - rootBounding.top) / rootBounding.height);
if (this._isRtl && scrollDirection === 'horizontal') {
progress = 1 - progress;
}
return progress * maxInitialDelay;
}
/**
* Registers an element for visibility observation.
*
* If the element has a `data-in-view-class` attribute, the specified class will be applied upon entering the viewport.
*
* @returns A function to stop observing the element.
*/
addElement(element) {
var _a, _b;
const finalElement = element;
finalElement.$vevetInViewBool = undefined;
this._elements.push(finalElement);
(_a = this._in) === null || _a === void 0 ? void 0 : _a.observe(finalElement);
(_b = this._out) === null || _b === void 0 ? void 0 : _b.observe(finalElement);
return () => this.removeElement(finalElement);
}
/**
* Removes an element from observation, preventing further visibility tracking.
*/
removeElement(element) {
var _a, _b;
const finalElement = element;
(_a = this._in) === null || _a === void 0 ? void 0 : _a.unobserve(finalElement);
(_b = this._out) === null || _b === void 0 ? void 0 : _b.unobserve(finalElement);
this._elements = this._elements.filter((el) => el !== element);
finalElement.$vevetInViewBool = undefined;
}
/**
* Cleans up the module and disconnects all observers and listeners.
*/
_destroy() {
super._destroy();
this._removeViewEvents();
}
}
__decorate([
noopIfDestroyed
], InView.prototype, "addElement", null);
__decorate([
noopIfDestroyed
], InView.prototype, "removeElement", null);
//# sourceMappingURL=index.js.map