vevet 2.0.1-dev.2 → 2.0.1-dev.23

package/build/es/base/Callbacks.js

@@ -3,20 +3,6 @@ import { timeoutCallback, randID } from '../utils/common';
  * A class for callbacks' manipulation.
  */
 export class Callbacks {
-    /**
-     * Vevet Application
-     */
-    _app;
-    /**
-     * All callbacks
-     */
-    _callbacks;
-    /**
-     * Get all callbacks
-     */
-    get callbacks() {
-        return this._callbacks;
-    }
     /**
      * @example
      * const callback = new Callbacks();
@@ -29,6 +15,12 @@ export class Callbacks {
             this._init();
         }
     }
+    /**
+     * Get all callbacks
+     */
+    get callbacks() {
+        return this._callbacks;
+    }
     /**
      * Initialize the class.
      */
@@ -64,12 +56,9 @@ export class Callbacks {
         const obj = {
             id,
             on: true,
-            data: {
-                target,
+            data: Object.assign({ target, 
                 // @ts-ignore
-                do: func,
-                ...data,
-            },
+                do: func }, data),
         };
         this._callbacks.push(obj);
         this._onAdd(id);

package/build/es/base/Component.js

@@ -3,7 +3,6 @@ import { Module } from './Module';
  * A class for Components.
  */
 export class Component extends Module {
-    _plugins;
     /**
      * Add a single plugin
      */

package/build/es/base/Module.js

@@ -7,6 +7,47 @@ import { throwVevetAppError } from '../utils/errors';
  * A class for modules.
  */
 export class Module {
+    /**
+     * @example
+     * const mod = new Module();
+     */
+    constructor(
+    /**
+     * Properties on script start
+     */
+    initialProp, 
+    /**
+     * Defines if you need to call {@linkcode Module.init} at the constructor's end.
+     * If you want to add responsive properties, set this argument to FALSE.
+     */
+    init = true) {
+        /**
+         * If the module is initialized
+         */
+        this._inited = false;
+        /**
+         * Viewport callbacks
+         */
+        this._viewportCallbacks = [];
+        // set vars
+        if (window.vevetApp) {
+            this._app = window.vevetApp;
+        }
+        else {
+            throwVevetAppError();
+        }
+        // set default vars
+        this._destroyed = false;
+        this._listeners = [];
+        // create callbacks
+        this._callbacks = new Callbacks();
+        // create mutable properties
+        const prop = mergeWithoutArrays(this._getDefaultProp(), initialProp || {});
+        this._mutableProp = new MutableProp(prop, this._onPropResponsive.bind(this), this._onPropChange.bind(this), this.name);
+        if (init) {
+            this.init();
+        }
+    }
     /**
      * Get Default properties (should be extended)
      */
@@ -21,28 +62,12 @@ export class Module {
     get prop() {
         return this._mutableProp.prop;
     }
-    /**
-     * Responsive properties
-     */
-    _mutableProp;
-    /**
-     * Module Callbacks
-     */
-    _callbacks;
     /**
      * Module Callbacks
      */
     get callbacks() {
         return this._callbacks;
     }
-    /**
-     * Module listeners
-     */
-    _listeners;
-    /**
-     * Vevet Application
-     */
-    _app;
     /**
      * Module prefix
      */
@@ -55,53 +80,12 @@ export class Module {
     get name() {
         return this.constructor.name;
     }
-    /**
-     * If the module is initialized
-     */
-    _inited = false;
     get inited() {
         return this._inited;
     }
-    /**
-     * If the module is destroyed
-     */
-    _destroyed;
     get destroyed() {
         return this._destroyed;
     }
-    /**
-     * @example
-     * const mod = new Module();
-     */
-    constructor(
-    /**
-     * Properties on script start
-     */
-    initialProp, 
-    /**
-     * Defines if you need to call {@linkcode Module.init} at the constructor's end.
-     * If you want to add responsive properties, set this argument to FALSE.
-     */
-    init = true) {
-        // set vars
-        if (window.vevetApp) {
-            this._app = window.vevetApp;
-        }
-        else {
-            throwVevetAppError();
-        }
-        // set default vars
-        this._destroyed = false;
-        this._listeners = [];
-        // create callbacks
-        this._callbacks = new Callbacks();
-        // create mutable properties
-        const prop = mergeWithoutArrays(this._getDefaultProp(), initialProp || {});
-        this._mutableProp = new MutableProp(prop, this._onPropResponsive.bind(this), this._onPropChange.bind(this), this.name);
-        if (init) {
-            this.init();
-        }
-    }
     /**
      * Add responsive rules
      */
@@ -182,10 +166,6 @@ export class Module {
     _setEvents() {
         // code
     }
-    /**
-     * Viewport callbacks
-     */
-    _viewportCallbacks = [];
     /**
      * Add a viewport callback that will be removed on class destroy
      * {@see Viewport}

package/build/es/base/MutableProp.js

@@ -14,38 +14,6 @@ import { mergeWithoutArrays } from '../utils/common';
  * </ul>
  */
 export class MutableProp {
-    _initProp;
-    _onResponsive;
-    _onChange;
-    _name;
-    /**
-     * Vevet Application.
-     */
-    _app;
-    /**
-     * @description Reference properties.
-     * These properties may change only through {@linkcode MutableProp.changeProp}.
-     */
-    _refProp;
-    /**
-     * Current properties.
-     * These properties may change both on {@linkcode MutableProp.changeProp} and resize.
-     */
-    _prop;
-    /**
-     * A set of responsive rules
-     */
-    _responsiveRules = [];
-    /**
-     * Get current properties
-     */
-    get prop() {
-        return this._prop;
-    }
-    /**
-     * Viewport callback
-     */
-    _viewportCallback;
     /**
      * @example
      * const static = {
@@ -84,10 +52,20 @@ export class MutableProp {
         this._onResponsive = _onResponsive;
         this._onChange = _onChange;
         this._name = _name;
+        /**
+         * A set of responsive rules
+         */
+        this._responsiveRules = [];
         this._app = window.vevetApp;
         this._refProp = mergeWithoutArrays({}, _initProp);
         this._prop = mergeWithoutArrays({}, _initProp);
     }
+    /**
+     * Get current properties
+     */
+    get prop() {
+        return this._prop;
+    }
     /**
      * Add responsive rules
      */

package/build/es/base/Plugin.js

@@ -6,7 +6,6 @@ export class Plugin extends Module {
     constructor(initialProp) {
         super(initialProp, false);
     }
-    _component;
     get component() {
         return this._component;
     }

package/build/es/components/animation-frame/AnimationFrame.js

@@ -4,29 +4,6 @@ import { boundVal } from '../../utils/math';
  * Launch an animation frame with a certain FPS
  */
 export class AnimationFrame extends Component {
-    /**
-     * If the frame is launched
-     */
-    _isPlaying;
-    get isPlaying() {
-        return this._isPlaying;
-    }
-    /**
-     * The animation frame
-     */
-    _frame;
-    /**
-     * Previous frame segment
-     */
-    _frameIndex;
-    /**
-     * Timestamp
-     */
-    _timeStamp;
-    /**
-     * Previous frame duration
-     */
-    _prevFrameTime;
     constructor(initialProp, init = true) {
         super(initialProp, false);
         this._isPlaying = false;
@@ -38,15 +15,14 @@ export class AnimationFrame extends Component {
             this.init();
         }
     }
+    get isPlaying() {
+        return this._isPlaying;
+    }
     /**
      * Get default properties
      */
     _getDefaultProp() {
-        return {
-            ...super._getDefaultProp(),
-            fps: 140,
-            run: false,
-        };
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { fps: 140, run: false });
     }
     // Extra constructor
     _constructor() {

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

@@ -6,30 +6,38 @@ import { Component } from '../../base/Component';
  * 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;
     }
-    /**
-     * The Canvas element itself
-     */
-    _canvas;
     get canvas() {
         return this._canvas;
     }
-    /**
-     * 2D Context
-     */
-    _ctx;
     get ctx() {
         return this._ctx;
     }
-    /**
-     * The width of the canvas
-     */
-    _width;
     get width() {
         return this._width;
     }
@@ -39,10 +47,6 @@ export class Ctx2D extends Component {
     get nonDPRWidth() {
         return this.width / this.dpr;
     }
-    /**
-     * The height of the canvas
-     */
-    _height;
     get height() {
         return this._height;
     }
@@ -52,43 +56,11 @@ export class Ctx2D extends Component {
     get nonDPRHeight() {
         return this.height / this.dpr;
     }
-    /**
-     * Device pixel ratio
-     */
-    _dpr;
     get dpr() {
         return this._dpr;
     }
-    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();
-        }
-    }
     _getDefaultProp() {
-        return {
-            ...super._getDefaultProp(),
-            container: false,
-            append: true,
-            updateOnResize: false,
-            width: false,
-            height: false,
-            dpr: false,
-        };
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: false, append: true, updateOnResize: false, width: false, height: false, dpr: false });
     }
     // Set Module Events
     _setEvents() {

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

@@ -5,11 +5,7 @@ import { Ctx2D } from './Ctx2D';
  */
 export class Ctx2DPrerender extends Ctx2D {
     _getDefaultProp() {
-        return {
-            ...super._getDefaultProp(),
-            media: false,
-            posRule: 'cover',
-        };
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { media: false, posRule: 'cover' });
     }
     /**
      * Resize the canvas
@@ -19,14 +15,32 @@ export class Ctx2DPrerender extends Ctx2D {
         this._prerender();
     }
     _prerender() {
+        // check if can render
+        if (this.width === 0 || this.height === 0) {
+            return;
+        }
         // check if media exists
         const { media } = this.prop;
         if (!media) {
             return;
         }
+        // get source info
+        let source;
+        let sourceWidth;
+        let sourceHeight;
+        if (media instanceof Ctx2D) {
+            source = media.canvas;
+            sourceWidth = media.width;
+            sourceHeight = media.height;
+        }
+        else {
+            source = media;
+        }
         // get media sizes
         const size = getPos({
-            source: media,
+            source,
+            sourceWidth,
+            sourceHeight,
             rule: this.prop.posRule,
             scale: 1,
             width: this.width,
@@ -34,7 +48,7 @@ export class Ctx2DPrerender extends Ctx2D {
         });
         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);
+        this._ctx.drawImage(source, size.x, size.y, size.width, size.height);
         // launch callbacks on prerender
         this.callbacks.tbt('prerender', false);
     }

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

@@ -6,19 +6,35 @@ 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 {
-            ...super._getDefaultProp(),
-            container: window,
-            run: true,
-            hideNativeCursor: false,
-            render: {
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: window, run: true, hideNativeCursor: false, render: {
                 lerp: 0.2,
                 lerpToFixed: 2,
                 normalizeLerp: false,
-            },
-            autoStop: true,
-        };
+            }, autoStop: true });
     }
     get prefix() {
         return `${this._app.prefix}custom-cursor`;
@@ -29,8 +45,6 @@ export class CustomCursor extends Component {
     get container() {
         return this._container;
     }
-    _container;
-    _containerIsWindow;
     /**
      * The element for events
      */
@@ -52,71 +66,24 @@ export class CustomCursor extends Component {
     get outerCursor() {
         return this._outerCursor;
     }
-    _outerCursor;
     /**
      * Cursor element (inner element)
      */
     get innerCursor() {
         return this._innerCursor;
     }
-    _innerCursor;
-    /**
-     * Animation frame
-     */
-    _animationFrame;
-    /**
-     * Current FPS. Used to normalize LERP ease
-     */
-    _currentFPS;
-    /**
-     * If can play animation
-     */
-    _canPlay;
     /**
      * Current X coordinate relative to Window
      */
     get x() {
         return this._x;
     }
-    _x;
-    /**
-     * Target coordinate
-     */
-    _xTarget;
     /**
      * Current Y coordinate relative to Window
      */
     get y() {
         return this._y;
     }
-    _y;
-    /**
-     * Target coordinate
-     */
-    _yTarget;
-    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();
-        }
-    }
     // Extra constructor
     _constructor() {
         super._constructor();

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

@@ -4,13 +4,27 @@ 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 {
-            ...super._getDefaultProp(),
-            container: `#${this.prefix}`,
-            usePassive: false,
-            enabled: true,
-        };
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: `#${this.prefix}`, usePassive: false, enabled: true });
     }
     get prefix() {
         return `${this._app.prefix}dragger`;
@@ -21,59 +35,24 @@ export class Dragger extends Component {
     get container() {
         return this._container;
     }
-    _container;
-    /**
-     * Runtime events
-     */
-    _runtimeEvents;
     /**
      * If is dragging at the moment
      */
     get isDragging() {
         return this._isDragging;
     }
-    _isDragging;
-    /**
-     * Current pointer id
-     */
-    _pointerID;
     /**
      * Current coordinates relative to the Window
      */
     get coords() {
         return this._coords;
     }
-    _coords;
-    /**
-     * Last coordinates relative to the window
-     */
-    _prevCoords;
     /**
      * Coordinates on drag start
      */
     get startCoords() {
         return this._startCoords;
     }
-    _startCoords;
-    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();
-        }
-    }
     /**
      * Set component events
      */

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

@@ -4,10 +4,7 @@ import { Dragger } from './Dragger';
  */
 export class DraggerDirection extends Dragger {
     _getDefaultProp() {
-        return {
-            ...super._getDefaultProp(),
-            min: 75,
-        };
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { min: 75 });
     }
     /**
      * Event on drag end