vevet 2.2.0 → 2.5.0

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

@@ -263,7 +263,12 @@ var Viewport = /** @class */ (function (_super) {
     /**
      * Launch callbacks on resize.
      */
-    Viewport.prototype._onResize = function () {
+    Viewport.prototype._onResize = function (
+    /**
+     * force all callbacks
+     */
+    force) {
+        if (force === void 0) { force = false; }
         // copy previous values
         var prevWidth = this._prevSize.w;
         var prevHeight = this._prevSize.h;
@@ -278,29 +283,35 @@ var Viewport = /** @class */ (function (_super) {
             orientationChanged: (width > height) !== (prevWidth > prevHeight),
         };
         // only when width is changed
-        if (width !== prevWidth && height === prevHeight) {
+        if (force || (width !== prevWidth && height === prevHeight)) {
             this.tbt('w_', changes);
         }
         // only when height is changed
-        if (height !== prevHeight && width === prevWidth) {
+        if (force || (height !== prevHeight && width === prevWidth)) {
             this.tbt('h_', changes);
         }
         // when height & width are changed
-        if (width !== prevWidth && height !== prevHeight) {
+        if (force || (width !== prevWidth && height !== prevHeight)) {
             this.tbt('wh', changes);
             this.tbt('hw', changes);
         }
         // when width is changed
-        if (width !== prevWidth) {
+        if (force || width !== prevWidth) {
             this.tbt('w', changes);
         }
         // when height changed
-        if (height !== prevHeight) {
+        if (force || height !== prevHeight) {
             this.tbt('h', changes);
         }
         // on any change
         this.tbt('', changes);
     };
+    /**
+     * Force launching all callbacks
+     */
+    Viewport.prototype.forceResize = function () {
+        this._onResize(true);
+    };
     return Viewport;
 }(Callbacks_1.Callbacks));
 exports.Viewport = Viewport;

package/build/cjs/components/scroll/section/ScrollSectionProgress.js

@@ -0,0 +1,261 @@
+"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.ScrollSectionProgress = void 0;
+var vevet_dom_1 = require("vevet-dom");
+var onScroll_1 = __importDefault(require("../../../utils/listeners/onScroll"));
+var Component_1 = require("../../../base/Component");
+var clampScope_1 = __importDefault(require("../../../utils/math/clampScope"));
+var getScrollValues_1 = __importDefault(require("../../../utils/scroll/getScrollValues"));
+/**
+ * Elements into viewport
+ */
+var ScrollSectionProgress = /** @class */ (function (_super) {
+    __extends(ScrollSectionProgress, _super);
+    function ScrollSectionProgress(initialProp, init) {
+        if (init === void 0) { init = true; }
+        var _this = _super.call(this, initialProp, false) || this;
+        // get scroll container
+        if (typeof _this.prop.container === 'string') {
+            _this._scrollContainer = (0, vevet_dom_1.selectOne)(_this.prop.container);
+        }
+        else {
+            _this._scrollContainer = _this.prop.container;
+        }
+        // get section element
+        if (typeof _this.prop.section === 'string') {
+            _this._section = (0, vevet_dom_1.selectOne)(_this.prop.section);
+        }
+        else {
+            _this._section = _this.prop.section;
+        }
+        // set defaults
+        _this._progress = -0.001;
+        _this._scopeScroll = [0, 0];
+        _this._scopeIn = [0, 0];
+        _this._scopeMove = [0, 0];
+        _this._scopeOut = [0, 0];
+        // initialize the class
+        if (init) {
+            _this.init();
+        }
+        return _this;
+    }
+    ScrollSectionProgress.prototype._getDefaultProp = function () {
+        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { container: window, updateOnResize: '', resizeTimeout: 0 });
+    };
+    Object.defineProperty(ScrollSectionProgress.prototype, "scrollContainer", {
+        get: function () {
+            return this._scrollContainer;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ScrollSectionProgress.prototype, "section", {
+        get: function () {
+            return this._section;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ScrollSectionProgress.prototype, "scopeScroll", {
+        get: function () {
+            return this._scopeScroll;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ScrollSectionProgress.prototype, "scopeIn", {
+        get: function () {
+            return this._scopeIn;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ScrollSectionProgress.prototype, "scopeMove", {
+        get: function () {
+            return this._scopeMove;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ScrollSectionProgress.prototype, "scopeOut", {
+        get: function () {
+            return this._scopeOut;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ScrollSectionProgress.prototype, "progress", {
+        /**
+         * Global progress
+         */
+        get: function () {
+            return this._progress;
+        },
+        set: function (val) {
+            this._progress = val;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ScrollSectionProgress.prototype.init = function () {
+        _super.prototype.init.call(this);
+    };
+    // Set Module Events
+    ScrollSectionProgress.prototype._setEvents = function () {
+        var _this = this;
+        _super.prototype._setEvents.call(this);
+        // set resize events
+        this.addViewportCallback(this.prop.viewportTarget, function () {
+            _this.resize();
+        }, {
+            timeout: this.prop.resizeTimeout,
+        });
+        // resize on page loaded
+        this._loadedEvent = this._app.onPageLoaded();
+        this._loadedEvent.then(function () {
+            _this.resize();
+        }).catch(function () { });
+        // set scroll events
+        this._scrollEvent = (0, onScroll_1.default)({
+            container: this.prop.container,
+            callback: this._handleScroll.bind(this),
+        });
+    };
+    ScrollSectionProgress.prototype._onPropMutate = function () {
+        _super.prototype._onPropMutate.call(this);
+        this.resize();
+    };
+    Object.defineProperty(ScrollSectionProgress.prototype, "progressIn", {
+        /**
+         * 'in' progress
+         */
+        get: function () {
+            return (0, clampScope_1.default)(this.progress, this.scopeIn) || 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ScrollSectionProgress.prototype, "progressOut", {
+        /**
+         * 'out' progress
+         */
+        get: function () {
+            return (0, clampScope_1.default)(this.progress, this.scopeOut) || 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ScrollSectionProgress.prototype, "progressMove", {
+        /**
+         * 'move' progress
+         */
+        get: function () {
+            return (0, clampScope_1.default)(this.progress, this.scopeMove) || 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Handle scroll event
+     */
+    ScrollSectionProgress.prototype._handleScroll = function () {
+        // calculate scopes
+        var scrollData = (0, getScrollValues_1.default)(this.scrollContainer);
+        if (!scrollData) {
+            return;
+        }
+        this._render(scrollData);
+    };
+    /**
+     * Resize the scene
+     */
+    ScrollSectionProgress.prototype.resize = function () {
+        // calculate scopes
+        var scrollData = (0, getScrollValues_1.default)(this.scrollContainer);
+        if (!scrollData) {
+            return;
+        }
+        // get sizes
+        var bounding = this.section.getBoundingClientRect();
+        var vHeight = this._app.viewport.height;
+        // calculate scroll scope
+        var inStart = scrollData.scrollTop + bounding.top - vHeight;
+        var moveEnd = scrollData.scrollTop + bounding.top + bounding.height;
+        var scrollLine = moveEnd - inStart;
+        this._scopeScroll = [inStart, moveEnd];
+        // calculate scopes
+        this._scopeIn = [0, vHeight / scrollLine];
+        this._scopeOut = [1 - vHeight / scrollLine, 1];
+        this._scopeMove = [this._scopeIn[1], this._scopeOut[0]];
+        // launch callbacks
+        this.callbacks.tbt('resize', false);
+        // render the scene
+        this._render(scrollData, true);
+    };
+    /**
+     * Render the scene
+     */
+    ScrollSectionProgress.prototype._render = function (scrollData, force) {
+        if (force === void 0) { force = false; }
+        var canRender = this._canRender(scrollData, force);
+        if (!canRender) {
+            return;
+        }
+        this.callbacks.tbt('render', false);
+    };
+    /**
+     * Check if the section can be rendered
+     */
+    ScrollSectionProgress.prototype._canRender = function (scrollData, force) {
+        if (force === void 0) { force = false; }
+        if (!scrollData) {
+            return false;
+        }
+        var scrollTop = scrollData.scrollTop;
+        var prevProgress = this.progress;
+        var progress = (0, clampScope_1.default)(scrollTop, [this._scopeScroll[0], this._scopeScroll[1]]) || 0;
+        this.progress = progress;
+        return force || (progress !== prevProgress);
+    };
+    /**
+     * Destroy the module
+     */
+    ScrollSectionProgress.prototype._destroy = function () {
+        var _a, _b;
+        _super.prototype._destroy.call(this);
+        (_a = this._scrollEvent) === null || _a === void 0 ? void 0 : _a.remove();
+        (_b = this._loadedEvent) === null || _b === void 0 ? void 0 : _b.cancel();
+    };
+    return ScrollSectionProgress;
+}(Component_1.Component));
+exports.ScrollSectionProgress = ScrollSectionProgress;

package/build/cjs/index.js

@@ -19,10 +19,11 @@ var __importStar = (this && this.__importStar) || function (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.WheelHandler = exports.Page = exports.Plugin = exports.Component = exports.Module = exports.MutableProp = exports.Callbacks = exports.PageLoad = exports.Viewport = exports.Application = exports.GeneralTypes = exports.utils = void 0;
+exports.CustomCursor = exports.SplitText = exports.ScrollSectionProgress = 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.WheelHandler = 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 scroll = __importStar(require("./utils/scroll"));
 var GeneralTypes = __importStar(require("./utils/types/general"));
 exports.GeneralTypes = GeneralTypes;
 var Application_1 = require("./app/Application");
@@ -77,6 +78,8 @@ var SmoothScrollKeyboardPlugin_1 = require("./components/scroll/plugins/SmoothSc
 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 ScrollSectionProgress_1 = require("./components/scroll/section/ScrollSectionProgress");
+Object.defineProperty(exports, "ScrollSectionProgress", { enumerable: true, get: function () { return ScrollSectionProgress_1.ScrollSectionProgress; } });
 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");
@@ -85,5 +88,6 @@ var utils = {
     common: common,
     listeners: listeners,
     math: math,
+    scroll: scroll,
 };
 exports.utils = utils;

package/build/cjs/utils/scroll/getScrollValues.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Get scroll values of a certain element
+ */
+function getScrollValues(selector) {
+    if (selector === void 0) { selector = window; }
+    if (selector) {
+        var scrollTop = selector instanceof Window
+            ? selector.pageYOffset : selector.scrollTop;
+        var scrollLeft = selector instanceof Window
+            ? selector.pageXOffset : selector.scrollLeft;
+        return {
+            scrollTop: scrollTop,
+            scrollLeft: scrollLeft,
+        };
+    }
+    return undefined;
+}
+exports.default = getScrollValues;

package/build/cjs/utils/scroll/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.toElement = exports.to = exports.getValues = void 0;
+var getScrollValues_1 = __importDefault(require("./getScrollValues"));
+exports.getValues = getScrollValues_1.default;
+var scrollTo_1 = __importDefault(require("./scrollTo"));
+exports.to = scrollTo_1.default;
+var scrollToElement_1 = __importDefault(require("./scrollToElement"));
+exports.toElement = scrollToElement_1.default;

package/build/cjs/utils/scroll/scrollTo.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Timeline_1 = require("../../components/timeline/Timeline");
+var getScrollValues_1 = __importDefault(require("./getScrollValues"));
+/**
+ * Scroll to coordinates
+ */
+function scrollTo(_a) {
+    var _b = _a.container, container = _b === void 0 ? window : _b, _c = _a.top, top = _c === void 0 ? 0 : _c, _d = _a.left, left = _d === void 0 ? 0 : _d, _e = _a.duration, duration = _e === void 0 ? 250 : _e;
+    return new Promise(function (resolve, reject) {
+        // save start values
+        var startValues = (0, getScrollValues_1.default)(container);
+        if (startValues) {
+            // create animation
+            var timeline = new Timeline_1.Timeline({
+                duration: duration,
+            });
+            timeline.addCallback('progress', function (data) {
+                if (container) {
+                    container.scrollTo({
+                        top: startValues.scrollTop
+                            + (top - startValues.scrollTop) * data.easing,
+                        left: startValues.scrollLeft
+                            + (left - startValues.scrollLeft) * data.easing,
+                        behavior: 'auto',
+                    });
+                }
+            });
+            timeline.addCallback('end', function () {
+                resolve();
+            });
+            timeline.play();
+            return;
+        }
+        reject();
+    });
+}
+exports.default = scrollTo;

package/build/cjs/utils/scroll/scrollToElement.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var vevet_dom_1 = require("vevet-dom");
+var getScrollValues_1 = __importDefault(require("./getScrollValues"));
+var clamp_1 = __importDefault(require("../math/clamp"));
+var scrollTo_1 = __importDefault(require("./scrollTo"));
+/**
+ * Scroll to element
+ */
+function scrollToElement(_a) {
+    var _b = _a.container, container = _b === void 0 ? window : _b, el = _a.el, _c = _a.top, top = _c === void 0 ? 0 : _c, _d = _a.left, left = _d === void 0 ? 0 : _d, _e = _a.duration, duration = _e === void 0 ? 250 : _e;
+    return new Promise(function (resolve, reject) {
+        var startValues = (0, getScrollValues_1.default)(container);
+        if (startValues) {
+            var element = (0, vevet_dom_1.selectOne)(el);
+            if (element) {
+                var bounding = element.getBoundingClientRect();
+                var toTop = (0, clamp_1.default)(bounding.top + startValues.scrollTop - top, [0, Infinity]);
+                var toLeft = (0, clamp_1.default)(bounding.left + startValues.scrollLeft - left, [0, Infinity]);
+                (0, scrollTo_1.default)({
+                    container: container,
+                    top: toTop,
+                    left: toLeft,
+                    duration: duration,
+                }).then(function () {
+                    resolve();
+                }).catch(function () {
+                    reject();
+                });
+            }
+            return;
+        }
+        reject();
+    });
+}
+exports.default = scrollToElement;

package/build/cjs/utils/scroll/to.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Timeline_1 = require("../../components/timeline/Timeline");
+var getScrollValues_1 = __importDefault(require("./getScrollValues"));
+/**
+ * Scroll to coordinates
+ */
+function scrollTo(_a) {
+    var _b = _a.container, container = _b === void 0 ? window : _b, _c = _a.top, top = _c === void 0 ? 0 : _c, _d = _a.left, left = _d === void 0 ? 0 : _d, _e = _a.duration, duration = _e === void 0 ? 250 : _e;
+    return new Promise(function (resolve, reject) {
+        // save start values
+        var startValues = (0, getScrollValues_1.default)(container);
+        if (startValues) {
+            // create animation
+            var timeline = new Timeline_1.Timeline({
+                duration: duration,
+            });
+            timeline.addCallback('progress', function (data) {
+                if (container) {
+                    container.scrollTo({
+                        top: startValues.scrollTop
+                            + (top - startValues.scrollTop) * data.easing,
+                        left: startValues.scrollLeft
+                            + (left - startValues.scrollLeft) * data.easing,
+                        behavior: 'auto',
+                    });
+                }
+            });
+            timeline.addCallback('end', function () {
+                resolve();
+            });
+            timeline.play();
+            return;
+        }
+        reject();
+    });
+}
+exports.default = scrollTo;

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

@@ -194,7 +194,11 @@ export class Viewport extends Callbacks {
     /**
      * Launch callbacks on resize.
      */
-    _onResize() {
+    _onResize(
+    /**
+     * force all callbacks
+     */
+    force = false) {
         // copy previous values
         const prevWidth = this._prevSize.w;
         const prevHeight = this._prevSize.h;
@@ -209,27 +213,33 @@ export class Viewport extends Callbacks {
             orientationChanged: (width > height) !== (prevWidth > prevHeight),
         };
         // only when width is changed
-        if (width !== prevWidth && height === prevHeight) {
+        if (force || (width !== prevWidth && height === prevHeight)) {
             this.tbt('w_', changes);
         }
         // only when height is changed
-        if (height !== prevHeight && width === prevWidth) {
+        if (force || (height !== prevHeight && width === prevWidth)) {
             this.tbt('h_', changes);
         }
         // when height & width are changed
-        if (width !== prevWidth && height !== prevHeight) {
+        if (force || (width !== prevWidth && height !== prevHeight)) {
             this.tbt('wh', changes);
             this.tbt('hw', changes);
         }
         // when width is changed
-        if (width !== prevWidth) {
+        if (force || width !== prevWidth) {
             this.tbt('w', changes);
         }
         // when height changed
-        if (height !== prevHeight) {
+        if (force || height !== prevHeight) {
             this.tbt('h', changes);
         }
         // on any change
         this.tbt('', changes);
     }
+    /**
+     * Force launching all callbacks
+     */
+    forceResize() {
+        this._onResize(true);
+    }
 }