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

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

@@ -48,14 +48,32 @@ var Ctx2DPrerender = /** @class */ (function (_super) {
         this._prerender();
     };
     Ctx2DPrerender.prototype._prerender = function () {
+        // check if can render
+        if (this.width === 0 || this.height === 0) {
+            return;
+        }
         // check if media exists
         var media = this.prop.media;
         if (!media) {
             return;
         }
+        // get source info
+        var source;
+        var sourceWidth;
+        var sourceHeight;
+        if (media instanceof Ctx2D_1.Ctx2D) {
+            source = media.canvas;
+            sourceWidth = media.width;
+            sourceHeight = media.height;
+        }
+        else {
+            source = media;
+        }
         // get media sizes
         var size = get_image_pos_1.getPos({
-            source: media,
+            source: source,
+            sourceWidth: sourceWidth,
+            sourceHeight: sourceHeight,
             rule: this.prop.posRule,
             scale: 1,
             width: this.width,
@@ -63,7 +81,7 @@ var Ctx2DPrerender = /** @class */ (function (_super) {
         });
         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/cjs/components/loading/ProgressPreloader.js

@@ -62,6 +62,7 @@ var ProgressPreloader = /** @class */ (function (_super) {
                 img: true,
                 video: true,
                 custom: '.js-preload',
+                ignoreClassName: 'js-preload-ignore',
             }, calc: {
                 lerp: 0.1,
                 forceEnd: 500,
@@ -192,6 +193,9 @@ var ProgressPreloader = /** @class */ (function (_super) {
         if (loaders.img) {
             var imgs = vevet_dom_1.selectAll('img');
             imgs.forEach(function (img) {
+                if (img.classList.contains(loaders.ignoreClassName)) {
+                    return;
+                }
                 _this._imgs.push(img);
                 _this._resourcesTotal += 1;
             });
@@ -200,13 +204,21 @@ var ProgressPreloader = /** @class */ (function (_super) {
         if (loaders.video) {
             var videos = vevet_dom_1.selectAll('video');
             videos.forEach(function (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(vevet_dom_1.selectAll(loaders.custom));
+            this._customResources = Array.from(vevet_dom_1.selectAll(loaders.custom)).filter(function (el) {
+                if (el.classList.contains(loaders.ignoreClassName)) {
+                    return false;
+                }
+                return true;
+            });
             this._resourcesTotal += this._customResources.length;
         }
     };
@@ -233,7 +245,7 @@ var ProgressPreloader = /** @class */ (function (_super) {
                 img.addEventListener('error', function () {
                     _this._handleLoadedResource();
                 });
-                image.src = img.src;
+                image.src = img.currentSrc || img.src;
             }
         });
         // preload videos

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

@@ -45,6 +45,7 @@ var Page = /** @class */ (function (_super) {
         if (init === void 0) { init = true; }
         var _this = _super.call(this, initialProp, false) || this;
         // set default vars
+        _this._blocked = false;
         _this._created = false;
         _this._shown = false;
         _this._hidden = false;
@@ -56,6 +57,13 @@ var Page = /** @class */ (function (_super) {
         }
         return _this;
     }
+    Object.defineProperty(Page.prototype, "blocked", {
+        get: function () {
+            return this._blocked;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Page.prototype, "created", {
         get: function () {
             return this._created;
@@ -103,11 +111,12 @@ var Page = /** @class */ (function (_super) {
         if (viaAJAX === void 0) { viaAJAX = false; }
         return new Promise(function (resolve, reject) {
             _this.canCreate().then(function () {
-                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;
@@ -119,7 +128,11 @@ var Page = /** @class */ (function (_super) {
                 // actions
                 _this._create().then(function () {
                     _this.callbacks.tbt('create', false);
+                    _this._blocked = false;
+                    _this._created = true;
                     resolve();
+                }).catch(function () {
+                    reject();
                 });
             }).catch(function () {
                 reject();
@@ -154,18 +167,23 @@ var Page = /** @class */ (function (_super) {
         var _this = this;
         return new Promise(function (resolve, reject) {
             _this.canShow().then(function () {
-                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(function () {
                     _this.callbacks.tbt('show', false);
+                    _this._blocked = false;
+                    _this._shown = true;
                     resolve();
+                }).catch(function () {
+                    reject();
                 });
                 // launch events
             }).catch(function () {
@@ -201,18 +219,23 @@ var Page = /** @class */ (function (_super) {
         var _this = this;
         return new Promise(function (resolve, reject) {
             _this.canHide().then(function () {
-                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(function () {
                     _this.callbacks.tbt('hide', false);
+                    _this._blocked = false;
+                    _this._hidden = true;
                     resolve();
+                }).catch(function () {
+                    reject();
                 });
             }).catch(function () {
                 reject();
@@ -247,21 +270,26 @@ var Page = /** @class */ (function (_super) {
         var _this = this;
         return new Promise(function (resolve, reject) {
             _this.canDestroy().then(function () {
-                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(function () {
+                    _this._blocked = false;
+                    _this._destroyed = true;
                     resolve();
+                }).catch(function () {
+                    reject();
                 });
             }).catch(function () {
                 reject();

package/build/cjs/components/scroll/plugins/SmoothScrollDragPlugin.js

@@ -37,12 +37,13 @@ var SmoothScrollDragPlugin = /** @class */ (function (_super) {
     __extends(SmoothScrollDragPlugin, _super);
     function SmoothScrollDragPlugin(initialProp) {
         var _this = _super.call(this, initialProp) || this;
+        _this._dragger = undefined;
         _this._componentEvents = [];
         _this._currentLerp = false;
         return _this;
     }
     SmoothScrollDragPlugin.prototype._getDefaultProp = function () {
-        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { enabled: true, speed: 1, lerp: false, reverseDir: false });
+        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { enabled: true, speed: 1, lerp: false, reverseDir: false, stopPropagation: false });
     };
     Object.defineProperty(SmoothScrollDragPlugin.prototype, "isDragging", {
         /**
@@ -89,7 +90,9 @@ var SmoothScrollDragPlugin = /** @class */ (function (_super) {
             container: component.outer,
         });
         this._dragger.addCallback('start', this._handleDragStart.bind(this));
-        this._dragger.addCallback('move', this._handleDragMove.bind(this));
+        this._dragger.addCallback('move', function (data) {
+            _this._handleDragMove(data);
+        });
         this._dragger.addCallback('end', this._handleDragEnd.bind(this));
         this._componentEvents.push(component.addCallback('wheel', function () {
             var _a;
@@ -118,9 +121,10 @@ var SmoothScrollDragPlugin = /** @class */ (function (_super) {
         if (!component.prop.enabled) {
             return;
         }
-        // set classes
-        component.outer.classList.add(draggingClassName);
-        component.container.classList.add(draggingClassName);
+        // check scrollable area
+        if (component.maxScrollableWidth <= 0 && component.maxScrollableHeight <= 0) {
+            return;
+        }
         // change lerp
         var lerp = this.prop.lerp;
         if (typeof lerp !== 'boolean') {
@@ -131,6 +135,8 @@ var SmoothScrollDragPlugin = /** @class */ (function (_super) {
                 },
             });
         }
+        // launch events
+        this._callbacks.tbt('start', false);
     };
     /**
      * Callback on dragging move
@@ -140,6 +146,28 @@ var SmoothScrollDragPlugin = /** @class */ (function (_super) {
         if (!component.prop.enabled) {
             return;
         }
+        // check scrollable area
+        if (component.maxScrollableWidth <= 0 && component.maxScrollableHeight <= 0) {
+            return;
+        }
+        var evt = data.evt;
+        // get difference between coordinates and decide
+        // if we need to stop propagation
+        var stopPropagation = this.prop.stopPropagation;
+        if (stopPropagation) {
+            if (!evt.cancelable) {
+                return;
+            }
+            var diffX = Math.abs(data.coords.x - data.start.x);
+            var diffY = Math.abs(data.coords.y - data.start.y);
+            if (((diffX > stopPropagation.threshold) && stopPropagation.dir === 'x')
+                || ((diffY > stopPropagation.threshold) && stopPropagation.dir === 'y')) {
+                if (evt.cancelable) {
+                    evt.preventDefault();
+                    evt.stopPropagation();
+                }
+            }
+        }
         var _a = this.prop, speed = _a.speed, reverseDir = _a.reverseDir;
         // get coordinates
         var x = data.step.x * speed;
@@ -147,6 +175,11 @@ var SmoothScrollDragPlugin = /** @class */ (function (_super) {
         // update scroll values
         component.targetLeft -= !reverseDir ? x : y;
         component.targetTop -= !reverseDir ? y : x;
+        // set classes
+        component.outer.classList.add(draggingClassName);
+        component.container.classList.add(draggingClassName);
+        // launch events
+        this._callbacks.tbt('move', false);
     };
     /**
      * Callback on dragging end
@@ -165,6 +198,8 @@ var SmoothScrollDragPlugin = /** @class */ (function (_super) {
             });
             this._currentLerp = false;
         }
+        // launch events
+        this._callbacks.tbt('end', false);
     };
     /**
      * Destroy the plugin

package/build/cjs/components/scroll/plugins/SmoothScrollKeyboardPlugin.js

@@ -59,6 +59,15 @@ var SmoothScrollKeyboardPlugin = /** @class */ (function (_super) {
                 return;
             }
         }
+        // check if the scroll container is in viewport
+        var viewport = this._app.viewport;
+        var bounding = component.outer.getBoundingClientRect();
+        if (!(bounding.left < viewport.width
+            && bounding.right > 0
+            && bounding.top < viewport.height
+            && bounding.bottom > 0)) {
+            return;
+        }
         // update scroll values
         var scrollIterator = 40;
         switch (e.keyCode) {

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

@@ -25,12 +25,16 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScrollView = void 0;
-var vevet_dom_1 = require("vevet-dom");
 var ScrollEventsBase_1 = require("./ScrollEventsBase");
 var onScroll_1 = __importDefault(require("../../../utils/listeners/onScroll"));
 var listeners_1 = require("../../../utils/listeners");
@@ -44,9 +48,10 @@ var ScrollView = /** @class */ (function (_super) {
     function ScrollView(initialProp, init) {
         if (init === void 0) { init = true; }
         var _this = _super.call(this, initialProp, false) || this;
+        _this._scrollEvent = undefined;
+        _this._intersectionObserver = undefined;
         _this._firstStart = true;
-        // get view elements
-        _this.updateElements();
+        _this._elements = __spreadArray([], _this.prop.elements);
         // initialize the class
         if (init) {
             _this.init();
@@ -61,11 +66,20 @@ var ScrollView = /** @class */ (function (_super) {
         configurable: true
     });
     ScrollView.prototype._getDefaultProp = function () {
-        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { container: window, elements: "." + this.prefix + "__el", threshold: 0.9, states: 'in', classToToggle: 'viewed', useDelay: false, useIntersectionObserver: true });
+        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { enabled: true, container: window, elements: [], threshold: 0.9, states: 'in', classToToggle: 'viewed', useDelay: false, useIntersectionObserver: true });
     };
+    Object.defineProperty(ScrollView.prototype, "elements", {
+        /**
+         * Elements to seek
+         */
+        get: function () {
+            return this._elements;
+        },
+        enumerable: false,
+        configurable: true
+    });
     ScrollView.prototype.init = function () {
         _super.prototype.init.call(this);
-        this.seekBounding();
     };
     // Set Module Events
     ScrollView.prototype._setEvents = function () {
@@ -78,16 +92,17 @@ var ScrollView = /** @class */ (function (_super) {
     };
     ScrollView.prototype._onPropMutate = function () {
         _super.prototype._onPropMutate.call(this);
-        this._removeViewEvents();
-        this.updateElements();
-        this._setViewEvents();
+        this.resize();
     };
     /**
      * Resize the scene
      */
     ScrollView.prototype.resize = function () {
         this._removeViewEvents();
-        this._setViewEvents();
+        if (this.prop.enabled) {
+            this._setViewEvents();
+            this.seekBounding();
+        }
     };
     /**
      * Set View events: scroll or intersection
@@ -109,16 +124,17 @@ var ScrollView = /** @class */ (function (_super) {
                 rootMargin: "0px " + xMargin + "px " + yMargin + "px 0px",
             });
             // add elements
-            if (this.elements) {
-                this.elements.forEach(function (el) {
-                    var _a;
-                    (_a = _this._intersectionObserver) === null || _a === void 0 ? void 0 : _a.observe(el);
-                });
-            }
+            this.elements.forEach(function (el) {
+                var _a;
+                (_a = _this._intersectionObserver) === null || _a === void 0 ? void 0 : _a.observe(el);
+            });
         }
         else {
             // set scroll bounding events
-            this._scrollEvent = onScroll_1.default(this.prop.container, this._handleScroll.bind(this));
+            this._scrollEvent = onScroll_1.default({
+                container: this.prop.container,
+                callback: this._handleScroll.bind(this),
+            });
         }
     };
     /**
@@ -136,40 +152,6 @@ var ScrollView = /** @class */ (function (_super) {
             this._intersectionObserver = undefined;
         }
     };
-    Object.defineProperty(ScrollView.prototype, "elements", {
-        /**
-         * Element to seek
-         */
-        get: function () {
-            return this._elements;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * Update elements
-     */
-    ScrollView.prototype.updateElements = function () {
-        var _this = this;
-        // check if elements exist
-        if (typeof this.elements === 'undefined') {
-            this._elements = [];
-        }
-        // unobserve old elements
-        this.elements.forEach(function (el) {
-            if (_this._intersectionObserver) {
-                _this._intersectionObserver.unobserve(el);
-            }
-        });
-        // update elements
-        this._elements = Array.from(vevet_dom_1.selectAll(this.prop.elements, this.domParent || undefined)).filter(function (el) { return !el.classList.contains(_this.prop.classToToggle); });
-        // add them to the observer
-        this._elements.forEach(function (el) {
-            if (_this._intersectionObserver) {
-                _this._intersectionObserver.observe(el);
-            }
-        });
-    };
     /**
      * Event on IntersectionObserver
      */
@@ -271,9 +253,11 @@ var ScrollView = /** @class */ (function (_super) {
         // update props
         el.scrollViewIn = inViewport;
         // toggle classes
-        timeoutCallback_1.default(function () {
-            el.classList.toggle(_this.prop.classToToggle, inViewport);
-        }, delay);
+        if (this.prop.classToToggle) {
+            timeoutCallback_1.default(function () {
+                el.classList.toggle(_this.prop.classToToggle, inViewport);
+            }, delay);
+        }
         // process callbacks
         if (inViewport && (states === 'in' || states === 'inout')) {
             timeoutCallback_1.default(function () {
@@ -303,6 +287,36 @@ var ScrollView = /** @class */ (function (_super) {
         });
         this._elements = this._elements.filter(function (el) { return !el.scrollViewIn; });
     };
+    /**
+     * Add a view element
+     */
+    ScrollView.prototype.addElement = function (element) {
+        this._elements.push(element);
+        if (this._intersectionObserver) {
+            this._intersectionObserver.observe(element);
+        }
+    };
+    /**
+     * Remove a view element
+     */
+    ScrollView.prototype.removeElement = function (element) {
+        this._elements = this._elements.filter(function (el) { return el !== element; });
+        if (this._intersectionObserver) {
+            this._intersectionObserver.unobserve(element);
+        }
+    };
+    /**
+     * Remove all view elements
+     */
+    ScrollView.prototype.removeElements = function () {
+        var _this = this;
+        this._elements.forEach(function (el) {
+            if (_this._intersectionObserver) {
+                _this._intersectionObserver.unobserve(el);
+            }
+        });
+        this._elements = [];
+    };
     /**
      * Destroy the module
      */

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

@@ -22,6 +22,9 @@ var Bar = /** @class */ (function () {
             left: 0,
             top: 0,
         };
+        this._scrollEvent = undefined;
+        this._actionTimeout = undefined;
+        this._dragger = undefined;
         // create outer
         var outerClassNames = prefix + " " + prefix + "_" + dir;
         if (container instanceof Window) {
@@ -153,8 +156,11 @@ var Bar = /** @class */ (function () {
         this._listeners.push(vevet_dom_1.addEventListener(this.outer, 'mouseenter', this._handleHover.bind(this, true)));
         this._listeners.push(vevet_dom_1.addEventListener(this.outer, 'mouseleave', this._handleHover.bind(this, false)));
         // set scroll events
-        this._scrollEvent = onScroll_1.default(this.prop.container, function (data) {
-            _this._handleScroll(data);
+        this._scrollEvent = onScroll_1.default({
+            container: this.prop.container,
+            callback: function (data) {
+                _this._handleScroll(data);
+            },
         });
         // set dragger
         if (this.prop.isDraggable) {

package/build/cjs/components/scroll/smooth-scroll/SmoothScroll.js

@@ -55,6 +55,8 @@ var SmoothScroll = /** @class */ (function (_super) {
         _this._clientWidth = 0;
         _this._clientHeight = 0;
         _this._instant = false;
+        _this._animationFrame = undefined;
+        _this._outerAnimationFrameEvent = undefined;
         _this._currentFPS = 60;
         // get outer elements
         _this._outer = vevet_dom_1.selectOne(selectors.outer);
@@ -85,9 +87,11 @@ var SmoothScroll = /** @class */ (function (_super) {
         }
         _this._elementsLength = _this._elements.length;
         // add will-change
-        _this._elements.forEach(function (el) {
-            el.style.willChange = 'transform';
-        });
+        if (_this.prop.useWillChange) {
+            _this._elements.forEach(function (el) {
+                el.style.willChange = 'transform';
+            });
+        }
         // initialize the class
         if (init) {
             _this.init();
@@ -320,6 +324,10 @@ var SmoothScroll = /** @class */ (function (_super) {
             this.targetLeft = parseInt(this.targetLeft.toFixed(0), 10);
             this.targetTop = parseInt(this.targetTop.toFixed(0), 10);
         }
+        // set scroll classes
+        var hasScroll = this.maxScrollableHeight > 0 || this.maxScrollableWidth > 0;
+        outer.classList.toggle('has-scroll', hasScroll);
+        outer.classList.toggle('no-scroll', !hasScroll);
         // render elements
         this._updateElementsProp();
         // this.render();

package/build/cjs/components/text/SplitText.js

@@ -64,7 +64,7 @@ var SplitText = /** @class */ (function (_super) {
         return _this;
     }
     SplitText.prototype._getDefaultProp = function () {
-        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { container: "#" + this.prefix, appendLetters: true, appendLines: false });
+        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { container: "#" + this.prefix, appendLetters: true, appendLines: false, viewportTarget: '' });
     };
     Object.defineProperty(SplitText.prototype, "prefix", {
         get: function () {
@@ -110,7 +110,7 @@ var SplitText = /** @class */ (function (_super) {
         // split the text
         this.splitText();
         if (this.prop.appendLines) {
-            this.addViewportCallback('', function () {
+            this.addViewportCallback(this.prop.viewportTarget, function () {
                 _this.splitText();
             });
         }
@@ -157,6 +157,7 @@ var SplitText = /** @class */ (function (_super) {
             // get type of the char
             var charCode = char.charCodeAt(0);
             var isWhitespace = charCode === 32 || charCode === 160;
+            var isSeparator = [45, 8208, 8211, 8212, 8722].includes(charCode);
             var isNewLine = charCode === 10;
             // add elements
             if (isWhitespace) {
@@ -177,6 +178,21 @@ var SplitText = /** @class */ (function (_super) {
             if (!_this.prop.appendLetters) {
                 currentWord.el.innerHTML = currentWord.content;
             }
+            // go to next word if needed
+            if (isSeparator) {
+                wordIndex += 1;
+            }
+        });
+        // only filled words
+        this._words = this._words.filter(function (word, index) {
+            if (word.content.length === 0) {
+                if (index > 0) {
+                    _this._words[index - 1].whitespace = word.whitespace;
+                    _this._words[index - 1].br = word.br;
+                }
+                return false;
+            }
+            return true;
         });
     };
     /**

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

@@ -44,6 +44,7 @@ var Timeline = /** @class */ (function (_super) {
         _this._isPlaying = false;
         _this._isReversed = false;
         _this._isPaused = false;
+        _this._animationFrame = undefined;
         _this._animationFrameLastTime = 0;
         if (init) {
             _this.init();