vevet/lib/cjs/components/Cursor/HoverElement/index.js

Vevet is a JavaScript library for creative development that simplifies crafting rich interactions like split text animations, carousels, marquees, preloading, and more.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CursorHoverElement = void 0;
var isFiniteNumber_1 = require("../../../internal/isFiniteNumber");
var isNumber_1 = require("../../../internal/isNumber");
var isString_1 = require("../../../internal/isString");
var utils_1 = require("../../../utils");
var constants_1 = require("../constants");
var CursorHoverElement = /** @class */ (function () {
    function CursorHoverElement(_data, _onEnter, _onLeave) {
        var _this = this;
        this._data = _data;
        this._onEnter = _onEnter;
        this._onLeave = _onLeave;
        this._debounce = null;
        this._isHovered = false;
        this._parallaxX = {
            current: 0,
            target: 0,
            prevTarget: null,
        };
        this._parallaxY = {
            current: 0,
            target: 0,
            prevTarget: null,
        };
        var emitter = this.emitter;
        if (emitter.matches(':hover')) {
            this._handleElementEnter();
        }
        this._mouseEnter = (0, utils_1.addEventListener)(emitter, 'mouseenter', function () {
            var _a;
            _this._debounce = setTimeout(function () { return _this._handleElementEnter(); }, (_a = _data.hoverDebounce) !== null && _a !== void 0 ? _a : 16);
        });
        this._mouseLeave = (0, utils_1.addEventListener)(emitter, 'mouseleave', function () {
            if (_this._debounce) {
                clearTimeout(_this._debounce);
            }
            _this._handleElementLeave();
        });
        this._mouseMove = (0, utils_1.addEventListener)(emitter, 'mousemove', function (evt) {
            _this._handleElementMove(evt);
        });
    }
    Object.defineProperty(CursorHoverElement.prototype, "element", {
        get: function () {
            return this._data.element;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(CursorHoverElement.prototype, "emitter", {
        get: function () {
            var _a;
            return (_a = this._data.emitter) !== null && _a !== void 0 ? _a : this._data.element;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(CursorHoverElement.prototype, "type", {
        get: function () {
            return this._data.type;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(CursorHoverElement.prototype, "snap", {
        get: function () {
            var _a;
            return (_a = this._data.snap) !== null && _a !== void 0 ? _a : false;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(CursorHoverElement.prototype, "width", {
        get: function () {
            if (this._data.width === 'auto') {
                return 'auto';
            }
            if (this._data.width) {
                return (0, utils_1.toPixels)(this._data.width);
            }
            return null;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(CursorHoverElement.prototype, "height", {
        get: function () {
            if (this._data.height === 'auto') {
                return 'auto';
            }
            if (this._data.height) {
                return (0, utils_1.toPixels)(this._data.height);
            }
            return null;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(CursorHoverElement.prototype, "padding", {
        get: function () {
            return this._data.padding ? (0, utils_1.toPixels)(this._data.padding) : 0;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(CursorHoverElement.prototype, "sticky", {
        get: function () {
            var _a;
            return (_a = this._data.sticky) !== null && _a !== void 0 ? _a : false;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(CursorHoverElement.prototype, "stickyLerp", {
        get: function () {
            var _a;
            return (_a = this._data.stickyLerp) !== null && _a !== void 0 ? _a : undefined;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(CursorHoverElement.prototype, "stickyFriction", {
        get: function () {
            var _a;
            return (_a = this._data.stickyFriction) !== null && _a !== void 0 ? _a : 0;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(CursorHoverElement.prototype, "hasStickyFriction", {
        get: function () {
            return (0, isFiniteNumber_1.isFiniteNumber)(this.stickyFriction) && this.stickyFriction > 0;
        },
        enumerable: false,
        configurable: true
    });
    /** Get element dimensions */
    CursorHoverElement.prototype.getDimensions = function () {
        var x;
        var y;
        var width;
        var height;
        var padding = 0;
        var bounding = this.element.getBoundingClientRect();
        if (this.snap) {
            x = bounding.left + bounding.width / 2;
            y = bounding.top + bounding.height / 2;
        }
        if (this.width === 'auto') {
            width = bounding.width;
        }
        else if ((0, isNumber_1.isNumber)(this.width)) {
            width = this.width;
        }
        if (this.height === 'auto') {
            height = bounding.height;
        }
        else if ((0, isNumber_1.isNumber)(this.height)) {
            height = this.height;
        }
        padding = this.padding;
        return { x: x, y: y, width: width, height: height, padding: padding };
    };
    /** Destroy all events */
    CursorHoverElement.prototype.destroy = function () {
        this._mouseEnter();
        this._mouseMove();
        this._mouseLeave();
        if (this._debounce) {
            clearTimeout(this._debounce);
        }
    };
    /** Handle element enter */
    CursorHoverElement.prototype._handleElementEnter = function () {
        this._isHovered = true;
        this._onEnter(this);
    };
    /** Handle element leave */
    CursorHoverElement.prototype._handleElementLeave = function () {
        this._isHovered = false;
        this._parallaxX.target = 0;
        this._parallaxX.prevTarget = null;
        this._parallaxY.target = 0;
        this._parallaxY.prevTarget = null;
        this._onLeave(this);
    };
    /** Handle element move */
    CursorHoverElement.prototype._handleElementMove = function (evt) {
        if (!this.sticky || !this._isHovered) {
            return;
        }
        var _a = this, element = _a.element, parallaxX = _a._parallaxX, parallaxY = _a._parallaxY;
        var clientX = evt.clientX, clientY = evt.clientY;
        var bounding = element.getBoundingClientRect();
        var computed = getComputedStyle(element).transform;
        var matrix = computed === 'none' ? new DOMMatrix() : new DOMMatrix(computed);
        var width = bounding.width, height = bounding.height;
        var translateX = matrix.e;
        var translateY = matrix.f;
        var basicLeft = bounding.left - translateX;
        var basicTop = bounding.top - translateY;
        var basicCenterX = basicLeft + width / 2;
        var basicCenterY = basicTop + height / 2;
        var distanceX = clientX - basicCenterX;
        var distanceY = clientY - basicCenterY;
        var amp = this._getStickyAmplitude();
        var maxX = amp.x === 'auto' ? width : Math.abs(amp.x);
        var maxY = amp.y === 'auto' ? height : Math.abs(amp.y);
        var parallaxXTarget = (0, utils_1.clamp)(distanceX, -maxX, maxX);
        var parallaxYTarget = (0, utils_1.clamp)(distanceY, -maxY, maxY);
        if (parallaxX.prevTarget === null) {
            parallaxX.prevTarget = parallaxXTarget;
        }
        if (parallaxY.prevTarget === null) {
            parallaxY.prevTarget = parallaxYTarget;
        }
        if (this.hasStickyFriction) {
            var parallaxXDelta = parallaxXTarget - parallaxX.prevTarget;
            var parallaxYDelta = parallaxYTarget - parallaxY.prevTarget;
            parallaxX.target += parallaxXDelta;
            parallaxY.target += parallaxYDelta;
        }
        else {
            parallaxX.target = parallaxXTarget;
            parallaxY.target = parallaxYTarget;
        }
        parallaxX.prevTarget = parallaxXTarget;
        parallaxY.prevTarget = parallaxYTarget;
    };
    /** Get sticky amplitude for both axis */
    CursorHoverElement.prototype._getStickyAmplitude = function () {
        var stickyAmplitude = this._data.stickyAmplitude;
        var x = 'auto';
        var y = 'auto';
        if (!stickyAmplitude) {
            return { x: x, y: y };
        }
        if ((0, isNumber_1.isNumber)(stickyAmplitude) || (0, isString_1.isString)(stickyAmplitude)) {
            x = this._getStickyAmplitudeAxis(stickyAmplitude);
            y = this._getStickyAmplitudeAxis(stickyAmplitude);
        }
        else {
            if ('x' in stickyAmplitude) {
                x = this._getStickyAmplitudeAxis(stickyAmplitude.x);
            }
            if ('y' in stickyAmplitude) {
                y = this._getStickyAmplitudeAxis(stickyAmplitude.y);
            }
        }
        return { x: x, y: y };
    };
    /** Get sticky amplitude for one axis */
    CursorHoverElement.prototype._getStickyAmplitudeAxis = function (value) {
        if ((0, isNumber_1.isNumber)(value)) {
            return value;
        }
        if (!value || value === 'auto') {
            return 'auto';
        }
        return (0, utils_1.toPixels)(value);
    };
    Object.defineProperty(CursorHoverElement.prototype, "isInterpolated", {
        /** Check if the element is interpolated */
        get: function () {
            return (this._parallaxX.current === this._parallaxX.target &&
                this._parallaxY.current === this._parallaxY.target);
        },
        enumerable: false,
        configurable: true
    });
    /** Render the element */
    CursorHoverElement.prototype.render = function (getLerp) {
        var _a = this, parallaxX = _a._parallaxX, parallaxY = _a._parallaxY;
        var element = this.element;
        if (!this.sticky || this.isInterpolated) {
            return;
        }
        // Friction
        if (this.hasStickyFriction) {
            var frictionLerp = getLerp(this.stickyFriction);
            parallaxX.target = (0, utils_1.lerp)(parallaxX.target, 0, frictionLerp, constants_1.LERP_APPROXIMATION);
            parallaxY.target = (0, utils_1.lerp)(parallaxY.target, 0, frictionLerp, constants_1.LERP_APPROXIMATION);
        }
        // Magnet
        var lerpFactor = getLerp(this.stickyLerp);
        parallaxX.current = (0, utils_1.lerp)(parallaxX.current, parallaxX.target, lerpFactor, constants_1.LERP_APPROXIMATION);
        parallaxY.current = (0, utils_1.lerp)(parallaxY.current, parallaxY.target, lerpFactor, constants_1.LERP_APPROXIMATION);
        element.style.transform = "translate3d(".concat(parallaxX.current, "px, ").concat(parallaxY.current, "px, 0)");
    };
    return CursorHoverElement;
}());
exports.CursorHoverElement = CursorHoverElement;
//# sourceMappingURL=index.js.map