vevet 1.4.27 → 2.0.1-dev.3

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

@@ -0,0 +1,344 @@
+"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"));
+/**
+ * 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 = vevet_dom_1.selectOne(_this.prop.container);
+        if (container) {
+            _this._container = container;
+        }
+        else {
+            throw new Error("No cursor container for " + _this.prop.container);
+        }
+        _this._containerIsWindow = container instanceof Window;
+        // set default vars
+        _this._x = 0;
+        _this._xTarget = 0;
+        _this._y = 0;
+        _this._yTarget = 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, render: {
+                lerp: 0.2,
+                lerpToFixed: 2,
+                normalizeLerp: false,
+            }, autoStop: true });
+    };
+    Object.defineProperty(CustomCursor.prototype, "prefix", {
+        get: function () {
+            return 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, "x", {
+        /**
+         * Current X coordinate relative to Window
+         */
+        get: function () {
+            return this._x;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(CustomCursor.prototype, "y", {
+        /**
+         * Current Y coordinate relative to Window
+         */
+        get: function () {
+            return this._y;
+        },
+        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));
+    };
+    /**
+     * 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(prefix + "-container");
+        // create cursor elements
+        this._outerCursor = vevet_dom_1.createElement('div', {
+            class: prefix + " " + (container instanceof Window ? 'in-window' : 'in-element') + " disabled",
+            parent: domContainer,
+        });
+        this._innerCursor = vevet_dom_1.createElement('div', {
+            class: 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(prefix + "-container");
+        this._outerCursor.remove();
+        this._innerCursor.remove();
+    };
+    /**
+     * Event on mouse enter
+     */
+    CustomCursor.prototype._handleMouseEnter = function (evt) {
+        // update coordinates
+        this._xTarget = evt.clientX;
+        this._x = this._xTarget;
+        this._yTarget = evt.clientY;
+        this._y = this._yTarget;
+        // 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._xTarget = evt.clientX;
+        this._yTarget = 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 prop = this.prop;
+        var domContainer = this.domContainer;
+        var _a = prop.render, normalizeLerp = _a.normalizeLerp, ease = _a.lerp, lerpToFixed = _a.lerpToFixed;
+        var fpsMultiplier = normalizeLerp ? 60 / this._currentFPS : 1;
+        // interpolate coordinates
+        this._x = lerp_1.default(this._x, this._xTarget, ease * fpsMultiplier, 0.02);
+        this._y = lerp_1.default(this._y, this._yTarget, ease * fpsMultiplier, 0.02);
+        // round the values
+        if (typeof lerpToFixed === 'number') {
+            var fixed = Math.round(Math.abs(lerpToFixed));
+            this._x = parseFloat(this._x.toFixed(fixed));
+            this._y = parseFloat(this._y.toFixed(fixed));
+        }
+        // calcu;ate real coordinates
+        var x = this._x;
+        var y = this._y;
+        if (!this._containerIsWindow) {
+            var bounding = domContainer.getBoundingClientRect();
+            x -= bounding.left;
+            y -= bounding.top;
+        }
+        // update dom coordinates
+        this.outerCursor.style.transform = "translate(" + x + "px, " + y + "px)";
+        // auto stop
+        if (prop.autoStop
+            && this._x === this._xTarget && this._y === this._yTarget) {
+            this._animationFrame.pause();
+        }
+        // launch render events
+        this._callbacks.tbt('render', { x: x, y: y });
+    };
+    /**
+     * Enable cursor
+     */
+    CustomCursor.prototype.enable = function () {
+        this._canPlay = true;
+        if (this._animationFrame.isPlaying) {
+            return;
+        }
+        this.outerCursor.classList.remove('disabled');
+        this.innerCursor.classList.remove('disabled');
+        this._animationFrame.play();
+    };
+    /**
+     * Disable cursor
+     */
+    CustomCursor.prototype.disable = function () {
+        this._canPlay = false;
+        if (!this._animationFrame.isPlaying) {
+            return;
+        }
+        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

@@ -0,0 +1,229 @@
+"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 = vevet_dom_1.selectOne(_this.prop.container);
+        if (!vevet_dom_1.isElement(_this._container) && !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: "#" + this.prefix, usePassive: false, enabled: true });
+    };
+    Object.defineProperty(Dragger.prototype, "prefix", {
+        get: function () {
+            return 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(vevet_dom_1.addEventListener(window, 'mouseup', this._handleEnd.bind(this), {
+            passive: usePassive,
+        }));
+        this._runtimeEvents.push(vevet_dom_1.addEventListener(window, 'touchend', this._handleEnd.bind(this), {
+            passive: usePassive,
+        }));
+        // cancel
+        this._runtimeEvents.push(vevet_dom_1.addEventListener(window, 'touchcancel', this.cancel.bind(this), {
+            passive: usePassive,
+        }));
+        this._runtimeEvents.push(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;

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

@@ -0,0 +1,77 @@
+"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.DraggerDirection = void 0;
+var Dragger_1 = require("./Dragger");
+/**
+ * Dragger that detects direction
+ */
+var DraggerDirection = /** @class */ (function (_super) {
+    __extends(DraggerDirection, _super);
+    function DraggerDirection() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DraggerDirection.prototype._getDefaultProp = function () {
+        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { min: 75 });
+    };
+    /**
+     * Event on drag end
+     */
+    DraggerDirection.prototype._handleEnd = function (e) {
+        var res = _super.prototype._handleEnd.call(this, e);
+        if (!res) {
+            return res;
+        }
+        var evt = this._normalizeEvent(e);
+        var startCoords = this.startCoords;
+        var min = Math.abs(this.prop.min);
+        // up
+        if (startCoords.y > evt.y
+            && Math.abs(evt.y - startCoords.y) >= min) {
+            this.callbacks.tbt('up', false);
+        }
+        // down
+        if (startCoords.y < evt.y
+            && Math.abs(evt.y - startCoords.y) >= min) {
+            this.callbacks.tbt('down', false);
+        }
+        // left
+        if (startCoords.x > evt.x
+            && Math.abs(evt.x - startCoords.x) >= min) {
+            this.callbacks.tbt('left', false);
+        }
+        // right
+        if (startCoords.x < evt.x
+            && Math.abs(evt.x - startCoords.x) >= min) {
+            this.callbacks.tbt('right', false);
+        }
+        return true;
+    };
+    return DraggerDirection;
+}(Dragger_1.Dragger));
+exports.DraggerDirection = DraggerDirection;