vevet 1.4.27 → 2.0.1-dev.3

package/build/cjs/base/Callbacks.js

@@ -0,0 +1,232 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Callbacks = void 0;
+var common_1 = require("../utils/common");
+/**
+ * A class for callbacks' manipulation.
+ */
+var Callbacks = /** @class */ (function () {
+    /**
+     * @example
+     * const callback = new Callbacks();
+     */
+    function Callbacks(callInit) {
+        if (callInit === void 0) { callInit = true; }
+        this._app = window.vevetApp;
+        this._callbacks = [];
+        // initialize callbacks
+        if (callInit) {
+            this._init();
+        }
+    }
+    Object.defineProperty(Callbacks.prototype, "callbacks", {
+        /**
+         * Get all callbacks
+         */
+        get: function () {
+            return this._callbacks;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Initialize the class.
+     */
+    Callbacks.prototype._init = function () {
+        this._constructor();
+        this._setEvents();
+    };
+    /**
+     * An empty method that is called in {@linkcode Callbacks._init}.
+     */
+    Callbacks.prototype._constructor = function () {
+        // code
+    };
+    /**
+     * An empty method that is called in {@linkcode Callbacks._init}.
+     */
+    Callbacks.prototype._setEvents = function () {
+        // code
+    };
+    /**
+     * Adds a callback
+     * @param target - Callback target name
+     * @param func - Callback function
+     * @param data - Callback data
+     *
+     * @example
+     * const onTarget = callback.add("target-name", () => {
+     *     alert("callback");
+     * });
+     */
+    Callbacks.prototype.add = function (target, func, data) {
+        if (data === void 0) { data = {}; }
+        var id = common_1.randID('callback');
+        var obj = {
+            id: id,
+            on: true,
+            data: __assign({ target: target, 
+                // @ts-ignore
+                do: func }, data),
+        };
+        this._callbacks.push(obj);
+        this._onAdd(id);
+        return {
+            id: id,
+            remove: this.remove.bind(this, id),
+        };
+    };
+    /**
+     * Use it to implement some actions after adding a callback.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    Callbacks.prototype._onAdd = function (id) {
+        // code
+    };
+    /**
+     * Remove a callback.
+     */
+    Callbacks.prototype.remove = function (id, removeProtected) {
+        var _this = this;
+        if (removeProtected === void 0) { removeProtected = false; }
+        // remove the callback and get new ones
+        var removed = false;
+        var newCallbacks = this._callbacks.filter(function (callback) {
+            // if not ID overlap
+            if (callback.id !== id) {
+                return true;
+            }
+            // to be removed
+            var data = callback.data;
+            if (data.protected && !removeProtected) {
+                return true;
+            }
+            _this._onRemove(id);
+            removed = true;
+            return false;
+        });
+        // replace the callbacks' array
+        this._callbacks = newCallbacks;
+        // return results
+        return removed;
+    };
+    /**
+     * Use it to implement some actions after removing a callback.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    Callbacks.prototype._onRemove = function (id) {
+        // code
+    };
+    /**
+     * Remove all callbacks.
+     */
+    Callbacks.prototype.removeAll = function (removeProtected) {
+        if (removeProtected === void 0) { removeProtected = false; }
+        while (this._callbacks.length > 0) {
+            this.remove(this._callbacks[0].id, removeProtected);
+        }
+    };
+    /**
+     * Enable/disable a callback.
+     * @param id - ID of the callback
+     * @param enabled - True to enable, false to disable.
+     */
+    Callbacks.prototype.turn = function (id, enabled) {
+        if (enabled === void 0) { enabled = true; }
+        var callback = this.get(id);
+        if (callback) {
+            callback.on = enabled;
+            this._onTurn(id);
+            return true;
+        }
+        return false;
+    };
+    /**
+     * Use it to implement some actions after enabling or disabling a callback.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    Callbacks.prototype._onTurn = function (id) {
+        // code
+    };
+    /**
+     * Get a callback by id
+     */
+    Callbacks.prototype.get = function (id) {
+        var callbacks = this._callbacks.filter(function (callback) { return callback.id === id; });
+        if (callbacks.length > 0) {
+            return callbacks[0];
+        }
+        return false;
+    };
+    /**
+     * Trigger a callback. It will work only if the callback is enabled.
+     */
+    Callbacks.prototype._trigger = function (callback, arg) {
+        // check if enabled
+        if (!callback.on) {
+            return;
+        }
+        var _a = callback.data, timeout = _a.timeout, once = _a.once;
+        var func = callback.data.do;
+        // launch
+        if (timeout) {
+            if (arg) {
+                common_1.timeoutCallback(this._triggerFunc.bind(this, func, arg), timeout);
+            }
+            else {
+                common_1.timeoutCallback(this._triggerFunc.bind(this, func, false), timeout);
+            }
+        }
+        else if (arg) {
+            this._triggerFunc(func, arg);
+        }
+        else {
+            this._triggerFunc(func, false);
+        }
+        // remove once-callback
+        if (once) {
+            this.remove(callback.id);
+        }
+    };
+    /**
+     * Launch a callback's function
+     */
+    Callbacks.prototype._triggerFunc = function (func, arg) {
+        if (arg) {
+            func(arg);
+        }
+        else {
+            func();
+        }
+    };
+    /**
+     * Trigger all enabled callbacks under a certain target name. (TBT: Trigger by target).
+     */
+    Callbacks.prototype.tbt = function (target, arg) {
+        var _this = this;
+        this._callbacks.forEach(function (callback) {
+            if (callback.data.target === target) {
+                _this._trigger(callback, arg);
+            }
+        });
+    };
+    /**
+     * Destroy the callbacks
+     */
+    Callbacks.prototype.destroy = function () {
+        this.removeAll(true);
+    };
+    return Callbacks;
+}());
+exports.Callbacks = Callbacks;

package/build/cjs/base/Component.js

@@ -0,0 +1,56 @@
+"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.Component = void 0;
+var Module_1 = require("./Module");
+/**
+ * A class for Components.
+ */
+var Component = /** @class */ (function (_super) {
+    __extends(Component, _super);
+    function Component() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * Add a single plugin
+     */
+    Component.prototype.addPlugin = function (plugin) {
+        if (typeof this._plugins === 'undefined') {
+            this._plugins = [];
+        }
+        this._plugins.push(plugin);
+        if (!plugin.inited) {
+            plugin.initPlugin(this);
+        }
+    };
+    /**
+     * Destroy all plugins
+     */
+    Component.prototype._destroyPlugins = function () {
+        if (this._plugins) {
+            this._plugins.forEach(function (plugin) {
+                plugin.destroy();
+            });
+        }
+    };
+    Component.prototype._destroy = function () {
+        _super.prototype._destroy.call(this);
+        this._destroyPlugins();
+    };
+    return Component;
+}(Module_1.Module));
+exports.Component = Component;

package/build/cjs/base/Module.js

@@ -0,0 +1,262 @@
+"use strict";
+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 {
+            errors_1.throwVevetAppError();
+        }
+        // set default vars
+        this._destroyed = false;
+        this._listeners = [];
+        // create callbacks
+        this._callbacks = new Callbacks_1.Callbacks();
+        // create mutable properties
+        var prop = 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 = {
+            name: this.constructor.name,
+        }; }
+        var callback = this._app.viewport.add(target, func, data);
+        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 = 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

@@ -0,0 +1,165 @@
+"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 = common_1.mergeWithoutArrays({}, _initProp);
+        this._prop = 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 = 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 = 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 = common_1.mergeWithoutArrays(statProp, settings);
+                }
+                // device type
+                if ((string === 'phone' && app.isPhone)
+                    || (string === 'tablet' && app.isTablet)
+                    || (string === 'mobile' && app.isMobile)) {
+                    newProp = common_1.mergeWithoutArrays(statProp, settings);
+                }
+            }
+        });
+        // if there's no breakpoint, restore the props
+        if (!newProp) {
+            this._prop = common_1.mergeWithoutArrays(this._prop, this._refProp);
+        }
+        else {
+            // otherwise, change the properties
+            this._prop = 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 = common_1.mergeWithoutArrays(this._prop, prop);
+        this._refProp = 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;