vevet 2.0.1-dev.14 → 2.0.1-dev.18

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");
@@ -47,8 +51,7 @@ var ScrollView = /** @class */ (function (_super) {
         _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();
@@ -63,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 () {
@@ -80,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
@@ -111,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),
+            });
         }
     };
     /**
@@ -138,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
      */
@@ -273,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 () {
@@ -305,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

@@ -156,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

@@ -87,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();

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();
             });
         }

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

@@ -2,49 +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, props) {
-    var listeners = [];
-    var smoothScrollEvent;
-    if (selector instanceof SmoothScroll_1.SmoothScroll) {
-        smoothScrollEvent = 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,
-                });
-            }, props ? {
-                passive: props.passive,
-            } : undefined));
+            // 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;
             });
-            smoothScrollEvent === null || smoothScrollEvent === void 0 ? void 0 : smoothScrollEvent.remove();
+            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/es/components/scroll/scrollable/ScrollView.js

@@ -1,4 +1,3 @@
-import { selectAll } from 'vevet-dom';
 import { ScrollEventsBase } from './ScrollEventsBase';
 import onScroll from '../../../utils/listeners/onScroll';
 import { intersectionObserverSupported } from '../../../utils/listeners';
@@ -13,8 +12,7 @@ export class ScrollView extends ScrollEventsBase {
         this._scrollEvent = undefined;
         this._intersectionObserver = undefined;
         this._firstStart = true;
-        // get view elements
-        this.updateElements();
+        this._elements = [...this.prop.elements];
         // initialize the class
         if (init) {
             this.init();
@@ -24,11 +22,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 });
+    }
+    /**
+     * Elements to seek
+     */
+    get elements() {
+        return this._elements;
     }
     init() {
         super.init();
-        this.seekBounding();
     }
     // Set Module Events
     _setEvents() {
@@ -40,16 +43,17 @@ export class ScrollView extends ScrollEventsBase {
     }
     _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
@@ -70,16 +74,17 @@ export class ScrollView extends ScrollEventsBase {
                 rootMargin: `0px ${xMargin}px ${yMargin}px 0px`,
             });
             // add elements
-            if (this.elements) {
-                this.elements.forEach((el) => {
-                    var _a;
-                    (_a = this._intersectionObserver) === null || _a === void 0 ? void 0 : _a.observe(el);
-                });
-            }
+            this.elements.forEach((el) => {
+                var _a;
+                (_a = this._intersectionObserver) === 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),
+            });
         }
     }
     /**
@@ -97,35 +102,6 @@ export class ScrollView extends ScrollEventsBase {
             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);
-            }
-        });
-    }
     /**
      * Event on IntersectionObserver
      */
@@ -225,9 +201,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(() => {
@@ -256,6 +234,35 @@ export class ScrollView extends ScrollEventsBase {
         });
         this._elements = this._elements.filter((el) => !el.scrollViewIn);
     }
+    /**
+     * Add a view element
+     */
+    addElement(element) {
+        this._elements.push(element);
+        if (this._intersectionObserver) {
+            this._intersectionObserver.observe(element);
+        }
+    }
+    /**
+     * Remove a view element
+     */
+    removeElement(element) {
+        this._elements = this._elements.filter((el) => el !== element);
+        if (this._intersectionObserver) {
+            this._intersectionObserver.unobserve(element);
+        }
+    }
+    /**
+     * Remove all view elements
+     */
+    removeElements() {
+        this._elements.forEach((el) => {
+            if (this._intersectionObserver) {
+                this._intersectionObserver.unobserve(el);
+            }
+        });
+        this._elements = [];
+    }
     /**
      * Destroy the module
      */

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

@@ -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) {

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

@@ -53,9 +53,11 @@ export class SmoothScroll extends Component {
         }
         this._elementsLength = this._elements.length;
         // add will-change
-        this._elements.forEach((el) => {
-            el.style.willChange = 'transform';
-        });
+        if (this.prop.useWillChange) {
+            this._elements.forEach((el) => {
+                el.style.willChange = 'transform';
+            });
+        }
         // initialize the class
         if (init) {
             this.init();

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

@@ -32,7 +32,7 @@ export class SplitText extends Component {
         }
     }
     _getDefaultProp() {
-        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: `#${this.prefix}`, appendLetters: true, appendLines: false });
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: `#${this.prefix}`, appendLetters: true, appendLines: false, viewportTarget: '' });
     }
     get prefix() {
         return `${this._app.prefix}split-text`;
@@ -57,7 +57,7 @@ export class SplitText extends Component {
         // split the text
         this.splitText();
         if (this.prop.appendLines) {
-            this.addViewportCallback('', () => {
+            this.addViewportCallback(this.prop.viewportTarget, () => {
                 this.splitText();
             });
         }