vevet 1.4.27 → 2.0.1-dev.3

package/build/cjs/components/timeline/Timeline.js

@@ -0,0 +1,190 @@
+"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 __());
+    };
+})();
+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.Timeline = void 0;
+var StaticTimeline_1 = require("./StaticTimeline");
+var boundVal_1 = __importDefault(require("../../utils/math/boundVal"));
+/**
+ * Timeline is an animation helper.
+ */
+var Timeline = /** @class */ (function (_super) {
+    __extends(Timeline, _super);
+    function Timeline(initialProp, init) {
+        if (init === void 0) { init = true; }
+        var _this = _super.call(this, initialProp, false) || this;
+        // set default variables
+        _this._isPlaying = false;
+        _this._isReversed = false;
+        _this._isPaused = false;
+        _this._animationFrameLastTime = 0;
+        if (init) {
+            _this.init();
+        }
+        return _this;
+    }
+    /**
+     * Get default properties
+     */
+    Timeline.prototype._getDefaultProp = function () {
+        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { duration: 1000, reset: false, destroyOnEnd: false });
+    };
+    Object.defineProperty(Timeline.prototype, "isPlaying", {
+        /**
+         * Check if timeline is playing
+         */
+        get: function () {
+            return typeof this._animationFrame !== 'undefined';
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Timeline.prototype, "isReversed", {
+        /**
+         * Check if timeline is reversed
+         */
+        get: function () {
+            return this._isReversed;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Timeline.prototype, "isPaused", {
+        /**
+         * Check if timeline is paused
+         */
+        get: function () {
+            return this._isPaused;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Play the timeline
+     */
+    Timeline.prototype.play = function () {
+        if (this._destroyed) {
+            return;
+        }
+        if (this.prop.reset && this.progress === 1) {
+            this._progress = 0;
+        }
+        this._isReversed = false;
+        this._isPaused = false;
+        if (!this.isPlaying) {
+            this._animationFrameLastTime = +new Date();
+            this._animate();
+        }
+    };
+    /**
+     * Play reversed timeline
+     */
+    Timeline.prototype.reverse = function () {
+        if (this._destroyed) {
+            return;
+        }
+        if (this.prop.reset && this.progress === 0) {
+            this._progress = 1;
+        }
+        this._isReversed = true;
+        this._isPaused = false;
+        if (!this.isPlaying) {
+            this._animationFrameLastTime = +new Date();
+            this._animate();
+        }
+    };
+    /**
+     * Pause animation
+     */
+    Timeline.prototype.pause = function () {
+        if (this._destroyed) {
+            return;
+        }
+        this._isPaused = true;
+        if (this._animationFrame) {
+            window.cancelAnimationFrame(this._animationFrame);
+        }
+        this._animationFrame = undefined;
+    };
+    /**
+     * Start animation
+     */
+    Timeline.prototype._animate = function () {
+        // stop if animation is paused
+        if (this._isPaused) {
+            return;
+        }
+        var isReversed = this.isReversed;
+        // calculate difference between frames
+        var currentTime = +new Date();
+        var frameDiff = Math.abs(this._animationFrameLastTime - currentTime);
+        this._animationFrameLastTime = currentTime;
+        // calculate current progress
+        var progressIterator = frameDiff / this.prop.duration / (isReversed ? -1 : 1);
+        var progressTarget = boundVal_1.default(this.progress + progressIterator, [0, 1]);
+        this.progress = progressTarget;
+        // end animation
+        if ((progressTarget === 1 && !isReversed)
+            || (progressTarget === 0 && isReversed)) {
+            this._isReversed = false;
+            this._isPaused = false;
+            this._animationFrame = undefined;
+            return;
+        }
+        // continue animation
+        this._animationFrame = window.requestAnimationFrame(this._animate.bind(this));
+    };
+    /**
+     * Events on progress
+     */
+    Timeline.prototype._handleProgress = function () {
+        _super.prototype._handleProgress.call(this);
+        var progress = this._progress;
+        // launch callbacks
+        if (progress === 0) {
+            this.callbacks.tbt('start', false);
+        }
+        else if (progress === 1) {
+            this.callbacks.tbt('end', false);
+            if (this.prop.destroyOnEnd) {
+                this.destroy();
+            }
+        }
+    };
+    /**
+     * Destroy the timeline
+     */
+    Timeline.prototype._destroy = function () {
+        this.pause();
+        _super.prototype._destroy.call(this);
+    };
+    return Timeline;
+}(StaticTimeline_1.StaticTimeline));
+exports.Timeline = Timeline;

package/build/cjs/index.js

@@ -0,0 +1,87 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomCursor = exports.SplitText = exports.SmoothScrollDragPlugin = exports.SmoothScrollKeyboardPlugin = exports.ScrollView = exports.ScrollEventsBase = exports.ScrollBar = exports.SmoothScroll = exports.Ctx2DPrerender = exports.Ctx2D = exports.DraggerDirection = exports.DraggerMove = exports.Dragger = exports.ProgressPreloader = exports.Preloader = exports.Timeline = exports.StaticTimeline = exports.AnimationFrame = exports.Page = exports.Plugin = exports.Component = exports.Module = exports.MutableProp = exports.Callbacks = exports.PageLoad = exports.Viewport = exports.Application = exports.GeneralTypes = exports.utils = void 0;
+var common = __importStar(require("./utils/common"));
+var listeners = __importStar(require("./utils/listeners"));
+var math = __importStar(require("./utils/math"));
+var GeneralTypes = __importStar(require("./utils/types/general"));
+exports.GeneralTypes = GeneralTypes;
+var Application_1 = require("./app/Application");
+Object.defineProperty(exports, "Application", { enumerable: true, get: function () { return Application_1.Application; } });
+var Viewport_1 = require("./app/events/Viewport");
+Object.defineProperty(exports, "Viewport", { enumerable: true, get: function () { return Viewport_1.Viewport; } });
+var PageLoad_1 = require("./app/events/PageLoad");
+Object.defineProperty(exports, "PageLoad", { enumerable: true, get: function () { return PageLoad_1.PageLoad; } });
+var Callbacks_1 = require("./base/Callbacks");
+Object.defineProperty(exports, "Callbacks", { enumerable: true, get: function () { return Callbacks_1.Callbacks; } });
+var MutableProp_1 = require("./base/MutableProp");
+Object.defineProperty(exports, "MutableProp", { enumerable: true, get: function () { return MutableProp_1.MutableProp; } });
+var Module_1 = require("./base/Module");
+Object.defineProperty(exports, "Module", { enumerable: true, get: function () { return Module_1.Module; } });
+var Component_1 = require("./base/Component");
+Object.defineProperty(exports, "Component", { enumerable: true, get: function () { return Component_1.Component; } });
+var Plugin_1 = require("./base/Plugin");
+Object.defineProperty(exports, "Plugin", { enumerable: true, get: function () { return Plugin_1.Plugin; } });
+var Page_1 = require("./components/page/Page");
+Object.defineProperty(exports, "Page", { enumerable: true, get: function () { return Page_1.Page; } });
+var AnimationFrame_1 = require("./components/animation-frame/AnimationFrame");
+Object.defineProperty(exports, "AnimationFrame", { enumerable: true, get: function () { return AnimationFrame_1.AnimationFrame; } });
+var StaticTimeline_1 = require("./components/timeline/StaticTimeline");
+Object.defineProperty(exports, "StaticTimeline", { enumerable: true, get: function () { return StaticTimeline_1.StaticTimeline; } });
+var Timeline_1 = require("./components/timeline/Timeline");
+Object.defineProperty(exports, "Timeline", { enumerable: true, get: function () { return Timeline_1.Timeline; } });
+var Preloader_1 = require("./components/loading/Preloader");
+Object.defineProperty(exports, "Preloader", { enumerable: true, get: function () { return Preloader_1.Preloader; } });
+var ProgressPreloader_1 = require("./components/loading/ProgressPreloader");
+Object.defineProperty(exports, "ProgressPreloader", { enumerable: true, get: function () { return ProgressPreloader_1.ProgressPreloader; } });
+var Dragger_1 = require("./components/dragger/Dragger");
+Object.defineProperty(exports, "Dragger", { enumerable: true, get: function () { return Dragger_1.Dragger; } });
+var DraggerMove_1 = require("./components/dragger/DraggerMove");
+Object.defineProperty(exports, "DraggerMove", { enumerable: true, get: function () { return DraggerMove_1.DraggerMove; } });
+var DraggerDirection_1 = require("./components/dragger/DraggerDirection");
+Object.defineProperty(exports, "DraggerDirection", { enumerable: true, get: function () { return DraggerDirection_1.DraggerDirection; } });
+var Ctx2D_1 = require("./components/canvas/Ctx2D");
+Object.defineProperty(exports, "Ctx2D", { enumerable: true, get: function () { return Ctx2D_1.Ctx2D; } });
+var Ctx2DPrerender_1 = require("./components/canvas/Ctx2DPrerender");
+Object.defineProperty(exports, "Ctx2DPrerender", { enumerable: true, get: function () { return Ctx2DPrerender_1.Ctx2DPrerender; } });
+var SmoothScroll_1 = require("./components/scroll/smooth-scroll/SmoothScroll");
+Object.defineProperty(exports, "SmoothScroll", { enumerable: true, get: function () { return SmoothScroll_1.SmoothScroll; } });
+var ScrollBar_1 = require("./components/scroll/scrollbar/ScrollBar");
+Object.defineProperty(exports, "ScrollBar", { enumerable: true, get: function () { return ScrollBar_1.ScrollBar; } });
+var ScrollEventsBase_1 = require("./components/scroll/scrollable/ScrollEventsBase");
+Object.defineProperty(exports, "ScrollEventsBase", { enumerable: true, get: function () { return ScrollEventsBase_1.ScrollEventsBase; } });
+var ScrollView_1 = require("./components/scroll/scrollable/ScrollView");
+Object.defineProperty(exports, "ScrollView", { enumerable: true, get: function () { return ScrollView_1.ScrollView; } });
+var SmoothScrollKeyboardPlugin_1 = require("./components/scroll/plugins/SmoothScrollKeyboardPlugin");
+Object.defineProperty(exports, "SmoothScrollKeyboardPlugin", { enumerable: true, get: function () { return SmoothScrollKeyboardPlugin_1.SmoothScrollKeyboardPlugin; } });
+var SmoothScrollDragPlugin_1 = require("./components/scroll/plugins/SmoothScrollDragPlugin");
+Object.defineProperty(exports, "SmoothScrollDragPlugin", { enumerable: true, get: function () { return SmoothScrollDragPlugin_1.SmoothScrollDragPlugin; } });
+var SplitText_1 = require("./components/text/SplitText");
+Object.defineProperty(exports, "SplitText", { enumerable: true, get: function () { return SplitText_1.SplitText; } });
+var CustomCursor_1 = require("./components/cursor/CustomCursor");
+Object.defineProperty(exports, "CustomCursor", { enumerable: true, get: function () { return CustomCursor_1.CustomCursor; } });
+var utils = {
+    common: common,
+    listeners: listeners,
+    math: math,
+};
+exports.utils = utils;

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

@@ -0,0 +1,12 @@
+"use strict";
+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;
+var mergeWithoutArrays_1 = __importDefault(require("./mergeWithoutArrays"));
+exports.mergeWithoutArrays = mergeWithoutArrays_1.default;
+var timeoutCallback_1 = __importDefault(require("./timeoutCallback"));
+exports.timeoutCallback = timeoutCallback_1.default;

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

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var lodash_mergewith_1 = __importDefault(require("lodash.mergewith"));
+/**
+ * Deep merge of two objects except for arrays.
+ * The function doesn't change the "object" and "source".
+ */
+function mergeWithoutArrays(object, source) {
+    return lodash_mergewith_1.default(object, source, function (objValue, srcValue) {
+        if (Array.isArray(objValue)) {
+            return srcValue;
+        }
+        return undefined;
+    });
+}
+exports.default = mergeWithoutArrays;

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Launch a function in a certain amount of time
+ * If the timeout argument is zero, the callback will be launched synchronously
+ */
+function timeoutCallback(callback, timeout) {
+    if (timeout === 0) {
+        callback();
+    }
+    else {
+        setTimeout(function () {
+            callback();
+        }, timeout);
+    }
+}
+exports.default = timeoutCallback;

package/build/cjs/utils/errors.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.throwVevetAppError = exports.vevetAppErrorText = void 0;
+exports.vevetAppErrorText = "Vevet.Application does not exist yet. \nCall \"new Vevet.Application()\" before using all the stuff";
+function throwVevetAppError() {
+    throw new Error(exports.vevetAppErrorText);
+}
+exports.throwVevetAppError = throwVevetAppError;

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

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.intersectionObserverSupported = exports.onScroll = void 0;
+var onScroll_1 = __importDefault(require("./onScroll"));
+exports.onScroll = onScroll_1.default;
+var intersectionObserverSupported_1 = __importDefault(require("./intersectionObserverSupported"));
+exports.intersectionObserverSupported = intersectionObserverSupported_1.default;

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function intersectionObserverSupported() {
+    if (!('IntersectionObserver' in window)
+        || !('IntersectionObserverEntry' in window)
+        || !('intersectionRatio' in window.IntersectionObserverEntry.prototype)) {
+        return false;
+    }
+    return true;
+}
+exports.default = intersectionObserverSupported;

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

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var vevet_dom_1 = require("vevet-dom");
+var SmoothScroll_1 = require("../../components/scroll/smooth-scroll/SmoothScroll");
+/**
+ * Add OnScroll event
+ */
+function onScroll(selector, callback) {
+    var listeners = [];
+    if (selector instanceof SmoothScroll_1.SmoothScroll) {
+        selector.addCallback('scroll', function () {
+            callback({
+                scrollTop: selector.scrollTop,
+                scrollLeft: selector.scrollLeft,
+            });
+        });
+    }
+    else {
+        var outer_1;
+        if (typeof selector === 'string') {
+            outer_1 = vevet_dom_1.selectOne(selector);
+        }
+        else {
+            outer_1 = selector;
+        }
+        if (outer_1) {
+            listeners.push(vevet_dom_1.addEventListener(outer_1, 'scroll', function () {
+                var scrollTop = outer_1 instanceof Window
+                    ? outer_1.pageYOffset : outer_1.scrollTop;
+                var scrollLeft = outer_1 instanceof Window
+                    ? outer_1.pageXOffset : outer_1.scrollLeft;
+                callback({
+                    scrollTop: scrollTop,
+                    scrollLeft: scrollLeft,
+                });
+            }));
+        }
+    }
+    return {
+        remove: function () {
+            listeners.forEach(function (listener) {
+                listener.remove();
+            });
+        },
+    };
+}
+exports.default = onScroll;

package/build/cjs/utils/math/boundVal.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Bound a value between two points
+ */
+function boundVal(val, scope) {
+    if (scope === void 0) { scope = [0, 1]; }
+    if (val < scope[0]) {
+        return scope[0];
+    }
+    if (val > scope[1]) {
+        return scope[1];
+    }
+    return val;
+}
+exports.default = boundVal;

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

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scopeProgress = exports.lerp = exports.boundVal = void 0;
+var boundVal_1 = __importDefault(require("./boundVal"));
+exports.boundVal = boundVal_1.default;
+var lerp_1 = __importDefault(require("./lerp"));
+exports.lerp = lerp_1.default;
+var scopeProgress_1 = __importDefault(require("./scopeProgress"));
+exports.scopeProgress = scopeProgress_1.default;

package/build/cjs/utils/math/lerp.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Linear interpolation
+ */
+function lerp(current, target, ease, approximationLeft) {
+    if (approximationLeft === void 0) { approximationLeft = 0.001; }
+    var val = current * (1 - ease) + target * ease;
+    var diff = Math.abs(target - val);
+    if (diff <= approximationLeft) {
+        return target;
+    }
+    return val;
+}
+exports.default = lerp;

package/build/cjs/utils/math/scopeProgress.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Get progress relatively to the scope.
+ *
+ * @example
+ *
+ * scopeProgress(.35, [0, 1]);
+ * // => .5
+ * scopeProgress(.35, [.25, 1]);
+ * // => .133
+ */
+function scopeProgress(
+/**
+ * Current progress
+ */
+progress, 
+/**
+ * Progress scope
+ */
+scope) {
+    var result = (progress - scope[0]) / (scope[1] - scope[0]);
+    return result;
+}
+exports.default = scopeProgress;

package/build/cjs/utils/types/general.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/cjs/utils/types/utility.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });