vevet 2.0.1-dev.9 → 2.0.2

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;
@@ -86,7 +94,7 @@ var Page = /** @class */ (function (_super) {
     });
     Object.defineProperty(Page.prototype, "pageClassName", {
         get: function () {
-            return this._app.prefix + "page-" + this.prop.name;
+            return "".concat(this._app.prefix, "page-").concat(this.prop.name);
         },
         enumerable: false,
         configurable: true
@@ -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/SmoothScrollKeyboardPlugin.js

@@ -119,12 +119,12 @@ var SmoothScrollKeyboardPlugin = /** @class */ (function (_super) {
     SmoothScrollKeyboardPlugin.prototype._handleTab = function () {
         var _this = this;
         // get active element and scroll to it
-        timeoutCallback_1.default(function () {
+        (0, timeoutCallback_1.default)(function () {
             var scroll = _this._component;
             var activeElement = document.activeElement;
             // skip elements that do not belong to the SmoothScroll outer
             if (!(activeElement instanceof HTMLElement)
-                || !vevet_dom_1.childOf(activeElement, scroll.outer)) {
+                || !(0, vevet_dom_1.childOf)(activeElement, scroll.outer)) {
                 return;
             }
             // get boundings

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

@@ -39,7 +39,7 @@ var ScrollEventsBase = /** @class */ (function (_super) {
         var _this = _super.call(this, initialProp, false) || this;
         // get scroll container
         if (typeof _this.prop.container === 'string') {
-            _this._scrollContainer = vevet_dom_1.selectOne(_this.prop.container);
+            _this._scrollContainer = (0, vevet_dom_1.selectOne)(_this.prop.container);
         }
         else {
             _this._scrollContainer = _this.prop.container;

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

@@ -25,16 +25,24 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 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");
-var boundVal_1 = __importDefault(require("../../../utils/math/boundVal"));
+var clamp_1 = __importDefault(require("../../../utils/math/clamp"));
 var timeoutCallback_1 = __importDefault(require("../../../utils/common/timeoutCallback"));
 /**
  * Elements into viewport
@@ -45,10 +53,10 @@ var ScrollView = /** @class */ (function (_super) {
         if (init === void 0) { init = true; }
         var _this = _super.call(this, initialProp, false) || this;
         _this._scrollEvent = undefined;
-        _this._intersectionObserver = undefined;
+        _this._intersectionObserverIn = undefined;
+        _this._intersectionObserverOut = undefined;
         _this._firstStart = true;
-        // get view elements
-        _this.updateElements();
+        _this._elements = __spreadArray([], _this.prop.elements, true);
         // initialize the class
         if (init) {
             _this.init();
@@ -57,17 +65,26 @@ var ScrollView = /** @class */ (function (_super) {
     }
     Object.defineProperty(ScrollView.prototype, "prefix", {
         get: function () {
-            return this._app.prefix + "scroll-view";
+            return "".concat(this._app.prefix, "scroll-view");
         },
         enumerable: false,
         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, resizeTimeout: 0 });
     };
+    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 () {
@@ -76,20 +93,23 @@ var ScrollView = /** @class */ (function (_super) {
         this.resize();
         this.addViewportCallback('', function () {
             _this.resize();
+        }, {
+            timeout: this.prop.resizeTimeout,
         });
     };
     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
@@ -97,85 +117,63 @@ var ScrollView = /** @class */ (function (_super) {
     ScrollView.prototype._setViewEvents = function () {
         var _this = this;
         // set intersection observer
-        if (listeners_1.intersectionObserverSupported() && this.prop.useIntersectionObserver) {
+        if ((0, listeners_1.intersectionObserverSupported)() && this.prop.useIntersectionObserver) {
             // get intersecton margins
             var scrollContainerBounding = this.scrollContainerBounding;
             var xMargin = this._firstStart
                 ? 0 : scrollContainerBounding.width * (1 - this.prop.threshold) * -1;
             var 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",
+                rootMargin: "0px ".concat(xMargin, "px ").concat(yMargin, "px 0px"),
             });
-            // add elements
-            if (this.elements) {
+            this.elements.forEach(function (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(function (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_1.default(this.prop.container, this._handleScroll.bind(this));
+            this._scrollEvent = (0, onScroll_1.default)({
+                container: this.prop.container,
+                callback: this._handleScroll.bind(this),
+            });
         }
     };
     /**
      * Remove View events: scroll or intersection
      */
     ScrollView.prototype._removeViewEvents = function () {
+        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;
-        }
-    };
-    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);
-            }
-        });
+        // 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
      */
-    ScrollView.prototype._handleIntersectionObserver = function (data) {
+    ScrollView.prototype._handleIntersectionObserverIn = function (data) {
         var parentBounding = this._firstStart ? this.scrollContainerBounding : false;
         for (var index = 0; index < data.length; index += 1) {
             var entry = data[index];
@@ -183,7 +181,9 @@ var ScrollView = /** @class */ (function (_super) {
             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
@@ -192,6 +192,17 @@ var ScrollView = /** @class */ (function (_super) {
             this.resize();
         }
     };
+    /**
+     * Event on IntersectionObserver
+     */
+    ScrollView.prototype._handleIntersectionObserverOut = function (data) {
+        for (var index = 0; index < data.length; index += 1) {
+            var entry = data[index];
+            if (!entry.isIntersecting) {
+                this._handleInOut(entry.target, entry.isIntersecting, 0);
+            }
+        }
+    };
     /**
      * Event on Scroll
      */
@@ -204,7 +215,7 @@ var ScrollView = /** @class */ (function (_super) {
      */
     ScrollView.prototype.seekBounding = function () {
         // check if calculations are done through getBoundingClientRect
-        if (listeners_1.intersectionObserverSupported() && this.prop.useIntersectionObserver) {
+        if ((0, listeners_1.intersectionObserverSupported)() && this.prop.useIntersectionObserver) {
             return;
         }
         // vars
@@ -214,7 +225,9 @@ var ScrollView = /** @class */ (function (_super) {
             var el = this.elements[index];
             var elData = this._elementInViewportData(el, scrollContainerBounding);
             var 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
@@ -230,7 +243,7 @@ var ScrollView = /** @class */ (function (_super) {
         var threshold = this._firstStart ? 1 : propThreshold;
         var bounding = el.getBoundingClientRect();
         // check if the element is intersecting
-        var isIntersecting = false;
+        var isIntersecting;
         if (bounding.top < parentBounding.top + parentBounding.height * threshold
             && bounding.left < parentBounding.left + parentBounding.width * threshold) {
             if (states === 'in') {
@@ -244,11 +257,15 @@ var ScrollView = /** @class */ (function (_super) {
                 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
         var delay = 0;
         if (!!useDelay && this._firstStart) {
-            var progress = boundVal_1.default(useDelay.dir === 'x'
+            var progress = (0, clamp_1.default)(useDelay.dir === 'x'
                 ? (bounding.left - parentBounding.left) / parentBounding.width
                 : (bounding.top - parentBounding.top) / parentBounding.height, [0, 1]);
             delay = progress * useDelay.max;
@@ -273,17 +290,19 @@ 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) {
+            (0, timeoutCallback_1.default)(function () {
+                el.classList.toggle(_this.prop.classToToggle, inViewport);
+            }, delay);
+        }
         // process callbacks
         if (inViewport && (states === 'in' || states === 'inout')) {
-            timeoutCallback_1.default(function () {
+            (0, timeoutCallback_1.default)(function () {
                 _this.callbacks.tbt('in', el);
             }, delay);
         }
         else if (!inViewport && states === 'inout') {
-            timeoutCallback_1.default(function () {
+            (0, timeoutCallback_1.default)(function () {
                 _this.callbacks.tbt('out', el);
             }, delay);
         }
@@ -299,12 +318,53 @@ var ScrollView = /** @class */ (function (_super) {
         // remove unused elements
         var elementsToRemove = this._elements.filter(function (el) { return el.scrollViewIn; });
         elementsToRemove.forEach(function (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(function (el) { return !el.scrollViewIn; });
     };
+    /**
+     * Add a view element
+     */
+    ScrollView.prototype.addElement = function (element) {
+        var _this = this;
+        var _a, _b;
+        var 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: function () {
+                _this.removeElement(element);
+            },
+        };
+    };
+    /**
+     * Remove a view element
+     */
+    ScrollView.prototype.removeElement = function (element) {
+        var _a, _b;
+        var viewEl = element;
+        viewEl.scrollViewIn = undefined;
+        this._elements = this._elements.filter(function (el) { return 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
+     */
+    ScrollView.prototype.removeElements = function () {
+        var _this = this;
+        this._elements.forEach(function (el) {
+            _this.removeElement(el);
+        });
+        this._elements = [];
+    };
     /**
      * Destroy the module
      */

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

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var vevet_dom_1 = require("vevet-dom");
 var onScroll_1 = __importDefault(require("../../../utils/listeners/onScroll"));
-var boundVal_1 = __importDefault(require("../../../utils/math/boundVal"));
+var clamp_1 = __importDefault(require("../../../utils/math/clamp"));
 var DraggerMove_1 = require("../../dragger/DraggerMove");
 var SmoothScroll_1 = require("../smooth-scroll/SmoothScroll");
 var Bar = /** @class */ (function () {
@@ -26,18 +26,18 @@ var Bar = /** @class */ (function () {
         this._actionTimeout = undefined;
         this._dragger = undefined;
         // create outer
-        var outerClassNames = prefix + " " + prefix + "_" + dir;
+        var outerClassNames = "".concat(prefix, " ").concat(prefix, "_").concat(dir);
         if (container instanceof Window) {
             outerClassNames += ' in-window';
         }
-        this._outer = vevet_dom_1.createElement('div', {
+        this._outer = (0, vevet_dom_1.createElement)('div', {
             parent: domParent,
             class: outerClassNames,
         });
         // create a thumb
-        this._thumb = vevet_dom_1.createElement('div', {
+        this._thumb = (0, vevet_dom_1.createElement)('div', {
             parent: this._outer,
-            class: prefix + "__thumb " + prefix + "__thumb_" + dir,
+            class: "".concat(prefix, "__thumb ").concat(prefix, "__thumb_").concat(dir),
         });
         // set auto hide classes
         if (autoHide) {
@@ -153,11 +153,14 @@ var Bar = /** @class */ (function () {
     Bar.prototype._setEvents = function () {
         var _this = this;
         // set hover events
-        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)));
+        this._listeners.push((0, vevet_dom_1.addEventListener)(this.outer, 'mouseenter', this._handleHover.bind(this, true)));
+        this._listeners.push((0, 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 = (0, onScroll_1.default)({
+            container: this.prop.container,
+            callback: function (data) {
+                _this._handleScroll(data);
+            },
         });
         // set dragger
         if (this.prop.isDraggable) {
@@ -263,12 +266,12 @@ var Bar = /** @class */ (function () {
      */
     Bar.prototype._renderThumb = function () {
         // calculate progress
-        var progress = boundVal_1.default(this._scrollVal / this.scrollLine, [0, 1]);
+        var progress = (0, clamp_1.default)(this._scrollVal / this.scrollLine, [0, 1]);
         // calculate transforms
         var x = this.isX ? (this._outerWidth - this._thumbWidth) * progress : 0;
         var y = this.isY ? (this._outerHeight - this._thumbHeight) * progress : 0;
         // render the thumb
-        this._thumb.style.transform = "translate(" + x + "px, " + y + "px)";
+        this._thumb.style.transform = "translate(".concat(x, "px, ").concat(y, "px)");
     };
     /**
      * Resize the scene
@@ -282,12 +285,12 @@ var Bar = /** @class */ (function () {
         // calculate thumb sizes
         if (this.prop.autoSize) {
             if (this.isX) {
-                var barSize = boundVal_1.default(this._outerWidth / (this.scrollWidth / (this.scrollWidth - scrollLine)), [minSize, Infinity]);
-                thumb.style.width = barSize + "px";
+                var barSize = (0, clamp_1.default)(this._outerWidth / (this.scrollWidth / (this.scrollWidth - scrollLine)), [minSize, Infinity]);
+                thumb.style.width = "".concat(barSize, "px");
             }
             else {
-                var barSize = boundVal_1.default(this._outerHeight / (this.scrollHeight / (this.scrollHeight - scrollLine)), [minSize, Infinity]);
-                thumb.style.height = barSize + "px";
+                var barSize = (0, clamp_1.default)(this._outerHeight / (this.scrollHeight / (this.scrollHeight - scrollLine)), [minSize, Infinity]);
+                thumb.style.height = "".concat(barSize, "px");
             }
         }
         // get thumb sizes