@creative-web-solution/front-library 7.1.27 → 7.1.29

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # CHANGELOG
 
+## 7.1.29
+
+* [DragSlider]: Fix callback issue
+
+
+## 7.1.28
+
+* [YouTubePlayer]: Update types + use ready event to handle end of loading
+
+
 ## 7.1.27
 
 * [Slider]: Remove gsap

package/Modules/DragSlider.ts

@@ -1,33 +1,33 @@
-import { wait }                    from '../Helpers/Wait';
-import { debounce }                from '../Helpers/Debounce';
-import { offset }                  from '../DOM/Offset';
-import { gesture, gestureOff }     from '../Events/Gesture';
-import { prop }                    from '../DOM/Styles';
-import { aClass, rClass, tClass }  from '../DOM/Class';
-import { on, off }                 from '../Events/EventsManager';
-import { isTouchDevice }           from '../Tools/TouchDeviceSupport';
-import { extend }                  from '../Helpers/Extend';
+import { wait } from "../Helpers/Wait";
+import { debounce } from "../Helpers/Debounce";
+import { offset } from "../DOM/Offset";
+import { gesture, gestureOff } from "../Events/Gesture";
+import { prop } from "../DOM/Styles";
+import { aClass, rClass, tClass } from "../DOM/Class";
+import { on, off } from "../Events/EventsManager";
+import { isTouchDevice } from "../Tools/TouchDeviceSupport";
+import { extend } from "../Helpers/Extend";
 
 const defaultOptions = {
     swipeTresholdMin: 40,
     swipeTresholdSize: 0.5,
-    lockedClass: 'is-locked',
-    _animReset: function($list) {
+    lockedClass: "is-locked",
+    _animReset: function ($list) {
         // gsap.set( $list, {
         //     "x": 0,
         //     "y": 0,
         //     "z": 0
         // } );
     },
-    _animClear: function($list) {
+    _animClear: function ($list) {
         // gsap.set( $list, {
         //     "clearProps": "all"
         // } );
     },
-    _animKill: function($list) {
+    _animKill: function ($list) {
         // gsap.killTweensOf( $list );
     },
-    _animMoveItem: function($list, x, onUpdate) {
+    _animMoveItem: function ($list, x, onUpdate) {
         // return gsap.to( $list, {
         //     "duration": 0.3,
         //     "x":        x,
@@ -38,14 +38,14 @@ const defaultOptions = {
         //     }
         // } );
     },
-    _setCoordinates: function($list, x) {
+    _setCoordinates: function ($list, x) {
         // gsap.set( $list, {
         //     "x": x,
         //     "y": 0,
         //     "z": 0
         // } );
-    }
-}
+    },
+};
 
 const MINIMUM_MOVEMENT_TO_START_DRAG = 3; // px
 
@@ -53,34 +53,35 @@ const MINIMUM_MOVEMENT_TO_START_DRAG = 3; // px
  * DragSlider
  */
 export default class DragSlider {
-    #isDraggingActive:      boolean;
-    #options:               FLib.DragSlider.Options;
-    #deltaMove:             FLib.DragSlider.DeltaMove = {
-        "x":      0,
-        "deltaX": 0,
-        "deltaY": 0,
-        "newX":   0
+    #isDraggingActive: boolean;
+    #options: FLib.DragSlider.Options;
+    #deltaMove: FLib.DragSlider.DeltaMove = {
+        x: 0,
+        deltaX: 0,
+        deltaY: 0,
+        newX: 0,
     };
-    #itemArray:             FLib.DragSlider.Item[];
-    #$slider:               HTMLElement;
+    #itemArray: FLib.DragSlider.Item[];
+    #$slider: HTMLElement;
     #viewportInfo;
-    #siteOffsetLeft          = 0;
-    #siteOffsetRight         = 0;
-    #listDelta               = 0;
-    #$viewport:              HTMLElement | undefined;
-    #$items:                 NodeList | undefined;
-    #$list:                  HTMLElement | undefined;
-    #isDragging              = false;
-    #itemMap                 = new Map<HTMLElement, FLib.DragSlider.Item>();
-    #firstItem:              FLib.DragSlider.Item | undefined;
-    #currentSnapItem:        FLib.DragSlider.Item | undefined;
-    #hasAlreadyBeenDragged   = false;
-    #startDragCoords:        FLib.Events.Gesture.Coords | undefined;
-    #isInitialized           = false;
-    #visibleItems:           FLib.DragSlider.Item[] = [];
-    #hiddenItems:            FLib.DragSlider.Item[] = [];
+    #siteOffsetLeft = 0;
+    #siteOffsetRight = 0;
+    #listDelta = 0;
+    #$viewport: HTMLElement | undefined;
+    #$items: NodeList | undefined;
+    #$list: HTMLElement | undefined;
+    #isDragging = false;
+    #itemMap = new Map<HTMLElement, FLib.DragSlider.Item>();
+    #firstItem: FLib.DragSlider.Item | undefined;
+    #currentSnapItem: FLib.DragSlider.Item | undefined;
+    #hasAlreadyBeenDragged = false;
+    #startDragCoords: FLib.Events.Gesture.Coords | undefined;
+    #isInitialized = false;
+    #visibleItems: FLib.DragSlider.Item[] = [];
+    #hiddenItems: FLib.DragSlider.Item[] = [];
     #debouncedOnResize;
-
+    #minXPos: number = 0;
+    #maxXPos: number = 0;
 
     get count(): number {
         return this.#$items?.length ?? 0;
@@ -106,83 +107,110 @@ export default class DragSlider {
         return this.#hiddenItems;
     }
 
+    get firstItem(): FLib.DragSlider.Item | undefined {
+        return this.#itemArray[0];
+    }
 
-    constructor( $slider: HTMLElement, userOptions: Partial<FLib.DragSlider.Options> ) {
+    get lastItem(): FLib.DragSlider.Item | undefined {
+        return this.#itemArray[this.#itemArray.length - 1];
+    }
 
-        if ( !userOptions.viewportSelector || !userOptions.listSelector || !userOptions.itemSelector || !userOptions.dragClass ) {
-            throw '[Drag Slider]: Missing at least one of viewportSelector, listSelector, itemSelector, dragClass';
+    constructor(
+        $slider: HTMLElement,
+        userOptions: Partial<FLib.DragSlider.Options>
+    ) {
+        if (
+            !userOptions.viewportSelector ||
+            !userOptions.listSelector ||
+            !userOptions.itemSelector ||
+            !userOptions.dragClass
+        ) {
+            throw "[Drag Slider]: Missing at least one of viewportSelector, listSelector, itemSelector, dragClass";
         }
 
         this.#$slider = $slider;
 
         this.#isDraggingActive = false;
 
-        this.#options = extend( defaultOptions, userOptions );
+        this.#options = extend(defaultOptions, userOptions);
 
         this.#itemArray = [];
 
-        wait( 'idle' ).then( this.init );
+        wait("idle").then(this.init);
     }
 
-
     #cancelLinkClick = (): void => {
-        aClass( this.#$slider, this.#options.dragClass );
-    }
-
+        aClass(this.#$slider, this.#options.dragClass);
+    };
 
     #activeLinkClick = (): void => {
-        wait().then( () => {
-            rClass( this.#$slider, this.#options.dragClass );
-        } );
-    }
-
+        wait().then(() => {
+            rClass(this.#$slider, this.#options.dragClass);
+        });
+    };
 
     #onResize = (): void => {
-        if ( !this.#$items || !this.#$list ) {
+        if (!this.#$items || !this.#$list) {
             return;
         }
 
-        this.#viewportInfo    = offset( this.#$viewport as HTMLElement );
-        this.#siteOffsetLeft  = parseInt( prop( (this.#$items[ 0 ] as HTMLElement), 'marginLeft' ), 10 );
-        this.#siteOffsetRight = parseInt( prop( (this.#$items[ this.#$items.length - 1 ] as HTMLElement), 'marginRight' ), 10 );
+        this.#viewportInfo = offset(this.#$viewport as HTMLElement);
+        this.#siteOffsetLeft = parseInt(
+            prop(this.#$items[0] as HTMLElement, "marginLeft"),
+            10
+        );
+        this.#siteOffsetRight = parseInt(
+            prop(
+                this.#$items[this.#$items.length - 1] as HTMLElement,
+                "marginRight"
+            ),
+            10
+        );
+
+        this.#listDelta = this.#getMaxMoveSize();
 
-        this.#listDelta    = this.#viewportInfo.width - this.#$list.scrollWidth - this.#siteOffsetLeft - this.#siteOffsetRight;
+        this.#minXPos = 0;
+        this.#maxXPos = this.#listDelta;
 
         const prevIsDraggingActive = this.#isDraggingActive;
-        this.#isDraggingActive     = this.#listDelta < 0;
+        this.#isDraggingActive = this.#listDelta < 0;
 
-        if ( !this.#isDraggingActive ) {
+        if (!this.#isDraggingActive) {
             this.#isDragging = false;
-            this.#options._animKill( this.#$list );
-            this.#options._animReset( this.#$list );
+            this.#options._animKill(this.#$list);
+            this.#options._animReset(this.#$list);
         }
 
-        tClass( this.#$slider, this.#options.lockedClass, !this.#isDraggingActive );
+        tClass(
+            this.#$slider,
+            this.#options.lockedClass,
+            !this.#isDraggingActive
+        );
 
-        if ( prevIsDraggingActive !== this.#isDraggingActive ) {
-            this.#options.onChangeState?.( this.#isDraggingActive );
+        if (prevIsDraggingActive !== this.#isDraggingActive) {
+            this.#options.onChangeState?.(this.#isDraggingActive);
         }
 
         this.#itemArray.length = 0;
-        const ABS_LIST_DELTA = Math.abs( this.#listDelta );
+        const ABS_LIST_DELTA = Math.abs(this.#listDelta);
 
         let flag = false;
 
         for (let index = 0; index < this.#$items.length; ++index) {
-            const $ITEM       = this.#$items[ index ] as HTMLElement;
-            const ITEM_OFFSET = offset( $ITEM, false, this.#$list );
+            const $ITEM = this.#$items[index] as HTMLElement;
+            const ITEM_OFFSET = offset($ITEM, false, this.#$list);
             const DATA = {
                 index,
-                "isFirst": index === 0,
-                "isLast":  false,
-                "$item":   $ITEM,
-                "info":    ITEM_OFFSET
+                isFirst: index === 0,
+                isLast: false,
+                $item: $ITEM,
+                info: ITEM_OFFSET,
             };
 
             if (ITEM_OFFSET.left - this.#siteOffsetLeft <= ABS_LIST_DELTA) {
                 this.#itemArray.push(DATA);
 
-                this.#itemMap.set( $ITEM, DATA );
+                this.#itemMap.set($ITEM, DATA);
                 continue;
             }
 
@@ -201,84 +229,84 @@ export default class DragSlider {
             }
             flag = true;
 
-            this.#itemMap.set( $ITEM, DATA );
+            this.#itemMap.set($ITEM, DATA);
         }
 
-        this.#firstItem = this.#itemMap.get( (this.#$items[ 0 ] as HTMLElement) ) as FLib.DragSlider.Item;
+        this.#firstItem = this.#itemMap.get(
+            this.#$items[0] as HTMLElement
+        ) as FLib.DragSlider.Item;
 
-        if ( !this.#currentSnapItem ) {
+        if (!this.#currentSnapItem) {
             this.#currentSnapItem = this.#firstItem;
-        }
-        else {
-            this.#currentSnapItem = this.#itemArray[ this.#currentSnapItem.index ];
+        } else {
+            this.#currentSnapItem =
+                this.#itemArray[this.#currentSnapItem.index];
         }
 
         this.#updateAccessibilityFeature();
-    }
-
+    };
 
-    #snapToItemAnimation =  ( snapItem: FLib.DragSlider.Item ): Promise<any> => {
+    #snapToItemAnimation = (snapItem: FLib.DragSlider.Item): Promise<any> => {
         if (!snapItem) {
             return Promise.resolve();
         }
 
-        let finalX;
+        const finalX = Math.max(
+            Math.min(
+                this.#minXPos,
+                -1 * snapItem.info.left + this.#siteOffsetLeft
+            ),
+            this.#maxXPos
+        );
 
-        finalX = -1 * snapItem.info.left;
+        this.#options.onSnap?.(this.#getCallbackOptions(finalX, snapItem));
 
-        finalX = Math.max( Math.min( 0, finalX ), this.#listDelta );
-
-        // If close to the end, then snap to it
-        if ( Math.abs( finalX - this.#listDelta ) <= 3 ) {
-            finalX = this.#listDelta;
-        }
-
-        // If close to the start, then snap to it
-        if ( Math.abs( finalX ) <= 3 ) {
-            finalX = 0;
-        }
+        this.#currentSnapItem = snapItem;
 
-        const IS_SNAP_TO_END   = finalX === this.#listDelta;
-        const IS_SNAP_TO_START = finalX === 0;
+        return this.#options
+            ._animMoveItem(this.#$list, finalX, (newX) => {
+                this.#deltaMove.x = newX;
 
-        this.#options.onSnap?.( {
-            "item":        snapItem,
-            "xPos":        this.#deltaMove.x,
-            "moveMaxSize": this.#listDelta,
-            "isAtStart":   IS_SNAP_TO_START,
-            "isAtEnd":     IS_SNAP_TO_END,
-            "visibleItems": this.#visibleItems,
-            "hiddenItems":  this.#hiddenItems
-        } );
+                this.#options.onSnapUpdate?.(
+                    this.#getCallbackOptions(newX, snapItem)
+                );
+            })
+            .then(() => {
+                return this.#updateAccessibilityFeature();
+            })
+            .then(() => {
+                this.#deltaMove.x = finalX;
+                this.#options.onSnapEnd?.(
+                    this.#getCallbackOptions(this.#deltaMove.x)
+                );
+            });
+    };
 
-        this.#currentSnapItem = snapItem;
+    #getCallbackOptions(xPos: number, snapItem?: FLib.DragSlider.Item) {
+        const IS_SNAP_TO_END = xPos === this.#listDelta;
+        const IS_SNAP_TO_START = xPos === 0;
 
-        finalX += this.#siteOffsetLeft;
-
-        return this.#options._animMoveItem( this.#$list, finalX, (newX) => {
-            this.#deltaMove.x = newX;
-
-            this.#options.onSnapUpdate?.( {
-                "item":        snapItem,
-                "xPos":        this.#deltaMove.x,
-                "moveMaxSize": this.#listDelta,
-                "isAtStart":   IS_SNAP_TO_START,
-                "isAtEnd":     IS_SNAP_TO_END,
-                "visibleItems": this.#visibleItems,
-                "hiddenItems":  this.#hiddenItems
-            } );
-        } ).then(() => this.#updateAccessibilityFeature());
+        return {
+            item: snapItem ?? this.#currentSnapItem,
+            xPos: this.#deltaMove.x,
+            moveMaxSize: this.#listDelta,
+            isAtStart: IS_SNAP_TO_START,
+            isAtEnd: IS_SNAP_TO_END,
+            visibleItems: this.#visibleItems,
+            hiddenItems: this.#hiddenItems,
+        };
     }
 
-
-    #getFirstPreviousItem = ( xPos: number ): { snapItem: FLib.DragSlider.Item, snapToEnd: boolean } => {
+    #getFirstPreviousItem = (
+        xPos: number
+    ): { snapItem: FLib.DragSlider.Item; snapToEnd: boolean } => {
         let snapItem;
 
-        const absXPos = Math.abs( xPos );
+        const absXPos = Math.abs(xPos);
 
-        for ( const item of this.#itemArray ) {
-            if ( item.info.left <= absXPos ) {
-                snapItem  = item;
+        for (const item of this.#itemArray) {
+            if (item.info.left <= absXPos) {
+                snapItem = item;
                 continue;
             }
             break;
@@ -286,168 +314,173 @@ export default class DragSlider {
 
         return {
             snapItem,
-            "snapToEnd": false
+            snapToEnd: false,
         };
-    }
-
+    };
 
-    #getFirstNextItem = ( xPos: number ): { snapItem: FLib.DragSlider.Item, snapToEnd: boolean } => {
+    #getFirstNextItem = (
+        xPos: number
+    ): { snapItem: FLib.DragSlider.Item; snapToEnd: boolean } => {
         let snapItem;
 
-        const absXPos = Math.abs( xPos );
+        const absXPos = Math.abs(xPos);
 
-        for ( const item of this.#itemArray ) {
-            if ( item.info.left < absXPos ) {
+        for (const item of this.#itemArray) {
+            if (item.info.left < absXPos) {
                 continue;
             }
 
-            snapItem  = item;
+            snapItem = item;
             break;
         }
 
         return {
-            "snapItem": snapItem ? snapItem : this.#itemArray[ this.#itemArray.length - 1 ],
-            "snapToEnd": !snapItem
+            snapItem: snapItem
+                ? snapItem
+                : this.#itemArray[this.#itemArray.length - 1],
+            snapToEnd: !snapItem,
         };
-    }
-
+    };
 
-    #getClosestItem = ( xPos: number ): { snapItem: FLib.DragSlider.Item, snapToEnd: boolean } => {
+    #getClosestItem = (
+        xPos: number
+    ): { snapItem: FLib.DragSlider.Item; snapToEnd: boolean } => {
         let lastDelta, snapItem;
 
-        const absXPos = Math.abs( xPos );
+        const absXPos = Math.abs(xPos);
 
-        for ( const item of this.#itemArray ) {
-            const IS_LAST_DELTA = typeof lastDelta !== 'undefined';
-            const newDelta = Math.abs( absXPos - item.info.left + this.#siteOffsetLeft );
+        for (const item of this.#itemArray) {
+            const IS_LAST_DELTA = typeof lastDelta !== "undefined";
+            const newDelta = Math.abs(
+                absXPos - item.info.left + this.#siteOffsetLeft
+            );
 
-            if ( !IS_LAST_DELTA || newDelta <= lastDelta ) {
+            if (!IS_LAST_DELTA || newDelta <= lastDelta) {
                 lastDelta = newDelta;
-                snapItem  = item;
+                snapItem = item;
             }
         }
 
         return {
             snapItem,
-            snapToEnd: false
+            snapToEnd: false,
         };
-    }
-
+    };
 
     #snapToItem = (): void => {
         let snapItem;
 
-        const ABS_DELTA_X = Math.abs( this.#deltaMove.deltaX );
+        const ABS_DELTA_X = Math.abs(this.#deltaMove.deltaX);
 
         // If move a bit on right or left, juste move by one item only
-        if ( ABS_DELTA_X >= this.#options.swipeTresholdMin && ABS_DELTA_X < Math.min( (this.#firstItem as FLib.DragSlider.Item ).info.width * this.#options.swipeTresholdSize, this.#options.swipeTresholdMin * 3 ) ) {
-            if ( this.#deltaMove.deltaX < 0 ) {
-                snapItem = this.#getFirstNextItem( this.#deltaMove.x );
+        if (
+            ABS_DELTA_X >= this.#options.swipeTresholdMin &&
+            ABS_DELTA_X <
+                Math.min(
+                    (this.#firstItem as FLib.DragSlider.Item).info.width *
+                        this.#options.swipeTresholdSize,
+                    this.#options.swipeTresholdMin * 3
+                )
+        ) {
+            if (this.#deltaMove.deltaX < 0) {
+                snapItem = this.#getFirstNextItem(this.#deltaMove.x);
+            } else {
+                snapItem = this.#getFirstPreviousItem(this.#deltaMove.x);
             }
-            else {
-                snapItem = this.#getFirstPreviousItem( this.#deltaMove.x );
-            }
-        }
-        else {
-            snapItem = this.#getClosestItem( this.#deltaMove.x );
+        } else {
+            snapItem = this.#getClosestItem(this.#deltaMove.x);
         }
 
-        if ( !snapItem ) {
+        if (!snapItem) {
             return;
         }
 
-        this.#snapToItemAnimation( snapItem.snapItem ).then(() => {
-            this.#options.onSnapEnd?.({
-                "item":        this.#currentSnapItem,
-                "xPos":        this.#deltaMove.x,
-                "moveMaxSize": this.#listDelta,
-                "isAtStart":   this.#deltaMove.x === 0,
-                "isAtEnd":     this.#deltaMove.x === this.#listDelta,
-                "visibleItems": this.#visibleItems,
-                "hiddenItems":  this.#hiddenItems
-            })
-        });
-    }
+        this.#snapToItemAnimation(snapItem.snapItem);
+    };
 
+    #getMaxMoveSize(): number {
+        return (
+            this.#viewportInfo.width -
+            this.#$list!.scrollWidth -
+            this.#siteOffsetLeft
+        );
+    }
 
-    #onStartDrag = ( e: Event, $target: HTMLElement, coords: FLib.Events.Gesture.Coords ): void => {
-        if ( !this.#hasAlreadyBeenDragged ) {
+    #onStartDrag = (
+        e: Event,
+        $target: HTMLElement,
+        coords: FLib.Events.Gesture.Coords
+    ): void => {
+        if (!this.#hasAlreadyBeenDragged) {
             this.#onResize();
             this.#hasAlreadyBeenDragged = true;
         }
 
-        if ( !this.#isDraggingActive || !this.#$list ) {
+        if (!this.#isDraggingActive || !this.#$list) {
             return;
         }
 
         this.#isDragging = true;
 
-        this.#options._animKill( this.#$list );
+        this.#options._animKill(this.#$list);
 
         this.#startDragCoords = coords;
-        this.#listDelta       = this.#viewportInfo.width - this.#$list.scrollWidth - this.#siteOffsetLeft - this.#siteOffsetRight;
-        this.#deltaMove.newX  = this.#deltaMove.x;
-
-        gesture( document.body, 'dragSlider', {
-            "move":        this.#onMove,
-            "end":         this.#onStopDrag,
-            "preventMove": e => {
-                if ( !e.cancelable ) {
+        this.#listDelta = this.#getMaxMoveSize();
+        this.#deltaMove.newX = this.#deltaMove.x;
+
+        gesture(document.body, "dragSlider", {
+            move: this.#onMove,
+            end: this.#onStopDrag,
+            preventMove: (e) => {
+                if (!e.cancelable) {
                     return false;
                 }
 
-                return !isTouchDevice ||
-                        isTouchDevice && Math.abs( this.#deltaMove.deltaY ) < Math.abs( this.#deltaMove.deltaX );
-            }
-        } );
-
-        this.#options.onStartDrag?.( {
-            "item":        this.#currentSnapItem,
-            "xPos":        this.#deltaMove.x,
-            "moveMaxSize": this.#listDelta,
-            "isAtStart":   this.#deltaMove.x === 0,
-            "isAtEnd":     this.#deltaMove.x === this.#listDelta,
-            "visibleItems": this.#visibleItems,
-            "hiddenItems":  this.#hiddenItems
-        } );
-    }
+                return (
+                    !isTouchDevice ||
+                    (isTouchDevice &&
+                        Math.abs(this.#deltaMove.deltaY) <
+                            Math.abs(this.#deltaMove.deltaX))
+                );
+            },
+        });
 
+        this.#options.onStartDrag?.(
+            this.#getCallbackOptions(this.#deltaMove.x)
+        );
+    };
 
-    #onMove = ( e: Event, $target: HTMLElement, coords: FLib.Events.Gesture.Coords ): void => {
+    #onMove = (
+        e: Event,
+        $target: HTMLElement,
+        coords: FLib.Events.Gesture.Coords
+    ): void => {
         this.#cancelLinkClick();
 
-        this.#deltaMove.deltaX = coords.pageX - ( this.#startDragCoords as FLib.Events.Gesture.Coords ).pageX;
-        this.#deltaMove.deltaY = coords.pageY - ( this.#startDragCoords as FLib.Events.Gesture.Coords ).pageY;
+        this.#deltaMove.deltaX =
+            coords.pageX -
+            (this.#startDragCoords as FLib.Events.Gesture.Coords).pageX;
+        this.#deltaMove.deltaY =
+            coords.pageY -
+            (this.#startDragCoords as FLib.Events.Gesture.Coords).pageY;
 
         if (Math.abs(this.#deltaMove.deltaX) < MINIMUM_MOVEMENT_TO_START_DRAG) {
             return;
         }
 
-        this.#deltaMove.newX  = this.#deltaMove.deltaX + this.#deltaMove.x;
-
-        if ( this.#deltaMove.newX > 0 ) {
-            this.#deltaMove.newX = 0;
-        }
-        else if ( this.#deltaMove.newX < this.#listDelta + this.#siteOffsetRight ) {
-            this.#deltaMove.newX = this.#listDelta + this.#siteOffsetRight;
-        }
+        this.#deltaMove.newX = this.#deltaMove.deltaX + this.#deltaMove.x;
+        this.#deltaMove.newX = Math.max(
+            Math.min(this.#minXPos, this.#deltaMove.newX),
+            this.#maxXPos
+        );
 
         this.#options._setCoordinates(this.#$list, this.#deltaMove.newX);
 
-        this.#options.onDrag?.( {
-            "item":        this.#currentSnapItem,
-            "xPos":        this.#deltaMove.newX,
-            "moveMaxSize": this.#listDelta,
-            "isAtStart":   this.#deltaMove.newX === 0,
-            "isAtEnd":     this.#deltaMove.newX === this.#listDelta,
-            "visibleItems": this.#visibleItems,
-            "hiddenItems":  this.#hiddenItems
-        } );
-    }
-
+        this.#options.onDrag?.(this.#getCallbackOptions(this.#deltaMove.newX));
+    };
 
     #onStopDrag = (): void => {
-        gestureOff( document.body, 'dragSlider' );
+        gestureOff(document.body, "dragSlider");
         this.#isDragging = false;
 
         this.#activeLinkClick();
@@ -460,138 +493,109 @@ export default class DragSlider {
 
         this.#snapToItem();
 
-        this.#options.onStopDrag?.({
-            "item":        this.#currentSnapItem,
-            "xPos":        this.#deltaMove.x,
-            "moveMaxSize": this.#listDelta,
-            "isAtStart":   this.#deltaMove.x === 0,
-            "isAtEnd":     this.#deltaMove.x === this.#listDelta,
-            "visibleItems": this.#visibleItems,
-            "hiddenItems":  this.#hiddenItems
-        } );
-    }
-
+        this.#options.onStopDrag?.(this.#getCallbackOptions(this.#deltaMove.x));
+    };
 
     #onMouseenter = (): void => {
-        if ( this.#isDragging || !this.#isDraggingActive ) {
+        if (this.#isDragging || !this.#isDraggingActive) {
             return;
         }
 
-        this.#options.onMouseEnter?.( {
-            "item":        this.#currentSnapItem,
-            "xPos":        this.#deltaMove.x,
-            "moveMaxSize": this.#listDelta,
-            "isAtStart":   this.#deltaMove.x === 0,
-            "isAtEnd":     this.#deltaMove.x === this.#listDelta,
-            "visibleItems": this.#visibleItems,
-            "hiddenItems":  this.#hiddenItems
-        } );
-    }
-
+        this.#options.onMouseEnter?.(
+            this.#getCallbackOptions(this.#deltaMove.x)
+        );
+    };
 
     #onMouseleave = (): void => {
-        if ( this.#isDragging || !this.#isDraggingActive ) {
+        if (this.#isDragging || !this.#isDraggingActive) {
             return;
         }
 
-        this.#options.onMouseLeave?.( {
-            "item":        this.#currentSnapItem,
-            "xPos":        this.#deltaMove.x,
-            "moveMaxSize": this.#listDelta,
-            "isAtStart":   this.#deltaMove.x === 0,
-            "isAtEnd":     this.#deltaMove.x === this.#listDelta,
-            "visibleItems": this.#visibleItems,
-            "hiddenItems":  this.#hiddenItems
-        } );
-    }
-
+        this.#options.onMouseLeave?.(
+            this.#getCallbackOptions(this.#deltaMove.x)
+        );
+    };
 
-    #cancelDrag = ( e: Event ): void => {
+    #cancelDrag = (e: Event): void => {
         e.preventDefault();
-    }
-
+    };
 
     next(): Promise<any> {
         const CURRENT_ITEM = this.#currentSnapItem as FLib.DragSlider.Item;
 
-        if ( !this.#isDraggingActive || !this.#itemArray[ CURRENT_ITEM.index + 1 ] ) {
+        if (
+            !this.#isDraggingActive ||
+            !this.#itemArray[CURRENT_ITEM.index + 1]
+        ) {
             return Promise.resolve();
         }
 
-        return this.#snapToItemAnimation( this.#itemArray[ CURRENT_ITEM.index + 1 ] );
+        return this.#snapToItemAnimation(
+            this.#itemArray[CURRENT_ITEM.index + 1]
+        );
     }
 
-
     previous(): Promise<any> {
         const CURRENT_ITEM = this.#currentSnapItem as FLib.DragSlider.Item;
 
-        if ( !this.#isDraggingActive || CURRENT_ITEM.isFirst ) {
+        if (!this.#isDraggingActive || CURRENT_ITEM.isFirst) {
             return Promise.resolve();
         }
 
-        return this.#snapToItemAnimation( this.#itemArray[ CURRENT_ITEM.index - 1 ] );
+        return this.#snapToItemAnimation(
+            this.#itemArray[CURRENT_ITEM.index - 1]
+        );
     }
 
-
-    goToItem( blockOrIndex: HTMLElement | number ): Promise<any> {
-
-        if ( !this.#isDraggingActive ) {
+    goToItem(blockOrIndex: HTMLElement | number): Promise<any> {
+        if (!this.#isDraggingActive) {
             return Promise.resolve();
         }
 
         let $block;
 
-        if (typeof blockOrIndex === 'number') {
+        if (typeof blockOrIndex === "number") {
             $block = this.#$items?.[blockOrIndex] as HTMLElement;
-        }
-        else {
+        } else {
             $block = blockOrIndex;
         }
 
-        if ( !$block ) {
+        if (!$block) {
             return Promise.resolve();
         }
 
-        const ITEM = this.#itemMap.get( $block );
+        const ITEM = this.#itemMap.get($block);
 
-        if ( !ITEM ) {
+        if (!ITEM) {
             return Promise.resolve();
         }
 
         this.#currentSnapItem = ITEM;
 
-        this.#options.onSnap?.( {
-            "item":        ITEM,
-            "xPos":        this.#deltaMove.x,
-            "moveMaxSize": this.#listDelta,
-            "isAtStart":   this.#deltaMove.x === 0,
-            "isAtEnd":     this.#deltaMove.x === this.#listDelta,
-            "visibleItems": this.#visibleItems,
-            "hiddenItems":  this.#hiddenItems
-        } );
-
-        return this.#options._animMoveItem(this.#$list, -1 * ITEM.info.left + this.#siteOffsetLeft, (x) => {
-            this.#deltaMove.x = x;
-
-            this.#options.onSnapUpdate?.( {
-                "item":        ITEM,
-                "xPos":        this.#deltaMove.x,
-                "moveMaxSize": this.#listDelta,
-                "isAtStart":   this.#deltaMove.x === 0,
-                "isAtEnd":     this.#deltaMove.x === this.#listDelta,
-                "visibleItems": this.#visibleItems,
-                "hiddenItems":  this.#hiddenItems
-            } );
-        }).then(() => this.#updateAccessibilityFeature());
+        const xPos = -1 * ITEM.info.left + this.#siteOffsetLeft;
+
+        this.#options.onSnap?.(this.#getCallbackOptions(xPos, ITEM));
+
+        return this.#options
+            ._animMoveItem(this.#$list, xPos, (x) => {
+                this.#deltaMove.x = x;
+
+                this.#options.onSnapUpdate?.(
+                    this.#getCallbackOptions(this.#deltaMove.x, ITEM)
+                );
+            })
+            .then(() => this.#updateAccessibilityFeature());
     }
 
     #updateAccessibilityFeature = (): void => {
         this.#visibleItems.length = 0;
         this.#hiddenItems.length = 0;
 
-        this.#itemMap.forEach(item => {
+        this.#itemMap.forEach((item) => {
             const hideElement1 = item.info.left + this.#deltaMove.x < 0;
-            const hideElement2 = item.info.left + item.info.width + this.#deltaMove.x > this.#viewportInfo.width;
+            const hideElement2 =
+                item.info.left + item.info.width + this.#deltaMove.x >
+                this.#viewportInfo.width;
 
             if (hideElement1 || hideElement2) {
                 item.$item.setAttribute("tabindex", "-1");
@@ -606,132 +610,128 @@ export default class DragSlider {
             item.$item.setAttribute("aria-hidden", "false");
             this.#visibleItems.push(item);
         });
-    }
+    };
 
     refresh = (): this => {
         this.#onResize();
 
         return this;
-    }
+    };
 
     init = (): this => {
-        if ( this.#isInitialized ) {
+        if (this.#isInitialized) {
             return this;
         }
 
         this.#isInitialized = true;
 
-        if ( !this.#$viewport ) {
-            const $VP = this.#$slider.querySelector( this.#options.viewportSelector );
-            if ( !$VP ) {
-                throw `"${ this.#options.viewportSelector }" not found`;
+        if (!this.#$viewport) {
+            const $VP = this.#$slider.querySelector(
+                this.#options.viewportSelector
+            );
+            if (!$VP) {
+                throw `"${this.#options.viewportSelector}" not found`;
             }
-            this.#$viewport         = $VP as HTMLElement;
+            this.#$viewport = $VP as HTMLElement;
 
-            const $LST = this.#$viewport.querySelector( this.#options.listSelector );
-            if ( !$LST ) {
-                throw `"${ this.#options.listSelector }" not found`;
+            const $LST = this.#$viewport.querySelector(
+                this.#options.listSelector
+            );
+            if (!$LST) {
+                throw `"${this.#options.listSelector}" not found`;
             }
-            this.#$list             = $LST as HTMLElement;
+            this.#$list = $LST as HTMLElement;
 
-            const $ITEMS = this.#$list.querySelectorAll( this.#options.itemSelector );
-            if ( !$ITEMS ) {
-                throw `"${ this.#options.itemSelector }" not found`;
+            const $ITEMS = this.#$list.querySelectorAll(
+                this.#options.itemSelector
+            );
+            if (!$ITEMS) {
+                throw `"${this.#options.itemSelector}" not found`;
             }
-            this.#$items            = $ITEMS as NodeList;
+            this.#$items = $ITEMS as NodeList;
 
-            this.#debouncedOnResize = debounce( this.#onResize );
+            this.#debouncedOnResize = debounce(this.#onResize);
         }
 
-        if ( !this.#$items?.length ) {
+        if (!this.#$items?.length) {
             return this;
         }
 
-        aClass( this.#$slider, 'is-active' );
+        aClass(this.#$slider, "is-active");
 
         this.#onResize();
 
-        on( window, {
-            "eventsName": "resize",
-            "callback":    this.#debouncedOnResize
-        } );
+        on(window, {
+            eventsName: "resize",
+            callback: this.#debouncedOnResize,
+        });
 
-        gesture( this.#$viewport, 'dragSlider', {
-            "start": this.#onStartDrag
-        } );
+        gesture(this.#$viewport, "dragSlider", {
+            start: this.#onStartDrag,
+        });
 
         // Avoid image or content drag on Firefox
-        on( this.#$items, {
-            "eventsName": "dragstart",
-            "callback":   this.#cancelDrag
-        } );
-
-        on( this.#$viewport, {
-            "eventsName": "mouseenter",
-            "callback":   this.#onMouseenter
-        } );
-
-        on( this.#$viewport, {
-            "eventsName": "mouseleave",
-            "callback":   this.#onMouseleave
-        } );
-
-        this.#options.onInit?.( {
-            "item":        this.#currentSnapItem,
-            "xPos":        this.#deltaMove.x,
-            "moveMaxSize": this.#listDelta,
-            "isAtStart":   this.#deltaMove.x === 0,
-            "isAtEnd":     this.#deltaMove.x === this.#listDelta,
-            "visibleItems": this.#visibleItems,
-            "hiddenItems":  this.#hiddenItems
-        } );
+        on(this.#$items, {
+            eventsName: "dragstart",
+            callback: this.#cancelDrag,
+        });
 
-        return this;
-    }
+        on(this.#$viewport, {
+            eventsName: "mouseenter",
+            callback: this.#onMouseenter,
+        });
+
+        on(this.#$viewport, {
+            eventsName: "mouseleave",
+            callback: this.#onMouseleave,
+        });
+
+        this.#options.onInit?.(this.#getCallbackOptions(this.#deltaMove.x));
 
+        return this;
+    };
 
     destroy(): this {
-        this.#isInitialized         = false;
+        this.#isInitialized = false;
         this.#hasAlreadyBeenDragged = false;
 
-        if ( !this.#$items?.length ) {
+        if (!this.#$items?.length) {
             return this;
         }
 
-        off( window, {
-            "eventsName": "resize",
-            "callback":    this.#debouncedOnResize
-        } );
+        off(window, {
+            eventsName: "resize",
+            callback: this.#debouncedOnResize,
+        });
 
-        this.#$viewport && gestureOff( this.#$viewport, 'dragSlider' );
+        this.#$viewport && gestureOff(this.#$viewport, "dragSlider");
 
-        gestureOff( document.body, 'dragSlider' );
+        gestureOff(document.body, "dragSlider");
 
-        off( this.#$items, {
-            "eventsName": "dragstart",
-            "callback":   this.#cancelDrag
-        } );
+        off(this.#$items, {
+            eventsName: "dragstart",
+            callback: this.#cancelDrag,
+        });
 
-        off( this.#$viewport, {
-            "eventsName": "mouseenter",
-            "callback":   this.#onMouseenter
-        } );
+        off(this.#$viewport, {
+            eventsName: "mouseenter",
+            callback: this.#onMouseenter,
+        });
 
-        off( this.#$viewport, {
-            "eventsName": "mouseleave",
-            "callback":   this.#onMouseleave
-        } );
+        off(this.#$viewport, {
+            eventsName: "mouseleave",
+            callback: this.#onMouseleave,
+        });
 
-        if ( this.#$list ) {
-            this.#options._animKill( this.#$list );
-            this.#options._animClear( this.#$list );
+        if (this.#$list) {
+            this.#options._animKill(this.#$list);
+            this.#options._animClear(this.#$list);
         }
 
-        this.#$viewport && rClass( this.#$viewport, this.#options.dragClass );
+        this.#$viewport && rClass(this.#$viewport, this.#options.dragClass);
 
-        rClass( this.#$slider, 'is-active' );
+        rClass(this.#$slider, "is-active");
 
         return this;
     }
-
 }

package/Modules/YouTubePlayer.ts

@@ -106,7 +106,13 @@ export default class YouTubePlayer {
             "width":      this.#options.width,
             "videoId":    this.#options.videoId,
 
-            "playerVars": this.#options.playerVars
+            "playerVars": this.#options.playerVars,
+
+            "events": {
+                "onReady": () => {
+                    _resolve( player );
+                }
+              }
         } );
 
         if ( this.#options.onPlayerStateChange ) {
@@ -118,8 +124,6 @@ export default class YouTubePlayer {
 
         $wrapper.YTPlayer = player;
 
-        window.requestAnimationFrame( () => _resolve( player ) );
-
         return promise;
     }
 

package/README.md

@@ -1,6 +1,6 @@
 # Front Library
 
-@version: 7.1.27
+@version: 7.1.29
 
 
 ## Use

package/Types/YouTubePlayer.d.ts

@@ -9,7 +9,7 @@ declare namespace FLib {
              * @defaultValue //www.youtube.com/iframe_api
              */
             apiUrl:              string;
-            onPlayerStateChange?: ( e: YT.PlayerEvent ) => void;
+            onPlayerStateChange?: YT.PlayerEventHandler<YT.OnStateChangeEvent>;
             /**
              * @defaultValue `{ "autoplay": 0, "controls": 2, "autohide": 1, "modestbranding": 1, "showinfo": 0 }`
              */

package/package.json

@@ -2,7 +2,7 @@
   "name": "@creative-web-solution/front-library",
   "title": "Frontend library",
   "description": "Frontend functions and modules",
-  "version": "7.1.27",
+  "version": "7.1.29",
   "homepage": "https://github.com/creative-web-solution/front-library",
   "author": "Creative Web Solution <contact@cws-studio.com> (https://www.cws-studio.com)",
   "keywords": [],