vevet 1.4.27 → 2.0.1-dev.3

package/build/cjs/app/Application.js

@@ -0,0 +1,297 @@
+"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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Application = void 0;
+var ismobilejs_1 = __importDefault(require("ismobilejs"));
+var detect_browser_1 = require("detect-browser");
+var p_cancelable_1 = __importDefault(require("p-cancelable"));
+var Viewport_1 = require("./events/Viewport");
+var PageLoad_1 = require("./events/PageLoad");
+/**
+ * Vevet Application
+ */
+var Application = /** @class */ (function () {
+    /**
+     * @example
+     * const app = Application({
+     *     page: 'home'
+     * });
+     */
+    function Application(data) {
+        if (data === void 0) { 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 = __assign(__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
+        var ifmobile = ismobilejs_1.default();
+        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
+        var browserData = detect_browser_1.detect();
+        // get OS name
+        if (browserData === null || browserData === void 0 ? void 0 : browserData.os) {
+            var 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) {
+            var 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_1.PageLoad();
+        this._viewport = new Viewport_1.Viewport();
+    }
+    Object.defineProperty(Application.prototype, "prop", {
+        /**
+         * Application properties.
+         */
+        get: function () {
+            return this._prop;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Application.prototype, "defaultProp", {
+        /**
+         * Default properties.
+         */
+        get: function () {
+            return {
+                tablet: 1199,
+                phone: 899,
+                prefix: 'v-',
+                easing: [0.25, 0.1, 0.25, 1],
+                viewportResizeTimeout: 0,
+            };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Application.prototype, "prefix", {
+        get: function () {
+            return this._prefix;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Application.prototype, "isPhone", {
+        get: function () {
+            return this._isPhone;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Application.prototype, "isTablet", {
+        get: function () {
+            return this._isTablet;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Application.prototype, "isMobile", {
+        get: function () {
+            return this._isMobile;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Application.prototype, "isDesktop", {
+        get: function () {
+            return this._isDesktop;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Application.prototype, "osName", {
+        get: function () {
+            return this._osName;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Application.prototype, "browserName", {
+        get: function () {
+            return this._browserName;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Application.prototype, "doc", {
+        /**
+         * Get document element.
+         */
+        get: function () {
+            return document;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Application.prototype, "html", {
+        /**
+         * Get HTML element
+         */
+        get: function () {
+            return document.documentElement;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Application.prototype, "body", {
+        /**
+         * Get body element.
+         */
+        get: function () {
+            return document.body;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Application.prototype, "pages", {
+        /**
+         * Get an array of existing pages.
+         * A new element is added to the array when {@linkcode Vevet.Page.create} is called.
+         */
+        get: function () {
+            return this._pages;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Application.prototype, "page", {
+        /**
+         * Get the current page instance.
+         */
+        get: function () {
+            return this._page;
+        },
+        /**
+         * Set the current page instance.
+         */
+        set: function (val) {
+            this._page = val;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Action on page created
+     */
+    Application.prototype.onPageCreated = function () {
+        var _this = this;
+        return new p_cancelable_1.default(function (resolve) {
+            if (_this._page) {
+                _this._page.onCreate().then(function () {
+                    resolve(_this.page);
+                });
+                return;
+            }
+            setTimeout(function () {
+                _this.onPageCreated().then(function () {
+                    resolve(_this.page);
+                });
+            }, 30);
+        });
+    };
+    /**
+     * Action on page shown
+     */
+    Application.prototype.onPageShown = function () {
+        var _this = this;
+        return new p_cancelable_1.default(function (resolve) {
+            _this.onPageCreated().then(function () {
+                if (_this._page) {
+                    _this._page.onShow().then(function () {
+                        resolve(_this.page);
+                    });
+                }
+            });
+        });
+    };
+    Object.defineProperty(Application.prototype, "pageLoad", {
+        get: function () {
+            return this._pageLoad;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Action on page laoded
+     */
+    Application.prototype.onPageLoaded = function () {
+        var _this = this;
+        return new p_cancelable_1.default(function (resolve) {
+            _this._pageLoad.onLoaded(function () {
+                resolve();
+            });
+        });
+    };
+    Object.defineProperty(Application.prototype, "viewport", {
+        get: function () {
+            return this._viewport;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Defines that you're using Vevet.
+     */
+    Application.prototype._sayHi = function () {
+        var msg = 'Vevet';
+        var 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);
+    };
+    return Application;
+}());
+exports.Application = Application;

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

@@ -0,0 +1,74 @@
+"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.PageLoad = void 0;
+var Callbacks_1 = require("../../base/Callbacks");
+/**
+ * Callbacks on page loaded.
+ */
+var PageLoad = /** @class */ (function (_super) {
+    __extends(PageLoad, _super);
+    function PageLoad() {
+        var _this = _super.call(this, false) || this;
+        _this._loaded = false;
+        _this._init();
+        return _this;
+    }
+    Object.defineProperty(PageLoad.prototype, "loaded", {
+        get: function () {
+            return this._loaded;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    PageLoad.prototype._setEvents = function () {
+        var _this = this;
+        if (document.readyState === 'complete') {
+            this._handleLoaded();
+        }
+        else {
+            window.addEventListener('load', function () {
+                _this._handleLoaded();
+            });
+        }
+    };
+    /**
+     * When the page is loaded.
+     */
+    PageLoad.prototype._handleLoaded = function () {
+        var app = this._app;
+        var prefix = app.prefix;
+        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.
+     */
+    PageLoad.prototype.onLoaded = function (callback) {
+        if (this.loaded) {
+            callback();
+            return undefined;
+        }
+        return this.add('', callback.bind(this));
+    };
+    return PageLoad;
+}(Callbacks_1.Callbacks));
+exports.PageLoad = PageLoad;

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

@@ -0,0 +1,303 @@
+"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.Viewport = void 0;
+var Callbacks_1 = require("../../base/Callbacks");
+var common_1 = require("../../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>
+ */
+var Viewport = /** @class */ (function (_super) {
+    __extends(Viewport, _super);
+    function Viewport() {
+        var _this = _super.call(this, false) || this;
+        _this._width = 0;
+        _this._height = 0;
+        _this._prevSize = { w: 0, h: 0 };
+        _this._isDesktop = false;
+        _this._isTablet = false;
+        _this._isPhone = false;
+        _this._init();
+        return _this;
+    }
+    Object.defineProperty(Viewport.prototype, "width", {
+        get: function () {
+            return this._width;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Viewport.prototype, "height", {
+        get: function () {
+            return this._height;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Viewport.prototype, "vw", {
+        /**
+         * Get VW value
+         */
+        get: function () {
+            return this.width / 100;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Viewport.prototype, "vh", {
+        /**
+         * Get VH value
+         */
+        get: function () {
+            return this.height / 100;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Viewport.prototype, "prevSize", {
+        /**
+         * Get previous Viewport size
+         */
+        get: function () {
+            return this._prevSize;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Viewport.prototype, "isLandscape", {
+        /**
+         * If width greater than height.
+         */
+        get: function () {
+            return this.width > this.height;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Viewport.prototype, "isPortrait", {
+        /**
+         * If width less than height.
+         */
+        get: function () {
+            return this.width < this.height;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Viewport.prototype, "isDesktop", {
+        get: function () {
+            return this._isDesktop;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Viewport.prototype, "isTablet", {
+        get: function () {
+            return this._isTablet;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Viewport.prototype, "isPhone", {
+        get: function () {
+            return this._isPhone;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Viewport.prototype, "dpr", {
+        /**
+         * Device pixel ratio
+         */
+        get: function () {
+            if (typeof window.devicePixelRatio !== 'undefined') {
+                return window.devicePixelRatio;
+            }
+            return 1;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Viewport.prototype, "lowerDesktopDPR", {
+        /**
+         * Device pixel ratio. For non-mobile devices it is always 1.
+         */
+        get: function () {
+            if (this._app.isDesktop) {
+                return 1;
+            }
+            return this.dpr;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    // Extra constructor
+    Viewport.prototype._constructor = function () {
+        _super.prototype._constructor.call(this);
+        this._setValues();
+    };
+    // Set events on resize
+    Viewport.prototype._setEvents = function () {
+        var _this = this;
+        window.addEventListener('resize', function () {
+            common_1.timeoutCallback(function () {
+                _this._onResize();
+            }, _this._app.prop.viewportResizeTimeout);
+        });
+    };
+    /**
+     * Set viewport values
+     */
+    Viewport.prototype._setValues = function () {
+        var app = this._app;
+        var html = app.html;
+        var appProp = app.prop;
+        // set sizes
+        this._width = html.clientWidth;
+        this._height = html.clientHeight;
+        this._prevSize = {
+            w: this._width,
+            h: this._height,
+        };
+        // size values
+        var width = this.width;
+        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.
+     */
+    Viewport.prototype._updateClasses = function () {
+        // set viewport type
+        var 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
+        var 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.
+     */
+    Viewport.prototype._updateBreakpointClasses = function (activeType, types) {
+        var html = this._app.html;
+        var prefix = this._app.prefix;
+        types.forEach(function (type) {
+            if (type === activeType) {
+                html.classList.add(prefix + "viewport-" + type);
+            }
+            else {
+                html.classList.remove(prefix + "viewport-" + type);
+            }
+        });
+    };
+    /**
+     * Update CSS vars
+     */
+    Viewport.prototype._updateCSSVars = function () {
+        var html = this._app.html;
+        html.style.setProperty('--vw', this.vw + "px");
+        html.style.setProperty('--vh', this.vh + "px");
+    };
+    /**
+     * Launch callbacks on resize.
+     */
+    Viewport.prototype._onResize = function () {
+        // copy previous values
+        var prevWidth = this._prevSize.w;
+        var prevHeight = this._prevSize.h;
+        // set viewport values
+        this._setValues();
+        // copy size
+        var _a = this, width = _a.width, height = _a.height;
+        // get changes in viewport
+        var 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);
+    };
+    return Viewport;
+}(Callbacks_1.Callbacks));
+exports.Viewport = Viewport;