vevet 1.4.27 → 2.0.1-dev.3

package/build/es/app/Application.js

@@ -0,0 +1,210 @@
+import isMobileJs from 'ismobilejs';
+import { detect } from 'detect-browser';
+import PCancelable from 'p-cancelable';
+import { Viewport } from './events/Viewport';
+import { PageLoad } from './events/PageLoad';
+/**
+ * Vevet Application
+ */
+export class Application {
+    /**
+     * @example
+     * const app = Application({
+     *     page: 'home'
+     * });
+     */
+    constructor(data = {}) {
+        /**
+         * Pages (instances)
+         */
+        this._pages = [];
+        /**
+         * Current Page (instance).
+         */
+        this._page = false;
+        // check if the application already exists
+        if (window.vevetApp) {
+            throw new Error('Vevet Application already exists!');
+        }
+        // set defaults
+        this._prop = Object.assign(Object.assign({}, this.defaultProp), data);
+        this._prefix = this.prop.prefix;
+        // initialize the application
+        // Define that you're using Vevet
+        this._sayHi();
+        // add the application to the window
+        window.vevetApp = this;
+        // get type of device
+        const ifmobile = isMobileJs();
+        this._isPhone = ifmobile.phone;
+        this.html.classList.toggle(`${this.prefix}phone`, this._isPhone);
+        this._isTablet = ifmobile.tablet;
+        this.html.classList.toggle(`${this.prefix}tablet`, this._isTablet);
+        this._isMobile = ifmobile.phone || ifmobile.tablet;
+        this.html.classList.toggle(`${this.prefix}mobile`, this._isMobile);
+        this._isDesktop = !this._isMobile;
+        this.html.classList.toggle(`${this.prefix}desktop`, this._isDesktop);
+        // get browser info
+        const browserData = detect();
+        // get OS name
+        if (browserData === null || browserData === void 0 ? void 0 : browserData.os) {
+            const osName = browserData.os.split(' ')[0].toLowerCase();
+            this.html.classList.add(`${this.prefix}os-${osName}`);
+            this._osName = osName;
+        }
+        else {
+            this._osName = '';
+        }
+        // get browser name
+        if (browserData === null || browserData === void 0 ? void 0 : browserData.name) {
+            const browserName = browserData.name.toLowerCase();
+            this.html.classList.add(`${this.prefix}browser-${browserName}`);
+            this._browserName = browserName;
+        }
+        else {
+            this._browserName = '';
+        }
+        // browserData
+        // create default helpers
+        this._pageLoad = new PageLoad();
+        this._viewport = new Viewport();
+    }
+    /**
+     * Application properties.
+     */
+    get prop() {
+        return this._prop;
+    }
+    /**
+     * Default properties.
+     */
+    get defaultProp() {
+        return {
+            tablet: 1199,
+            phone: 899,
+            prefix: 'v-',
+            easing: [0.25, 0.1, 0.25, 1],
+            viewportResizeTimeout: 0,
+        };
+    }
+    get prefix() {
+        return this._prefix;
+    }
+    get isPhone() {
+        return this._isPhone;
+    }
+    get isTablet() {
+        return this._isTablet;
+    }
+    get isMobile() {
+        return this._isMobile;
+    }
+    get isDesktop() {
+        return this._isDesktop;
+    }
+    get osName() {
+        return this._osName;
+    }
+    get browserName() {
+        return this._browserName;
+    }
+    /**
+     * Get document element.
+     */
+    get doc() {
+        return document;
+    }
+    /**
+     * Get HTML element
+     */
+    get html() {
+        return document.documentElement;
+    }
+    /**
+     * Get body element.
+     */
+    get body() {
+        return document.body;
+    }
+    /**
+     * Get an array of existing pages.
+     * A new element is added to the array when {@linkcode Vevet.Page.create} is called.
+     */
+    get pages() {
+        return this._pages;
+    }
+    /**
+     * Get the current page instance.
+     */
+    get page() {
+        return this._page;
+    }
+    /**
+     * Set the current page instance.
+     */
+    set page(val) {
+        this._page = val;
+    }
+    /**
+     * Action on page created
+     */
+    onPageCreated() {
+        return new PCancelable((resolve) => {
+            if (this._page) {
+                this._page.onCreate().then(() => {
+                    resolve(this.page);
+                });
+                return;
+            }
+            setTimeout(() => {
+                this.onPageCreated().then(() => {
+                    resolve(this.page);
+                });
+            }, 30);
+        });
+    }
+    /**
+     * Action on page shown
+     */
+    onPageShown() {
+        return new PCancelable((resolve) => {
+            this.onPageCreated().then(() => {
+                if (this._page) {
+                    this._page.onShow().then(() => {
+                        resolve(this.page);
+                    });
+                }
+            });
+        });
+    }
+    get pageLoad() {
+        return this._pageLoad;
+    }
+    /**
+     * Action on page laoded
+     */
+    onPageLoaded() {
+        return new PCancelable((resolve) => {
+            this._pageLoad.onLoaded(() => {
+                resolve();
+            });
+        });
+    }
+    get viewport() {
+        return this._viewport;
+    }
+    /**
+     * Defines that you're using Vevet.
+     */
+    _sayHi() {
+        const msg = 'Vevet';
+        const style = [
+            'padding: 1rem 1.5rem;',
+            'background: #5F2580;',
+            'font: 1rem/1 Arial;',
+            'color: #ffffff;',
+        ].join('');
+        // eslint-disable-next-line no-console
+        console.log('%c%s', style, msg);
+    }
+}

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

@@ -0,0 +1,47 @@
+import { Callbacks } from '../../base/Callbacks';
+/**
+ * Callbacks on page loaded.
+ */
+export class PageLoad extends Callbacks {
+    constructor() {
+        super(false);
+        this._loaded = false;
+        this._init();
+    }
+    get loaded() {
+        return this._loaded;
+    }
+    _setEvents() {
+        if (document.readyState === 'complete') {
+            this._handleLoaded();
+        }
+        else {
+            window.addEventListener('load', () => {
+                this._handleLoaded();
+            });
+        }
+    }
+    /**
+     * When the page is loaded.
+     */
+    _handleLoaded() {
+        const app = this._app;
+        const { prefix } = app;
+        this._loaded = true;
+        app.html.classList.remove(`${prefix}loading`);
+        app.body.classList.remove(`${prefix}loading`);
+        app.html.classList.add(`${prefix}loaded`);
+        this.tbt('', false);
+    }
+    /**
+     * Add a callback on page load.
+     * If the page is already loaded, the callback will be immediately triggered.
+     */
+    onLoaded(callback) {
+        if (this.loaded) {
+            callback();
+            return undefined;
+        }
+        return this.add('', callback.bind(this));
+    }
+}

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

@@ -0,0 +1,232 @@
+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._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 VW value
+     */
+    get vw() {
+        return this.width / 100;
+    }
+    /**
+     * Get VH value
+     */
+    get vh() {
+        return this.height / 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', () => {
+            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`);
+    }
+    /**
+     * Launch callbacks on resize.
+     */
+    _onResize() {
+        // 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 (width !== prevWidth && height === prevHeight) {
+            this.tbt('w_', changes);
+        }
+        // only when height is changed
+        if (height !== prevHeight && width === prevWidth) {
+            this.tbt('h_', changes);
+        }
+        // when height & width are changed
+        if (width !== prevWidth && height !== prevHeight) {
+            this.tbt('wh', changes);
+            this.tbt('hw', changes);
+        }
+        // when width is changed
+        if (width !== prevWidth) {
+            this.tbt('w', changes);
+        }
+        // when height changed
+        if (height !== prevHeight) {
+            this.tbt('h', changes);
+        }
+        // on any change
+        this.tbt('', changes);
+    }
+}

package/build/es/base/Callbacks.js

@@ -0,0 +1,205 @@
+import { timeoutCallback, randID } 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 = randID('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);
+    }
+}