vevet 2.0.1-dev.3 → 2.0.1-dev.30

package/build/cjs/handlers/wheel/WheelHandler.js

@@ -0,0 +1,195 @@
+"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.WheelHandler = void 0;
+var vevet_dom_1 = require("vevet-dom");
+var normalize_wheel_1 = __importDefault(require("normalize-wheel"));
+var Module_1 = require("../../base/Module");
+/**
+ * Wheel events: up & down, left & right without repeating
+
+ */
+var WheelHandler = /** @class */ (function (_super) {
+    __extends(WheelHandler, _super);
+    function WheelHandler(initialProp, init) {
+        if (init === void 0) { init = true; }
+        var _this = _super.call(this, initialProp, false) || this;
+        _this._wheelListener = undefined;
+        _this._lockWheel = false;
+        if (init) {
+            _this.init();
+        }
+        return _this;
+    }
+    WheelHandler.prototype._getDefaultProp = function () {
+        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { container: false, enabled: true, stopPropagation: false, threshold: 20 });
+    };
+    Object.defineProperty(WheelHandler.prototype, "container", {
+        /**
+         * Listener contianer
+         */
+        get: function () {
+            if (!this.prop.container) {
+                return window;
+            }
+            return this.prop.container;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    // Set Module Events
+    WheelHandler.prototype._setEvents = function () {
+        _super.prototype._setEvents.call(this);
+        if (!(this.container instanceof Window)) {
+            this._listeners.push(vevet_dom_1.addEventListener(this.container, 'mouseenter', this._handleMouseEnter.bind(this)));
+            this._listeners.push(vevet_dom_1.addEventListener(this.container, 'mouseleave', this._handleMouseLeave.bind(this)));
+        }
+        else {
+            this._toggleWheelEvent();
+        }
+    };
+    WheelHandler.prototype._onPropMutate = function () {
+        _super.prototype._onPropMutate.call(this);
+        this._toggleWheelEvent();
+    };
+    /**
+     * Handle element mouse enter
+     */
+    WheelHandler.prototype._handleMouseEnter = function () {
+        if (this.prop.enabled) {
+            this._createWheelEvent();
+        }
+    };
+    /**
+     * Handle element mouse leave
+     */
+    WheelHandler.prototype._handleMouseLeave = function () {
+        this._destroyWheelEvent();
+    };
+    /**
+     * Set wheel event
+     */
+    WheelHandler.prototype._toggleWheelEvent = function () {
+        if (this.prop.enabled) {
+            this._createWheelEvent();
+        }
+        else {
+            this._destroyWheelEvent();
+        }
+    };
+    /**
+     * Create a wheel event
+     */
+    WheelHandler.prototype._createWheelEvent = function () {
+        if (this._wheelListener) {
+            return;
+        }
+        // reset gaining
+        this._lockWheel = false;
+        if (this._lockWheelTimeout) {
+            clearTimeout(this._lockWheelTimeout);
+        }
+        // create a listener
+        this._wheelListener = vevet_dom_1.addEventListener(this.container, 'wheel', 
+        // throttle(this._handleWheel.bind(this), 200),
+        this._handleWheel.bind(this));
+    };
+    /**
+     * Destroy the wheel event
+     */
+    WheelHandler.prototype._destroyWheelEvent = function () {
+        if (!this._wheelListener) {
+            return;
+        }
+        this._wheelListener.remove();
+        this._wheelListener = undefined;
+    };
+    /**
+     * Handle wheel event
+     */
+    WheelHandler.prototype._handleWheel = function (evt) {
+        var _this = this;
+        if (!this._wheelListener) {
+            return;
+        }
+        // stop propagation
+        if (this.prop.stopPropagation) {
+            evt.preventDefault();
+            evt.stopPropagation();
+        }
+        // if locked
+        if (this._lockWheel) {
+            if (this._lockWheelTimeout) {
+                clearTimeout(this._lockWheelTimeout);
+            }
+            this._lockWheelTimeout = setTimeout(function () {
+                _this._lockWheel = false;
+            }, 300);
+            return;
+        }
+        // data
+        var delta = normalize_wheel_1.default(evt);
+        var threshold = this.prop.threshold;
+        // launch events
+        var eventFired = false;
+        // Y
+        if (delta.pixelY > threshold) {
+            this._callbacks.tbt('down', false);
+            eventFired = true;
+        }
+        else if (delta.pixelY < threshold * -1) {
+            this._callbacks.tbt('up', false);
+            eventFired = true;
+        }
+        // X
+        if (delta.pixelX > threshold) {
+            this._callbacks.tbt('right', false);
+            eventFired = true;
+        }
+        else if (delta.pixelX < threshold * -1) {
+            this._callbacks.tbt('left', false);
+            eventFired = true;
+        }
+        // lock events
+        if (eventFired) {
+            this._lockWheel = true;
+        }
+    };
+    /**
+     * Destroy the module
+     */
+    WheelHandler.prototype._destroy = function () {
+        _super.prototype._destroy.call(this);
+        this._destroyWheelEvent();
+    };
+    return WheelHandler;
+}(Module_1.Module));
+exports.WheelHandler = WheelHandler;

package/build/cjs/index.js

@@ -19,7 +19,7 @@ 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.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.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"));
@@ -43,6 +43,8 @@ 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 WheelHandler_1 = require("./handlers/wheel/WheelHandler");
+Object.defineProperty(exports, "WheelHandler", { enumerable: true, get: function () { return WheelHandler_1.WheelHandler; } });
 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");

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

@@ -2,45 +2,85 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var vevet_dom_1 = require("vevet-dom");
 var SmoothScroll_1 = require("../../components/scroll/smooth-scroll/SmoothScroll");
+var common_1 = require("../common");
+var instances = [];
 /**
  * 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,
-            });
+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 = common_1.randID('scroll-event');
+    // if a listener exists, we just add a new callback to its stack
+    if (instance) {
+        instance.callbacks.push({
+            id: callbackId,
+            callback: callback,
         });
     }
     else {
-        var outer_1;
-        if (typeof selector === 'string') {
-            outer_1 = vevet_dom_1.selectOne(selector);
+        // otherwise we create a new instance
+        instance = {
+            id: common_1.randID('scroll-event-instance'),
+            container: container,
+            callbacks: [{
+                    id: callbackId,
+                    callback: callback,
+                }],
+            isPassive: isPassive,
+            listeners: [],
+        };
+        instances.push(instance);
+        // vars
+        var listeners = instance.listeners;
+        // smooth scroll events
+        if (container instanceof SmoothScroll_1.SmoothScroll) {
+            listeners.push(container.addCallback('scroll', function () {
+                var scrollTop = container.scrollTop, scrollLeft = container.scrollLeft;
+                for (var index = 0; index < instance.callbacks.length; index += 1) {
+                    instance.callbacks[index].callback({
+                        scrollTop: scrollTop,
+                        scrollLeft: scrollLeft,
+                    });
+                }
+            }));
         }
         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,
-                });
+            // dom scroll events
+            var isWindow_1 = container instanceof Window;
+            var domContainer_1 = vevet_dom_1.selectOne(container);
+            listeners.push(vevet_dom_1.addEventListener(domContainer_1, 'scroll', function () {
+                var scrollTop = isWindow_1
+                    ? domContainer_1.pageYOffset : domContainer_1.scrollTop;
+                var scrollLeft = isWindow_1
+                    ? domContainer_1.pageXOffset : domContainer_1.scrollLeft;
+                for (var index = 0; index < instance.callbacks.length; index += 1) {
+                    instance.callbacks[index].callback({
+                        scrollTop: scrollTop,
+                        scrollLeft: scrollLeft,
+                    });
+                }
+            }, {
+                passive: isPassive,
             }));
         }
     }
     return {
         remove: function () {
-            listeners.forEach(function (listener) {
-                listener.remove();
+            var newCallbacks = instance.callbacks.filter(function (item) {
+                if (item.id !== callbackId) {
+                    return true;
+                }
+                return false;
             });
+            instance.callbacks = newCallbacks;
+            if (newCallbacks.length === 0) {
+                instance.listeners.forEach(function (listener) {
+                    listener.remove();
+                });
+                instances = instances.filter(function (item) { return item.id !== instance.id; });
+            }
         },
     };
 }

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Clamp the value between two points
+ */
+function clamp(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 = clamp;

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

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var scoped_1 = __importDefault(require("./scoped"));
+var clamp_1 = __importDefault(require("./clamp"));
+/**
+ * Get progress relatively to the scope and clamp it within two points
+ */
+function clampScoped(val, scope, clampScope) {
+    if (scope === void 0) { scope = [0, 1]; }
+    if (clampScope === void 0) { clampScope = [0, 1]; }
+    return clamp_1.default(scoped_1.default(val, scope), clampScope);
+}
+exports.default = clampScoped;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Check if the value is within the scope
+ */
+function inScope(val, scopeValue) {
+    if (scopeValue === void 0) { scopeValue = [0, 1]; }
+    return val >= scopeValue[0] && val <= scopeValue[1];
+}
+exports.default = inScope;

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

@@ -3,10 +3,18 @@ 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;
+exports.wrap = exports.clampScope = exports.inScope = exports.spreadScope = exports.scoped = exports.lerp = exports.clamp = void 0;
+var clamp_1 = __importDefault(require("./clamp"));
+exports.clamp = clamp_1.default;
 var lerp_1 = __importDefault(require("./lerp"));
 exports.lerp = lerp_1.default;
-var scopeProgress_1 = __importDefault(require("./scopeProgress"));
-exports.scopeProgress = scopeProgress_1.default;
+var scoped_1 = __importDefault(require("./scoped"));
+exports.scoped = scoped_1.default;
+var spreadScope_1 = __importDefault(require("./spreadScope"));
+exports.spreadScope = spreadScope_1.default;
+var inScope_1 = __importDefault(require("./inScope"));
+exports.inScope = inScope_1.default;
+var clampScope_1 = __importDefault(require("./clampScope"));
+exports.clampScope = clampScope_1.default;
+var wrap_1 = __importDefault(require("./wrap"));
+exports.wrap = wrap_1.default;

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

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

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Distribute scope progress among a certain quantity of timelines.
+ */
+function spreadScope(quantity, shift) {
+    var timelines = [];
+    // duration for each element
+    var duration = 1 / (quantity - shift * (quantity - 1));
+    // calculate timelines
+    for (var index = 0; index < quantity; index += 1) {
+        var start = (duration * (1 - shift)) * index;
+        var end = start + duration;
+        timelines.push([start, end]);
+    }
+    return timelines;
+}
+exports.default = spreadScope;

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Distribute scope progress among a certain quantity of timelines.
+ */
+function spreadScopeProgress(quantity, shift) {
+    var timelines = [];
+    // duration for each element
+    var duration = 1 / (quantity - shift * (quantity - 1));
+    // calculate timelines
+    for (var index = 0; index < quantity; index += 1) {
+        var start = (duration * (1 - shift)) * index;
+        var end = start + duration;
+        timelines.push([start, end]);
+    }
+    return timelines;
+}
+exports.default = spreadScopeProgress;

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Wrap values
+ */
+function wrap(min, max, value) {
+    var range = max - min;
+    return conditionalReturn(value, function (val) { return ((range + ((val - min) % range)) % range) + min; });
+}
+exports.default = wrap;
+function conditionalReturn(value, func) {
+    return value || value === 0 ? func(value) : func;
+}

package/build/es/base/Module.js

@@ -170,10 +170,8 @@ export class Module {
      * Add a viewport callback that will be removed on class destroy
      * {@see Viewport}
      */
-    addViewportCallback(target, func, data = {
-        name: this.constructor.name,
-    }) {
-        const callback = this._app.viewport.add(target, func, data);
+    addViewportCallback(target, func, data = {}) {
+        const callback = this._app.viewport.add(target, func, Object.assign(Object.assign({}, data), { name: this.constructor.name }));
         this._viewportCallbacks.push(callback);
         return callback;
     }

package/build/es/components/animation-frame/AnimationFrame.js

@@ -1,5 +1,5 @@
 import { Component } from '../../base/Component';
-import { boundVal } from '../../utils/math';
+import { clamp } from '../../utils/math';
 /**
  * Launch an animation frame with a certain FPS
  */
@@ -126,7 +126,7 @@ export class AnimationFrame extends Component {
         this._frameIndex = newFrameIndex;
         // calculate real fps
         const timeDiff = currentTime - this._prevFrameTime;
-        const realFPS = boundVal(timeDiff === 0 ? 1000 / 60 : Math.floor(1000 / timeDiff), [1, Infinity]);
+        const realFPS = clamp(timeDiff === 0 ? 1000 / 60 : Math.floor(1000 / timeDiff), [1, Infinity]);
         // launch callbacks
         this.callbacks.tbt('frame', {
             fps: this.prop.fps,

package/build/es/components/canvas/Ctx2D.js

@@ -20,7 +20,9 @@ export class Ctx2D extends Component {
         });
         this._ctx = this._canvas.getContext('2d');
         // and resize it for the first time
-        this.resize();
+        if (this.prop.initialResize) {
+            this.resize();
+        }
         // initialize the class
         if (init) {
             this.init();
@@ -60,7 +62,7 @@ export class Ctx2D extends Component {
         return this._dpr;
     }
     _getDefaultProp() {
-        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: false, append: true, updateOnResize: false, width: false, height: false, dpr: false });
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: false, append: true, updateOnResize: false, initialResize: true, resizeTimeout: 0, width: false, height: false, dpr: false });
     }
     // Set Module Events
     _setEvents() {
@@ -69,6 +71,8 @@ export class Ctx2D extends Component {
             const viewportTarget = typeof this.prop.updateOnResize === 'boolean' ? '' : this.prop.updateOnResize;
             this.addViewportCallback(viewportTarget, () => {
                 this.resize();
+            }, {
+                timeout: this.prop.resizeTimeout,
             });
             this.resize();
         }

package/build/es/components/canvas/Ctx2DPrerender.js

@@ -15,14 +15,32 @@ export class Ctx2DPrerender extends Ctx2D {
         this._prerender();
     }
     _prerender() {
+        // check if can render
+        if (this.width === 0 || this.height === 0) {
+            return;
+        }
         // check if media exists
         const { media } = this.prop;
         if (!media) {
             return;
         }
+        // get source info
+        let source;
+        let sourceWidth;
+        let sourceHeight;
+        if (media instanceof Ctx2D) {
+            source = media.canvas;
+            sourceWidth = media.width;
+            sourceHeight = media.height;
+        }
+        else {
+            source = media;
+        }
         // get media sizes
         const size = getPos({
-            source: media,
+            source,
+            sourceWidth,
+            sourceHeight,
             rule: this.prop.posRule,
             scale: 1,
             width: this.width,
@@ -30,7 +48,7 @@ export class Ctx2DPrerender extends Ctx2D {
         });
         this._ctx.clearRect(0, 0, this.width, this.height);
         // render the media
-        this._ctx.drawImage(media, 0, 0, size.sourceWidth, size.sourceHeight, size.x, size.y, size.width, size.height);
+        this._ctx.drawImage(source, size.x, size.y, size.width, size.height);
         // launch callbacks on prerender
         this.callbacks.tbt('prerender', false);
     }

package/build/es/components/loading/ProgressPreloader.js

@@ -27,6 +27,7 @@ export class ProgressPreloader extends Preloader {
                 img: true,
                 video: true,
                 custom: '.js-preload',
+                ignoreClassName: 'js-preload-ignore',
             }, calc: {
                 lerp: 0.1,
                 forceEnd: 500,
@@ -126,6 +127,9 @@ export class ProgressPreloader extends Preloader {
         if (loaders.img) {
             const imgs = selectAll('img');
             imgs.forEach((img) => {
+                if (img.classList.contains(loaders.ignoreClassName)) {
+                    return;
+                }
                 this._imgs.push(img);
                 this._resourcesTotal += 1;
             });
@@ -134,13 +138,21 @@ export class ProgressPreloader extends Preloader {
         if (loaders.video) {
             const videos = selectAll('video');
             videos.forEach((video) => {
+                if (video.classList.contains(loaders.ignoreClassName)) {
+                    return;
+                }
                 this._videos.push(video);
                 this._resourcesTotal += 1;
             });
         }
         // get custom resources
         if (loaders.custom) {
-            this._customResources = Array.from(selectAll(loaders.custom));
+            this._customResources = Array.from(selectAll(loaders.custom)).filter((el) => {
+                if (el.classList.contains(loaders.ignoreClassName)) {
+                    return false;
+                }
+                return true;
+            });
             this._resourcesTotal += this._customResources.length;
         }
     }
@@ -166,7 +178,7 @@ export class ProgressPreloader extends Preloader {
                 img.addEventListener('error', () => {
                     this._handleLoadedResource();
                 });
-                image.src = img.src;
+                image.src = img.currentSrc || img.src;
             }
         });
         // preload videos