vevet 2.17.0 → 3.0.0-beta.1

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

@@ -1,355 +0,0 @@
-import { addEventListener, createElement, selectOne } from 'vevet-dom';
-import { AnimationFrame } from '../animation-frame/AnimationFrame';
-import { Component } from '../../base/Component';
-import lerp from '../../utils/math/lerp';
-import { timeoutCallback } from '../../utils/common';
-/**
- * Creates a smooth custom cursor
- */
-export class CustomCursor extends Component {
-    constructor(initialProp, init = true) {
-        super(initialProp, false);
-        // get cursor container
-        const container = 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._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();
-        }
-    }
-    _getDefaultProp() {
-        return Object.assign(Object.assign({}, super._getDefaultProp()), { 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 });
-    }
-    get prefix() {
-        return `${this._app.prefix}custom-cursor`;
-    }
-    /**
-     * Cursor container
-     */
-    get container() {
-        return this._container;
-    }
-    /**
-     * The element for events
-     */
-    get eventsContainer() {
-        return this._container;
-    }
-    /**
-     * The DOM parent for the cursor element
-     */
-    get domContainer() {
-        if (this.container instanceof Window) {
-            return this._app.html;
-        }
-        return this.container;
-    }
-    /**
-     * Cursor element (outer element)
-     */
-    get outerCursor() {
-        return this._outerCursor;
-    }
-    /**
-     * Cursor element (inner element)
-     */
-    get innerCursor() {
-        return this._innerCursor;
-    }
-    get hoveredEl() {
-        return this._hoveredEl;
-    }
-    set hoveredEl(val) {
-        this._hoveredEl = val;
-    }
-    get coords() {
-        return this._coords;
-    }
-    get targetCoords() {
-        var _a, _b, _c;
-        const { hoveredEl, prop } = this;
-        const sizes = prop.size;
-        let { x } = this._targetCoords;
-        let { y } = this._targetCoords;
-        let w = sizes.width;
-        let h = sizes.height;
-        let padding = 0;
-        if (hoveredEl) {
-            const 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, y, w, h,
-        };
-    }
-    // Extra constructor
-    _constructor() {
-        super._constructor();
-        this._createCursor();
-    }
-    // Set Module Events
-    _setEvents() {
-        super._setEvents();
-        const { domContainer } = this;
-        // create animation frame
-        this._animationFrame = new AnimationFrame();
-        this._animationFrame.addCallback('frame', (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
-     */
-    addHoverEl(settings, enterTimeout = 100) {
-        const { el } = settings;
-        let timeout;
-        const mouseEnter = addEventListener(el, 'mouseenter', () => {
-            timeout = timeoutCallback(() => {
-                this.hoveredEl = Object.assign({}, settings);
-            }, enterTimeout);
-        });
-        const mouseLeave = addEventListener(el, 'mouseleave', () => {
-            this.hoveredEl = undefined;
-            if (timeout) {
-                timeout.clear();
-            }
-        });
-        return {
-            remove: () => {
-                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
-     */
-    _createCursor() {
-        const { prefix, container, domContainer } = this;
-        // 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 = createElement('div', {
-            class: `${prefix} ${container instanceof Window ? 'in-window' : 'in-element'} disabled`,
-            parent: domContainer,
-        });
-        this._innerCursor = createElement('div', {
-            class: `${prefix}__inner disabled`,
-            parent: this._outerCursor,
-        });
-        // launch events
-        this.callbacks.tbt('create', {
-            outerCursor: this.outerCursor,
-            innerCursor: this.innerCursor,
-        });
-    }
-    /**
-     * Destroy the cursor
-     */
-    _destroyCursor() {
-        const { prefix, domContainer } = this;
-        domContainer.style.cursor = '';
-        domContainer.classList.remove('hide-defaut-cursor');
-        domContainer.classList.remove(`${prefix}-container`);
-        this._outerCursor.remove();
-        this._innerCursor.remove();
-    }
-    /**
-     * Event on mouse enter
-     */
-    _handleMouseEnter(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
-     */
-    _handleMouseLeave() {
-        this.outerCursor.classList.remove('in-action');
-    }
-    /**
-     * Event on mouse move
-     */
-    _handleMouseMove(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
-     */
-    _handleMouseDown(evt) {
-        if (evt.which === 1) {
-            this.outerCursor.classList.add('click');
-            this.innerCursor.classList.add('click');
-        }
-    }
-    /**
-     * Event on mouse up
-     */
-    _handleMouseUp() {
-        this.outerCursor.classList.remove('click');
-        this.innerCursor.classList.remove('click');
-    }
-    /**
-     * Event on mouse down
-     */
-    _handleWindowBlur() {
-        this._handleMouseUp();
-    }
-    /**
-     * Render the scene
-     */
-    render() {
-        // props
-        const { prop, targetCoords } = this;
-        this._calcCoords();
-        const 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
-     */
-    _calcCoords() {
-        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
-     */
-    _lerp(current, target) {
-        const { normalizeLerp, lerp: ease, lerpToFixed } = this.prop.render;
-        const fpsMultiplier = normalizeLerp ? 60 / this._currentFPS : 1;
-        let val = lerp(current, target, ease * fpsMultiplier, 0.02);
-        // round the values
-        if (typeof lerpToFixed === 'number') {
-            const fixed = Math.round(Math.abs(lerpToFixed));
-            val = parseFloat(val.toFixed(fixed));
-        }
-        return val;
-    }
-    /**
-     * Render cursor elements
-     */
-    _renderElements() {
-        const { domContainer, outerCursor } = this;
-        // calculate real coordinates
-        let { x, y, } = this.coords;
-        const { w, h } = this.coords;
-        if (!this._containerIsWindow) {
-            const bounding = domContainer.getBoundingClientRect();
-            x -= bounding.left;
-            y -= bounding.top;
-        }
-        // update dom coordinates
-        outerCursor.style.transform = `translate(${x}px, ${y}px)`;
-        outerCursor.style.setProperty('--cursor-w', `${w}px`);
-        outerCursor.style.setProperty('--cursor-h', `${h}px`);
-        return {
-            x, y, w, h,
-        };
-    }
-    /**
-     * Enable cursor
-     */
-    enable() {
-        this._canPlay = true;
-        this.outerCursor.classList.remove('disabled');
-        this.innerCursor.classList.remove('disabled');
-        this._animationFrame.play();
-    }
-    /**
-     * Disable cursor
-     */
-    disable() {
-        this._canPlay = false;
-        this.outerCursor.classList.add('disabled');
-        this.innerCursor.classList.add('disabled');
-        this._animationFrame.pause();
-    }
-    /**
-     * Destroy the module
-     */
-    _destroy() {
-        super._destroy();
-        this._destroyCursor();
-        this._animationFrame.destroy();
-    }
-}

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

@@ -1,175 +0,0 @@
-import { addEventListener, isElement, isWindow, selectOne, } from 'vevet-dom';
-import { Component } from '../../base/Component';
-/**
- * Drag & Swipe events. An abstract class
- */
-export class Dragger extends Component {
-    constructor(initialProp, init = true) {
-        super(initialProp, false);
-        // get container
-        this._container = selectOne(this.prop.container);
-        if (!isElement(this._container) && !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();
-        }
-    }
-    _getDefaultProp() {
-        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: `#${this.prefix}`, usePassive: false, enabled: true });
-    }
-    get prefix() {
-        return `${this._app.prefix}dragger`;
-    }
-    /**
-     * Preloader container
-     */
-    get container() {
-        return this._container;
-    }
-    /**
-     * If is dragging at the moment
-     */
-    get isDragging() {
-        return this._isDragging;
-    }
-    /**
-     * Current coordinates relative to the Window
-     */
-    get coords() {
-        return this._coords;
-    }
-    /**
-     * Coordinates on drag start
-     */
-    get startCoords() {
-        return this._startCoords;
-    }
-    /**
-     * Set component events
-     */
-    _setEvents() {
-        const { container } = this;
-        const { usePassive } = this.prop;
-        this.addEventListeners(container, 'mousedown', this._handleStart.bind(this), { passive: usePassive });
-        this.addEventListeners(container, 'touchstart', this._handleStart.bind(this), { passive: usePassive });
-    }
-    /**
-     * Add runtime events
-     */
-    _addRuntimeEvents() {
-        const { usePassive } = this.prop;
-        // end
-        this._runtimeEvents.push(addEventListener(window, 'mouseup', this._handleEnd.bind(this), {
-            passive: usePassive,
-        }));
-        this._runtimeEvents.push(addEventListener(window, 'touchend', this._handleEnd.bind(this), {
-            passive: usePassive,
-        }));
-        // cancel
-        this._runtimeEvents.push(addEventListener(window, 'touchcancel', this.cancel.bind(this), {
-            passive: usePassive,
-        }));
-        this._runtimeEvents.push(addEventListener(window, 'blur', this.cancel.bind(this), {
-            passive: usePassive,
-        }));
-    }
-    /**
-     * Remove runtime events
-     */
-    _removeRuntimeEvents() {
-        this._runtimeEvents.forEach((event) => {
-            event.remove();
-        });
-        this._runtimeEvents = [];
-    }
-    /**
-     * Normalize event data.
-     */
-    _normalizeEvent(e) {
-        if (e.type.includes('touch')) {
-            const evt = e;
-            const touch = evt.targetTouches[0] || evt.changedTouches[0];
-            return {
-                x: touch.clientX,
-                y: touch.clientY,
-                id: touch.identifier,
-            };
-        }
-        const evt = e;
-        return {
-            x: evt.clientX,
-            y: evt.clientY,
-            id: null,
-        };
-    }
-    /**
-     * Event on start dragging
-     */
-    _handleStart(e) {
-        if (!this.prop.enabled) {
-            return false;
-        }
-        if (this.isDragging) {
-            return false;
-        }
-        const 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
-     */
-    _handleEnd(e) {
-        const evt = this._normalizeEvent(e);
-        if (!this.isDragging || evt.id !== this._pointerID) {
-            return false;
-        }
-        this.cancel();
-        return true;
-    }
-    /**
-     * Cancel dragging
-     */
-    cancel() {
-        this._removeRuntimeEvents();
-        this._isDragging = false;
-        this.callbacks.tbt('end', false);
-    }
-    /**
-     * Destroy the module
-     */
-    _destroy() {
-        super._destroy();
-        this._removeRuntimeEvents();
-    }
-}

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

@@ -1,42 +0,0 @@
-import { Dragger } from './Dragger';
-/**
- * Dragger that detects direction
- */
-export class DraggerDirection extends Dragger {
-    _getDefaultProp() {
-        return Object.assign(Object.assign({}, super._getDefaultProp()), { min: 75 });
-    }
-    /**
-     * Event on drag end
-     */
-    _handleEnd(e) {
-        const res = super._handleEnd(e);
-        if (!res) {
-            return res;
-        }
-        const evt = this._normalizeEvent(e);
-        const { startCoords } = this;
-        const 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;
-    }
-}

package/build/es/components/dragger/DraggerMove.js

@@ -1,56 +0,0 @@
-import { addEventListener, } from 'vevet-dom';
-import { Dragger } from './Dragger';
-/**
- * Dragger with 'move' callbacks and motion.
- */
-export class DraggerMove extends Dragger {
-    /**
-     * Step on move
-     */
-    get stepCoords() {
-        return {
-            x: this._coords.x - this._prevCoords.x,
-            y: this._coords.y - this._prevCoords.y,
-        };
-    }
-    /**
-     * Add runtime events
-     */
-    _addRuntimeEvents() {
-        super._addRuntimeEvents();
-        const { usePassive } = this.prop;
-        // move
-        this._runtimeEvents.push(addEventListener(window, 'mousemove', this._handleMove.bind(this), {
-            passive: usePassive,
-        }));
-        this._runtimeEvents.push(addEventListener(window, 'touchmove', this._handleMove.bind(this), {
-            passive: usePassive,
-        }));
-    }
-    /**
-     * Event on move
-     */
-    _handleMove(e) {
-        const evt = this._normalizeEvent(e);
-        if (!this.isDragging || evt.id !== this._pointerID) {
-            return false;
-        }
-        // update coordinates
-        this._prevCoords = { x: this._coords.x, y: this._coords.y };
-        this._coords = { x: evt.x, y: evt.y };
-        // call events
-        this.callbacks.tbt('move', {
-            evt: e,
-            start: this.startCoords,
-            coords: this.coords,
-            step: this.stepCoords,
-        });
-        return true;
-    }
-    /**
-     * Destroy the module
-     */
-    _destroy() {
-        super._destroy();
-    }
-}