vevet 2.0.1-dev.17 → 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,12 +124,10 @@ 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
@@ -141,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
      */
@@ -276,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 () {
@@ -308,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/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,12 +74,10 @@ 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
@@ -100,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
      */
@@ -228,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(() => {
@@ -259,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/types/components/scroll/scrollable/ScrollView.d.ts

@@ -1,4 +1,3 @@
-import { SelectorAll } from 'vevet-dom';
 import { ScrollEventsBase, NScrollEventsBase } from './ScrollEventsBase';
 import { IRemovable } from '../../../utils/types/general';
 import { RequiredModuleProp } from '../../../utils/types/utility';
@@ -8,10 +7,17 @@ export declare namespace NScrollView {
      */
     interface StaticProp extends NScrollEventsBase.StaticProp {
         /**
-         * Elements to seek
-         * @default '.v-scroll-view__el'
+         * If enabled, scrolling events will be created.
+         * You can use "false" to create just an instance of the ScrollView
+         * and later enable animations.
+         * @default true
+         */
+        enabled?: boolean;
+        /**
+         * View elements.
+         * @default []
          */
-        elements?: SelectorAll;
+        elements?: Element[];
         /**
          * The moment at which the element is considered to be in the viewport.
          * The value is calculated from top to bottom or from left to right.
@@ -79,6 +85,11 @@ export declare class ScrollView<StaticProp extends NScrollView.StaticProp = NScr
      * If first start
      */
     protected _firstStart: boolean;
+    protected _elements: NScrollView.El[];
+    /**
+     * Elements to seek
+     */
+    get elements(): NScrollView.El[];
     constructor(initialProp?: (StaticProp & ChangeableProp), init?: boolean);
     init(): void;
     protected _setEvents(): void;
@@ -95,15 +106,6 @@ export declare class ScrollView<StaticProp extends NScrollView.StaticProp = NScr
      * Remove View events: scroll or intersection
      */
     protected _removeViewEvents(): void;
-    protected _elements: NScrollView.El[];
-    /**
-     * Element to seek
-     */
-    get elements(): NScrollView.El[];
-    /**
-     * Update elements
-     */
-    updateElements(): void;
     /**
      * Event on IntersectionObserver
      */
@@ -132,6 +134,18 @@ export declare class ScrollView<StaticProp extends NScrollView.StaticProp = NScr
      * Remove elements that are mo more in need
      */
     protected _processUnusedElements(): void;
+    /**
+     * Add a view element
+     */
+    addElement(element: Element): void;
+    /**
+     * Remove a view element
+     */
+    removeElement(element: Element): void;
+    /**
+     * Remove all view elements
+     */
+    removeElements(): void;
     /**
      * Destroy the module
      */

package/build/types/components/scroll/scrollable/ScrollView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollView.d.ts","sourceRoot":"","sources":["../../../../../src/ts/components/scroll/scrollable/ScrollView.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ScrollView.d.ts","sourceRoot":"","sources":["../../../../../src/ts/components/scroll/scrollable/ScrollView.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vevet",
-  "version": "2.0.1-dev.17",
+  "version": "2.0.1-dev.18",
   "description": "VEVET - A JavaScript library",
   "browserslist": [
     "since 2015"

package/src/ts/components/scroll/scrollable/ScrollView.ts

@@ -1,4 +1,3 @@
-import { selectAll, SelectorAll } from 'vevet-dom';
 import { ScrollEventsBase, NScrollEventsBase } from './ScrollEventsBase';
 import { IRemovable } from '../../../utils/types/general';
 import { RequiredModuleProp } from '../../../utils/types/utility';
@@ -16,10 +15,17 @@ export namespace NScrollView {
      */
     export interface StaticProp extends NScrollEventsBase.StaticProp {
         /**
-         * Elements to seek
-         * @default '.v-scroll-view__el'
+         * If enabled, scrolling events will be created.
+         * You can use "false" to create just an instance of the ScrollView
+         * and later enable animations.
+         * @default true
+         */
+        enabled?: boolean;
+        /**
+         * View elements.
+         * @default []
          */
-        elements?: SelectorAll;
+        elements?: Element[];
         /**
          * The moment at which the element is considered to be in the viewport.
          * The value is calculated from top to bottom or from left to right.
@@ -96,8 +102,9 @@ export class ScrollView <
     > (): T {
         return {
             ...super._getDefaultProp(),
+            enabled: true,
             container: window,
-            elements: `.${this.prefix}__el`,
+            elements: [],
             threshold: 0.9,
             states: 'in',
             classToToggle: 'viewed',
@@ -122,6 +129,14 @@ export class ScrollView <
      */
     protected _firstStart: boolean;
 
+    protected _elements: NScrollView.El[];
+    /**
+     * Elements to seek
+     */
+    get elements () {
+        return this._elements;
+    }
+
 
 
     constructor (
@@ -133,9 +148,7 @@ export class ScrollView <
         this._scrollEvent = undefined;
         this._intersectionObserver = undefined;
         this._firstStart = true;
-
-        // get view elements
-        this.updateElements();
+        this._elements = [...this.prop.elements];
 
         // initialize the class
         if (init) {
@@ -145,7 +158,6 @@ export class ScrollView <
 
     public init () {
         super.init();
-        this.seekBounding();
     }
 
     // Set Module Events
@@ -159,9 +171,7 @@ export class ScrollView <
 
     protected _onPropMutate () {
         super._onPropMutate();
-        this._removeViewEvents();
-        this.updateElements();
-        this._setViewEvents();
+        this.resize();
     }
 
     /**
@@ -169,7 +179,10 @@ export class ScrollView <
      */
     public resize () {
         this._removeViewEvents();
-        this._setViewEvents();
+        if (this.prop.enabled) {
+            this._setViewEvents();
+            this.seekBounding();
+        }
     }
 
     /**
@@ -194,11 +207,9 @@ export class ScrollView <
                 },
             );
             // add elements
-            if (this.elements) {
-                this.elements.forEach((el) => {
-                    this._intersectionObserver?.observe(el);
-                });
-            }
+            this.elements.forEach((el) => {
+                this._intersectionObserver?.observe(el);
+            });
         } else {
             // set scroll bounding events
             this._scrollEvent = onScroll({
@@ -224,46 +235,6 @@ export class ScrollView <
         }
     }
 
-
-
-    protected _elements!: NScrollView.El[];
-    /**
-     * Element to seek
-     */
-    get elements () {
-        return this._elements;
-    }
-
-    /**
-     * Update elements
-     */
-    public 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 as any, 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
      */
@@ -374,8 +345,6 @@ export class ScrollView <
         };
     }
 
-
-
     /**
      * Event that is triggered when an element appears or disappears
      */
@@ -396,9 +365,11 @@ export class ScrollView <
         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')) {
@@ -430,6 +401,43 @@ export class ScrollView <
     }
 
 
+    /**
+     * Add a view element
+     */
+    public addElement (
+        element: Element,
+    ) {
+        this._elements.push(element);
+        if (this._intersectionObserver) {
+            this._intersectionObserver.observe(element);
+        }
+    }
+
+    /**
+     * Remove a view element
+     */
+    public removeElement (
+        element: Element,
+    ) {
+        this._elements = this._elements.filter((el) => el !== element);
+        if (this._intersectionObserver) {
+            this._intersectionObserver.unobserve(element);
+        }
+    }
+
+    /**
+     * Remove all view elements
+     */
+    public removeElements () {
+        this._elements.forEach((el) => {
+            if (this._intersectionObserver) {
+                this._intersectionObserver.unobserve(el);
+            }
+        });
+        this._elements = [];
+    }
+
+
 
     /**
      * Destroy the module