vevet 2.17.0 → 3.0.0-beta.0

package/build/cjs/components/cursor/CustomCursor.js

@@ -1,437 +0,0 @@
-"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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomCursor = void 0;
-var vevet_dom_1 = require("vevet-dom");
-var AnimationFrame_1 = require("../animation-frame/AnimationFrame");
-var Component_1 = require("../../base/Component");
-var lerp_1 = __importDefault(require("../../utils/math/lerp"));
-var common_1 = require("../../utils/common");
-/**
- * Creates a smooth custom cursor
- */
-var CustomCursor = /** @class */ (function (_super) {
-    __extends(CustomCursor, _super);
-    function CustomCursor(initialProp, init) {
-        if (init === void 0) { init = true; }
-        var _this = _super.call(this, initialProp, false) || this;
-        // get cursor container
-        var container = (0, vevet_dom_1.selectOne)(_this.prop.container);
-        if (container) {
-            _this._container = container;
-        }
-        else {
-            throw new Error("No cursor container for ".concat(_this.prop.container));
-        }
-        _this._containerIsWindow = container instanceof Window;
-        // set default vars
-        _this._coords = {
-            x: 0, y: 0, w: 0, h: 0,
-        };
-        _this._targetCoords = {
-            x: 0, y: 0, w: 0, h: 0,
-        };
-        _this._currentFPS = 60;
-        _this._canPlay = _this.prop.run;
-        // initialize the class
-        if (init) {
-            _this.init();
-        }
-        return _this;
-    }
-    CustomCursor.prototype._getDefaultProp = function () {
-        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { container: window, run: true, hideNativeCursor: false, size: {
-                width: 50,
-                height: 50,
-            }, render: {
-                lerp: 0.2,
-                lerpToFixed: 2,
-                normalizeLerp: false,
-            }, hover: {
-                sticky: false,
-                autoSize: false,
-            }, autoStop: true });
-    };
-    Object.defineProperty(CustomCursor.prototype, "prefix", {
-        get: function () {
-            return "".concat(this._app.prefix, "custom-cursor");
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CustomCursor.prototype, "container", {
-        /**
-         * Cursor container
-         */
-        get: function () {
-            return this._container;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CustomCursor.prototype, "eventsContainer", {
-        /**
-         * The element for events
-         */
-        get: function () {
-            return this._container;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CustomCursor.prototype, "domContainer", {
-        /**
-         * The DOM parent for the cursor element
-         */
-        get: function () {
-            if (this.container instanceof Window) {
-                return this._app.html;
-            }
-            return this.container;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CustomCursor.prototype, "outerCursor", {
-        /**
-         * Cursor element (outer element)
-         */
-        get: function () {
-            return this._outerCursor;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CustomCursor.prototype, "innerCursor", {
-        /**
-         * Cursor element (inner element)
-         */
-        get: function () {
-            return this._innerCursor;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CustomCursor.prototype, "hoveredEl", {
-        get: function () {
-            return this._hoveredEl;
-        },
-        set: function (val) {
-            this._hoveredEl = val;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CustomCursor.prototype, "coords", {
-        get: function () {
-            return this._coords;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CustomCursor.prototype, "targetCoords", {
-        get: function () {
-            var _a, _b, _c;
-            var _d = this, hoveredEl = _d.hoveredEl, prop = _d.prop;
-            var sizes = prop.size;
-            var x = this._targetCoords.x;
-            var y = this._targetCoords.y;
-            var w = sizes.width;
-            var h = sizes.height;
-            var padding = 0;
-            if (hoveredEl) {
-                var bounding = hoveredEl.el.getBoundingClientRect();
-                if (prop.hover.sticky) {
-                    x = bounding.left + bounding.width / 2;
-                    y = bounding.top + bounding.height / 2;
-                }
-                if (prop.hover.autoSize) {
-                    w = ((_a = this.hoveredEl) === null || _a === void 0 ? void 0 : _a.width) || bounding.width;
-                    h = ((_b = this.hoveredEl) === null || _b === void 0 ? void 0 : _b.height) || bounding.height;
-                    padding = ((_c = this.hoveredEl) === null || _c === void 0 ? void 0 : _c.padding) || 0;
-                }
-            }
-            w += padding * 2;
-            h += padding * 2;
-            return {
-                x: x,
-                y: y,
-                w: w,
-                h: h,
-            };
-        },
-        enumerable: false,
-        configurable: true
-    });
-    // Extra constructor
-    CustomCursor.prototype._constructor = function () {
-        _super.prototype._constructor.call(this);
-        this._createCursor();
-    };
-    // Set Module Events
-    CustomCursor.prototype._setEvents = function () {
-        var _this = this;
-        _super.prototype._setEvents.call(this);
-        var domContainer = this.domContainer;
-        // create animation frame
-        this._animationFrame = new AnimationFrame_1.AnimationFrame();
-        this._animationFrame.addCallback('frame', function (data) {
-            _this._currentFPS = data.realFPS;
-            _this.render();
-        });
-        if (this._canPlay) {
-            this.enable();
-        }
-        // set mouse hover events
-        this.addEventListeners(domContainer, 'mouseenter', this._handleMouseEnter.bind(this));
-        this.addEventListeners(domContainer, 'mouseleave', this._handleMouseLeave.bind(this));
-        // set move events
-        this.addEventListeners(domContainer, 'mousemove', this._handleMouseMove.bind(this));
-        // set click events events
-        this.addEventListeners(domContainer, 'mousedown', this._handleMouseDown.bind(this));
-        this.addEventListeners(domContainer, 'mouseup', this._handleMouseUp.bind(this));
-        this.addEventListeners(window, 'blur', this._handleWindowBlur.bind(this));
-    };
-    /**
-     * Set hover events on an element
-     */
-    CustomCursor.prototype.addHoverEl = function (settings, enterTimeout) {
-        var _this = this;
-        if (enterTimeout === void 0) { enterTimeout = 100; }
-        var el = settings.el;
-        var timeout;
-        var mouseEnter = (0, vevet_dom_1.addEventListener)(el, 'mouseenter', function () {
-            timeout = (0, common_1.timeoutCallback)(function () {
-                _this.hoveredEl = __assign({}, settings);
-            }, enterTimeout);
-        });
-        var mouseLeave = (0, vevet_dom_1.addEventListener)(el, 'mouseleave', function () {
-            _this.hoveredEl = undefined;
-            if (timeout) {
-                timeout.clear();
-            }
-        });
-        return {
-            remove: function () {
-                var _a;
-                if (((_a = _this.hoveredEl) === null || _a === void 0 ? void 0 : _a.el) === el) {
-                    _this.hoveredEl = undefined;
-                }
-                mouseEnter.remove();
-                mouseLeave.remove();
-                timeout === null || timeout === void 0 ? void 0 : timeout.clear();
-            },
-        };
-    };
-    /**
-     * Create custom cursor
-     */
-    CustomCursor.prototype._createCursor = function () {
-        var _a = this, prefix = _a.prefix, container = _a.container, domContainer = _a.domContainer;
-        // hide native cursor
-        if (this.prop.hideNativeCursor) {
-            domContainer.style.cursor = 'none';
-            domContainer.classList.add('hide-defaut-cursor');
-        }
-        // set classes
-        domContainer.classList.add("".concat(prefix, "-container"));
-        // create cursor elements
-        this._outerCursor = (0, vevet_dom_1.createElement)('div', {
-            class: "".concat(prefix, " ").concat(container instanceof Window ? 'in-window' : 'in-element', " disabled"),
-            parent: domContainer,
-        });
-        this._innerCursor = (0, vevet_dom_1.createElement)('div', {
-            class: "".concat(prefix, "__inner disabled"),
-            parent: this._outerCursor,
-        });
-        // launch events
-        this.callbacks.tbt('create', {
-            outerCursor: this.outerCursor,
-            innerCursor: this.innerCursor,
-        });
-    };
-    /**
-     * Destroy the cursor
-     */
-    CustomCursor.prototype._destroyCursor = function () {
-        var _a = this, prefix = _a.prefix, domContainer = _a.domContainer;
-        domContainer.style.cursor = '';
-        domContainer.classList.remove('hide-defaut-cursor');
-        domContainer.classList.remove("".concat(prefix, "-container"));
-        this._outerCursor.remove();
-        this._innerCursor.remove();
-    };
-    /**
-     * Event on mouse enter
-     */
-    CustomCursor.prototype._handleMouseEnter = function (evt) {
-        // update coordinates
-        this._coords.x = evt.clientX;
-        this._coords.y = evt.clientY;
-        this._targetCoords.x = evt.clientX;
-        this._targetCoords.y = evt.clientY;
-        // set classes
-        this.outerCursor.classList.add('in-action');
-    };
-    /**
-     * Event on mouse leave
-     */
-    CustomCursor.prototype._handleMouseLeave = function () {
-        this.outerCursor.classList.remove('in-action');
-    };
-    /**
-     * Event on mouse move
-     */
-    CustomCursor.prototype._handleMouseMove = function (evt) {
-        this._targetCoords.x = evt.clientX;
-        this._targetCoords.y = evt.clientY;
-        // set classes
-        this.outerCursor.classList.add('in-action');
-        // launch animation
-        if (this._canPlay) {
-            this._animationFrame.play();
-        }
-    };
-    /**
-     * Event on mouse down
-     */
-    CustomCursor.prototype._handleMouseDown = function (evt) {
-        if (evt.which === 1) {
-            this.outerCursor.classList.add('click');
-            this.innerCursor.classList.add('click');
-        }
-    };
-    /**
-     * Event on mouse up
-     */
-    CustomCursor.prototype._handleMouseUp = function () {
-        this.outerCursor.classList.remove('click');
-        this.innerCursor.classList.remove('click');
-    };
-    /**
-     * Event on mouse down
-     */
-    CustomCursor.prototype._handleWindowBlur = function () {
-        this._handleMouseUp();
-    };
-    /**
-     * Render the scene
-     */
-    CustomCursor.prototype.render = function () {
-        // props
-        var _a = this, prop = _a.prop, targetCoords = _a.targetCoords;
-        this._calcCoords();
-        var realCoords = this._renderElements();
-        // auto stop
-        if (prop.autoStop
-            && this.coords.x === targetCoords.x && this.coords.y === targetCoords.y
-            && this.coords.w === targetCoords.w && this.coords.h === targetCoords.h) {
-            this._animationFrame.pause();
-        }
-        // launch render events
-        this._callbacks.tbt('render', realCoords);
-    };
-    /**
-     * Recalculate current coordinates
-     */
-    CustomCursor.prototype._calcCoords = function () {
-        this._coords.x = this._lerp(this._coords.x, this.targetCoords.x);
-        this._coords.y = this._lerp(this._coords.y, this.targetCoords.y);
-        this._coords.w = this._lerp(this._coords.w, this.targetCoords.w);
-        this._coords.h = this._lerp(this._coords.h, this.targetCoords.h);
-    };
-    /**
-     * Linear interpolation
-     */
-    CustomCursor.prototype._lerp = function (current, target) {
-        var _a = this.prop.render, normalizeLerp = _a.normalizeLerp, ease = _a.lerp, lerpToFixed = _a.lerpToFixed;
-        var fpsMultiplier = normalizeLerp ? 60 / this._currentFPS : 1;
-        var val = (0, lerp_1.default)(current, target, ease * fpsMultiplier, 0.02);
-        // round the values
-        if (typeof lerpToFixed === 'number') {
-            var fixed = Math.round(Math.abs(lerpToFixed));
-            val = parseFloat(val.toFixed(fixed));
-        }
-        return val;
-    };
-    /**
-     * Render cursor elements
-     */
-    CustomCursor.prototype._renderElements = function () {
-        var _a = this, domContainer = _a.domContainer, outerCursor = _a.outerCursor;
-        // calculate real coordinates
-        var _b = this.coords, x = _b.x, y = _b.y;
-        var _c = this.coords, w = _c.w, h = _c.h;
-        if (!this._containerIsWindow) {
-            var bounding = domContainer.getBoundingClientRect();
-            x -= bounding.left;
-            y -= bounding.top;
-        }
-        // update dom coordinates
-        outerCursor.style.transform = "translate(".concat(x, "px, ").concat(y, "px)");
-        outerCursor.style.setProperty('--cursor-w', "".concat(w, "px"));
-        outerCursor.style.setProperty('--cursor-h', "".concat(h, "px"));
-        return {
-            x: x,
-            y: y,
-            w: w,
-            h: h,
-        };
-    };
-    /**
-     * Enable cursor
-     */
-    CustomCursor.prototype.enable = function () {
-        this._canPlay = true;
-        this.outerCursor.classList.remove('disabled');
-        this.innerCursor.classList.remove('disabled');
-        this._animationFrame.play();
-    };
-    /**
-     * Disable cursor
-     */
-    CustomCursor.prototype.disable = function () {
-        this._canPlay = false;
-        this.outerCursor.classList.add('disabled');
-        this.innerCursor.classList.add('disabled');
-        this._animationFrame.pause();
-    };
-    /**
-     * Destroy the module
-     */
-    CustomCursor.prototype._destroy = function () {
-        _super.prototype._destroy.call(this);
-        this._destroyCursor();
-        this._animationFrame.destroy();
-    };
-    return CustomCursor;
-}(Component_1.Component));
-exports.CustomCursor = CustomCursor;

package/build/cjs/components/dragger/Dragger.js

@@ -1,229 +0,0 @@
-"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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dragger = void 0;
-var vevet_dom_1 = require("vevet-dom");
-var Component_1 = require("../../base/Component");
-/**
- * Drag & Swipe events. An abstract class
- */
-var Dragger = /** @class */ (function (_super) {
-    __extends(Dragger, _super);
-    function Dragger(initialProp, init) {
-        if (init === void 0) { init = true; }
-        var _this = _super.call(this, initialProp, false) || this;
-        // get container
-        _this._container = (0, vevet_dom_1.selectOne)(_this.prop.container);
-        if (!(0, vevet_dom_1.isElement)(_this._container) && !(0, vevet_dom_1.isWindow)(_this._container)) {
-            throw new Error('No container');
-        }
-        // set default vars
-        _this._runtimeEvents = [];
-        _this._isDragging = false;
-        _this._pointerID = null;
-        _this._coords = { x: 0, y: 0 };
-        _this._prevCoords = { x: 0, y: 0 };
-        _this._startCoords = { x: 0, y: 0 };
-        // initialize the class
-        if (init) {
-            _this.init();
-        }
-        return _this;
-    }
-    Dragger.prototype._getDefaultProp = function () {
-        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { container: "#".concat(this.prefix), usePassive: false, enabled: true });
-    };
-    Object.defineProperty(Dragger.prototype, "prefix", {
-        get: function () {
-            return "".concat(this._app.prefix, "dragger");
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Dragger.prototype, "container", {
-        /**
-         * Preloader container
-         */
-        get: function () {
-            return this._container;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Dragger.prototype, "isDragging", {
-        /**
-         * If is dragging at the moment
-         */
-        get: function () {
-            return this._isDragging;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Dragger.prototype, "coords", {
-        /**
-         * Current coordinates relative to the Window
-         */
-        get: function () {
-            return this._coords;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Dragger.prototype, "startCoords", {
-        /**
-         * Coordinates on drag start
-         */
-        get: function () {
-            return this._startCoords;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * Set component events
-     */
-    Dragger.prototype._setEvents = function () {
-        var container = this.container;
-        var usePassive = this.prop.usePassive;
-        this.addEventListeners(container, 'mousedown', this._handleStart.bind(this), { passive: usePassive });
-        this.addEventListeners(container, 'touchstart', this._handleStart.bind(this), { passive: usePassive });
-    };
-    /**
-     * Add runtime events
-     */
-    Dragger.prototype._addRuntimeEvents = function () {
-        var usePassive = this.prop.usePassive;
-        // end
-        this._runtimeEvents.push((0, vevet_dom_1.addEventListener)(window, 'mouseup', this._handleEnd.bind(this), {
-            passive: usePassive,
-        }));
-        this._runtimeEvents.push((0, vevet_dom_1.addEventListener)(window, 'touchend', this._handleEnd.bind(this), {
-            passive: usePassive,
-        }));
-        // cancel
-        this._runtimeEvents.push((0, vevet_dom_1.addEventListener)(window, 'touchcancel', this.cancel.bind(this), {
-            passive: usePassive,
-        }));
-        this._runtimeEvents.push((0, vevet_dom_1.addEventListener)(window, 'blur', this.cancel.bind(this), {
-            passive: usePassive,
-        }));
-    };
-    /**
-     * Remove runtime events
-     */
-    Dragger.prototype._removeRuntimeEvents = function () {
-        this._runtimeEvents.forEach(function (event) {
-            event.remove();
-        });
-        this._runtimeEvents = [];
-    };
-    /**
-     * Normalize event data.
-     */
-    Dragger.prototype._normalizeEvent = function (e) {
-        if (e.type.includes('touch')) {
-            var evt_1 = e;
-            var touch = evt_1.targetTouches[0] || evt_1.changedTouches[0];
-            return {
-                x: touch.clientX,
-                y: touch.clientY,
-                id: touch.identifier,
-            };
-        }
-        var evt = e;
-        return {
-            x: evt.clientX,
-            y: evt.clientY,
-            id: null,
-        };
-    };
-    /**
-     * Event on start dragging
-     */
-    Dragger.prototype._handleStart = function (e) {
-        if (!this.prop.enabled) {
-            return false;
-        }
-        if (this.isDragging) {
-            return false;
-        }
-        var evt = this._normalizeEvent(e);
-        // prevent actions
-        if (e.type === 'mousedown') {
-            if (e.which === 1) {
-                e.stopPropagation();
-            }
-            else {
-                return false;
-            }
-        }
-        // update states
-        this._isDragging = true;
-        this._pointerID = evt.id;
-        // change coordinates
-        this._coords = { x: evt.x, y: evt.y };
-        this._prevCoords = { x: evt.x, y: evt.y };
-        this._startCoords = { x: evt.x, y: evt.y };
-        // add additional events
-        this._addRuntimeEvents();
-        // launch callbacks
-        this.callbacks.tbt('start', {
-            evt: e,
-        });
-        return true;
-    };
-    /**
-     * Event on drag end
-     */
-    Dragger.prototype._handleEnd = function (e) {
-        var evt = this._normalizeEvent(e);
-        if (!this.isDragging || evt.id !== this._pointerID) {
-            return false;
-        }
-        this.cancel();
-        return true;
-    };
-    /**
-     * Cancel dragging
-     */
-    Dragger.prototype.cancel = function () {
-        this._removeRuntimeEvents();
-        this._isDragging = false;
-        this.callbacks.tbt('end', false);
-    };
-    /**
-     * Destroy the module
-     */
-    Dragger.prototype._destroy = function () {
-        _super.prototype._destroy.call(this);
-        this._removeRuntimeEvents();
-    };
-    return Dragger;
-}(Component_1.Component));
-exports.Dragger = Dragger;