vevet 2.8.0 → 2.11.0

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

@@ -45,6 +45,7 @@ var Viewport = /** @class */ (function (_super) {
         var _this = _super.call(this, false) || this;
         _this._width = 0;
         _this._height = 0;
+        _this._radius = 0;
         _this._prevSize = { w: 0, h: 0 };
         _this._isDesktop = false;
         _this._isTablet = false;
@@ -66,6 +67,13 @@ var Viewport = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Viewport.prototype, "radius", {
+        get: function () {
+            return Math.sqrt(Math.pow(this.width, 2) + Math.pow(this.height, 2)) / 2;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Viewport.prototype, "vw", {
         /**
          * Get VW value
@@ -86,6 +94,16 @@ var Viewport = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Viewport.prototype, "vr", {
+        /**
+         * Get VR value (viewport radius / 100)
+         */
+        get: function () {
+            return this.radius / 100;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Viewport.prototype, "prevSize", {
         /**
          * Get previous Viewport size
@@ -259,6 +277,7 @@ var Viewport = /** @class */ (function (_super) {
         var html = this._app.html;
         html.style.setProperty('--vw', "".concat(this.vw, "px"));
         html.style.setProperty('--vh', "".concat(this.vh, "px"));
+        html.style.setProperty('--vr', "".concat(this.vr, "px"));
     };
     /**
      * Launch callbacks on resize.

package/build/cjs/base/Callbacks.js

@@ -72,7 +72,7 @@ var Callbacks = /** @class */ (function () {
      */
     Callbacks.prototype.add = function (target, func, data) {
         if (data === void 0) { data = {}; }
-        var id = (0, common_1.randID)('callback');
+        var id = (0, common_1.id)('callback');
         var obj = {
             id: id,
             on: true,

package/build/cjs/components/page/Page.js

@@ -47,6 +47,7 @@ var Page = /** @class */ (function (_super) {
         // set default vars
         _this._blocked = false;
         _this._created = false;
+        _this._beforeShown = false;
         _this._shown = false;
         _this._hidden = false;
         _this._destroyed = false;
@@ -71,6 +72,13 @@ var Page = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Page.prototype, "beforeShown", {
+        get: function () {
+            return this._beforeShown;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Page.prototype, "shown", {
         get: function () {
             return this._shown;
@@ -117,6 +125,7 @@ var Page = /** @class */ (function (_super) {
                 }
                 // update vars
                 _this._blocked = true;
+                _this._beforeShown = false;
                 _this._shown = false;
                 _this._hidden = false;
                 _this._destroyed = false;
@@ -177,6 +186,8 @@ var Page = /** @class */ (function (_super) {
                 _this._hidden = false;
                 _this._destroyed = false;
                 // actions
+                _this.callbacks.tbt('beforeshow', false);
+                _this._beforeShown = true;
                 _this._show().then(function () {
                     _this.callbacks.tbt('show', false);
                     _this._blocked = false;
@@ -226,6 +237,7 @@ var Page = /** @class */ (function (_super) {
                 // update vars
                 _this._blocked = true;
                 _this._created = true;
+                _this._beforeShown = false;
                 _this._shown = false;
                 _this._destroyed = false;
                 // actions
@@ -277,6 +289,7 @@ var Page = /** @class */ (function (_super) {
                 // change vars
                 _this._blocked = true;
                 _this._created = false;
+                _this._beforeShown = false;
                 _this._shown = false;
                 _this._hidden = true;
                 // update page
@@ -357,6 +370,25 @@ var Page = /** @class */ (function (_super) {
             }
         });
     };
+    /**
+     * Add a 'show' callback.
+     * If the callback was added after the page was shown, it will be triggered immediately.
+     */
+    Page.prototype.onBeforeShow = function () {
+        var _this = this;
+        return new p_cancelable_1.default(function (resolve) {
+            if (_this.shown || _this.beforeShown) {
+                resolve();
+            }
+            else {
+                _this.addCallback('beforeshow', function () {
+                    resolve();
+                }, {
+                    once: true,
+                });
+            }
+        });
+    };
     /**
      * Add a 'hide' callback.
      * If the callback was added after the page was hidden, it will be triggered immediately.

package/build/cjs/utils/common/id.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var index = 0;
+/**
+ * Generate an ID
+ */
+function id(prefix) {
+    if (prefix === void 0) { prefix = 'id'; }
+    index += 1;
+    return "".concat(prefix, "_").concat(index);
+}
+exports.default = id;

package/build/cjs/utils/common/index.js

@@ -3,9 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.timeoutCallback = exports.mergeWithoutArrays = exports.randID = void 0;
-var randID_1 = __importDefault(require("./randID"));
-exports.randID = randID_1.default;
+exports.timeoutCallback = exports.mergeWithoutArrays = exports.id = void 0;
+var id_1 = __importDefault(require("./id"));
+exports.id = id_1.default;
 var mergeWithoutArrays_1 = __importDefault(require("./mergeWithoutArrays"));
 exports.mergeWithoutArrays = mergeWithoutArrays_1.default;
 var timeoutCallback_1 = __importDefault(require("./timeoutCallback"));

package/build/cjs/utils/common/orderId.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var index = 0;
+/**
+ * Generate a random ID
+ */
+function orderId(prefix) {
+    if (prefix === void 0) { prefix = 'id'; }
+    index += 1;
+    return "".concat(prefix, "_").concat(index);
+}
+exports.default = orderId;

package/build/cjs/utils/common/randID.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
  */
 function randID(prefix) {
     if (prefix === void 0) { prefix = 'id'; }
-    var id = "".concat(+new Date(), "_").concat(Math.round(Math.random() * 1000));
+    var id = "".concat(+new Date(), "_").concat(Math.round(Math.random() * 1));
     return "".concat(prefix, "_").concat(id);
 }
 exports.default = randID;

package/build/cjs/utils/listeners/onScroll.js

@@ -11,7 +11,7 @@ function onScroll(_a) {
     var container = _a.container, callback = _a.callback, _b = _a.isPassive, isPassive = _b === void 0 ? false : _b;
     // check if listeners for this element already exist
     var instance = instances.find(function (data) { return (data.container === container && data.isPassive === isPassive); });
-    var callbackId = (0, common_1.randID)('scroll-event');
+    var callbackId = (0, common_1.id)('scroll-event');
     // if a listener exists, we just add a new callback to its stack
     if (instance) {
         instance.callbacks.push({
@@ -22,7 +22,7 @@ function onScroll(_a) {
     else {
         // otherwise we create a new instance
         instance = {
-            id: (0, common_1.randID)('scroll-event-instance'),
+            id: (0, common_1.id)('scroll-event-instance'),
             container: container,
             callbacks: [{
                     id: callbackId,

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

@@ -26,6 +26,7 @@ export class Viewport extends Callbacks {
         super(false);
         this._width = 0;
         this._height = 0;
+        this._radius = 0;
         this._prevSize = { w: 0, h: 0 };
         this._isDesktop = false;
         this._isTablet = false;
@@ -38,6 +39,9 @@ export class Viewport extends Callbacks {
     get height() {
         return this._height;
     }
+    get radius() {
+        return Math.sqrt(Math.pow(this.width, 2) + Math.pow(this.height, 2)) / 2;
+    }
     /**
      * Get VW value
      */
@@ -50,6 +54,12 @@ export class Viewport extends Callbacks {
     get vh() {
         return this.height / 100;
     }
+    /**
+     * Get VR value (viewport radius / 100)
+     */
+    get vr() {
+        return this.radius / 100;
+    }
     /**
      * Get previous Viewport size
      */
@@ -190,6 +200,7 @@ export class Viewport extends Callbacks {
         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.

package/build/es/base/Callbacks.js

@@ -1,4 +1,4 @@
-import { timeoutCallback, randID } from '../utils/common';
+import { timeoutCallback, id as orderId } from '../utils/common';
 /**
  * A class for callbacks' manipulation.
  */
@@ -52,7 +52,7 @@ export class Callbacks {
      * });
      */
     add(target, func, data = {}) {
-        const id = randID('callback');
+        const id = orderId('callback');
         const obj = {
             id,
             on: true,

package/build/es/components/page/Page.js

@@ -13,6 +13,7 @@ export class Page extends Component {
         // set default vars
         this._blocked = false;
         this._created = false;
+        this._beforeShown = false;
         this._shown = false;
         this._hidden = false;
         this._destroyed = false;
@@ -28,6 +29,9 @@ export class Page extends Component {
     get created() {
         return this._created;
     }
+    get beforeShown() {
+        return this._beforeShown;
+    }
     get shown() {
         return this._shown;
     }
@@ -56,6 +60,7 @@ export class Page extends Component {
                 }
                 // update vars
                 this._blocked = true;
+                this._beforeShown = false;
                 this._shown = false;
                 this._hidden = false;
                 this._destroyed = false;
@@ -114,6 +119,8 @@ export class Page extends Component {
                 this._hidden = false;
                 this._destroyed = false;
                 // actions
+                this.callbacks.tbt('beforeshow', false);
+                this._beforeShown = true;
                 this._show().then(() => {
                     this.callbacks.tbt('show', false);
                     this._blocked = false;
@@ -161,6 +168,7 @@ export class Page extends Component {
                 // update vars
                 this._blocked = true;
                 this._created = true;
+                this._beforeShown = false;
                 this._shown = false;
                 this._destroyed = false;
                 // actions
@@ -210,6 +218,7 @@ export class Page extends Component {
                 // change vars
                 this._blocked = true;
                 this._created = false;
+                this._beforeShown = false;
                 this._shown = false;
                 this._hidden = true;
                 // update page
@@ -286,6 +295,24 @@ export class Page extends Component {
             }
         });
     }
+    /**
+     * Add a 'show' callback.
+     * If the callback was added after the page was shown, it will be triggered immediately.
+     */
+    onBeforeShow() {
+        return new PCancelable((resolve) => {
+            if (this.shown || this.beforeShown) {
+                resolve();
+            }
+            else {
+                this.addCallback('beforeshow', () => {
+                    resolve();
+                }, {
+                    once: true,
+                });
+            }
+        });
+    }
     /**
      * Add a 'hide' callback.
      * If the callback was added after the page was hidden, it will be triggered immediately.

package/build/es/utils/common/id.js

@@ -0,0 +1,8 @@
+let index = 0;
+/**
+ * Generate an ID
+ */
+export default function id(prefix = 'id') {
+    index += 1;
+    return `${prefix}_${index}`;
+}

package/build/es/utils/common/index.js

@@ -1,4 +1,4 @@
-import randID from './randID';
+import id from './id';
 import mergeWithoutArrays from './mergeWithoutArrays';
 import timeoutCallback from './timeoutCallback';
-export { randID, mergeWithoutArrays, timeoutCallback, };
+export { id, mergeWithoutArrays, timeoutCallback, };

package/build/es/utils/common/orderId.js

@@ -0,0 +1,8 @@
+let index = 0;
+/**
+ * Generate a random ID
+ */
+export default function orderId(prefix = 'id') {
+    index += 1;
+    return `${prefix}_${index}`;
+}

package/build/es/utils/common/randID.js

@@ -2,6 +2,6 @@
  * Generate a random ID
  */
 export default function randID(prefix = 'id') {
-    const id = `${+new Date()}_${Math.round(Math.random() * 1000)}`;
+    const id = `${+new Date()}_${Math.round(Math.random() * 1)}`;
     return `${prefix}_${id}`;
 }

package/build/es/utils/listeners/onScroll.js

@@ -1,6 +1,6 @@
 import { addEventListener, selectOne } from 'vevet-dom';
 import { SmoothScroll } from '../../components/scroll/smooth-scroll/SmoothScroll';
-import { randID } from '../common';
+import { id as orderId } from '../common';
 let instances = [];
 /**
  * Add OnScroll event
@@ -8,7 +8,7 @@ let instances = [];
 export default function onScroll({ container, callback, isPassive = false, }) {
     // check if listeners for this element already exist
     let instance = instances.find((data) => (data.container === container && data.isPassive === isPassive));
-    const callbackId = randID('scroll-event');
+    const callbackId = orderId('scroll-event');
     // if a listener exists, we just add a new callback to its stack
     if (instance) {
         instance.callbacks.push({
@@ -19,7 +19,7 @@ export default function onScroll({ container, callback, isPassive = false, }) {
     else {
         // otherwise we create a new instance
         instance = {
-            id: randID('scroll-event-instance'),
+            id: orderId('scroll-event-instance'),
             container,
             callbacks: [{
                     id: callbackId,

package/build/types/app/events/Viewport.d.ts

@@ -58,6 +58,11 @@ export declare class Viewport extends Callbacks<NViewport.CallbacksTypes> {
      */
     protected _height: number;
     get height(): number;
+    /**
+     * Current Viewport radius
+     */
+    protected _radius: number;
+    get radius(): number;
     /**
      * Get VW value
      */
@@ -66,6 +71,10 @@ export declare class Viewport extends Callbacks<NViewport.CallbacksTypes> {
      * Get VH value
      */
     get vh(): number;
+    /**
+     * Get VR value (viewport radius / 100)
+     */
+    get vr(): number;
     /**
      * Previous Viewport size
      */

package/build/types/app/events/Viewport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Viewport.d.ts","sourceRoot":"","sources":["../../../../src/ts/app/events/Viewport.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAIrD,yBAAiB,SAAS,CAAC;IAEvB;;OAEG;IACH,UAAiB,OAAO;QACpB,YAAY,EAAE,OAAO,CAAC;QACtB,aAAa,EAAE,OAAO,CAAC;QACvB,kBAAkB,EAAE,OAAO,CAAC;KAC/B;IAED;;OAEG;IACH,UAAiB,cAAe,SAAQ,UAAU,CAAC,cAAc;QAC7D;;WAEG;QACH,GAAG,EAAE,OAAO,CAAC;QACb;;WAEG;QACH,GAAG,EAAE,OAAO,CAAC;QACb;;WAEG;QACH,IAAI,EAAE,OAAO,CAAC;QACd;;WAEG;QACH,IAAI,EAAE,OAAO,CAAA;QACb;;WAEG;QACH,IAAI,EAAE,OAAO,CAAC;QACd;;WAEG;QACH,IAAI,EAAE,OAAO,CAAC;QACd;;WAEG;QACH,EAAE,EAAE,OAAO,CAAC;KACf;CAEJ;AAqBD;;;GAGG;AACH,qBAAa,QAAS,SAAQ,SAAS,CACnC,SAAS,CAAC,cAAc,CAC3B;IACG;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC;IACzB,IAAI,KAAK,WAER;IAED;;OAEG;IACH,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC;IAC1B,IAAI,MAAM,WAET;IAED;;OAEG;IACH,IAAI,EAAE,WAEL;IACD;;OAEG;IACH,IAAI,EAAE,WAEL;IAED;;OAEG;IACH,SAAS,CAAC,SAAS,EAAE;QACjB,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACb,CAAC;IAEF;;OAEG;IACH,IAAI,QAAQ;;;MAEX;IAED;;OAEG;IACH,IAAI,WAAW,YAEd;IAED;;OAEG;IACH,IAAI,UAAU,YAEb;IAED;;OAEG;IACH,SAAS,CAAC,UAAU,EAAE,OAAO,CAAC;IAC9B,IAAI,SAAS,YAEZ;IAED;;OAEG;IACH,SAAS,CAAC,SAAS,EAAE,OAAO,CAAC;IAC7B,IAAI,QAAQ,YAEX;IAED;;OAEG;IACH,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC5B,IAAI,OAAO,YAEV;IAED;;OAEG;IACH,IAAI,GAAG,WAKN;IAED;;OAEG;IACH,IAAI,eAAe,WAKlB;IAED,SAAS,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;;IAgB9D,SAAS,CAAC,YAAY;IAMtB,SAAS,CAAC,UAAU;IAapB;;OAEG;IACH,SAAS,CAAC,UAAU;IA0BpB;;OAEG;IACH,SAAS,CAAC,cAAc;IA4CxB;;OAEG;IACH,SAAS,CAAC,wBAAwB,CAC9B,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,MAAM,EAAE;IAenB;;OAEG;IACH,SAAS,CAAC,cAAc;IAQxB;;OAEG;IACH,SAAS,CAAC,SAAS;IACf;;OAEG;IACH,KAAK,UAAQ;IA6CjB;;OAEG;IACI,WAAW;CAGrB"}
+{"version":3,"file":"Viewport.d.ts","sourceRoot":"","sources":["../../../../src/ts/app/events/Viewport.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAIrD,yBAAiB,SAAS,CAAC;IAEvB;;OAEG;IACH,UAAiB,OAAO;QACpB,YAAY,EAAE,OAAO,CAAC;QACtB,aAAa,EAAE,OAAO,CAAC;QACvB,kBAAkB,EAAE,OAAO,CAAC;KAC/B;IAED;;OAEG;IACH,UAAiB,cAAe,SAAQ,UAAU,CAAC,cAAc;QAC7D;;WAEG;QACH,GAAG,EAAE,OAAO,CAAC;QACb;;WAEG;QACH,GAAG,EAAE,OAAO,CAAC;QACb;;WAEG;QACH,IAAI,EAAE,OAAO,CAAC;QACd;;WAEG;QACH,IAAI,EAAE,OAAO,CAAA;QACb;;WAEG;QACH,IAAI,EAAE,OAAO,CAAC;QACd;;WAEG;QACH,IAAI,EAAE,OAAO,CAAC;QACd;;WAEG;QACH,EAAE,EAAE,OAAO,CAAC;KACf;CAEJ;AAqBD;;;GAGG;AACH,qBAAa,QAAS,SAAQ,SAAS,CACnC,SAAS,CAAC,cAAc,CAC3B;IACG;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC;IACzB,IAAI,KAAK,WAER;IAED;;OAEG;IACH,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC;IAC1B,IAAI,MAAM,WAET;IAED;;OAEG;IACH,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC;IAC1B,IAAI,MAAM,WAET;IAED;;OAEG;IACH,IAAI,EAAE,WAEL;IACD;;OAEG;IACH,IAAI,EAAE,WAEL;IACD;;OAEG;IACH,IAAI,EAAE,WAEL;IAED;;OAEG;IACH,SAAS,CAAC,SAAS,EAAE;QACjB,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACb,CAAC;IAEF;;OAEG;IACH,IAAI,QAAQ;;;MAEX;IAED;;OAEG;IACH,IAAI,WAAW,YAEd;IAED;;OAEG;IACH,IAAI,UAAU,YAEb;IAED;;OAEG;IACH,SAAS,CAAC,UAAU,EAAE,OAAO,CAAC;IAC9B,IAAI,SAAS,YAEZ;IAED;;OAEG;IACH,SAAS,CAAC,SAAS,EAAE,OAAO,CAAC;IAC7B,IAAI,QAAQ,YAEX;IAED;;OAEG;IACH,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC5B,IAAI,OAAO,YAEV;IAED;;OAEG;IACH,IAAI,GAAG,WAKN;IAED;;OAEG;IACH,IAAI,eAAe,WAKlB;IAED,SAAS,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;;IAiB9D,SAAS,CAAC,YAAY;IAMtB,SAAS,CAAC,UAAU;IAapB;;OAEG;IACH,SAAS,CAAC,UAAU;IA0BpB;;OAEG;IACH,SAAS,CAAC,cAAc;IA4CxB;;OAEG;IACH,SAAS,CAAC,wBAAwB,CAC9B,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,MAAM,EAAE;IAenB;;OAEG;IACH,SAAS,CAAC,cAAc;IASxB;;OAEG;IACH,SAAS,CAAC,SAAS;IACf;;OAEG;IACH,KAAK,UAAQ;IA6CjB;;OAEG;IACI,WAAW;CAGrB"}

package/build/types/components/page/Page.d.ts

@@ -22,6 +22,7 @@ export declare namespace NPage {
      */
     interface CallbacksTypes extends NComponent.CallbacksTypes {
         'create': false;
+        'beforeshow': false;
         'show': false;
         'hide': false;
         'destroy': false;
@@ -42,6 +43,11 @@ export declare class Page<StaticProp extends NPage.StaticProp = NPage.StaticProp
      */
     protected _created: boolean;
     get created(): boolean;
+    /**
+     * If 'beforeshow' callback is called
+     */
+    protected _beforeShown: boolean;
+    get beforeShown(): boolean;
     /**
      * If the page is shown
      */
@@ -119,6 +125,11 @@ export declare class Page<StaticProp extends NPage.StaticProp = NPage.StaticProp
      * If the callback was added after the page was shown, it will be triggered immediately.
      */
     onShow(): PCancelable<void>;
+    /**
+     * Add a 'show' callback.
+     * If the callback was added after the page was shown, it will be triggered immediately.
+     */
+    onBeforeShow(): PCancelable<void>;
     /**
      * Add a 'hide' callback.
      * If the callback was added after the page was hidden, it will be triggered immediately.

package/build/types/components/page/Page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../../../src/ts/components/page/Page.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAI/D,yBAAiB,KAAK,CAAC;IAEnB;;OAEG;IACH,UAAiB,UAAW,SAAQ,UAAU,CAAC,UAAU;QACrD;;;WAGG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;KACjB;IAED;;OAEG;IACH,UAAiB,cAAe,SAAQ,UAAU,CAAC,cAAc;KAAI;IAErE;;OAEG;IACH,UAAiB,cAAe,SAAQ,UAAU,CAAC,cAAc;QAC7D,QAAQ,EAAE,KAAK,CAAC;QAChB,MAAM,EAAE,KAAK,CAAC;QACd,MAAM,EAAE,KAAK,CAAC;QACd,SAAS,EAAE,KAAK,CAAC;KACpB;CAEJ;AAID;;;;;;GAMG;AACH,qBAAa,IAAI,CACb,UAAU,SAAS,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,EACtD,cAAc,SAAS,KAAK,CAAC,cAAc,GAAG,KAAK,CAAC,cAAc,EAClE,cAAc,SAAS,KAAK,CAAC,cAAc,GAAG,KAAK,CAAC,cAAc,CACpE,SAAQ,SAAS,CACf,UAAU,EACV,cAAc,EACd,cAAc,CACjB;IACG,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC5B,SAAS,KAAK,OAAO,YAEpB;IAED;;OAEG;IACH,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC5B,IAAI,OAAO,YAEV;IAED;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,OAAO,CAAC;IAC1B,IAAI,KAAK,YAER;IAED;;OAEG;IACH,SAAS,CAAC,OAAO,EAAE,OAAO,CAAC;IAC3B,IAAI,MAAM,YAET;IAED;;OAEG;IACH,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC5B,IAAI,OAAO,YAEV;IAED,IAAI,aAAa,WAEhB;gBAGG,WAAW,CAAC,EAAE,CAAC,UAAU,GAAG,cAAc,CAAC,EAC3C,IAAI,UAAO;IAkBf,SAAS,CAAC,eAAe,CACrB,CAAC,SAAS,kBAAkB,CAAC,UAAU,GAAG,cAAc,CAAC,KACvD,CAAC;IASP;;;OAGG;IACI,MAAM,CACT,OAAO,UAAQ;IAqCnB;;OAEG;IACH,SAAS,CAAC,OAAO;IAQjB;;OAEG;IACI,SAAS;IAchB;;OAEG;IACI,IAAI;IA+BX;;OAEG;IACH,SAAS,CAAC,KAAK;IAQf;;OAEG;IACI,OAAO;IAcd;;OAEG;IACI,IAAI;IA+BX;;OAEG;IACH,SAAS,CAAC,KAAK;IAQf;;OAEG;IACI,OAAO;IAcd;;OAEG;IACI,OAAO;IAmCd;;OAEG;IACH,SAAS,CAAC,QAAQ;IASlB;;OAEG;IACI,UAAU;IAcjB;;;OAGG;IACH,QAAQ;IAgBR;;;OAGG;IACH,MAAM;IAgBN;;;OAGG;IACH,MAAM;CAeT"}
+{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../../../src/ts/components/page/Page.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAI/D,yBAAiB,KAAK,CAAC;IAEnB;;OAEG;IACH,UAAiB,UAAW,SAAQ,UAAU,CAAC,UAAU;QACrD;;;WAGG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;KACjB;IAED;;OAEG;IACH,UAAiB,cAAe,SAAQ,UAAU,CAAC,cAAc;KAAI;IAErE;;OAEG;IACH,UAAiB,cAAe,SAAQ,UAAU,CAAC,cAAc;QAC7D,QAAQ,EAAE,KAAK,CAAC;QAChB,YAAY,EAAE,KAAK,CAAC;QACpB,MAAM,EAAE,KAAK,CAAC;QACd,MAAM,EAAE,KAAK,CAAC;QACd,SAAS,EAAE,KAAK,CAAC;KACpB;CAEJ;AAID;;;;;;GAMG;AACH,qBAAa,IAAI,CACb,UAAU,SAAS,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,EACtD,cAAc,SAAS,KAAK,CAAC,cAAc,GAAG,KAAK,CAAC,cAAc,EAClE,cAAc,SAAS,KAAK,CAAC,cAAc,GAAG,KAAK,CAAC,cAAc,CACpE,SAAQ,SAAS,CACf,UAAU,EACV,cAAc,EACd,cAAc,CACjB;IACG,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC5B,SAAS,KAAK,OAAO,YAEpB;IAED;;OAEG;IACH,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC5B,IAAI,OAAO,YAEV;IAED;;OAEG;IACH,SAAS,CAAC,YAAY,EAAE,OAAO,CAAC;IAChC,IAAI,WAAW,YAEd;IACD;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,OAAO,CAAC;IAC1B,IAAI,KAAK,YAER;IAED;;OAEG;IACH,SAAS,CAAC,OAAO,EAAE,OAAO,CAAC;IAC3B,IAAI,MAAM,YAET;IAED;;OAEG;IACH,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC5B,IAAI,OAAO,YAEV;IAED,IAAI,aAAa,WAEhB;gBAGG,WAAW,CAAC,EAAE,CAAC,UAAU,GAAG,cAAc,CAAC,EAC3C,IAAI,UAAO;IAmBf,SAAS,CAAC,eAAe,CACrB,CAAC,SAAS,kBAAkB,CAAC,UAAU,GAAG,cAAc,CAAC,KACvD,CAAC;IASP;;;OAGG;IACI,MAAM,CACT,OAAO,UAAQ;IAsCnB;;OAEG;IACH,SAAS,CAAC,OAAO;IAQjB;;OAEG;IACI,SAAS;IAchB;;OAEG;IACI,IAAI;IAiCX;;OAEG;IACH,SAAS,CAAC,KAAK;IAQf;;OAEG;IACI,OAAO;IAcd;;OAEG;IACI,IAAI;IAgCX;;OAEG;IACH,SAAS,CAAC,KAAK;IAQf;;OAEG;IACI,OAAO;IAcd;;OAEG;IACI,OAAO;IAoCd;;OAEG;IACH,SAAS,CAAC,QAAQ;IASlB;;OAEG;IACI,UAAU;IAcjB;;;OAGG;IACH,QAAQ;IAgBR;;;OAGG;IACH,MAAM;IAgBN;;;OAGG;IACH,YAAY;IAgBZ;;;OAGG;IACH,MAAM;CAeT"}

package/build/types/utils/common/id.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generate an ID
+ */
+export default function id(prefix?: string): string;
+//# sourceMappingURL=id.d.ts.map

package/build/types/utils/common/id.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"id.d.ts","sourceRoot":"","sources":["../../../../src/ts/utils/common/id.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,EAAE,CACtB,MAAM,SAAO,UAIhB"}

package/build/types/utils/common/index.d.ts

@@ -1,5 +1,5 @@
-import randID from './randID';
+import id from './id';
 import mergeWithoutArrays from './mergeWithoutArrays';
 import timeoutCallback from './timeoutCallback';
-export { randID, mergeWithoutArrays, timeoutCallback, };
+export { id, mergeWithoutArrays, timeoutCallback, };
 //# sourceMappingURL=index.d.ts.map

package/build/types/utils/common/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ts/utils/common/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AACtD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACH,MAAM,EACN,kBAAkB,EAClB,eAAe,GAClB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ts/utils/common/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AACtD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACH,EAAE,EACF,kBAAkB,EAClB,eAAe,GAClB,CAAC"}

package/build/types/utils/common/orderId.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generate a random ID
+ */
+export default function orderId(prefix?: string): string;
+//# sourceMappingURL=orderId.d.ts.map

package/build/types/utils/common/orderId.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"orderId.d.ts","sourceRoot":"","sources":["../../../../src/ts/utils/common/orderId.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAC3B,MAAM,SAAO,UAIhB"}

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "vevet",
-  "version": "2.8.0",
+  "version": "2.11.0",
   "description": "VEVET - A JavaScript library",
   "browserslist": [
     "since 2015"
   ],
   "scripts": {
-    "pages-build": "node ./examples-src/compiler/index.js && webpack --config ./examples-src/webpack/prod.js",
+    "pages-build": "node ./examples-src/compiler/index.js && NODE_ENV=production webpack --config ./examples-src/webpack/prod.js",
     "pages-dev": "npm-run-all --parallel pages-dev:pug pages-dev:webpack",
     "pages-dev:pug": "nodemon --watch ./examples-src/pages --watch ./examples-src/compiler --ext pug,json,ts,js,html,css ./examples-src/compiler/index.js",
-    "pages-dev:webpack": "webpack serve --config ./examples-src/webpack/dev.js",
+    "pages-dev:webpack": "NODE_ENV=development webpack serve --config ./examples-src/webpack/dev.js",
     "prepare:all": "npm run prepare:es && npm run prepare:cjs && npm run prepare:cdn",
     "prepare:es": "tsc ./src/ts/index.ts --outDir ./build/es --target es6 --module es6 --moduleResolution node --esModuleInterop true --allowSyntheticDefaultImports true --declaration true --declarationDir ./build/types --declarationMap true",
     "prepare:cjs": "tsc ./src/ts/index.ts --outDir ./build/cjs --target es5 --module commonjs --moduleResolution node --esModuleInterop true --allowSyntheticDefaultImports true",
@@ -73,7 +73,8 @@
     "@typescript-eslint/eslint-plugin": "^4.28.1",
     "@typescript-eslint/parser": "^4.28.1",
     "babel-loader": "^8.2.2",
-    "bootstrap": "^5.0.2",
+    "base-href-webpack-plugin": "^3.0.1",
+    "bootstrap": "^5.1.3",
     "clean-webpack-plugin": "^4.0.0-alpha.0",
     "copy-webpack-plugin": "^9.0.1",
     "css-loader": "^6.2.0",

package/src/ts/app/events/Viewport.ts

@@ -92,6 +92,14 @@ export class Viewport extends Callbacks<
         return this._height;
     }
 
+    /**
+     * Current Viewport radius
+     */
+    protected _radius: number;
+    get radius () {
+        return Math.sqrt(this.width ** 2 + this.height ** 2) / 2;
+    }
+
     /**
      * Get VW value
      */
@@ -104,6 +112,12 @@ export class Viewport extends Callbacks<
     get vh () {
         return this.height / 100;
     }
+    /**
+     * Get VR value (viewport radius / 100)
+     */
+    get vr () {
+        return this.radius / 100;
+    }
 
     /**
      * Previous Viewport size
@@ -186,6 +200,7 @@ export class Viewport extends Callbacks<
         super(false);
         this._width = 0;
         this._height = 0;
+        this._radius = 0;
         this._prevSize = { w: 0, h: 0 };
         this._isDesktop = false;
         this._isTablet = false;
@@ -316,6 +331,7 @@ export class Viewport extends Callbacks<
         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`);
     }
 
 

package/src/ts/base/Callbacks.ts

@@ -1,5 +1,5 @@
 import { Application } from '../app/Application';
-import { timeoutCallback, randID } from '../utils/common';
+import { timeoutCallback, id as orderId } from '../utils/common';
 
 
 
@@ -174,7 +174,7 @@ export class Callbacks<
         func: NCallbacks.CallbackSettings<Types, Target>['do'],
         data: NCallbacks.CallbackBaseSettings = {},
     ): NCallbacks.AddedCallback {
-        const id = randID('callback');
+        const id = orderId('callback');
         const obj: NCallbacks.CallbacksData<Types> = {
             id,
             on: true,