vevet 2.0.1-dev.8 → 2.0.6

package/src/ts/components/page/Page.ts

@@ -52,6 +52,11 @@ export class Page <
     ChangeableProp,
     CallbacksTypes
 > {
+    protected _blocked: boolean;
+    protected get blocked () {
+        return this._blocked;
+    }
+
     /**
      * If the page is created
      */
@@ -95,6 +100,7 @@ export class Page <
         super(initialProp, false);
 
         // set default vars
+        this._blocked = false;
         this._created = false;
         this._shown = false;
         this._hidden = false;
@@ -129,11 +135,12 @@ export class Page <
             resolve, reject,
         ) => {
             this.canCreate().then(() => {
-                if (this.created) {
+                if (this.created || this.blocked) {
+                    reject();
                     return;
                 }
                 // update vars
-                this._created = true;
+                this._blocked = true;
                 this._shown = false;
                 this._hidden = false;
                 this._destroyed = false;
@@ -147,7 +154,11 @@ export class Page <
                 // actions
                 this._create().then(() => {
                     this.callbacks.tbt('create', false);
+                    this._blocked = false;
+                    this._created = true;
                     resolve();
+                }).catch(() => {
+                    reject();
                 });
             }).catch(() => {
                 reject();
@@ -191,19 +202,24 @@ export class Page <
             resolve, reject,
         ) => {
             this.canShow().then(() => {
-                if (this.shown) {
+                if (this.shown || this.blocked) {
+                    reject();
                     return;
                 }
                 // update vars
+                this._blocked = true;
                 this._created = true;
-                this._shown = true;
                 this._hidden = false;
                 this._destroyed = false;
 
                 // actions
                 this._show().then(() => {
                     this.callbacks.tbt('show', false);
+                    this._blocked = false;
+                    this._shown = true;
                     resolve();
+                }).catch(() => {
+                    reject();
                 });
                 // launch events
             }).catch(() => {
@@ -249,19 +265,24 @@ export class Page <
             reject: (...arg: any) => void,
         ) => {
             this.canHide().then(() => {
-                if (this.hidden) {
+                if (this.hidden || this.blocked) {
+                    reject();
                     return;
                 }
                 // update vars
+                this._blocked = true;
                 this._created = true;
                 this._shown = false;
-                this._hidden = true;
                 this._destroyed = false;
 
                 // actions
                 this._hide().then(() => {
                     this.callbacks.tbt('hide', false);
+                    this._blocked = false;
+                    this._hidden = true;
                     resolve();
+                }).catch(() => {
+                    reject();
                 });
             }).catch(() => {
                 reject();
@@ -306,14 +327,15 @@ export class Page <
             reject: (...arg: any) => void,
         ) => {
             this.canDestroy().then(() => {
-                if (this.destroyed) {
+                if (this.destroyed || this.blocked) {
+                    reject();
                     return;
                 }
                 // change vars
+                this._blocked = true;
                 this._created = false;
                 this._shown = false;
                 this._hidden = true;
-                this._destroyed = true;
 
                 // update page
                 this._app.page = false;
@@ -322,7 +344,11 @@ export class Page <
 
                 // actions
                 this._destroy().then(() => {
+                    this._blocked = false;
+                    this._destroyed = true;
                     resolve();
+                }).catch(() => {
+                    reject();
                 });
             }).catch(() => {
                 reject();

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

@@ -1,10 +1,9 @@
-import { selectAll, SelectorAll } from 'vevet-dom';
 import { ScrollEventsBase, NScrollEventsBase } from './ScrollEventsBase';
 import { IRemovable } from '../../../utils/types/general';
 import { RequiredModuleProp } from '../../../utils/types/utility';
 import onScroll from '../../../utils/listeners/onScroll';
 import { intersectionObserverSupported } from '../../../utils/listeners';
-import boundVal from '../../../utils/math/boundVal';
+import clamp from '../../../utils/math/clamp';
 import timeoutCallback from '../../../utils/common/timeoutCallback';
 
 
@@ -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.
@@ -49,6 +55,10 @@ export namespace NScrollView {
          * @default true
          */
         useIntersectionObserver?: boolean;
+        /**
+         * @default 0
+         */
+        resizeTimeout?: number;
     }
 
     /**
@@ -96,13 +106,15 @@ export class ScrollView <
     > (): T {
         return {
             ...super._getDefaultProp(),
+            enabled: true,
             container: window,
-            elements: `.${this.prefix}__el`,
+            elements: [],
             threshold: 0.9,
             states: 'in',
             classToToggle: 'viewed',
             useDelay: false,
             useIntersectionObserver: true,
+            resizeTimeout: 0,
         };
     }
 
@@ -113,15 +125,27 @@ export class ScrollView <
      */
     protected _scrollEvent?: IRemovable;
     /**
-     * Intersection observer
+     * Intersection observer - type IN
      */
-    protected _intersectionObserver?: IntersectionObserver;
+    protected _intersectionObserverIn?: IntersectionObserver;
+    /**
+     * Intersection observer - type OUT
+     */
+    protected _intersectionObserverOut?: IntersectionObserver;
 
     /**
      * If first start
      */
     protected _firstStart: boolean;
 
+    protected _elements: NScrollView.El[];
+    /**
+     * Elements to seek
+     */
+    get elements () {
+        return this._elements;
+    }
+
 
 
     constructor (
@@ -131,11 +155,10 @@ export class ScrollView <
         super(initialProp, false);
 
         this._scrollEvent = undefined;
-        this._intersectionObserver = undefined;
+        this._intersectionObserverIn = undefined;
+        this._intersectionObserverOut = undefined;
         this._firstStart = true;
-
-        // get view elements
-        this.updateElements();
+        this._elements = [...this.prop.elements];
 
         // initialize the class
         if (init) {
@@ -145,7 +168,6 @@ export class ScrollView <
 
     public init () {
         super.init();
-        this.seekBounding();
     }
 
     // Set Module Events
@@ -154,14 +176,14 @@ export class ScrollView <
         this.resize();
         this.addViewportCallback('', () => {
             this.resize();
+        }, {
+            timeout: this.prop.resizeTimeout,
         });
     }
 
     protected _onPropMutate () {
         super._onPropMutate();
-        this._removeViewEvents();
-        this.updateElements();
-        this._setViewEvents();
+        this.resize();
     }
 
     /**
@@ -169,7 +191,10 @@ export class ScrollView <
      */
     public resize () {
         this._removeViewEvents();
-        this._setViewEvents();
+        if (this.prop.enabled) {
+            this._setViewEvents();
+            this.seekBounding();
+        }
     }
 
     /**
@@ -184,24 +209,37 @@ export class ScrollView <
                 ? 0 : scrollContainerBounding.width * (1 - this.prop.threshold) * -1;
             const yMargin = this._firstStart
                 ? 0 : scrollContainerBounding.height * (1 - this.prop.threshold) * -1;
-            // create intersection observer
-            this._intersectionObserver = new IntersectionObserver(
-                this._handleIntersectionObserver.bind(this),
+            // create intersection observers
+            this._intersectionObserverIn = new IntersectionObserver(
+                this._handleIntersectionObserverIn.bind(this),
                 {
                     root: this.intersectionRoot,
                     threshold: 0,
                     rootMargin: `0px ${xMargin}px ${yMargin}px 0px`,
                 },
             );
-            // add elements
-            if (this.elements) {
+            this.elements.forEach((el) => {
+                this._intersectionObserverIn?.observe(el);
+            });
+            if (this.prop.states === 'inout') {
+                this._intersectionObserverOut = new IntersectionObserver(
+                    this._handleIntersectionObserverOut.bind(this),
+                    {
+                        root: this.intersectionRoot,
+                        threshold: 0,
+                        rootMargin: '0px 0px 0px 0px',
+                    },
+                );
                 this.elements.forEach((el) => {
-                    this._intersectionObserver?.observe(el);
+                    this._intersectionObserverOut?.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),
+            });
         }
     }
 
@@ -214,57 +252,17 @@ export class ScrollView <
             this._scrollEvent.remove();
             this._scrollEvent = undefined;
         }
-        // destroy intersection observer
-        if (this._intersectionObserver) {
-            this._intersectionObserver.disconnect();
-            this._intersectionObserver = undefined;
-        }
-    }
-
-
-
-    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);
-            }
-        });
+        // destroy intersection observers
+        this._intersectionObserverIn?.disconnect();
+        this._intersectionObserverIn = undefined;
+        this._intersectionObserverOut?.disconnect();
+        this._intersectionObserverOut = undefined;
     }
 
-
-
     /**
      * Event on IntersectionObserver
      */
-    protected _handleIntersectionObserver (
+    protected _handleIntersectionObserverIn (
         data: IntersectionObserverEntry[],
     ) {
         const parentBounding = this._firstStart ? this.scrollContainerBounding : false;
@@ -274,11 +272,13 @@ export class ScrollView <
             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
@@ -288,6 +288,24 @@ export class ScrollView <
         }
     }
 
+    /**
+     * Event on IntersectionObserver
+     */
+    protected _handleIntersectionObserverOut (
+        data: IntersectionObserverEntry[],
+    ) {
+        for (let index = 0; index < data.length; index += 1) {
+            const entry = data[index];
+            if (!entry.isIntersecting) {
+                this._handleInOut(
+                    entry.target,
+                    entry.isIntersecting,
+                    0,
+                );
+            }
+        }
+    }
+
     /**
      * Event on Scroll
      */
@@ -313,7 +331,9 @@ export class ScrollView <
             const el = this.elements[index];
             const elData = this._elementInViewportData(el, scrollContainerBounding);
             const delay = elData.isIntersecting ? elData.delay : 0;
-            this._handleInOut(el, elData.isIntersecting, delay);
+            if (typeof elData.isIntersecting === 'boolean') {
+                this._handleInOut(el, elData.isIntersecting, delay);
+            }
         }
         this._processUnusedElements();
 
@@ -335,7 +355,7 @@ export class ScrollView <
         const bounding = el.getBoundingClientRect();
 
         // check if the element is intersecting
-        let isIntersecting = false;
+        let isIntersecting: undefined | boolean;
         if (
             bounding.top < parentBounding.top + parentBounding.height * threshold
             && bounding.left < parentBounding.left + parentBounding.width * threshold
@@ -350,13 +370,18 @@ export class ScrollView <
             } else {
                 isIntersecting = true;
             }
+        } else if (
+            bounding.top > parentBounding.top + parentBounding.height
+            || bounding.left > parentBounding.left + parentBounding.width
+        ) {
+            isIntersecting = false;
         }
 
         // calculate delay only if it is enabled & calculations
         // are done for the first time
         let delay = 0;
         if (!!useDelay && this._firstStart) {
-            const progress = boundVal(
+            const progress = clamp(
                 useDelay.dir === 'x'
                     ? (bounding.left - parentBounding.left) / parentBounding.width
                     : (bounding.top - parentBounding.top) / parentBounding.height,
@@ -371,8 +396,6 @@ export class ScrollView <
         };
     }
 
-
-
     /**
      * Event that is triggered when an element appears or disappears
      */
@@ -393,9 +416,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')) {
@@ -419,14 +444,58 @@ export class ScrollView <
         // remove unused elements
         const elementsToRemove = this._elements.filter((el) => el.scrollViewIn);
         elementsToRemove.forEach((el) => {
-            if (this._intersectionObserver) {
-                this._intersectionObserver.unobserve(el);
-            }
+            this._intersectionObserverIn?.unobserve(el);
+            this._intersectionObserverOut?.unobserve(el);
         });
         this._elements = this._elements.filter((el) => !el.scrollViewIn);
     }
 
 
+    /**
+     * Add a view element
+     */
+    public addElement (
+        element: Element,
+    ): IRemovable {
+        const viewEl = element as NScrollView.El;
+        viewEl.scrollViewIn = undefined;
+        this._elements.push(element);
+        this._intersectionObserverIn?.observe(element);
+        this._intersectionObserverOut?.observe(element);
+        if (this.prop.enabled) {
+            this.seekBounding();
+        }
+        return {
+            remove: () => {
+                this.removeElement(element);
+            },
+        };
+    }
+
+    /**
+     * Remove a view element
+     */
+    public removeElement (
+        element: Element,
+    ) {
+        const viewEl = element as NScrollView.El;
+        viewEl.scrollViewIn = undefined;
+        this._elements = this._elements.filter((el) => el !== element);
+        this._intersectionObserverIn?.unobserve(element);
+        this._intersectionObserverOut?.unobserve(element);
+    }
+
+    /**
+     * Remove all view elements
+     */
+    public removeElements () {
+        this._elements.forEach((el) => {
+            this.removeElement(el);
+        });
+        this._elements = [];
+    }
+
+
 
     /**
      * Destroy the module

package/src/ts/components/scroll/scrollbar/Bar.ts

@@ -1,7 +1,7 @@
 import { addEventListener, createElement, IAddEventListener } from 'vevet-dom';
 import { IRemovable } from '../../../utils/types/general';
 import onScroll from '../../../utils/listeners/onScroll';
-import boundVal from '../../../utils/math/boundVal';
+import clamp from '../../../utils/math/clamp';
 import { DraggerMove, NDraggerMove } from '../../dragger/DraggerMove';
 import { SmoothScroll } from '../smooth-scroll/SmoothScroll';
 
@@ -163,8 +163,11 @@ export default class Bar {
         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
@@ -290,7 +293,7 @@ export default class Bar {
      */
     protected _renderThumb () {
         // calculate progress
-        const progress = boundVal(
+        const progress = clamp(
             this._scrollVal / this.scrollLine,
             [0, 1],
         );
@@ -318,7 +321,7 @@ export default class Bar {
         // calculate thumb sizes
         if (this.prop.autoSize) {
             if (this.isX) {
-                const barSize = boundVal(
+                const barSize = clamp(
                     this._outerWidth / (this.scrollWidth / (
                         this.scrollWidth - scrollLine
                     )),
@@ -326,7 +329,7 @@ export default class Bar {
                 );
                 thumb.style.width = `${barSize}px`;
             } else {
-                const barSize = boundVal(
+                const barSize = clamp(
                     this._outerHeight / (this.scrollHeight / (
                         this.scrollHeight - scrollLine
                     )),

package/src/ts/components/scroll/scrollbar/ScrollBar.ts

@@ -50,6 +50,10 @@ export namespace NScrollBar {
          * @default false
          */
         optimizeCalculations?: boolean;
+        /**
+         * @default 0
+         */
+        resizeTimeout?: number;
         /**
          * If the scroll bar is draggable
          * @default true
@@ -101,6 +105,7 @@ export class ScrollBar <
             autoHide: true,
             minSize: 50,
             optimizeCalculations: false,
+            resizeTimeout: 0,
             isDraggable: true,
             draggableScrollBehavior: 'smooth',
         };
@@ -245,6 +250,8 @@ export class ScrollBar <
         } else {
             this.addViewportCallback('', () => {
                 this.resize();
+            }, {
+                timeout: this.prop.resizeTimeout,
             });
         }
         this.resize();