vevet 4.4.2 → 5.0.1

package/lib/cjs/components/InView/index.js

@@ -0,0 +1,254 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InView = void 0;
+var math_1 = require("../../utils/math");
+var Module_1 = require("../../base/Module");
+var initVevet_1 = require("../../global/initVevet");
+__exportStar(require("./types"), exports);
+/**
+ * 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://antonbobrov.github.io/vevet/docs/components/InView)
+ *
+ * @group Components
+ */
+var InView = /** @class */ (function (_super) {
+    __extends(InView, _super);
+    /**
+     * Initializes the `InView` module.
+     */
+    function InView(props) {
+        var _this = _super.call(this, props) || this;
+        /** Tracks whether this is the first time the elements are being observed. */
+        _this._isInitialStart = true;
+        /** Stores the elements being observed. */
+        _this._elements = [];
+        _this._setup();
+        return _this;
+    }
+    /**
+     * Returns default static properties.
+     */
+    InView.prototype._getStatic = function () {
+        return __assign(__assign({}, _super.prototype._getStatic.call(this)), { hasOut: true, maxInitialDelay: 1000, scrollDirection: 'vertical' });
+    };
+    /**
+     * Returns default mutable properties.
+     */
+    InView.prototype._getMutable = function () {
+        return __assign(__assign({}, _super.prototype._getMutable.call(this)), { enabled: true, rootMargin: '0% 0% -5% 0%' });
+    };
+    Object.defineProperty(InView.prototype, "isInitialStart", {
+        /**
+         * Indicates whether the observation has started for the first time.
+         */
+        get: function () {
+            return this._isInitialStart;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(InView.prototype, "elements", {
+        /**
+         * Returns all elements currently being observed.
+         */
+        get: function () {
+            return this._elements;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Handles property mutations and updates observation events accordingly.
+     */
+    InView.prototype._handleProps = function () {
+        _super.prototype._handleProps.call(this);
+        this._setup();
+    };
+    /**
+     * Configures or reconfigures the view observation events.
+     */
+    InView.prototype._setup = function () {
+        this._removeViewEvents();
+        if (this.props.enabled) {
+            this._setViewEvents();
+        }
+    };
+    /**
+     * Removes all observation events and disconnects observers.
+     */
+    InView.prototype._removeViewEvents = function () {
+        var _a, _b;
+        (_a = this._observerIn) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this._observerIn = undefined;
+        (_b = this._observerOut) === null || _b === void 0 ? void 0 : _b.disconnect();
+        this._observerOut = undefined;
+    };
+    /**
+     * Sets up `IntersectionObserver` instances to detect visibility changes.
+     */
+    InView.prototype._setViewEvents = function () {
+        var _this = this;
+        var _a = this, isInitialStart = _a.isInitialStart, props = _a.props;
+        var rootMargin = isInitialStart ? '0% 0% 0% 0%' : props.rootMargin;
+        this._observerIn = new IntersectionObserver(function (data) { return _this._handleIn(data); }, { root: null, threshold: 0, rootMargin: rootMargin });
+        this.elements.forEach(function (element) { var _a; return (_a = _this._observerIn) === null || _a === void 0 ? void 0 : _a.observe(element); });
+        if (props.hasOut) {
+            this._observerOut = new IntersectionObserver(function (data) { return _this._handleOut(data); }, { root: null, threshold: 0, rootMargin: '0px 0px 0px 0px' });
+            this.elements.forEach(function (element) { var _a; return (_a = _this._observerOut) === null || _a === void 0 ? void 0 : _a.observe(element); });
+        }
+    };
+    /**
+     * Handles elements entering the viewport.
+     */
+    InView.prototype._handleIn = function (data) {
+        var _this = this;
+        data.forEach(function (entry) {
+            var element = entry.target;
+            if (!entry.isIntersecting || element.$vevetInViewBool) {
+                return;
+            }
+            element.$vevetInViewBool = true;
+            if (element.$vevetInViewTimeout) {
+                clearTimeout(element.$vevetInViewTimeout);
+            }
+            element.$vevetInViewTimeout = setTimeout(function () { return _this._handleInOut(element, true); }, _this._getElementDelay(element));
+            if (!_this.props.hasOut) {
+                _this.removeElement(element);
+            }
+        });
+        if (this._isInitialStart) {
+            this._isInitialStart = false;
+            this._setup();
+        }
+    };
+    /**
+     * Handles elements leaving the viewport.
+     */
+    InView.prototype._handleOut = function (data) {
+        var _this = this;
+        data.forEach(function (entry) {
+            var element = entry.target;
+            if (entry.isIntersecting || !element.$vevetInViewBool) {
+                return;
+            }
+            element.$vevetInViewBool = false;
+            if (element.$vevetInViewTimeout) {
+                clearTimeout(element.$vevetInViewTimeout);
+            }
+            element.$vevetInViewTimeout = setTimeout(function () {
+                _this._handleInOut(element, false);
+            }, 0);
+        });
+    };
+    /**
+     * Toggles visibility classes and emits events for visibility changes.
+     */
+    InView.prototype._handleInOut = function (element, isInView) {
+        var className = element.getAttribute('data-in-view-class');
+        if (className) {
+            element.classList.toggle(className, isInView);
+        }
+        this.callbacks.emit(isInView ? 'in' : 'out', { element: element });
+    };
+    /**
+     * Calculates the delay before triggering an element's visibility event.
+     */
+    InView.prototype._getElementDelay = function (element) {
+        var props = this.props;
+        var app = (0, initVevet_1.initVevet)();
+        if (!this.isInitialStart || props.maxInitialDelay <= 0) {
+            return 0;
+        }
+        var bounding = element.getBoundingClientRect();
+        var rootBounding = {
+            top: 0,
+            left: 0,
+            width: app.width,
+            height: app.height,
+        };
+        var progress = (0, math_1.clamp)(props.scrollDirection === 'horizontal'
+            ? (bounding.left - rootBounding.left) / rootBounding.width
+            : (bounding.top - rootBounding.top) / rootBounding.height, 0, 1);
+        return progress * props.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.
+     */
+    InView.prototype.addElement = function (element) {
+        var _this = this;
+        var _a, _b;
+        var finalElement = element;
+        finalElement.$vevetInViewBool = undefined;
+        this._elements.push(finalElement);
+        (_a = this._observerIn) === null || _a === void 0 ? void 0 : _a.observe(finalElement);
+        (_b = this._observerOut) === null || _b === void 0 ? void 0 : _b.observe(finalElement);
+        return function () { return _this.removeElement(finalElement); };
+    };
+    /**
+     * Removes an element from observation, preventing further visibility tracking.
+     */
+    InView.prototype.removeElement = function (element) {
+        var _a, _b;
+        var finalElement = element;
+        (_a = this._observerIn) === null || _a === void 0 ? void 0 : _a.unobserve(finalElement);
+        (_b = this._observerOut) === null || _b === void 0 ? void 0 : _b.unobserve(finalElement);
+        this._elements = this._elements.filter(function (el) { return el !== element; });
+        finalElement.$vevetInViewBool = undefined;
+    };
+    /**
+     * Cleans up the module and disconnects all observers and listeners.
+     */
+    InView.prototype._destroy = function () {
+        _super.prototype._destroy.call(this);
+        this._removeViewEvents();
+    };
+    return InView;
+}(Module_1.Module));
+exports.InView = InView;
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/InView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/InView/index.ts"],"names":[],"mappings":"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"}

package/lib/cjs/components/InView/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/InView/types.ts"],"names":[],"mappings":""}