vevet 1.4.27 → 2.0.1-dev.3

package/src/ts/base/Module.ts

@@ -0,0 +1,385 @@
+import {
+    addEventListener, IAddEventListener, IAddEventListenerOptions, ListenerElement,
+} from 'vevet-dom';
+import { Callbacks, NCallbacks } from './Callbacks';
+import { MutableProp, NMutableProp } from './MutableProp';
+import { Application } from '../app/Application';
+import mergeWithoutArrays from '../utils/common/mergeWithoutArrays';
+import { Viewport } from '../app/events/Viewport';
+import { RequiredModuleProp } from '../utils/types/utility';
+import { throwVevetAppError } from '../utils/errors';
+
+
+
+export namespace NModule {
+
+    /**
+     * Mutable Properties (may change on window resize or through {@linkcode Module.changeProp})
+     */
+    export interface ChangeableProp { }
+
+    /**
+     * Static properties
+     */
+    export interface StaticProp {
+        /**
+         * Parent module
+         */
+        parent?: any;
+    }
+
+    /**
+     * Available callbacks
+     */
+    export interface CallbacksTypes extends NCallbacks.CallbacksTypes {
+        'destroy': false;
+        'changeProp': false;
+    }
+
+}
+
+
+
+/**
+ * A class for modules.
+ */
+export class Module<
+    /**
+     * Static Properties (they never change)
+     */
+    StaticProp extends NModule.StaticProp = NModule.StaticProp,
+    /**
+     * Mutable Properties
+     * (may change on window resize or through {@linkcode Module.changeProp})
+     */
+    ChangeableProp extends NModule.ChangeableProp = NModule.ChangeableProp,
+    /**
+     * Module Callbacks
+     */
+    CallbacksTypes extends NModule.CallbacksTypes = NModule.CallbacksTypes,
+> {
+    /**
+     * Get Default properties (should be extended)
+     */
+    protected _getDefaultProp <
+        T extends RequiredModuleProp<StaticProp & ChangeableProp>
+    > (): T {
+        return {
+            parent: false,
+        } as T;
+    }
+
+    /**
+     * Current properties
+     */
+    get prop (): RequiredModuleProp<(StaticProp & ChangeableProp)> {
+        return this._mutableProp.prop as RequiredModuleProp<(StaticProp & ChangeableProp)>;
+    }
+
+    /**
+     * Responsive properties
+     */
+    protected _mutableProp: MutableProp<
+        StaticProp,
+        ChangeableProp
+    >;
+
+
+
+    /**
+     * Module Callbacks
+     */
+    protected _callbacks: Callbacks<CallbacksTypes>;
+
+    /**
+     * Module Callbacks
+     */
+    get callbacks () {
+        return this._callbacks;
+    }
+
+
+
+    /**
+     * Module listeners
+     */
+    protected _listeners: IAddEventListener[];
+
+
+
+    /**
+     * Vevet Application
+     */
+    protected _app!: Application;
+
+    /**
+     * Module prefix
+     */
+    get prefix (): string {
+        return '';
+    }
+
+    /**
+     * Get module name
+     */
+    get name () {
+        return this.constructor.name;
+    }
+
+    /**
+     * If the module is initialized
+     */
+    protected _inited = false;
+    get inited () {
+        return this._inited;
+    }
+
+    /**
+     * If the module is destroyed
+     */
+    protected _destroyed: boolean;
+    get destroyed () {
+        return this._destroyed;
+    }
+
+
+
+    /**
+     * @example
+     * const mod = new Module();
+     */
+    constructor (
+        /**
+         * Properties on script start
+         */
+        initialProp?: (StaticProp & ChangeableProp),
+        /**
+         * 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<CallbacksTypes>();
+
+        // create mutable properties
+        const prop = mergeWithoutArrays(this._getDefaultProp(), initialProp || {});
+        this._mutableProp = new MutableProp(
+            prop as (StaticProp & ChangeableProp),
+            this._onPropResponsive.bind(this),
+            this._onPropChange.bind(this),
+            this.name,
+        );
+
+        if (init) {
+            this.init();
+        }
+    }
+
+
+
+    /**
+     * Add responsive rules
+     */
+    public addResponsiveProp (
+        rules: NMutableProp.Responsive<ChangeableProp>,
+    ) {
+        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
+     * });
+     */
+    public changeProp (
+        prop: ChangeableProp = {} as ChangeableProp,
+    ) {
+        this._mutableProp.changeProp(prop);
+        this._callbacks.tbt('changeProp', false);
+    }
+
+    /**
+     * The method that is called on window resize and properties change.
+     */
+    protected _onPropResponsive () {
+        this._onPropMutate();
+    }
+
+    /**
+     * The method that is called on properties change.
+     */
+    protected _onPropChange (
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        changedProp: ChangeableProp,
+    ) {
+        this._onPropMutate();
+    }
+
+    /**
+     * The method that is called on properties change.
+     */
+    protected _onPropMutate () { }
+
+
+
+    /**
+     * Initializes the class.
+     */
+    public 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
+     */
+    protected _constructor () {
+        // code
+    }
+
+    /**
+     * Set events
+     */
+    protected _setEvents () {
+        // code
+    }
+
+
+
+    /**
+     * Viewport callbacks
+     */
+    protected _viewportCallbacks: NCallbacks.AddedCallback[] = [];
+
+    /**
+     * Add a viewport callback that will be removed on class destroy
+     * {@see Viewport}
+     */
+    public addViewportCallback (
+        target: Parameters<Viewport['add']>[0],
+        func: Parameters<Viewport['add']>[1],
+        data: Parameters<Viewport['add']>[2] = {
+            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}
+     */
+    public addCallback <Target extends keyof CallbacksTypes> (
+        target: Target,
+        func: NCallbacks.CallbackSettings<CallbacksTypes, Target>['do'],
+        data: NCallbacks.CallbackBaseSettings = {},
+
+    ) {
+        const callback = this.callbacks.add(target, func, data);
+        return callback;
+    }
+
+
+
+    /**
+     * Add a DOM event listeners
+     */
+    public addEventListeners <
+        El extends ListenerElement,
+        Target extends keyof HTMLElementEventMap,
+        Callback extends (evt: HTMLElementEventMap[Target]) => void,
+    > (
+
+        el: El,
+        target: Target,
+        callback: Callback,
+        options?: IAddEventListenerOptions): IAddEventListener {
+        const listener = addEventListener(el, target, callback, options);
+        this._listeners.push(listener);
+
+        return listener;
+    }
+
+
+
+    /**
+     * Destroy the module
+     */
+    public destroy () {
+        if (this.destroyed) {
+            return;
+        }
+        this._destroy();
+    }
+
+    /**
+     * Destroy the module
+     */
+    protected _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/src/ts/base/MutableProp.ts

@@ -0,0 +1,242 @@
+import { Application } from '../app/Application';
+import { mergeWithoutArrays } from '../utils/common';
+import { NCallbacks } from './Callbacks';
+
+
+
+export namespace NMutableProp {
+
+    export interface Responsive<S> {
+        /**
+         * Breakpoint on which the properties will change.
+         * Available breakpoints:
+         * <ul>
+         *      <li>any number - width breakpoint</li>
+         *      <li>'d' - for desktop size</li>
+         *      <li>'t' - for tablet size</li>
+         *      <li>'p' - for phone size</li>
+         *      <li>'phone' - for phone devices</li>
+         *      <li>'tablet' - for tablet devices</li>
+         *      <li>'mobile' - for phone or tablet devices</li>
+         * </ul>
+         */
+        breakpoint: number | 'd' | 't' | 'p' | 'phone' | 'tablet' | 'mobile';
+        settings: S;
+    }
+
+}
+
+
+
+/**
+ * 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<
+    /**
+     * Static Properties (they never change)
+     */
+    StaticProp extends Record<string, any>,
+    /**
+     * Mutable Properties
+     * (may change on window resize or through {@linkcode MutableProp.changeProp})
+     */
+    ChangeableProp extends Record<string, any>,
+> {
+    /**
+     * Vevet Application.
+     */
+    protected _app: Application;
+
+    /**
+     * @description Reference properties.
+     * These properties may change only through {@linkcode MutableProp.changeProp}.
+     */
+    protected _refProp: StaticProp & ChangeableProp;
+
+    /**
+     * Current properties.
+     * These properties may change both on {@linkcode MutableProp.changeProp} and resize.
+     */
+    protected _prop: StaticProp & ChangeableProp;
+
+    /**
+     * A set of responsive rules
+     */
+    protected _responsiveRules: NMutableProp.Responsive<ChangeableProp>[] = [];
+
+    /**
+     * Get current properties
+     */
+    get prop () {
+        return this._prop;
+    }
+
+    /**
+     * Viewport callback
+     */
+    protected _viewportCallback: NCallbacks.AddedCallback | undefined;
+
+
+
+    /**
+     * @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.
+         */
+        protected _initProp: (StaticProp & ChangeableProp),
+        /**
+         * A callback that is launched when properties are changed on window resize
+         */
+        protected _onResponsive: () => void = () => {},
+        /**
+         * A callback that is launched when properties are changed
+         * through {@linkcode MutableProp.changeProp}
+         */
+        protected _onChange: (prop: ChangeableProp) => void = () => {},
+        /**
+         * Name of the responsive properties.
+         */
+        protected _name = 'Responsive Prop',
+    ) {
+        this._app = window.vevetApp;
+        this._refProp = mergeWithoutArrays({}, _initProp);
+        this._prop = mergeWithoutArrays({}, _initProp);
+    }
+
+
+
+    /**
+     * Add responsive rules
+     */
+    public addResponsiveProp (
+        rules: NMutableProp.Responsive<ChangeableProp>,
+    ) {
+        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.
+     */
+    protected _responseProp (
+        onResize = false,
+    ) {
+        const responsiveProp = this._responsiveRules;
+
+        // get sizes
+        const app = this._app;
+        const { viewport } = app;
+        const { width } = viewport;
+        let newProp: (StaticProp & ChangeableProp) | false = 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() as typeof breakpoint;
+                // 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.
+     */
+    public changeProp (
+        prop: ChangeableProp,
+    ) {
+        this._prop = mergeWithoutArrays(this._prop, prop);
+        this._refProp = mergeWithoutArrays(this._refProp, prop);
+
+        // change prop callback
+        this._onChange(prop);
+    }
+
+
+
+    /**
+     * Destroy the responsive properties.
+     */
+    public destroy () {
+        if (this._viewportCallback) {
+            this._viewportCallback.remove();
+        }
+    }
+}

package/src/ts/base/Plugin.ts

@@ -0,0 +1,76 @@
+import { Module, NModule } from './Module';
+
+
+
+export namespace NPlugin {
+
+    /**
+     * Static properties
+     */
+    export interface StaticProp {}
+
+    /**
+     * Changeable Properties
+     */
+    export interface ChangeableProp {}
+
+    /**
+     * Available callbacks
+     */
+    export interface CallbacksTypes extends NModule.CallbacksTypes {}
+
+}
+
+
+
+/**
+ * A class for Plugins.
+ */
+export abstract class Plugin<
+    StaticProp extends NPlugin.StaticProp = NPlugin.StaticProp,
+    ChangeableProp extends NPlugin.ChangeableProp = NPlugin.ChangeableProp,
+    CallbacksTypes extends NPlugin.CallbacksTypes = NPlugin.CallbacksTypes,
+    Component = any
+> extends Module <
+    StaticProp,
+    ChangeableProp,
+    CallbacksTypes
+> {
+    constructor (
+        initialProp?: (StaticProp & ChangeableProp),
+    ) {
+        super(initialProp, false);
+    }
+
+
+
+    protected _component!: Component;
+    get component () {
+        return this._component;
+    }
+
+
+
+    /**
+     * Initializes the class
+     */
+    public init () {
+        if (!this._component) {
+            throw new Error('Component is not set. Be sure that initlugin is called before.');
+        }
+        super.init();
+    }
+
+    /**
+     * Initialize the plugin
+     */
+    public initPlugin (
+        parent: Component,
+    ) {
+        if (this._inited) {
+            return;
+        }
+        this._component = parent;
+        this.init();
+    }
+}