vevet 1.4.27 → 2.0.1-dev.3

package/build/es/components/canvas/Ctx2D.js

@@ -0,0 +1,133 @@
+import { createElement } from 'vevet-dom';
+import { Component } from '../../base/Component';
+/**
+ * Makes working with canvas easier.
+ * It creates an HTML5 Canvas element and its 2d context and can
+ * implement automatic resize.
+ */
+export class Ctx2D extends Component {
+    constructor(initialProp, init = true) {
+        super(initialProp, false);
+        // set default values
+        this._width = 0;
+        this._height = 0;
+        this._dpr = 1;
+        // create canvas
+        const { append, container } = this.prop;
+        const parent = (append && container) ? container : undefined;
+        this._canvas = createElement('canvas', {
+            parent,
+        });
+        this._ctx = this._canvas.getContext('2d');
+        // and resize it for the first time
+        this.resize();
+        // initialize the class
+        if (init) {
+            this.init();
+        }
+    }
+    /**
+     * The parent container of the canvas
+     */
+    get container() {
+        return this.prop.container;
+    }
+    get canvas() {
+        return this._canvas;
+    }
+    get ctx() {
+        return this._ctx;
+    }
+    get width() {
+        return this._width;
+    }
+    /**
+     * Canvas width without DPR
+     */
+    get nonDPRWidth() {
+        return this.width / this.dpr;
+    }
+    get height() {
+        return this._height;
+    }
+    /**
+     * Canvas height without DPR
+     */
+    get nonDPRHeight() {
+        return this.height / this.dpr;
+    }
+    get dpr() {
+        return this._dpr;
+    }
+    _getDefaultProp() {
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: false, append: true, updateOnResize: false, width: false, height: false, dpr: false });
+    }
+    // Set Module Events
+    _setEvents() {
+        super._setEvents();
+        if (this.prop.updateOnResize !== false) {
+            const viewportTarget = typeof this.prop.updateOnResize === 'boolean' ? '' : this.prop.updateOnResize;
+            this.addViewportCallback(viewportTarget, () => {
+                this.resize();
+            });
+            this.resize();
+        }
+    }
+    _onPropMutate() {
+        super._onPropMutate();
+        this.resize();
+    }
+    /**
+     * Resize the canvas
+     */
+    resize() {
+        // vars
+        const { prop, canvas } = this;
+        if (!canvas) {
+            return;
+        }
+        const app = this._app;
+        const { viewport } = app;
+        // calculate dpr
+        if (typeof prop.dpr === 'number') {
+            this._dpr = prop.dpr;
+        }
+        else {
+            this._dpr = viewport.dpr;
+        }
+        const dpr = this._dpr;
+        // calculate new width & height
+        let newWidth = 0;
+        let newHeight = 0;
+        if (typeof prop.width === 'number' && typeof prop.height === 'number') {
+            newWidth = prop.width;
+            newHeight = prop.height;
+        }
+        else if (this.container) {
+            newWidth = this.container.clientWidth;
+            newHeight = this.container.clientHeight;
+        }
+        else {
+            newWidth = viewport.width;
+            newHeight = viewport.height;
+        }
+        newWidth *= dpr;
+        newHeight *= dpr;
+        // update sizes
+        this._width = newWidth;
+        this._height = newHeight;
+        // apply sizes
+        canvas.width = newWidth;
+        canvas.height = newHeight;
+        this.callbacks.tbt('resize', false);
+    }
+    /**
+     * Destroy the module
+     */
+    _destroy() {
+        super._destroy();
+        if (this.canvas) {
+            this.canvas.remove();
+        }
+    }
+}

package/build/es/components/canvas/Ctx2DPrerender.js

@@ -0,0 +1,37 @@
+import { getPos } from 'get-image-pos';
+import { Ctx2D } from './Ctx2D';
+/**
+ * The class allows you to prerender media for further use with reduced payloads.
+ */
+export class Ctx2DPrerender extends Ctx2D {
+    _getDefaultProp() {
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { media: false, posRule: 'cover' });
+    }
+    /**
+     * Resize the canvas
+     */
+    resize() {
+        super.resize();
+        this._prerender();
+    }
+    _prerender() {
+        // check if media exists
+        const { media } = this.prop;
+        if (!media) {
+            return;
+        }
+        // get media sizes
+        const size = getPos({
+            source: media,
+            rule: this.prop.posRule,
+            scale: 1,
+            width: this.width,
+            height: this.height,
+        });
+        this._ctx.clearRect(0, 0, this.width, this.height);
+        // render the media
+        this._ctx.drawImage(media, 0, 0, size.sourceWidth, size.sourceHeight, size.x, size.y, size.width, size.height);
+        // launch callbacks on prerender
+        this.callbacks.tbt('prerender', false);
+    }
+}

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

@@ -0,0 +1,274 @@
+import { createElement, selectOne } from 'vevet-dom';
+import { AnimationFrame } from '../animation-frame/AnimationFrame';
+import { Component } from '../../base/Component';
+import lerp from '../../utils/math/lerp';
+/**
+ * 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._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();
+        }
+    }
+    _getDefaultProp() {
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: window, run: true, hideNativeCursor: false, render: {
+                lerp: 0.2,
+                lerpToFixed: 2,
+                normalizeLerp: 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;
+    }
+    /**
+     * Current X coordinate relative to Window
+     */
+    get x() {
+        return this._x;
+    }
+    /**
+     * Current Y coordinate relative to Window
+     */
+    get y() {
+        return this._y;
+    }
+    // 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));
+    }
+    /**
+     * 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._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
+     */
+    _handleMouseLeave() {
+        this.outerCursor.classList.remove('in-action');
+    }
+    /**
+     * Event on mouse move
+     */
+    _handleMouseMove(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
+     */
+    _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 } = this;
+        const { domContainer } = this;
+        const { normalizeLerp, lerp: ease, lerpToFixed } = prop.render;
+        const fpsMultiplier = normalizeLerp ? 60 / this._currentFPS : 1;
+        // interpolate coordinates
+        this._x = lerp(this._x, this._xTarget, ease * fpsMultiplier, 0.02);
+        this._y = lerp(this._y, this._yTarget, ease * fpsMultiplier, 0.02);
+        // round the values
+        if (typeof lerpToFixed === 'number') {
+            const fixed = Math.round(Math.abs(lerpToFixed));
+            this._x = parseFloat(this._x.toFixed(fixed));
+            this._y = parseFloat(this._y.toFixed(fixed));
+        }
+        // calcu;ate real coordinates
+        let x = this._x;
+        let y = this._y;
+        if (!this._containerIsWindow) {
+            const 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, y });
+    }
+    /**
+     * Enable cursor
+     */
+    enable() {
+        this._canPlay = true;
+        if (this._animationFrame.isPlaying) {
+            return;
+        }
+        this.outerCursor.classList.remove('disabled');
+        this.innerCursor.classList.remove('disabled');
+        this._animationFrame.play();
+    }
+    /**
+     * Disable cursor
+     */
+    disable() {
+        this._canPlay = false;
+        if (!this._animationFrame.isPlaying) {
+            return;
+        }
+        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

@@ -0,0 +1,175 @@
+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

@@ -0,0 +1,42 @@
+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;
+    }
+}