vevet 2.17.0 → 3.0.0-beta.0

package/build/cjs/base/Module.js

@@ -1,271 +0,0 @@
-"use strict";
-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.Module = void 0;
-var vevet_dom_1 = require("vevet-dom");
-var Callbacks_1 = require("./Callbacks");
-var MutableProp_1 = require("./MutableProp");
-var mergeWithoutArrays_1 = __importDefault(require("../utils/common/mergeWithoutArrays"));
-var errors_1 = require("../utils/errors");
-/**
- * A class for modules.
- */
-var Module = /** @class */ (function () {
-    /**
-     * @example
-     * const mod = new Module();
-     */
-    function Module(
-    /**
-     * 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) {
-        if (init === void 0) { init = true; }
-        /**
-         * If the module is initialized
-         */
-        this._inited = false;
-        /**
-         * Viewport callbacks
-         */
-        this._viewportCallbacks = [];
-        // set vars
-        if (window.vevetApp) {
-            this._app = window.vevetApp;
-        }
-        else {
-            (0, errors_1.throwVevetAppError)();
-        }
-        // set default vars
-        this._destroyed = false;
-        this._listeners = [];
-        // create callbacks
-        this._callbacks = new Callbacks_1.Callbacks();
-        // create mutable properties
-        var prop = (0, mergeWithoutArrays_1.default)(this._getDefaultProp(), initialProp || {});
-        this._mutableProp = new MutableProp_1.MutableProp(prop, this._onPropResponsive.bind(this), this._onPropChange.bind(this), this.name);
-        if (init) {
-            this.init();
-        }
-    }
-    /**
-     * Get Default properties (should be extended)
-     */
-    Module.prototype._getDefaultProp = function () {
-        return {
-            parent: false,
-        };
-    };
-    Object.defineProperty(Module.prototype, "prop", {
-        /**
-         * Current properties
-         */
-        get: function () {
-            return this._mutableProp.prop;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Module.prototype, "callbacks", {
-        /**
-         * Module Callbacks
-         */
-        get: function () {
-            return this._callbacks;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Module.prototype, "prefix", {
-        /**
-         * Module prefix
-         */
-        get: function () {
-            return '';
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Module.prototype, "name", {
-        /**
-         * Get module name
-         */
-        get: function () {
-            return this.constructor.name;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Module.prototype, "inited", {
-        get: function () {
-            return this._inited;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Module.prototype, "destroyed", {
-        get: function () {
-            return this._destroyed;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * Add responsive rules
-     */
-    Module.prototype.addResponsiveProp = function (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
-     * });
-     */
-    Module.prototype.changeProp = function (prop) {
-        if (prop === void 0) { prop = {}; }
-        this._mutableProp.changeProp(prop);
-        this._callbacks.tbt('changeProp', false);
-    };
-    /**
-     * The method that is called on window resize and properties change.
-     */
-    Module.prototype._onPropResponsive = function () {
-        this._onPropMutate();
-    };
-    /**
-     * The method that is called on properties change.
-     */
-    Module.prototype._onPropChange = function (
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    changedProp) {
-        this._onPropMutate();
-    };
-    /**
-     * The method that is called on properties change.
-     */
-    Module.prototype._onPropMutate = function () { };
-    /**
-     * Initializes the class.
-     */
-    Module.prototype.init = function () {
-        var _this = this;
-        // 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', function () {
-                _this.destroy();
-            });
-        }
-    };
-    /**
-     * Extra constructor
-     */
-    Module.prototype._constructor = function () {
-        // code
-    };
-    /**
-     * Set events
-     */
-    Module.prototype._setEvents = function () {
-        // code
-    };
-    /**
-     * Add a viewport callback that will be removed on class destroy
-     * {@see Viewport}
-     */
-    Module.prototype.addViewportCallback = function (target, func, data) {
-        if (data === void 0) { data = {}; }
-        var callback = this._app.viewport.add(target, func, __assign(__assign({}, data), { name: this.constructor.name }));
-        this._viewportCallbacks.push(callback);
-        return callback;
-    };
-    /**
-     * Add a module callback
-     * {@see Callbacks}
-     */
-    Module.prototype.addCallback = function (target, func, data) {
-        if (data === void 0) { data = {}; }
-        var callback = this.callbacks.add(target, func, data);
-        return callback;
-    };
-    /**
-     * Add a DOM event listeners
-     */
-    Module.prototype.addEventListeners = function (el, target, callback, options) {
-        var listener = (0, vevet_dom_1.addEventListener)(el, target, callback, options);
-        this._listeners.push(listener);
-        return listener;
-    };
-    /**
-     * Destroy the module
-     */
-    Module.prototype.destroy = function () {
-        if (this.destroyed) {
-            return;
-        }
-        this._destroy();
-    };
-    /**
-     * Destroy the module
-     */
-    Module.prototype._destroy = function () {
-        // destroy callbacks
-        this._callbacks.tbt('destroy', false);
-        this._callbacks.destroy();
-        // destroy mutable properties
-        this._mutableProp.destroy();
-        // destroy viewport callbacks
-        this._viewportCallbacks.forEach(function (callback) {
-            callback.remove();
-        });
-        // destroy all listeners
-        this._listeners.forEach(function (listener) {
-            listener.remove();
-        });
-        // events
-        this._destroyed = true;
-    };
-    return Module;
-}());
-exports.Module = Module;

package/build/cjs/base/MutableProp.js

@@ -1,165 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MutableProp = void 0;
-var common_1 = require("../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>
- */
-var MutableProp = /** @class */ (function () {
-    /**
-     * @example
-     * const static = {
-     *      myProp: true,
-     * };
-     * const responsive = [
-     *      {
-     *          breakpoint: 'm',
-     *          settings: {
-     *              myProp: false
-     *          }
-     *      }
-     * ];
-     * const prop = new MutableProp(static, responsive);
-     */
-    function MutableProp(
-    /**
-     * 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) {
-        if (_onResponsive === void 0) { _onResponsive = function () { }; }
-        if (_onChange === void 0) { _onChange = function () { }; }
-        if (_name === void 0) { _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 = (0, common_1.mergeWithoutArrays)({}, _initProp);
-        this._prop = (0, common_1.mergeWithoutArrays)({}, _initProp);
-    }
-    Object.defineProperty(MutableProp.prototype, "prop", {
-        /**
-         * Get current properties
-         */
-        get: function () {
-            return this._prop;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * Add responsive rules
-     */
-    MutableProp.prototype.addResponsiveProp = function (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.
-     */
-    MutableProp.prototype._responseProp = function (onResize) {
-        if (onResize === void 0) { onResize = false; }
-        var responsiveProp = this._responsiveRules;
-        // get sizes
-        var app = this._app;
-        var viewport = app.viewport;
-        var width = viewport.width;
-        var newProp = false;
-        var statProp = (0, common_1.mergeWithoutArrays)({}, this._refProp);
-        // go through all breakpoints
-        // and check if a proper breakpoint exists
-        responsiveProp.forEach(function (prop) {
-            // copy settings
-            var settings = prop.settings, breakpoint = prop.breakpoint;
-            // if the breakpoint is a number
-            if (typeof breakpoint === 'number') {
-                if (width <= prop.breakpoint) {
-                    newProp = (0, common_1.mergeWithoutArrays)(statProp, settings);
-                }
-            }
-            else if (typeof breakpoint === 'string') {
-                var string = breakpoint.toLowerCase();
-                // viewport size
-                if ((string === 'd' && viewport.isDesktop)
-                    || (string === 't' && viewport.isTablet)
-                    || (string === 'p' && viewport.isPhone)) {
-                    newProp = (0, common_1.mergeWithoutArrays)(statProp, settings);
-                }
-                // device type
-                if ((string === 'phone' && app.isPhone)
-                    || (string === 'tablet' && app.isTablet)
-                    || (string === 'mobile' && app.isMobile)) {
-                    newProp = (0, common_1.mergeWithoutArrays)(statProp, settings);
-                }
-            }
-        });
-        // if there's no breakpoint, restore the props
-        if (!newProp) {
-            this._prop = (0, common_1.mergeWithoutArrays)(this._prop, this._refProp);
-        }
-        else {
-            // otherwise, change the properties
-            this._prop = (0, common_1.mergeWithoutArrays)(this._prop, newProp);
-        }
-        // responsive callback
-        if (onResize) {
-            this._onResponsive();
-        }
-    };
-    /**
-     * This method allows you to change the properties manually.
-     */
-    MutableProp.prototype.changeProp = function (prop) {
-        this._prop = (0, common_1.mergeWithoutArrays)(this._prop, prop);
-        this._refProp = (0, common_1.mergeWithoutArrays)(this._refProp, prop);
-        // change prop callback
-        this._onChange(prop);
-    };
-    /**
-     * Destroy the responsive properties.
-     */
-    MutableProp.prototype.destroy = function () {
-        if (this._viewportCallback) {
-            this._viewportCallback.remove();
-        }
-    };
-    return MutableProp;
-}());
-exports.MutableProp = MutableProp;

package/build/cjs/base/Plugin.js

@@ -1,56 +0,0 @@
-"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 __());
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Plugin = void 0;
-var Module_1 = require("./Module");
-/**
- * A class for Plugins.
- */
-var Plugin = /** @class */ (function (_super) {
-    __extends(Plugin, _super);
-    function Plugin(initialProp) {
-        return _super.call(this, initialProp, false) || this;
-    }
-    Object.defineProperty(Plugin.prototype, "component", {
-        get: function () {
-            return this._component;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * Initializes the class
-     */
-    Plugin.prototype.init = function () {
-        if (!this._component) {
-            throw new Error('Component is not set. Be sure that initlugin is called before.');
-        }
-        _super.prototype.init.call(this);
-    };
-    /**
-     * Initialize the plugin
-     */
-    Plugin.prototype.initPlugin = function (parent) {
-        if (this._inited) {
-            return;
-        }
-        this._component = parent;
-        this.init();
-    };
-    return Plugin;
-}(Module_1.Module));
-exports.Plugin = Plugin;

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

@@ -1,183 +0,0 @@
-"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.AnimationFrame = void 0;
-var Component_1 = require("../../base/Component");
-var math_1 = require("../../utils/math");
-/**
- * Launch an animation frame with a certain FPS
- */
-var AnimationFrame = /** @class */ (function (_super) {
-    __extends(AnimationFrame, _super);
-    function AnimationFrame(initialProp, init) {
-        if (init === void 0) { init = true; }
-        var _this = _super.call(this, initialProp, false) || this;
-        _this._isPlaying = false;
-        _this._frame = null;
-        _this._frameIndex = -1;
-        _this._timeStamp = null;
-        _this._prevFrameTime = null;
-        if (init) {
-            _this.init();
-        }
-        return _this;
-    }
-    Object.defineProperty(AnimationFrame.prototype, "isPlaying", {
-        get: function () {
-            return this._isPlaying;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * Get default properties
-     */
-    AnimationFrame.prototype._getDefaultProp = function () {
-        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { fps: 140, run: false });
-    };
-    // Extra constructor
-    AnimationFrame.prototype._constructor = function () {
-        _super.prototype._constructor.call(this);
-        this._create();
-    };
-    /**
-     * Create the frame
-     */
-    AnimationFrame.prototype._create = function () {
-        if (this.prop.run) {
-            this.play();
-        }
-    };
-    AnimationFrame.prototype._onPropMutate = function () {
-        this._frameIndex = -1;
-        this._timeStamp = null;
-        this._prevFrameTime = null;
-        if (this.prop.run) {
-            this._play();
-        }
-        else {
-            this._pause();
-        }
-    };
-    /**
-     * Launch the animation frame.
-     */
-    AnimationFrame.prototype.play = function () {
-        if (this.destroyed) {
-            return;
-        }
-        if (this.prop.run) {
-            return;
-        }
-        this.changeProp({
-            run: true,
-        });
-    };
-    /**
-     * Launch the animation frame.
-     */
-    AnimationFrame.prototype._play = function () {
-        // 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
-     */
-    AnimationFrame.prototype.pause = function () {
-        if (!this.prop.run) {
-            return;
-        }
-        this.changeProp({
-            run: false,
-        });
-    };
-    /**
-     * Stop the animation frame
-     */
-    AnimationFrame.prototype._pause = function () {
-        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.
-     */
-    AnimationFrame.prototype._animate = function (timestamp) {
-        if (!this._isPlaying) {
-            return;
-        }
-        // launch animation
-        this._frame = window.requestAnimationFrame(this._animate.bind(this));
-        // update variables
-        var currentTime = +new Date();
-        if (this._timeStamp == null) {
-            this._timeStamp = timestamp;
-        }
-        if (this._prevFrameTime == null) {
-            this._prevFrameTime = currentTime;
-        }
-        // calculate frame index
-        var newFrameIndex = Math.floor((timestamp - this._timeStamp) / (1000 / this.prop.fps));
-        if (newFrameIndex <= this._frameIndex) {
-            return;
-        }
-        // update frame index
-        this._frameIndex = newFrameIndex;
-        // calculate real fps
-        var timeDiff = currentTime - this._prevFrameTime;
-        var realFPS = (0, math_1.clamp)(timeDiff === 0 ? 1000 / 60 : Math.floor(1000 / timeDiff), [1, Infinity]);
-        // launch callbacks
-        this.callbacks.tbt('frame', {
-            fps: this.prop.fps,
-            realFPS: realFPS,
-            prevFrameDuration: currentTime - this._prevFrameTime,
-        });
-        this._prevFrameTime = +new Date();
-    };
-    /**
-     * Destroy the animation frame
-     */
-    AnimationFrame.prototype._destroy = function () {
-        this.pause();
-        _super.prototype._destroy.call(this);
-    };
-    return AnimationFrame;
-}(Component_1.Component));
-exports.AnimationFrame = AnimationFrame;