vevet 2.12.0 → 2.15.0

package/build/types/components/cursor/CustomCursor.d.ts

@@ -26,6 +26,16 @@ export declare namespace NCustomCursor {
      * Changeable properties
      */
     interface ChangeableProp extends NComponent.ChangeableProp {
+        size?: {
+            /**
+             * @default 50
+             */
+            width?: number;
+            /**
+             * @default 50
+             */
+            height?: number;
+        };
         render?: {
             /**
              * Linear interpolation of coordinates. Speed
@@ -51,6 +61,19 @@ export declare namespace NCustomCursor {
          * @default true
          */
         autoStop?: boolean;
+        /**
+         * @default false
+         */
+        hover?: {
+            /**
+             * @default false
+             */
+            sticky?: boolean;
+            /**
+             * @default false
+             */
+            autoSize?: boolean;
+        };
     }
     /**
      * Available callbacks
@@ -96,6 +119,27 @@ export declare class CustomCursor<StaticProp extends NCustomCursor.StaticProp =
      */
     get innerCursor(): HTMLElement;
     protected _innerCursor: HTMLElement;
+    /**
+     * Hovered element
+     */
+    protected _hoveredEl?: {
+        el: Element;
+        width?: number;
+        height?: number;
+        padding?: number;
+    };
+    get hoveredEl(): {
+        el: Element;
+        width?: number;
+        height?: number;
+        padding?: number;
+    };
+    set hoveredEl(val: {
+        el: Element;
+        width?: number;
+        height?: number;
+        padding?: number;
+    });
     /**
      * Animation frame
      */
@@ -109,26 +153,44 @@ export declare class CustomCursor<StaticProp extends NCustomCursor.StaticProp =
      */
     protected _canPlay: boolean;
     /**
-     * Current X coordinate relative to Window
-     */
-    get x(): number;
-    protected _x: number;
-    /**
-     * Target coordinate
+     * Current cursor coordinates
      */
-    protected _xTarget: number;
+    protected _coords: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+    get coords(): {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
     /**
-     * Current Y coordinate relative to Window
+     * Target cursor coordinates
      */
-    get y(): number;
-    protected _y: number;
-    /**
-     * Target coordinate
-     */
-    protected _yTarget: number;
+    protected _targetCoords: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+    get targetCoords(): {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
     constructor(initialProp?: (StaticProp & ChangeableProp), init?: boolean);
     protected _constructor(): void;
     protected _setEvents(): void;
+    /**
+     * Set hover events on an element
+     */
+    addHoverEl(settings: NonNullable<CustomCursor['hoveredEl']>, enterTimeout?: number): {
+        remove: () => void;
+    };
     /**
      * Create custom cursor
      */
@@ -165,6 +227,23 @@ export declare class CustomCursor<StaticProp extends NCustomCursor.StaticProp =
      * Render the scene
      */
     render(): void;
+    /**
+     * Recalculate current coordinates
+     */
+    protected _calcCoords(): void;
+    /**
+     * Linear interpolation
+     */
+    protected _lerp(current: number, target: number): number;
+    /**
+     * Render cursor elements
+     */
+    protected _renderElements(): {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
     /**
      * Enable cursor
      */

package/build/types/components/cursor/CustomCursor.d.ts.map

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

package/build/types/components/scroll/scrollable/ScrollEventsBase.d.ts

@@ -11,6 +11,12 @@ export declare namespace NScrollEventsBase {
          * @default window
          */
         container?: string | Element | SmoothScroll | Window;
+        /**
+         * Intersection root element. If false, the element is found
+         * automatically
+         * @default false
+         */
+        intersectionRoot?: false | null | Element;
     }
     /**
      * Changeable properties

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollEventsBase.d.ts","sourceRoot":"","sources":["../../../../../src/ts/components/scroll/scrollable/ScrollEventsBase.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAI7D,yBAAiB,iBAAiB,CAAC;IAE/B;;OAEG;IACH,UAAiB,UAAW,SAAQ,UAAU,CAAC,UAAU;QACrD;;;WAGG;QACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,YAAY,GAAG,MAAM,CAAC;KACxD;IAED;;OAEG;IACH,UAAiB,cAAe,SAAQ,UAAU,CAAC,cAAc;KAAI;IAErE;;OAEG;IACH,UAAiB,cAAe,SAAQ,UAAU,CAAC,cAAc;KAAI;IAErE;;OAEG;IACH,UAAiB,YAAY;QACzB,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAClB;CAEJ;AAID;;GAEG;AACH,8BAAsB,gBAAgB,CAClC,UAAU,SAAS,iBAAiB,CAAC,UAAU,GAAG,iBAAiB,CAAC,UAAU,EAC9E,cAAc,SAAS,iBAAiB,CAAC,cAAc,GAAG,iBAAiB,CAAC,cAAc,EAC1F,cAAc,SAAS,iBAAiB,CAAC,cAAc,GAAG,iBAAiB,CAAC,cAAc,CAC5F,SAAQ,SAAS,CACf,UAAU,EACV,cAAc,EACd,cAAc,CACjB;IACG,SAAS,CAAC,eAAe,CACrB,CAAC,SAAS,kBAAkB,CAAC,UAAU,GAAG,cAAc,CAAC,KACvD,CAAC;IASP;;OAEG;IACH,SAAS,CAAC,gBAAgB,EAAE,OAAO,GAAG,YAAY,GAAG,MAAM,CAAC;IAC5D,IAAI,eAAe,kPAElB;IACD,IAAI,iBAAiB,yOAKpB;IAED;;OAEG;IACH,SAAS,KAAK,SAAS,YAStB;IAED;;OAEG;IACH,SAAS,KAAK,gBAAgB,YAS7B;IAED;;OAEG;IACH,SAAS,KAAK,uBAAuB,IAAK,iBAAiB,CAAC,YAAY,CAgBvE;gBAKG,WAAW,CAAC,EAAE,CAAC,UAAU,GAAG,cAAc,CAAC,EAC3C,IAAI,UAAO;CAgBlB"}
+{"version":3,"file":"ScrollEventsBase.d.ts","sourceRoot":"","sources":["../../../../../src/ts/components/scroll/scrollable/ScrollEventsBase.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAI7D,yBAAiB,iBAAiB,CAAC;IAE/B;;OAEG;IACH,UAAiB,UAAW,SAAQ,UAAU,CAAC,UAAU;QACrD;;;WAGG;QACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,YAAY,GAAG,MAAM,CAAC;QACrD;;;;WAIG;QACH,gBAAgB,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,OAAO,CAAC;KAC7C;IAED;;OAEG;IACH,UAAiB,cAAe,SAAQ,UAAU,CAAC,cAAc;KAAI;IAErE;;OAEG;IACH,UAAiB,cAAe,SAAQ,UAAU,CAAC,cAAc;KAAI;IAErE;;OAEG;IACH,UAAiB,YAAY;QACzB,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAClB;CAEJ;AAID;;GAEG;AACH,8BAAsB,gBAAgB,CAClC,UAAU,SAAS,iBAAiB,CAAC,UAAU,GAAG,iBAAiB,CAAC,UAAU,EAC9E,cAAc,SAAS,iBAAiB,CAAC,cAAc,GAAG,iBAAiB,CAAC,cAAc,EAC1F,cAAc,SAAS,iBAAiB,CAAC,cAAc,GAAG,iBAAiB,CAAC,cAAc,CAC5F,SAAQ,SAAS,CACf,UAAU,EACV,cAAc,EACd,cAAc,CACjB;IACG,SAAS,CAAC,eAAe,CACrB,CAAC,SAAS,kBAAkB,CAAC,UAAU,GAAG,cAAc,CAAC,KACvD,CAAC;IAUP;;OAEG;IACH,SAAS,CAAC,gBAAgB,EAAE,OAAO,GAAG,YAAY,GAAG,MAAM,CAAC;IAC5D,IAAI,eAAe,kPAElB;IACD,IAAI,iBAAiB,yOAKpB;IAED;;OAEG;IACH,SAAS,KAAK,SAAS,YAStB;IAED;;OAEG;IACH,SAAS,KAAK,gBAAgB,YAY7B;IAED;;OAEG;IACH,SAAS,KAAK,uBAAuB,IAAK,iBAAiB,CAAC,YAAY,CAgBvE;gBAKG,WAAW,CAAC,EAAE,CAAC,UAAU,GAAG,cAAc,CAAC,EAC3C,IAAI,UAAO;CAgBlB"}

package/build/types/version.d.ts

@@ -1,3 +1,3 @@
-declare const version = "2.12.0";
+declare const version = "2.15.0";
 export default version;
 //# sourceMappingURL=version.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vevet",
-  "version": "2.12.0",
+  "version": "2.15.0",
   "description": "VEVET - A JavaScript library",
   "browserslist": [
     "since 2015"

package/src/sass/components/cursor/_custom-cursor.scss

@@ -1,10 +1,9 @@
 @import '../../mixins/index';
 
-$custom-cursor-inner-size: 50px;
-$custom-cursor-alpha-duration: 0.25s;
-$custom-cursor-scale-duration: 0.5s;
-$custom-cursor-alpha: 0.5;
-$custom-cursor-color: #000;
+$custom-cursor-alpha-duration: 0.25s !default;
+$custom-cursor-scale-duration: 0.5s !default;
+$custom-cursor-alpha: 0.5 !default;
+$custom-cursor-color: #000 !default;
 
 
 
@@ -20,6 +19,8 @@ $custom-cursor-color: #000;
 }
 
 .#{$prefix}custom-cursor {
+    --cursor-w: 50px;
+    --cursor-h: 50px;
 
     &.in-window {
         position: fixed;
@@ -43,11 +44,10 @@ $custom-cursor-color: #000;
     }
     
     &__inner {
-        width: $custom-cursor-inner-size;
-        height: $custom-cursor-inner-size;
-        margin-top: $custom-cursor-inner-size / -2;
-        margin-left: $custom-cursor-inner-size / -2;
-        border-radius: 50%;
+        width: var(--cursor-w);
+        height: var(--cursor-h);
+        margin-left: calc(var(--cursor-w) / -2);
+        margin-top: calc(var(--cursor-h) / -2);
 
         background-color: $custom-cursor-color;
         opacity: $custom-cursor-alpha;

package/src/ts/components/cursor/CustomCursor.ts

@@ -1,8 +1,9 @@
-import { createElement, selectOne } from 'vevet-dom';
+import { addEventListener, createElement, selectOne } from 'vevet-dom';
 import { AnimationFrame } from '../animation-frame/AnimationFrame';
 import { Component, NComponent } from '../../base/Component';
 import { RequiredModuleProp } from '../../utils/types/utility';
 import lerp from '../../utils/math/lerp';
+import { timeoutCallback } from '../../utils/common';
 
 
 
@@ -33,6 +34,16 @@ export namespace NCustomCursor {
      * Changeable properties
      */
     export interface ChangeableProp extends NComponent.ChangeableProp {
+        size?: {
+            /**
+             * @default 50
+             */
+            width?: number;
+            /**
+             * @default 50
+             */
+            height?: number;
+        };
         render?: {
             /**
              * Linear interpolation of coordinates. Speed
@@ -52,12 +63,25 @@ export namespace NCustomCursor {
              * @default false
              */
             normalizeLerp?: boolean;
-        }
+        };
         /**
          * Automatically stop rendering after the target and current values are approximated.
          * @default true
          */
         autoStop?: boolean;
+        /**
+         * @default false
+         */
+        hover?: {
+            /**
+             * @default false
+             */
+            sticky?: boolean;
+            /**
+             * @default false
+             */
+            autoSize?: boolean;
+        };
     }
 
     /**
@@ -98,11 +122,19 @@ export class CustomCursor <
             container: window,
             run: true,
             hideNativeCursor: false,
+            size: {
+                width: 50,
+                height: 50,
+            },
             render: {
                 lerp: 0.2,
                 lerpToFixed: 2,
                 normalizeLerp: false,
             },
+            hover: {
+                sticky: false,
+                autoSize: false,
+            },
             autoStop: true,
         };
     }
@@ -157,6 +189,22 @@ export class CustomCursor <
     }
     protected _innerCursor!: HTMLElement;
 
+    /**
+     * Hovered element
+     */
+    protected _hoveredEl?: {
+        el: Element;
+        width?: number;
+        height?: number;
+        padding?: number;
+    };
+    get hoveredEl () {
+        return this._hoveredEl;
+    }
+    set hoveredEl (val) {
+        this._hoveredEl = val;
+    }
+
 
 
     /**
@@ -173,28 +221,56 @@ export class CustomCursor <
     protected _canPlay: boolean;
 
     /**
-     * Current X coordinate relative to Window
+     * Current cursor coordinates
      */
-    get x () {
-        return this._x;
+    protected _coords: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+    get coords () {
+        return this._coords;
     }
-    protected _x: number;
-    /**
-     * Target coordinate
-     */
-    protected _xTarget: number;
 
     /**
-     * Current Y coordinate relative to Window
+     * Target cursor coordinates
      */
-    get y () {
-        return this._y;
+    protected _targetCoords: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+    get targetCoords () {
+        const { hoveredEl, prop } = this;
+        const sizes = prop.size;
+
+        let { x } = this._targetCoords;
+        let { y } = this._targetCoords;
+        let w = sizes.width;
+        let h = sizes.height;
+        let padding = 0;
+        if (hoveredEl) {
+            const bounding = hoveredEl.el.getBoundingClientRect();
+            if (prop.hover.sticky) {
+                x = bounding.left + bounding.width / 2;
+                y = bounding.top + bounding.height / 2;
+            }
+            if (prop.hover.autoSize) {
+                w = this.hoveredEl?.width || bounding.width;
+                h = this.hoveredEl?.height || bounding.height;
+                padding = this.hoveredEl?.padding || 0;
+            }
+        }
+
+        w += padding * 2;
+        h += padding * 2;
+
+        return {
+            x, y, w, h,
+        };
     }
-    protected _y: number;
-    /**
-     * Target coordinate
-     */
-    protected _yTarget: number;
 
 
 
@@ -214,10 +290,12 @@ export class CustomCursor <
         this._containerIsWindow = container instanceof Window;
 
         // set default vars
-        this._x = 0;
-        this._xTarget = 0;
-        this._y = 0;
-        this._yTarget = 0;
+        this._coords = {
+            x: 0, y: 0, w: 0, h: 0,
+        };
+        this._targetCoords = {
+            x: 0, y: 0, w: 0, h: 0,
+        };
         this._currentFPS = 60;
         this._canPlay = this.prop.run;
 
@@ -260,6 +338,40 @@ export class CustomCursor <
         this.addEventListeners(window, 'blur', this._handleWindowBlur.bind(this));
     }
 
+    /**
+     * Set hover events on an element
+     */
+    public addHoverEl (
+        settings: NonNullable<CustomCursor['hoveredEl']>,
+        enterTimeout = 100,
+    ) {
+        const { el } = settings;
+
+        let timeout: ReturnType<typeof timeoutCallback> | undefined;
+        const mouseEnter = addEventListener(el, 'mouseenter', () => {
+            timeout = timeoutCallback(() => {
+                this.hoveredEl = { ...settings };
+            }, enterTimeout);
+        });
+        const mouseLeave = addEventListener(el, 'mouseleave', () => {
+            this.hoveredEl = undefined;
+            if (timeout) {
+                timeout.clear();
+            }
+        });
+
+        return {
+            remove: () => {
+                if (this.hoveredEl?.el === el) {
+                    this.hoveredEl = undefined;
+                }
+                mouseEnter.remove();
+                mouseLeave.remove();
+                timeout?.clear();
+            },
+        };
+    }
+
 
 
     /**
@@ -316,10 +428,10 @@ export class CustomCursor <
         evt: MouseEvent,
     ) {
         // update coordinates
-        this._xTarget = evt.clientX;
-        this._x = this._xTarget;
-        this._yTarget = evt.clientY;
-        this._y = this._yTarget;
+        this._coords.x = evt.clientX;
+        this._coords.y = evt.clientY;
+        this._targetCoords.x = evt.clientX;
+        this._targetCoords.y = evt.clientY;
         // set classes
         this.outerCursor.classList.add('in-action');
     }
@@ -337,8 +449,8 @@ export class CustomCursor <
     protected _handleMouseMove (
         evt: MouseEvent,
     ) {
-        this._xTarget = evt.clientX;
-        this._yTarget = evt.clientY;
+        this._targetCoords.x = evt.clientX;
+        this._targetCoords.y = evt.clientY;
         // set classes
         this.outerCursor.classList.add('in-action');
         // launch animation
@@ -381,24 +493,66 @@ export class CustomCursor <
      */
     public render () {
         // props
-        const { prop } = this;
-        const { domContainer } = this;
-        const { normalizeLerp, lerp: ease, lerpToFixed } = prop.render;
+        const { prop, targetCoords } = this;
+
+        this._calcCoords();
+        const realCoords = this._renderElements();
+
+        // auto stop
+        if (
+            prop.autoStop
+            && this.coords.x === targetCoords.x && this.coords.y === targetCoords.y
+            && this.coords.w === targetCoords.w && this.coords.h === targetCoords.h
+        ) {
+            this._animationFrame.pause();
+        }
+
+        // launch render events
+        this._callbacks.tbt('render', realCoords);
+    }
+
+    /**
+     * Recalculate current coordinates
+     */
+    protected _calcCoords () {
+        this._coords.x = this._lerp(this._coords.x, this.targetCoords.x);
+        this._coords.y = this._lerp(this._coords.y, this.targetCoords.y);
+        this._coords.w = this._lerp(this._coords.w, this.targetCoords.w);
+        this._coords.h = this._lerp(this._coords.h, this.targetCoords.h);
+    }
+
+    /**
+     * Linear interpolation
+     */
+    protected _lerp (
+        current: number,
+        target: number,
+    ) {
+        const { normalizeLerp, lerp: ease, lerpToFixed } = this.prop.render;
+
         const fpsMultiplier = normalizeLerp ? 60 / this._currentFPS : 1;
+        let val = lerp(current, target, ease * fpsMultiplier, 0.02);
 
-        // interpolate coordinates
-        this._x = lerp(this._x, this._xTarget, ease * fpsMultiplier, 0.02);
-        this._y = lerp(this._y, this._yTarget, ease * fpsMultiplier, 0.02);
         // round the values
         if (typeof lerpToFixed === 'number') {
             const fixed = Math.round(Math.abs(lerpToFixed));
-            this._x = parseFloat(this._x.toFixed(fixed));
-            this._y = parseFloat(this._y.toFixed(fixed));
+            val = parseFloat(val.toFixed(fixed));
         }
 
-        // calcu;ate real coordinates
-        let x = this._x;
-        let y = this._y;
+        return val;
+    }
+
+    /**
+     * Render cursor elements
+     */
+    protected _renderElements () {
+        const { domContainer, outerCursor } = this;
+
+        // calculate real coordinates
+        let {
+            x, y,
+        } = this.coords;
+        const { w, h } = this.coords;
         if (!this._containerIsWindow) {
             const bounding = domContainer.getBoundingClientRect();
             x -= bounding.left;
@@ -406,18 +560,13 @@ export class CustomCursor <
         }
 
         // update dom coordinates
-        this.outerCursor.style.transform = `translate(${x}px, ${y}px)`;
+        outerCursor.style.transform = `translate(${x}px, ${y}px)`;
+        outerCursor.style.setProperty('--cursor-w', `${w}px`);
+        outerCursor.style.setProperty('--cursor-h', `${h}px`);
 
-        // auto stop
-        if (
-            prop.autoStop
-            && this._x === this._xTarget && this._y === this._yTarget
-        ) {
-            this._animationFrame.pause();
-        }
-
-        // launch render events
-        this._callbacks.tbt('render', { x, y });
+        return {
+            x, y, w, h,
+        };
     }
 
 

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

@@ -16,6 +16,12 @@ export namespace NScrollEventsBase {
          * @default window
          */
         container?: string | Element | SmoothScroll | Window;
+        /**
+         * Intersection root element. If false, the element is found
+         * automatically
+         * @default false
+         */
+        intersectionRoot?: false | null | Element;
     }
 
     /**
@@ -60,6 +66,7 @@ export abstract class ScrollEventsBase <
         return {
             ...super._getDefaultProp(),
             container: window,
+            intersectionRoot: false,
         };
     }
 
@@ -97,14 +104,17 @@ export abstract class ScrollEventsBase <
      * Used as a "root" for IntersectionObserver
      */
     protected get intersectionRoot () {
-        const { scrollContainer } = this;
-        if (scrollContainer instanceof Window) {
-            return null;
+        if (this.prop.intersectionRoot === false) {
+            const { scrollContainer } = this;
+            if (scrollContainer instanceof Window) {
+                return null;
+            }
+            if (scrollContainer instanceof Element) {
+                return scrollContainer;
+            }
+            return scrollContainer.outer;
         }
-        if (scrollContainer instanceof Element) {
-            return scrollContainer;
-        }
-        return scrollContainer.outer;
+        return this.prop.intersectionRoot;
     }
 
     /**