vevet 2.17.0 → 3.0.0-beta.1

package/build/es/app/events/Viewport.js

@@ -1,256 +0,0 @@
-import { Callbacks } from '../../base/Callbacks';
-import { timeoutCallback } from '../../utils/common';
-/**
- * Viewport size types
- */
-var SizeTypes;
-(function (SizeTypes) {
-    SizeTypes["Desktop"] = "desktop";
-    SizeTypes["Tablet"] = "tablet";
-    SizeTypes["Phone"] = "phone";
-})(SizeTypes || (SizeTypes = {}));
-/**
- * Orientation types
- */
-var OrientationTypes;
-(function (OrientationTypes) {
-    OrientationTypes["Landscape"] = "landscape";
-    OrientationTypes["Portrait"] = "portrait";
-})(OrientationTypes || (OrientationTypes = {}));
-/**
- * Callbacks on window resize.
- * Here the names of the OS, Browser, and Device are also available. <br>
- */
-export class Viewport extends Callbacks {
-    constructor() {
-        super(false);
-        this._width = 0;
-        this._height = 0;
-        this._radius = 0;
-        this._prevSize = { w: 0, h: 0 };
-        this._isDesktop = false;
-        this._isTablet = false;
-        this._isPhone = false;
-        this._init();
-    }
-    get width() {
-        return this._width;
-    }
-    get height() {
-        return this._height;
-    }
-    get radius() {
-        return Math.sqrt(Math.pow(this.width, 2) + Math.pow(this.height, 2)) / 2;
-    }
-    /**
-     * Get VW value
-     */
-    get vw() {
-        return this.width / 100;
-    }
-    /**
-     * Get VH value
-     */
-    get vh() {
-        return this.height / 100;
-    }
-    /**
-     * Get VR value (viewport radius / 100)
-     */
-    get vr() {
-        return this.radius / 100;
-    }
-    /**
-     * Get previous Viewport size
-     */
-    get prevSize() {
-        return this._prevSize;
-    }
-    /**
-     * If width greater than height.
-     */
-    get isLandscape() {
-        return this.width > this.height;
-    }
-    /**
-     * If width less than height.
-     */
-    get isPortrait() {
-        return this.width < this.height;
-    }
-    get isDesktop() {
-        return this._isDesktop;
-    }
-    get isTablet() {
-        return this._isTablet;
-    }
-    get isPhone() {
-        return this._isPhone;
-    }
-    /**
-     * Device pixel ratio
-     */
-    get dpr() {
-        if (typeof window.devicePixelRatio !== 'undefined') {
-            return window.devicePixelRatio;
-        }
-        return 1;
-    }
-    /**
-     * Device pixel ratio. For non-mobile devices it is always 1.
-     */
-    get lowerDesktopDPR() {
-        if (this._app.isDesktop) {
-            return 1;
-        }
-        return this.dpr;
-    }
-    // Extra constructor
-    _constructor() {
-        super._constructor();
-        this._setValues();
-    }
-    // Set events on resize
-    _setEvents() {
-        window.addEventListener('resize', () => {
-            if (this._resizeTimeout) {
-                this._resizeTimeout.clear();
-            }
-            this._resizeTimeout = timeoutCallback(() => {
-                this._onResize();
-            }, this._app.prop.viewportResizeTimeout);
-        });
-    }
-    /**
-     * Set viewport values
-     */
-    _setValues() {
-        const app = this._app;
-        const { html } = app;
-        const appProp = app.prop;
-        // set sizes
-        this._width = html.clientWidth;
-        this._height = html.clientHeight;
-        this._prevSize = {
-            w: this._width,
-            h: this._height,
-        };
-        // size values
-        const { width } = this;
-        this._isDesktop = width >= appProp.tablet;
-        this._isTablet = width <= appProp.tablet && width > appProp.phone;
-        this._isPhone = width <= appProp.phone;
-        // update other values
-        this._updateClasses();
-        this._updateCSSVars();
-    }
-    /**
-     * Change classes of the document element.
-     */
-    _updateClasses() {
-        // set viewport type
-        const viewportSizeTypes = [
-            SizeTypes.Desktop,
-            SizeTypes.Tablet,
-            SizeTypes.Phone,
-        ];
-        if (this.isDesktop) {
-            this._updateBreakpointClasses(SizeTypes.Desktop, viewportSizeTypes);
-        }
-        else if (this.isTablet) {
-            this._updateBreakpointClasses(SizeTypes.Tablet, viewportSizeTypes);
-        }
-        else {
-            this._updateBreakpointClasses(SizeTypes.Phone, viewportSizeTypes);
-        }
-        // set orientation type
-        const orientationTypes = [
-            OrientationTypes.Landscape,
-            OrientationTypes.Portrait,
-        ];
-        if (this.isLandscape) {
-            this._updateBreakpointClasses(OrientationTypes.Landscape, orientationTypes);
-        }
-        else if (this.isPortrait) {
-            this._updateBreakpointClasses(OrientationTypes.Portrait, orientationTypes);
-        }
-        else {
-            this._updateBreakpointClasses('', orientationTypes);
-        }
-    }
-    /**
-     *  Change breakpoint classes of the document element.
-     */
-    _updateBreakpointClasses(activeType, types) {
-        const { html } = this._app;
-        const { prefix } = this._app;
-        types.forEach((type) => {
-            if (type === activeType) {
-                html.classList.add(`${prefix}viewport-${type}`);
-            }
-            else {
-                html.classList.remove(`${prefix}viewport-${type}`);
-            }
-        });
-    }
-    /**
-     * Update CSS vars
-     */
-    _updateCSSVars() {
-        const { html } = this._app;
-        html.style.setProperty('--vw', `${this.vw}px`);
-        html.style.setProperty('--vh', `${this.vh}px`);
-        html.style.setProperty('--vr', `${this.vr}px`);
-    }
-    /**
-     * Launch callbacks on resize.
-     */
-    _onResize(
-    /**
-     * force all callbacks
-     */
-    force = false) {
-        // copy previous values
-        const prevWidth = this._prevSize.w;
-        const prevHeight = this._prevSize.h;
-        // set viewport values
-        this._setValues();
-        // copy size
-        const { width, height } = this;
-        // get changes in viewport
-        const changes = {
-            widthChanged: width !== prevWidth,
-            heightChanged: height !== prevHeight,
-            orientationChanged: (width > height) !== (prevWidth > prevHeight),
-        };
-        // only when width is changed
-        if (force || (width !== prevWidth && height === prevHeight)) {
-            this.tbt('w_', changes);
-        }
-        // only when height is changed
-        if (force || (height !== prevHeight && width === prevWidth)) {
-            this.tbt('h_', changes);
-        }
-        // when height & width are changed
-        if (force || (width !== prevWidth && height !== prevHeight)) {
-            this.tbt('wh', changes);
-            this.tbt('hw', changes);
-        }
-        // when width is changed
-        if (force || width !== prevWidth) {
-            this.tbt('w', changes);
-        }
-        // when height changed
-        if (force || height !== prevHeight) {
-            this.tbt('h', changes);
-        }
-        // on any change
-        this.tbt('', changes);
-    }
-    /**
-     * Force launching all callbacks
-     */
-    forceResize() {
-        this._onResize(true);
-    }
-}

package/build/es/base/Callbacks.js

@@ -1,205 +0,0 @@
-import { timeoutCallback, id as orderId } from '../utils/common';
-/**
- * A class for callbacks' manipulation.
- */
-export class Callbacks {
-    /**
-     * @example
-     * const callback = new Callbacks();
-     */
-    constructor(callInit = true) {
-        this._app = window.vevetApp;
-        this._callbacks = [];
-        // initialize callbacks
-        if (callInit) {
-            this._init();
-        }
-    }
-    /**
-     * Get all callbacks
-     */
-    get callbacks() {
-        return this._callbacks;
-    }
-    /**
-     * Initialize the class.
-     */
-    _init() {
-        this._constructor();
-        this._setEvents();
-    }
-    /**
-     * An empty method that is called in {@linkcode Callbacks._init}.
-     */
-    _constructor() {
-        // code
-    }
-    /**
-     * An empty method that is called in {@linkcode Callbacks._init}.
-     */
-    _setEvents() {
-        // 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");
-     * });
-     */
-    add(target, func, data = {}) {
-        const id = orderId('callback');
-        const obj = {
-            id,
-            on: true,
-            data: Object.assign({ target, 
-                // @ts-ignore
-                do: func }, data),
-        };
-        this._callbacks.push(obj);
-        this._onAdd(id);
-        return {
-            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
-    _onAdd(id) {
-        // code
-    }
-    /**
-     * Remove a callback.
-     */
-    remove(id, removeProtected = false) {
-        // remove the callback and get new ones
-        let removed = false;
-        const newCallbacks = this._callbacks.filter((callback) => {
-            // if not ID overlap
-            if (callback.id !== id) {
-                return true;
-            }
-            // to be removed
-            const { data } = callback;
-            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
-    _onRemove(id) {
-        // code
-    }
-    /**
-     * Remove all callbacks.
-     */
-    removeAll(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.
-     */
-    turn(id, enabled = true) {
-        const 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
-    _onTurn(id) {
-        // code
-    }
-    /**
-     * Get a callback by id
-     */
-    get(id) {
-        const callbacks = this._callbacks.filter((callback) => callback.id === id);
-        if (callbacks.length > 0) {
-            return callbacks[0];
-        }
-        return false;
-    }
-    /**
-     * Trigger a callback. It will work only if the callback is enabled.
-     */
-    _trigger(callback, arg) {
-        // check if enabled
-        if (!callback.on) {
-            return;
-        }
-        const { timeout, once } = callback.data;
-        const func = callback.data.do;
-        // launch
-        if (timeout) {
-            if (arg) {
-                timeoutCallback(this._triggerFunc.bind(this, func, arg), timeout);
-            }
-            else {
-                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
-     */
-    _triggerFunc(func, arg) {
-        if (arg) {
-            func(arg);
-        }
-        else {
-            func();
-        }
-    }
-    /**
-     * Trigger all enabled callbacks under a certain target name. (TBT: Trigger by target).
-     */
-    tbt(target, arg) {
-        this._callbacks.forEach((callback) => {
-            if (callback.data.target === target) {
-                this._trigger(callback, arg);
-            }
-        });
-    }
-    /**
-     * Destroy the callbacks
-     */
-    destroy() {
-        this.removeAll(true);
-    }
-}

package/build/es/base/Component.js

@@ -1,32 +0,0 @@
-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

@@ -1,223 +0,0 @@
-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 = {}) {
-        const callback = this._app.viewport.add(target, func, Object.assign(Object.assign({}, data), { name: this.constructor.name }));
-        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;
-    }
-}