vevet 2.0.1-dev.2 → 2.0.1-dev.20

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/index.js

@@ -3,10 +3,14 @@ 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;
+exports.wrap = exports.spreadScopeProgress = 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;
+var spreadScopeProgress_1 = __importDefault(require("./spreadScopeProgress"));
+exports.spreadScopeProgress = spreadScopeProgress_1.default;
+var wrap_1 = __importDefault(require("./wrap"));
+exports.wrap = wrap_1.default;

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/app/Application.js

@@ -7,77 +7,6 @@ import { PageLoad } from './events/PageLoad';
  * Vevet Application
  */
 export class Application {
-    /**
-     * Application properties.
-     */
-    _prop;
-    /**
-     * Application properties.
-     */
-    get prop() {
-        return this._prop;
-    }
-    /**
-     * Default properties.
-     */
-    get defaultProp() {
-        return {
-            tablet: 1199,
-            phone: 899,
-            prefix: 'v-',
-            easing: [0.25, 0.1, 0.25, 1],
-            viewportResizeTimeout: 0,
-        };
-    }
-    /**
-     * Vevet prefix.
-     */
-    _prefix;
-    get prefix() {
-        return this._prefix;
-    }
-    /**
-     * If is phone
-     */
-    _isPhone;
-    get isPhone() {
-        return this._isPhone;
-    }
-    /**
-     * If tablet
-     */
-    _isTablet;
-    get isTablet() {
-        return this._isTablet;
-    }
-    /**
-     * If mobile device
-     */
-    _isMobile;
-    get isMobile() {
-        return this._isMobile;
-    }
-    /**
-     * If desktop device
-     */
-    _isDesktop;
-    get isDesktop() {
-        return this._isDesktop;
-    }
-    /**
-     * OS name
-     */
-    _osName;
-    get osName() {
-        return this._osName;
-    }
-    /**
-     * OS name
-     */
-    _browserName;
-    get browserName() {
-        return this._browserName;
-    }
     /**
      * @example
      * const app = Application({
@@ -85,15 +14,20 @@ export class Application {
      * });
      */
     constructor(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 = {
-            ...this.defaultProp,
-            ...data,
-        };
+        this._prop = Object.assign(Object.assign({}, this.defaultProp), data);
         this._prefix = this.prop.prefix;
         // initialize the application
         // Define that you're using Vevet
@@ -113,7 +47,7 @@ export class Application {
         // get browser info
         const browserData = detect();
         // get OS name
-        if (browserData?.os) {
+        if (browserData === null || browserData === void 0 ? void 0 : browserData.os) {
             const osName = browserData.os.split(' ')[0].toLowerCase();
             this.html.classList.add(`${this.prefix}os-${osName}`);
             this._osName = osName;
@@ -122,7 +56,7 @@ export class Application {
             this._osName = '';
         }
         // get browser name
-        if (browserData?.name) {
+        if (browserData === null || browserData === void 0 ? void 0 : browserData.name) {
             const browserName = browserData.name.toLowerCase();
             this.html.classList.add(`${this.prefix}browser-${browserName}`);
             this._browserName = browserName;
@@ -135,6 +69,45 @@ export class Application {
         this._pageLoad = new PageLoad();
         this._viewport = new Viewport();
     }
+    /**
+     * Application properties.
+     */
+    get prop() {
+        return this._prop;
+    }
+    /**
+     * Default properties.
+     */
+    get defaultProp() {
+        return {
+            tablet: 1199,
+            phone: 899,
+            prefix: 'v-',
+            easing: [0.25, 0.1, 0.25, 1],
+            viewportResizeTimeout: 0,
+        };
+    }
+    get prefix() {
+        return this._prefix;
+    }
+    get isPhone() {
+        return this._isPhone;
+    }
+    get isTablet() {
+        return this._isTablet;
+    }
+    get isMobile() {
+        return this._isMobile;
+    }
+    get isDesktop() {
+        return this._isDesktop;
+    }
+    get osName() {
+        return this._osName;
+    }
+    get browserName() {
+        return this._browserName;
+    }
     /**
      * Get document element.
      */
@@ -153,10 +126,6 @@ export class Application {
     get body() {
         return document.body;
     }
-    /**
-     * Pages (instances)
-     */
-    _pages = [];
     /**
      * Get an array of existing pages.
      * A new element is added to the array when {@linkcode Vevet.Page.create} is called.
@@ -164,10 +133,6 @@ export class Application {
     get pages() {
         return this._pages;
     }
-    /**
-     * Current Page (instance).
-     */
-    _page = false;
     /**
      * Get the current page instance.
      */
@@ -212,10 +177,6 @@ export class Application {
             });
         });
     }
-    /**
-     * Page Load Callbacks
-     */
-    _pageLoad;
     get pageLoad() {
         return this._pageLoad;
     }
@@ -229,10 +190,6 @@ export class Application {
             });
         });
     }
-    /**
-     * Viewport Callbacks
-     */
-    _viewport;
     get viewport() {
         return this._viewport;
     }

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

@@ -3,18 +3,14 @@ import { Callbacks } from '../../base/Callbacks';
  * Callbacks on page loaded.
  */
 export class PageLoad extends Callbacks {
-    /**
-     * If the page is loaded.
-     */
-    _loaded;
-    get loaded() {
-        return this._loaded;
-    }
     constructor() {
         super(false);
         this._loaded = false;
         this._init();
     }
+    get loaded() {
+        return this._loaded;
+    }
     _setEvents() {
         if (document.readyState === 'complete') {
             this._handleLoaded();

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

@@ -22,17 +22,19 @@ var OrientationTypes;
  * Here the names of the OS, Browser, and Device are also available. <br>
  */
 export class Viewport extends Callbacks {
-    /**
-     * Current Viewport width
-     */
-    _width;
+    constructor() {
+        super(false);
+        this._width = 0;
+        this._height = 0;
+        this._prevSize = { w: 0, h: 0 };
+        this._isDesktop = false;
+        this._isTablet = false;
+        this._isPhone = false;
+        this._init();
+    }
     get width() {
         return this._width;
     }
-    /**
-     * Current Viewport height
-     */
-    _height;
     get height() {
         return this._height;
     }
@@ -48,10 +50,6 @@ export class Viewport extends Callbacks {
     get vh() {
         return this.height / 100;
     }
-    /**
-     * Previous Viewport size
-     */
-    _prevSize;
     /**
      * Get previous Viewport size
      */
@@ -70,24 +68,12 @@ export class Viewport extends Callbacks {
     get isPortrait() {
         return this.width < this.height;
     }
-    /**
-     * If desktop size
-     */
-    _isDesktop;
     get isDesktop() {
         return this._isDesktop;
     }
-    /**
-     * If tablet size
-     */
-    _isTablet;
     get isTablet() {
         return this._isTablet;
     }
-    /**
-     * If phone size
-     */
-    _isPhone;
     get isPhone() {
         return this._isPhone;
     }
@@ -109,16 +95,6 @@ export class Viewport extends Callbacks {
         }
         return this.dpr;
     }
-    constructor() {
-        super(false);
-        this._width = 0;
-        this._height = 0;
-        this._prevSize = { w: 0, h: 0 };
-        this._isDesktop = false;
-        this._isTablet = false;
-        this._isPhone = false;
-        this._init();
-    }
     // Extra constructor
     _constructor() {
         super._constructor();