vevet 2.0.1-dev.9 → 2.0.2

package/build/cjs/utils/math/{spreadScopeProgress.js → spreadScope.js}

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 /**
  * Distribute scope progress among a certain quantity of timelines.
  */
-function spreadScopeProgress(quantity, shift) {
+function spreadScope(quantity, shift) {
     var timelines = [];
     // duration for each element
     var duration = 1 / (quantity - shift * (quantity - 1));
@@ -15,4 +15,4 @@ function spreadScopeProgress(quantity, shift) {
     }
     return timelines;
 }
-exports.default = spreadScopeProgress;
+exports.default = spreadScope;

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

@@ -24,9 +24,23 @@ export class Ctx2DPrerender extends Ctx2D {
         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,
@@ -34,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

package/build/es/components/page/Page.js

@@ -11,6 +11,7 @@ export class Page extends Component {
     constructor(initialProp, init = true) {
         super(initialProp, false);
         // set default vars
+        this._blocked = false;
         this._created = false;
         this._shown = false;
         this._hidden = false;
@@ -21,6 +22,9 @@ export class Page extends Component {
             this.init();
         }
     }
+    get blocked() {
+        return this._blocked;
+    }
     get created() {
         return this._created;
     }
@@ -46,11 +50,12 @@ export class Page extends Component {
     create(viaAJAX = false) {
         return new Promise((resolve, reject) => {
             this.canCreate().then(() => {
-                if (this.created) {
+                if (this.created || this.blocked) {
+                    reject();
                     return;
                 }
                 // update vars
-                this._created = true;
+                this._blocked = true;
                 this._shown = false;
                 this._hidden = false;
                 this._destroyed = false;
@@ -62,7 +67,11 @@ export class Page extends Component {
                 // actions
                 this._create().then(() => {
                     this.callbacks.tbt('create', false);
+                    this._blocked = false;
+                    this._created = true;
                     resolve();
+                }).catch(() => {
+                    reject();
                 });
             }).catch(() => {
                 reject();
@@ -95,18 +104,23 @@ export class Page extends Component {
     show() {
         return new Promise((resolve, reject) => {
             this.canShow().then(() => {
-                if (this.shown) {
+                if (this.shown || this.blocked) {
+                    reject();
                     return;
                 }
                 // update vars
+                this._blocked = true;
                 this._created = true;
-                this._shown = true;
                 this._hidden = false;
                 this._destroyed = false;
                 // actions
                 this._show().then(() => {
                     this.callbacks.tbt('show', false);
+                    this._blocked = false;
+                    this._shown = true;
                     resolve();
+                }).catch(() => {
+                    reject();
                 });
                 // launch events
             }).catch(() => {
@@ -140,18 +154,23 @@ export class Page extends Component {
     hide() {
         return new Promise((resolve, reject) => {
             this.canHide().then(() => {
-                if (this.hidden) {
+                if (this.hidden || this.blocked) {
+                    reject();
                     return;
                 }
                 // update vars
+                this._blocked = true;
                 this._created = true;
                 this._shown = false;
-                this._hidden = true;
                 this._destroyed = false;
                 // actions
                 this._hide().then(() => {
                     this.callbacks.tbt('hide', false);
+                    this._blocked = false;
+                    this._hidden = true;
                     resolve();
+                }).catch(() => {
+                    reject();
                 });
             }).catch(() => {
                 reject();
@@ -184,21 +203,26 @@ export class Page extends Component {
     destroy() {
         return new Promise((resolve, reject) => {
             this.canDestroy().then(() => {
-                if (this.destroyed) {
+                if (this.destroyed || this.blocked) {
+                    reject();
                     return;
                 }
                 // change vars
+                this._blocked = true;
                 this._created = false;
                 this._shown = false;
                 this._hidden = true;
-                this._destroyed = true;
                 // update page
                 this._app.page = false;
                 // remove page class
                 this._app.html.classList.remove(this.pageClassName);
                 // actions
                 this._destroy().then(() => {
+                    this._blocked = false;
+                    this._destroyed = true;
                     resolve();
+                }).catch(() => {
+                    reject();
                 });
             }).catch(() => {
                 reject();

package/build/es/components/scroll/scrollable/ScrollView.js

@@ -1,8 +1,7 @@
-import { selectAll } from 'vevet-dom';
 import { ScrollEventsBase } from './ScrollEventsBase';
 import onScroll from '../../../utils/listeners/onScroll';
 import { intersectionObserverSupported } from '../../../utils/listeners';
-import boundVal from '../../../utils/math/boundVal';
+import clamp from '../../../utils/math/clamp';
 import timeoutCallback from '../../../utils/common/timeoutCallback';
 /**
  * Elements into viewport
@@ -11,10 +10,10 @@ export class ScrollView extends ScrollEventsBase {
     constructor(initialProp, init = true) {
         super(initialProp, false);
         this._scrollEvent = undefined;
-        this._intersectionObserver = undefined;
+        this._intersectionObserverIn = undefined;
+        this._intersectionObserverOut = undefined;
         this._firstStart = true;
-        // get view elements
-        this.updateElements();
+        this._elements = [...this.prop.elements];
         // initialize the class
         if (init) {
             this.init();
@@ -24,11 +23,16 @@ export class ScrollView extends ScrollEventsBase {
         return `${this._app.prefix}scroll-view`;
     }
     _getDefaultProp() {
-        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: window, elements: `.${this.prefix}__el`, threshold: 0.9, states: 'in', classToToggle: 'viewed', useDelay: false, useIntersectionObserver: true });
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { enabled: true, container: window, elements: [], threshold: 0.9, states: 'in', classToToggle: 'viewed', useDelay: false, useIntersectionObserver: true, resizeTimeout: 0 });
+    }
+    /**
+     * Elements to seek
+     */
+    get elements() {
+        return this._elements;
     }
     init() {
         super.init();
-        this.seekBounding();
     }
     // Set Module Events
     _setEvents() {
@@ -36,20 +40,23 @@ export class ScrollView extends ScrollEventsBase {
         this.resize();
         this.addViewportCallback('', () => {
             this.resize();
+        }, {
+            timeout: this.prop.resizeTimeout,
         });
     }
     _onPropMutate() {
         super._onPropMutate();
-        this._removeViewEvents();
-        this.updateElements();
-        this._setViewEvents();
+        this.resize();
     }
     /**
      * Resize the scene
      */
     resize() {
         this._removeViewEvents();
-        this._setViewEvents();
+        if (this.prop.enabled) {
+            this._setViewEvents();
+            this.seekBounding();
+        }
     }
     /**
      * Set View events: scroll or intersection
@@ -63,73 +70,56 @@ export class ScrollView extends ScrollEventsBase {
                 ? 0 : scrollContainerBounding.width * (1 - this.prop.threshold) * -1;
             const yMargin = this._firstStart
                 ? 0 : scrollContainerBounding.height * (1 - this.prop.threshold) * -1;
-            // create intersection observer
-            this._intersectionObserver = new IntersectionObserver(this._handleIntersectionObserver.bind(this), {
+            // create intersection observers
+            this._intersectionObserverIn = new IntersectionObserver(this._handleIntersectionObserverIn.bind(this), {
                 root: this.intersectionRoot,
                 threshold: 0,
                 rootMargin: `0px ${xMargin}px ${yMargin}px 0px`,
             });
-            // add elements
-            if (this.elements) {
+            this.elements.forEach((el) => {
+                var _a;
+                (_a = this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.observe(el);
+            });
+            if (this.prop.states === 'inout') {
+                this._intersectionObserverOut = new IntersectionObserver(this._handleIntersectionObserverOut.bind(this), {
+                    root: this.intersectionRoot,
+                    threshold: 0,
+                    rootMargin: '0px 0px 0px 0px',
+                });
                 this.elements.forEach((el) => {
                     var _a;
-                    (_a = this._intersectionObserver) === null || _a === void 0 ? void 0 : _a.observe(el);
+                    (_a = this._intersectionObserverOut) === null || _a === void 0 ? void 0 : _a.observe(el);
                 });
             }
         }
         else {
             // set scroll bounding events
-            this._scrollEvent = onScroll(this.prop.container, this._handleScroll.bind(this));
+            this._scrollEvent = onScroll({
+                container: this.prop.container,
+                callback: this._handleScroll.bind(this),
+            });
         }
     }
     /**
      * Remove View events: scroll or intersection
      */
     _removeViewEvents() {
+        var _a, _b;
         // remove scroll events
         if (this._scrollEvent) {
             this._scrollEvent.remove();
             this._scrollEvent = undefined;
         }
-        // destroy intersection observer
-        if (this._intersectionObserver) {
-            this._intersectionObserver.disconnect();
-            this._intersectionObserver = undefined;
-        }
-    }
-    /**
-     * Element to seek
-     */
-    get elements() {
-        return this._elements;
-    }
-    /**
-     * Update elements
-     */
-    updateElements() {
-        // check if elements exist
-        if (typeof this.elements === 'undefined') {
-            this._elements = [];
-        }
-        // unobserve old elements
-        this.elements.forEach((el) => {
-            if (this._intersectionObserver) {
-                this._intersectionObserver.unobserve(el);
-            }
-        });
-        // update elements
-        this._elements = Array.from(selectAll(this.prop.elements, this.domParent || undefined)).filter((el) => !el.classList.contains(this.prop.classToToggle));
-        // add them to the observer
-        this._elements.forEach((el) => {
-            if (this._intersectionObserver) {
-                this._intersectionObserver.observe(el);
-            }
-        });
+        // destroy intersection observers
+        (_a = this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this._intersectionObserverIn = undefined;
+        (_b = this._intersectionObserverOut) === null || _b === void 0 ? void 0 : _b.disconnect();
+        this._intersectionObserverOut = undefined;
     }
     /**
      * Event on IntersectionObserver
      */
-    _handleIntersectionObserver(data) {
+    _handleIntersectionObserverIn(data) {
         const parentBounding = this._firstStart ? this.scrollContainerBounding : false;
         for (let index = 0; index < data.length; index += 1) {
             const entry = data[index];
@@ -137,7 +127,9 @@ export class ScrollView extends ScrollEventsBase {
             if (this._firstStart && !!parentBounding && entry.isIntersecting) {
                 delay = this._elementInViewportData(entry.target, parentBounding).delay;
             }
-            this._handleInOut(entry.target, entry.isIntersecting, delay);
+            if (entry.isIntersecting) {
+                this._handleInOut(entry.target, entry.isIntersecting, delay);
+            }
         }
         this._processUnusedElements();
         // change states
@@ -146,6 +138,17 @@ export class ScrollView extends ScrollEventsBase {
             this.resize();
         }
     }
+    /**
+     * Event on IntersectionObserver
+     */
+    _handleIntersectionObserverOut(data) {
+        for (let index = 0; index < data.length; index += 1) {
+            const entry = data[index];
+            if (!entry.isIntersecting) {
+                this._handleInOut(entry.target, entry.isIntersecting, 0);
+            }
+        }
+    }
     /**
      * Event on Scroll
      */
@@ -168,7 +171,9 @@ export class ScrollView extends ScrollEventsBase {
             const el = this.elements[index];
             const elData = this._elementInViewportData(el, scrollContainerBounding);
             const delay = elData.isIntersecting ? elData.delay : 0;
-            this._handleInOut(el, elData.isIntersecting, delay);
+            if (typeof elData.isIntersecting === 'boolean') {
+                this._handleInOut(el, elData.isIntersecting, delay);
+            }
         }
         this._processUnusedElements();
         // change states
@@ -184,7 +189,7 @@ export class ScrollView extends ScrollEventsBase {
         const threshold = this._firstStart ? 1 : propThreshold;
         const bounding = el.getBoundingClientRect();
         // check if the element is intersecting
-        let isIntersecting = false;
+        let isIntersecting;
         if (bounding.top < parentBounding.top + parentBounding.height * threshold
             && bounding.left < parentBounding.left + parentBounding.width * threshold) {
             if (states === 'in') {
@@ -198,11 +203,15 @@ export class ScrollView extends ScrollEventsBase {
                 isIntersecting = true;
             }
         }
+        else if (bounding.top > parentBounding.top + parentBounding.height
+            || bounding.left > parentBounding.left + parentBounding.width) {
+            isIntersecting = false;
+        }
         // calculate delay only if it is enabled & calculations
         // are done for the first time
         let delay = 0;
         if (!!useDelay && this._firstStart) {
-            const progress = boundVal(useDelay.dir === 'x'
+            const progress = clamp(useDelay.dir === 'x'
                 ? (bounding.left - parentBounding.left) / parentBounding.width
                 : (bounding.top - parentBounding.top) / parentBounding.height, [0, 1]);
             delay = progress * useDelay.max;
@@ -225,9 +234,11 @@ export class ScrollView extends ScrollEventsBase {
         // update props
         el.scrollViewIn = inViewport;
         // toggle classes
-        timeoutCallback(() => {
-            el.classList.toggle(this.prop.classToToggle, inViewport);
-        }, delay);
+        if (this.prop.classToToggle) {
+            timeoutCallback(() => {
+                el.classList.toggle(this.prop.classToToggle, inViewport);
+            }, delay);
+        }
         // process callbacks
         if (inViewport && (states === 'in' || states === 'inout')) {
             timeoutCallback(() => {
@@ -250,12 +261,51 @@ export class ScrollView extends ScrollEventsBase {
         // remove unused elements
         const elementsToRemove = this._elements.filter((el) => el.scrollViewIn);
         elementsToRemove.forEach((el) => {
-            if (this._intersectionObserver) {
-                this._intersectionObserver.unobserve(el);
-            }
+            var _a, _b;
+            (_a = this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.unobserve(el);
+            (_b = this._intersectionObserverOut) === null || _b === void 0 ? void 0 : _b.unobserve(el);
         });
         this._elements = this._elements.filter((el) => !el.scrollViewIn);
     }
+    /**
+     * Add a view element
+     */
+    addElement(element) {
+        var _a, _b;
+        const viewEl = element;
+        viewEl.scrollViewIn = undefined;
+        this._elements.push(element);
+        (_a = this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.observe(element);
+        (_b = this._intersectionObserverOut) === null || _b === void 0 ? void 0 : _b.observe(element);
+        if (this.prop.enabled) {
+            this.seekBounding();
+        }
+        return {
+            remove: () => {
+                this.removeElement(element);
+            },
+        };
+    }
+    /**
+     * Remove a view element
+     */
+    removeElement(element) {
+        var _a, _b;
+        const viewEl = element;
+        viewEl.scrollViewIn = undefined;
+        this._elements = this._elements.filter((el) => el !== element);
+        (_a = this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.unobserve(element);
+        (_b = this._intersectionObserverOut) === null || _b === void 0 ? void 0 : _b.unobserve(element);
+    }
+    /**
+     * Remove all view elements
+     */
+    removeElements() {
+        this._elements.forEach((el) => {
+            this.removeElement(el);
+        });
+        this._elements = [];
+    }
     /**
      * Destroy the module
      */

package/build/es/components/scroll/scrollbar/Bar.js

@@ -1,6 +1,6 @@
 import { addEventListener, createElement } from 'vevet-dom';
 import onScroll from '../../../utils/listeners/onScroll';
-import boundVal from '../../../utils/math/boundVal';
+import clamp from '../../../utils/math/clamp';
 import { DraggerMove } from '../../dragger/DraggerMove';
 import { SmoothScroll } from '../smooth-scroll/SmoothScroll';
 export default class Bar {
@@ -106,8 +106,11 @@ export default class Bar {
         this._listeners.push(addEventListener(this.outer, 'mouseenter', this._handleHover.bind(this, true)));
         this._listeners.push(addEventListener(this.outer, 'mouseleave', this._handleHover.bind(this, false)));
         // set scroll events
-        this._scrollEvent = onScroll(this.prop.container, (data) => {
-            this._handleScroll(data);
+        this._scrollEvent = onScroll({
+            container: this.prop.container,
+            callback: (data) => {
+                this._handleScroll(data);
+            },
         });
         // set dragger
         if (this.prop.isDraggable) {
@@ -212,7 +215,7 @@ export default class Bar {
      */
     _renderThumb() {
         // calculate progress
-        const progress = boundVal(this._scrollVal / this.scrollLine, [0, 1]);
+        const progress = clamp(this._scrollVal / this.scrollLine, [0, 1]);
         // calculate transforms
         const x = this.isX ? (this._outerWidth - this._thumbWidth) * progress : 0;
         const y = this.isY ? (this._outerHeight - this._thumbHeight) * progress : 0;
@@ -231,11 +234,11 @@ export default class Bar {
         // calculate thumb sizes
         if (this.prop.autoSize) {
             if (this.isX) {
-                const barSize = boundVal(this._outerWidth / (this.scrollWidth / (this.scrollWidth - scrollLine)), [minSize, Infinity]);
+                const barSize = clamp(this._outerWidth / (this.scrollWidth / (this.scrollWidth - scrollLine)), [minSize, Infinity]);
                 thumb.style.width = `${barSize}px`;
             }
             else {
-                const barSize = boundVal(this._outerHeight / (this.scrollHeight / (this.scrollHeight - scrollLine)), [minSize, Infinity]);
+                const barSize = clamp(this._outerHeight / (this.scrollHeight / (this.scrollHeight - scrollLine)), [minSize, Infinity]);
                 thumb.style.height = `${barSize}px`;
             }
         }

package/build/es/components/scroll/scrollbar/ScrollBar.js

@@ -56,7 +56,7 @@ export class ScrollBar extends Component {
         }
     }
     _getDefaultProp() {
-        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: window, domParent: false, draggable: true, autoSize: true, autoHide: true, minSize: 50, optimizeCalculations: false, isDraggable: true, draggableScrollBehavior: 'smooth' });
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: window, domParent: false, draggable: true, autoSize: true, autoHide: true, minSize: 50, optimizeCalculations: false, resizeTimeout: 0, isDraggable: true, draggableScrollBehavior: 'smooth' });
     }
     get prefix() {
         return `${this._app.prefix}scrollbar`;
@@ -115,6 +115,8 @@ export class ScrollBar extends Component {
         else {
             this.addViewportCallback('', () => {
                 this.resize();
+            }, {
+                timeout: this.prop.resizeTimeout,
             });
         }
         this.resize();