vevet 1.4.27 → 2.0.1-dev.3

package/build/es/base/Component.js

@@ -0,0 +1,32 @@
+import { Module } from './Module';
+/**
+ * A class for Components.
+ */
+export class Component extends Module {
+    /**
+     * Add a single plugin
+     */
+    addPlugin(plugin) {
+        if (typeof this._plugins === 'undefined') {
+            this._plugins = [];
+        }
+        this._plugins.push(plugin);
+        if (!plugin.inited) {
+            plugin.initPlugin(this);
+        }
+    }
+    /**
+     * Destroy all plugins
+     */
+    _destroyPlugins() {
+        if (this._plugins) {
+            this._plugins.forEach((plugin) => {
+                plugin.destroy();
+            });
+        }
+    }
+    _destroy() {
+        super._destroy();
+        this._destroyPlugins();
+    }
+}

package/build/es/base/Module.js

@@ -0,0 +1,225 @@
+import { addEventListener, } from 'vevet-dom';
+import { Callbacks } from './Callbacks';
+import { MutableProp } from './MutableProp';
+import mergeWithoutArrays from '../utils/common/mergeWithoutArrays';
+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)
+     */
+    _getDefaultProp() {
+        return {
+            parent: false,
+        };
+    }
+    /**
+     * Current properties
+     */
+    get prop() {
+        return this._mutableProp.prop;
+    }
+    /**
+     * Module Callbacks
+     */
+    get callbacks() {
+        return this._callbacks;
+    }
+    /**
+     * Module prefix
+     */
+    get prefix() {
+        return '';
+    }
+    /**
+     * Get module name
+     */
+    get name() {
+        return this.constructor.name;
+    }
+    get inited() {
+        return this._inited;
+    }
+    get destroyed() {
+        return this._destroyed;
+    }
+    /**
+     * Add responsive rules
+     */
+    addResponsiveProp(rules) {
+        if (this._inited) {
+            throw new Error('Responsive properties cannot be added because the class instance is already initialized');
+        }
+        else {
+            this._mutableProp.addResponsiveProp(rules);
+        }
+    }
+    /**
+     * Change module properties.
+     * @example
+     *
+     * // changing properties
+     * // let's imagine that the module has the following properties:
+     * prop = {
+     *     name: 'module',
+     *     cute: true
+     * };
+     * // we can change some properties in it: whether one or several properties
+     * // after the properties are changed, the method _onPropChange is called.
+     * module.changeProp({
+     *     cute: false
+     * });
+     */
+    changeProp(prop = {}) {
+        this._mutableProp.changeProp(prop);
+        this._callbacks.tbt('changeProp', false);
+    }
+    /**
+     * The method that is called on window resize and properties change.
+     */
+    _onPropResponsive() {
+        this._onPropMutate();
+    }
+    /**
+     * The method that is called on properties change.
+     */
+    _onPropChange(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    changedProp) {
+        this._onPropMutate();
+    }
+    /**
+     * The method that is called on properties change.
+     */
+    _onPropMutate() { }
+    /**
+     * Initializes the class.
+     */
+    init() {
+        // return if the module is already initialized
+        if (this._inited) {
+            return;
+        }
+        this._inited = true;
+        // continue initializing
+        this._constructor();
+        this._setEvents();
+        // destroy the current module on parent destroy
+        if (this.prop.parent) {
+            this.prop.parent.addCallback('destroy', () => {
+                this.destroy();
+            });
+        }
+    }
+    /**
+     * Extra constructor
+     */
+    _constructor() {
+        // code
+    }
+    /**
+     * Set events
+     */
+    _setEvents() {
+        // code
+    }
+    /**
+     * Add a viewport callback that will be removed on class destroy
+     * {@see Viewport}
+     */
+    addViewportCallback(target, func, data = {
+        name: this.constructor.name,
+    }) {
+        const callback = this._app.viewport.add(target, func, data);
+        this._viewportCallbacks.push(callback);
+        return callback;
+    }
+    /**
+     * Add a module callback
+     * {@see Callbacks}
+     */
+    addCallback(target, func, data = {}) {
+        const callback = this.callbacks.add(target, func, data);
+        return callback;
+    }
+    /**
+     * Add a DOM event listeners
+     */
+    addEventListeners(el, target, callback, options) {
+        const listener = addEventListener(el, target, callback, options);
+        this._listeners.push(listener);
+        return listener;
+    }
+    /**
+     * Destroy the module
+     */
+    destroy() {
+        if (this.destroyed) {
+            return;
+        }
+        this._destroy();
+    }
+    /**
+     * Destroy the module
+     */
+    _destroy() {
+        // destroy callbacks
+        this._callbacks.tbt('destroy', false);
+        this._callbacks.destroy();
+        // destroy mutable properties
+        this._mutableProp.destroy();
+        // destroy viewport callbacks
+        this._viewportCallbacks.forEach((callback) => {
+            callback.remove();
+        });
+        // destroy all listeners
+        this._listeners.forEach((listener) => {
+            listener.remove();
+        });
+        // events
+        this._destroyed = true;
+    }
+}

package/build/es/base/MutableProp.js

@@ -0,0 +1,152 @@
+import { mergeWithoutArrays } from '../utils/common';
+/**
+ * A class for creating mutable properties that can change on window resize. <br><br>
+ *
+ * There are two ways to change properties:
+ * <ul>
+ *     <li>
+ *         To set a resize-listener on window (or use {@linkcode Viewport}).
+ *         When the window is resized, change the properties with the help of
+ *         {@linkcode MutableProp.changeProp}</li>
+ *     <li>
+ *         The second way is to use the MutableProp and add responsive properties
+ *         with help of {@linkcode MutableProp.addResponsiveProp}.</li>
+ * </ul>
+ */
+export class MutableProp {
+    /**
+     * @example
+     * const static = {
+     *      myProp: true,
+     * };
+     * const responsive = [
+     *      {
+     *          breakpoint: 'm',
+     *          settings: {
+     *              myProp: false
+     *          }
+     *      }
+     * ];
+     * const prop = new MutableProp(static, responsive);
+     */
+    constructor(
+    /**
+     * The properties that were set while initialization.
+     * These properties do not change throughout time.
+     */
+    _initProp, 
+    /**
+     * A callback that is launched when properties are changed on window resize
+     */
+    _onResponsive = () => { }, 
+    /**
+     * A callback that is launched when properties are changed
+     * through {@linkcode MutableProp.changeProp}
+     */
+    _onChange = () => { }, 
+    /**
+     * Name of the responsive properties.
+     */
+    _name = 'Responsive Prop') {
+        this._initProp = _initProp;
+        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
+     */
+    addResponsiveProp(rules) {
+        this._responsiveRules.push(rules);
+        // add event on resize
+        if (typeof this._viewportCallback === 'undefined') {
+            this._viewportCallback = this._app.viewport.add('w', this._responseProp.bind(this, true), {
+                name: this._name,
+            });
+        }
+        // change properties according to the responsive prop
+        this._responseProp();
+    }
+    /**
+     * Change properties according to the "responsive" settings
+     * @param onResize - If the method was called on window resize.
+     */
+    _responseProp(onResize = false) {
+        const responsiveProp = this._responsiveRules;
+        // get sizes
+        const app = this._app;
+        const { viewport } = app;
+        const { width } = viewport;
+        let newProp = false;
+        const statProp = mergeWithoutArrays({}, this._refProp);
+        // go through all breakpoints
+        // and check if a proper breakpoint exists
+        responsiveProp.forEach((prop) => {
+            // copy settings
+            const { settings, breakpoint } = prop;
+            // if the breakpoint is a number
+            if (typeof breakpoint === 'number') {
+                if (width <= prop.breakpoint) {
+                    newProp = mergeWithoutArrays(statProp, settings);
+                }
+            }
+            else if (typeof breakpoint === 'string') {
+                const string = breakpoint.toLowerCase();
+                // viewport size
+                if ((string === 'd' && viewport.isDesktop)
+                    || (string === 't' && viewport.isTablet)
+                    || (string === 'p' && viewport.isPhone)) {
+                    newProp = mergeWithoutArrays(statProp, settings);
+                }
+                // device type
+                if ((string === 'phone' && app.isPhone)
+                    || (string === 'tablet' && app.isTablet)
+                    || (string === 'mobile' && app.isMobile)) {
+                    newProp = mergeWithoutArrays(statProp, settings);
+                }
+            }
+        });
+        // if there's no breakpoint, restore the props
+        if (!newProp) {
+            this._prop = mergeWithoutArrays(this._prop, this._refProp);
+        }
+        else {
+            // otherwise, change the properties
+            this._prop = mergeWithoutArrays(this._prop, newProp);
+        }
+        // responsive callback
+        if (onResize) {
+            this._onResponsive();
+        }
+    }
+    /**
+     * This method allows you to change the properties manually.
+     */
+    changeProp(prop) {
+        this._prop = mergeWithoutArrays(this._prop, prop);
+        this._refProp = mergeWithoutArrays(this._refProp, prop);
+        // change prop callback
+        this._onChange(prop);
+    }
+    /**
+     * Destroy the responsive properties.
+     */
+    destroy() {
+        if (this._viewportCallback) {
+            this._viewportCallback.remove();
+        }
+    }
+}

package/build/es/base/Plugin.js

@@ -0,0 +1,31 @@
+import { Module } from './Module';
+/**
+ * A class for Plugins.
+ */
+export class Plugin extends Module {
+    constructor(initialProp) {
+        super(initialProp, false);
+    }
+    get component() {
+        return this._component;
+    }
+    /**
+     * Initializes the class
+     */
+    init() {
+        if (!this._component) {
+            throw new Error('Component is not set. Be sure that initlugin is called before.');
+        }
+        super.init();
+    }
+    /**
+     * Initialize the plugin
+     */
+    initPlugin(parent) {
+        if (this._inited) {
+            return;
+        }
+        this._component = parent;
+        this.init();
+    }
+}

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

@@ -0,0 +1,145 @@
+import { Component } from '../../base/Component';
+import { boundVal } from '../../utils/math';
+/**
+ * Launch an animation frame with a certain FPS
+ */
+export class AnimationFrame extends Component {
+    constructor(initialProp, init = true) {
+        super(initialProp, false);
+        this._isPlaying = false;
+        this._frame = null;
+        this._frameIndex = -1;
+        this._timeStamp = null;
+        this._prevFrameTime = null;
+        if (init) {
+            this.init();
+        }
+    }
+    get isPlaying() {
+        return this._isPlaying;
+    }
+    /**
+     * Get default properties
+     */
+    _getDefaultProp() {
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { fps: 140, run: false });
+    }
+    // Extra constructor
+    _constructor() {
+        super._constructor();
+        this._create();
+    }
+    /**
+     * Create the frame
+     */
+    _create() {
+        if (this.prop.run) {
+            this.play();
+        }
+    }
+    _onPropMutate() {
+        this._frameIndex = -1;
+        this._timeStamp = null;
+        this._prevFrameTime = null;
+        if (this.prop.run) {
+            this._play();
+        }
+        else {
+            this._pause();
+        }
+    }
+    /**
+     * Launch the animation frame.
+     */
+    play() {
+        if (this.destroyed) {
+            return;
+        }
+        if (this.prop.run) {
+            return;
+        }
+        this.changeProp({
+            run: true,
+        });
+    }
+    /**
+     * Launch the animation frame.
+     */
+    _play() {
+        // check if already playing
+        if (this.isPlaying) {
+            return;
+        }
+        this._isPlaying = true;
+        // launch animation
+        this._frame = window.requestAnimationFrame(this._animate.bind(this));
+    }
+    /**
+     * Stop the animation frame
+     */
+    pause() {
+        if (!this.prop.run) {
+            return;
+        }
+        this.changeProp({
+            run: false,
+        });
+    }
+    /**
+     * Stop the animation frame
+     */
+    _pause() {
+        if (!this.isPlaying) {
+            return;
+        }
+        // cancel animation frame
+        if (this._frame) {
+            window.cancelAnimationFrame(this._frame);
+            this._frame = null;
+        }
+        // bool
+        this._isPlaying = false;
+    }
+    /**
+     * Launch the animation frame.
+     */
+    _animate(timestamp) {
+        if (!this._isPlaying) {
+            return;
+        }
+        // launch animation
+        this._frame = window.requestAnimationFrame(this._animate.bind(this));
+        // update variables
+        const currentTime = +new Date();
+        if (this._timeStamp == null) {
+            this._timeStamp = timestamp;
+        }
+        if (this._prevFrameTime == null) {
+            this._prevFrameTime = currentTime;
+        }
+        // calculate frame index
+        const newFrameIndex = Math.floor((timestamp - this._timeStamp) / (1000 / this.prop.fps));
+        if (newFrameIndex <= this._frameIndex) {
+            return;
+        }
+        // update frame index
+        this._frameIndex = newFrameIndex;
+        // calculate real fps
+        const timeDiff = currentTime - this._prevFrameTime;
+        const realFPS = boundVal(timeDiff === 0 ? 1000 / 60 : Math.floor(1000 / timeDiff), [1, Infinity]);
+        // launch callbacks
+        this.callbacks.tbt('frame', {
+            fps: this.prop.fps,
+            realFPS,
+            prevFrameDuration: currentTime - this._prevFrameTime,
+        });
+        this._prevFrameTime = +new Date();
+    }
+    /**
+     * Destroy the animation frame
+     */
+    _destroy() {
+        this.pause();
+        super._destroy();
+    }
+}