@creative-web-solution/front-library 7.0.7 → 7.1.0

package/Modules/DragSlider.ts

@@ -14,9 +14,9 @@ import { copy }                    from '../Helpers/Extend';
  */
 export default class DragSlider {
     #isDraggingActive:      boolean;
-    #options:               DragSliderOptions;
-    #deltaMove:             DeltaMoveType;
-    #itemArray:             DragSliderItemType[];
+    #options:               FLib.DragSlider.Options;
+    #deltaMove:             FLib.DragSlider.DeltaMove;
+    #itemArray:             FLib.DragSlider.Item[];
     #$slider:               HTMLElement;
     #viewportInfo;
     #siteOffset;
@@ -25,21 +25,25 @@ export default class DragSlider {
     #$items!:                NodeList;
     #$list!:                 HTMLElement;
     #isDragging!:            boolean;
-    #itemMap!:               Map<HTMLElement, DragSliderItemType>;
-    #firstItem!:             DragSliderItemType;
-    #currentSnapItem!:       DragSliderItemType;
+    #itemMap!:               Map<HTMLElement, FLib.DragSlider.Item>;
+    #firstItem!:             FLib.DragSlider.Item;
+    #currentSnapItem!:       FLib.DragSlider.Item;
     #hasAlreadyBeenDragged!: boolean;
-    #startDragCoords!:       GestureCoordsType;
+    #startDragCoords!:       FLib.Events.Gesture.Coords;
     #isInitialized!:         boolean;
     #debouncedOnResize;
 
 
-    get isActive() {
+    get isActive(): boolean {
         return this.#isDraggingActive;
     }
 
 
-    constructor( $slider: HTMLElement, options: DragSliderOptions ) {
+    constructor( $slider: HTMLElement, options: Partial<FLib.DragSlider.Options> ) {
+        if ( !options.viewportSelector || !options.listSelector || !options.itemSelector || !options.dragClass ) {
+            throw '[Drag Slider]: Missing at least one of viewportSelector, listSelector, itemSelector, dragClass';
+        }
+
         this.#deltaMove = {
             "x":      0,
             "deltaX": 0,
@@ -63,19 +67,19 @@ export default class DragSlider {
     }
 
 
-    private cancelLinkClick() {
+    #cancelLinkClick = (): void => {
         aClass( this.#$slider, this.#options.dragClass );
     }
 
 
-    private activeLinkClick() {
+    #activeLinkClick = (): void => {
         wait().then( () => {
             rClass( this.#$slider, this.#options.dragClass );
         } );
     }
 
 
-    #onResize = () => {
+    #onResize = (): void => {
         this.#viewportInfo = offset( this.#$viewport );
         this.#siteOffset   = parseInt( prop( (this.#$items[ 0 ] as HTMLElement), 'marginLeft' ), 10 );
         this.#listDelta    = this.#viewportInfo.width - this.#$list.scrollWidth;
@@ -93,7 +97,7 @@ export default class DragSlider {
             } );
         }
 
-        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 );
@@ -116,7 +120,7 @@ export default class DragSlider {
             this.#itemMap.set( $ITEM, this.#itemArray[ index ] );
         } );
 
-        this.#firstItem = this.#itemMap.get( (this.#$items[ 0 ] as HTMLElement) ) as DragSliderItemType;
+        this.#firstItem = this.#itemMap.get( (this.#$items[ 0 ] as HTMLElement) ) as FLib.DragSlider.Item;
 
         if ( !this.#currentSnapItem ) {
             this.#currentSnapItem = this.#firstItem;
@@ -127,7 +131,7 @@ export default class DragSlider {
     }
 
 
-    private snapToItemAnimation( snapItem: DragSliderItemType, snapToEnd?: DragSliderItemType ) {
+    #snapToItemAnimation = ( snapItem: FLib.DragSlider.Item, snapToEnd?: FLib.DragSlider.Item ): gsap.core.Tween => {
         let finalX;
 
         if ( snapToEnd ) {
@@ -155,31 +159,32 @@ export default class DragSlider {
             "isAtEnd":     IS_SNAP_TO_END
         } );
 
-        const CTX = this;
+        this.#currentSnapItem = snapItem;
 
-        gsap.to( this.#$list, {
+        const TWEEN = gsap.to( this.#$list, {
             "duration": 0.3,
             "x":        finalX,
             "y":        0,
             "z":        0,
-            "onUpdate": function() {
-                CTX.#deltaMove.x = gsap.getProperty( this.targets()[ 0 ], 'x' ) as number;
+            "onUpdateParams": [ this ],
+            "onUpdate": function( ctx ) {
+                ctx.#deltaMove.x = gsap.getProperty( this.targets()[ 0 ], 'x' ) as number;
 
-                CTX.#options.onSnapUpdate?.( {
+                ctx.#options.onSnapUpdate?.( {
                     "item":        snapItem,
-                    "xPos":        CTX.#deltaMove.x,
-                    "moveMaxSize": CTX.#listDelta,
+                    "xPos":        ctx.#deltaMove.x,
+                    "moveMaxSize": ctx.#listDelta,
                     "isAtStart":   IS_SNAP_TO_START,
                     "isAtEnd":     IS_SNAP_TO_END
                 } );
             }
         } );
 
-        this.#currentSnapItem = snapItem;
+        return TWEEN
     }
 
 
-    private getFirstPreviousItem( xPos: number ) {
+    #getFirstPreviousItem = ( xPos: number ): { snapItem: FLib.DragSlider.Item, snapToEnd: boolean } => {
         let snapItem;
 
         const absXPos = Math.abs( xPos );
@@ -199,7 +204,7 @@ export default class DragSlider {
     }
 
 
-    private getFirstNextItem( xPos: number ) {
+    #getFirstNextItem = ( xPos: number ): { snapItem: FLib.DragSlider.Item, snapToEnd: boolean } => {
         let lastDelta, snapItem, snapToEnd;
 
         const absXPos = Math.abs( xPos );
@@ -230,8 +235,8 @@ export default class DragSlider {
     }
 
 
-    private getClosestItem( xPos: number ) {
-        let lastDelta, snapItem, snapToEnd: boolean = false;
+    #getClosestItem = ( xPos: number ): { snapItem: FLib.DragSlider.Item, snapToEnd: boolean } => {
+        let lastDelta, snapItem, snapToEnd = false;
 
         const absXPos = Math.abs( xPos );
 
@@ -266,32 +271,32 @@ export default class DragSlider {
     }
 
 
-    private snapToItem() {
+    #snapToItem = (): void => {
         let snapItem;
 
         const ABS_DELTA_X = Math.abs( this.#deltaMove.deltaX );
 
-        if ( ABS_DELTA_X >= this.#options.swipeTresholdMin! && ABS_DELTA_X < Math.min( this.#firstItem.info.width * this.#options.swipeTresholdSize!, this.#options.swipeTresholdMin! * 3 ) ) {
+        if ( ABS_DELTA_X >= this.#options.swipeTresholdMin && ABS_DELTA_X < Math.min( this.#firstItem.info.width * this.#options.swipeTresholdSize, this.#options.swipeTresholdMin * 3 ) ) {
             if ( this.#deltaMove.deltaX < 0 ) {
-                snapItem = this.getFirstNextItem( this.#deltaMove.x );
+                snapItem = this.#getFirstNextItem( this.#deltaMove.x );
             }
             else {
-                snapItem = this.getFirstPreviousItem( this.#deltaMove.x );
+                snapItem = this.#getFirstPreviousItem( this.#deltaMove.x );
             }
         }
         else {
-            snapItem = this.getClosestItem( this.#deltaMove.x );
+            snapItem = this.#getClosestItem( this.#deltaMove.x );
         }
 
         if ( !snapItem ) {
             return;
         }
 
-        this.snapToItemAnimation( snapItem.snapItem, snapItem.snapToEnd );
+        this.#snapToItemAnimation( snapItem.snapItem, snapItem.snapToEnd );
     }
 
 
-    #onStartDrag = ( e, $target, coords: GestureCoordsType ) => {
+    #onStartDrag = ( e: Event, $target: HTMLElement, coords: FLib.Events.Gesture.Coords ): void => {
         if ( !this.#hasAlreadyBeenDragged ) {
             this.#onResize();
             this.#hasAlreadyBeenDragged = true;
@@ -331,8 +336,8 @@ export default class DragSlider {
     }
 
 
-    #onMove = ( e, $target, coords: GestureCoordsType ) => {
-        this.cancelLinkClick();
+    #onMove = ( e: Event, $target: HTMLElement, coords: FLib.Events.Gesture.Coords ): void => {
+        this.#cancelLinkClick();
 
         this.#deltaMove.deltaX = coords.pageX - this.#startDragCoords.pageX;
         this.#deltaMove.deltaY = coords.pageY - this.#startDragCoords.pageY;
@@ -362,16 +367,16 @@ export default class DragSlider {
     }
 
 
-    #onStopDrag = () => {
+    #onStopDrag = (): void => {
         gestureOff( document.body, 'dragSlider' );
 
         this.#isDragging = false;
 
         this.#deltaMove.x = this.#deltaMove.newX;
 
-        this.activeLinkClick();
+        this.#activeLinkClick();
 
-        this.snapToItem();
+        this.#snapToItem();
 
         this.#options.onStopDrag?.({
             "item":        this.#currentSnapItem,
@@ -383,7 +388,7 @@ export default class DragSlider {
     }
 
 
-    #onMouseenter = () => {
+    #onMouseenter = (): void => {
         if ( this.#isDragging || !this.#isDraggingActive ) {
             return;
         }
@@ -398,7 +403,7 @@ export default class DragSlider {
     }
 
 
-    #onMouseleave = () => {
+    #onMouseleave = (): void => {
         if ( this.#isDragging || !this.#isDraggingActive ) {
             return;
         }
@@ -413,30 +418,30 @@ export default class DragSlider {
     }
 
 
-    #cancelDrag = ( e ) => {
+    #cancelDrag = ( e: Event ): void => {
         e.preventDefault();
     }
 
 
-    next() {
+    next(): gsap.core.Tween | void {
         if ( !this.#isDraggingActive || this.#currentSnapItem.isLast ) {
             return;
         }
 
-        this.snapToItemAnimation( this.#itemArray[ this.#currentSnapItem.index + 1 ] );
+        return this.#snapToItemAnimation( this.#itemArray[ this.#currentSnapItem.index + 1 ] );
     }
 
 
-    previous() {
+    previous(): gsap.core.Tween | void {
         if ( !this.#isDraggingActive || this.#currentSnapItem.isFirst ) {
             return;
         }
 
-        this.snapToItemAnimation( this.#itemArray[ this.#currentSnapItem.index - 1 ] );
+        return this.#snapToItemAnimation( this.#itemArray[ this.#currentSnapItem.index - 1 ] );
     }
 
 
-    goToItem( $block: HTMLElement ) {
+    goToItem( $block: HTMLElement ): gsap.core.Tween | void {
 
         if ( !this.#isDraggingActive ) {
             return;
@@ -456,31 +461,31 @@ export default class DragSlider {
             "isAtEnd":     this.#deltaMove.x === this.#listDelta
         } );
 
-        const CTX = this;
-
-        gsap.to( this.#$list, {
+        return gsap.to( this.#$list, {
             "duration": 0.3,
             "x":        -1 * ITEM.info.left + this.#siteOffset,
             "y":        0,
             "z":        0,
-            "onUpdate": function() {
-                CTX.#deltaMove.x = gsap.getProperty( this.targets()[ 0 ], 'x' ) as number;
+            "onUpdateParams": [ this ],
+            "onUpdate": function( ctx ) {
+
+                ctx.#deltaMove.x = gsap.getProperty( this.targets()[ 0 ], 'x' ) as number;
 
-                CTX.#options.onSnapUpdate?.( {
+                ctx.#options.onSnapUpdate?.( {
                     "item":        ITEM,
-                    "xPos":        CTX.#deltaMove.x,
-                    "moveMaxSize": CTX.#listDelta,
-                    "isAtStart":   CTX.#deltaMove.x === 0,
-                    "isAtEnd":     CTX.#deltaMove.x === CTX.#listDelta
+                    "xPos":        ctx.#deltaMove.x,
+                    "moveMaxSize": ctx.#listDelta,
+                    "isAtStart":   ctx.#deltaMove.x === 0,
+                    "isAtEnd":     ctx.#deltaMove.x === ctx.#listDelta
                 } );
             }
         } );
-    };
+    }
 
 
-    init = () => {
+    init = (): this => {
         if ( this.#isInitialized ) {
-            return;
+            return this;
         }
 
         this.#isInitialized = true;
@@ -510,7 +515,7 @@ export default class DragSlider {
         }
 
         if ( !this.#$items.length ) {
-            return;
+            return this;
         }
 
         this.#onResize();
@@ -549,15 +554,17 @@ export default class DragSlider {
         } );
 
         aClass( this.#$slider, 'is-active' );
+
+        return this;
     }
 
 
-    destroy() {
+    destroy(): this {
         this.#isInitialized         = false;
         this.#hasAlreadyBeenDragged = false;
 
         if ( !this.#$items.length ) {
-            return;
+            return this;
         }
 
         off( window, {
@@ -594,6 +601,8 @@ export default class DragSlider {
         rClass( this.#$viewport, this.#options.dragClass );
 
         rClass( this.#$slider, 'is-active' );
+
+        return this;
     }
 
 }

package/Modules/GlobalState.ts

@@ -3,14 +3,42 @@ import { extend } from '../Helpers/Extend';
 
 
 
-const DEFAULT_OPTIONS: GlobalStateOptionsType = {
+const DEFAULT_OPTIONS: FLib.GlobalState.Options = {
     "dispatchEvents": false,
     "alwaysDispatch": false
 }
 
 
-/*
- *  Global State Manager
+
+/**
+ * Manage a global object that allow storing and sharing values among modules.
+ *
+ * @example
+ * ```ts
+ * // Use the default storage
+ * const globalState = new GlobalState();
+ * globalState.set( 'PROP', 'VALUE' );
+ * globalState.get( 'PROP' );
+ * ```
+ *
+ * @example
+ * ```ts
+ * // Use a storage with a specific name
+ * const globalState = new GlobalState();
+ * globalState.set( 'MY_STORE', 'PROP', 'VALUE' );
+ * globalState.get( 'MY_STORE', 'PROP' );
+ * ```
+ *
+ * @example
+ * ```ts
+ * // To use events on properties change
+ * const globalState = new GlobalState({
+ *  "dispatchEvents": true
+ * });
+ * globalState.registerOnEveryChange( (value, propertyName, storeName) => {} )
+ * globalState.registerOnStoreChange( (value, propertyName, storeName) => {}, 'storeName' )
+ * globalState.registerOnPropertyChange( (value, propertyName, storeName) => {}, 'storeName', 'myProperty' )
+ * ```
  */
 class GlobalState {
 
@@ -18,24 +46,24 @@ class GlobalState {
 
     #EVENTS_STORE: {
         [ storeName: string ]: {
-            functions: GlobalStateCallbackType[],
+            functions: FLib.GlobalState.Callback[],
             props: {
-                [ propertyName: string ]: GlobalStateCallbackType[]
+                [ propertyName: string ]: FLib.GlobalState.Callback[]
             }
         }
     };
-    #GLOBAL_EVENTS_STORE: GlobalStateCallbackType[] = [];
+    #GLOBAL_EVENTS_STORE: FLib.GlobalState.Callback[] = [];
     #stores              = {};
     #alwaysDispatch: boolean;
     #dispatchEvents: boolean;
 
 
-    get DEFAULT_STORE_NAME() {
+    get DEFAULT_STORE_NAME(): string {
         return this.#DEFAULT_STORE_NAME;
     }
 
 
-    constructor( userOptions?: GlobalStateOptionsType ) {
+    constructor( userOptions?: Partial<FLib.GlobalState.Options> ) {
         const options = extend( {}, DEFAULT_OPTIONS, userOptions );
 
         this.#alwaysDispatch      = options.alwaysDispatch;
@@ -54,7 +82,7 @@ class GlobalState {
     }
 
 
-    private dispatch( value, property: string, store: string ) {
+    #dispatch = ( value: any, property: string, store: string ): void => {
 
         if ( !this.#EVENTS_STORE[ store ] ) {
             this.#EVENTS_STORE[ store ] = {
@@ -86,27 +114,27 @@ class GlobalState {
      *
      * @param alwaysDispatch - If true, it will dispatch events even if the value in the store is the same as the value you try to set
      */
-    activeEventsDispatch( alwaysDispatch: boolean = false ) {
+    activeEventsDispatch( alwaysDispatch = false ): this {
         this.#dispatchEvents = true;
         this.#alwaysDispatch = alwaysDispatch;
+
+        return this;
     }
 
 
     /**
      * Stop the dispatch of events
      */
-    stopEventsDispatch() {
+    stopEventsDispatch(): this {
         this.#dispatchEvents = false;
+
+        return this;
     }
 
 
     /**
      * Set a value in a property. If there are only 2 arguments, the default store will be used
      *
-     * @param propertyName
-     * @param value
-     * @param storeName
-     *
      * @returns Return the setted value
      */
     set( propertyName: string, value: any, storeName = this.#DEFAULT_STORE_NAME ): any {
@@ -123,7 +151,7 @@ class GlobalState {
         this.#stores[ storeName ][ propertyName]  = value;
 
         if ( this.#dispatchEvents && ( this.#alwaysDispatch || !this.#alwaysDispatch && previousValue !== value ) ) {
-            this.dispatch( value, propertyName, storeName );
+            this.#dispatch( value, propertyName, storeName );
         }
 
         return value;
@@ -132,9 +160,6 @@ class GlobalState {
 
     /**
      * Get the value of a property. If there are only 2 arguments, the default store will be used.
-     *
-     * @param propertyName
-     * @param storeName
      */
     get( propertyName: string, storeName = this.#DEFAULT_STORE_NAME ): any {
         if ( !propertyName ) {
@@ -148,21 +173,21 @@ class GlobalState {
     /**
      * Bind a function to be called on all properties change
      */
-    registerOnEveryChange( callback: GlobalStateCallbackType ) {
-        if ( !callback ) {
-            return;
+    registerOnEveryChange( callback: FLib.GlobalState.Callback ): this {
+        if ( callback ) {
+            this.#GLOBAL_EVENTS_STORE.push( callback );
         }
 
-        this.#GLOBAL_EVENTS_STORE.push( callback );
+        return this;
     }
 
 
     /**
      * Bind a function to be called on all properties change for a specific store
      */
-    registerOnStoreChange( callback: GlobalStateCallbackType, storeName: string ) {
+    registerOnStoreChange( callback: FLib.GlobalState.Callback, storeName: string ): this {
         if ( !callback || !storeName ) {
-            return;
+            return this;
         }
 
         if ( !this.#EVENTS_STORE[ storeName ] ) {
@@ -173,15 +198,17 @@ class GlobalState {
         }
 
         this.#EVENTS_STORE[ storeName ].functions.push( callback );
+
+        return this;
     }
 
 
     /**
      * Bind a function to be called on a specific property change in a specific store
      */
-    registerOnPropertyChange( callback: GlobalStateCallbackType, storeName: string, propertyName: string ) {
+    registerOnPropertyChange( callback: FLib.GlobalState.Callback, storeName: string, propertyName: string ): this {
         if ( !callback || !storeName || !propertyName ) {
-            return;
+            return this;
         }
         if ( !this.#EVENTS_STORE[ storeName ] ) {
             this.#EVENTS_STORE[ storeName ] = {
@@ -195,15 +222,17 @@ class GlobalState {
         }
 
         this.#EVENTS_STORE[ storeName ].props[ propertyName ].push( callback );
+
+        return this;
     }
 
 
     /**
      * Unbind the registered function from all change events
      */
-    remove( callback: GlobalStateCallbackType ) {
+    remove( callback: FLib.GlobalState.Callback ): this {
         if ( !callback ) {
-            return;
+            return this;
         }
 
         slice( this.#GLOBAL_EVENTS_STORE, callback );
@@ -214,31 +243,9 @@ class GlobalState {
                 slice( this.#EVENTS_STORE[ storeName ].props[ propertyName ], callback );
             } );
         } );
+
+        return this;
     }
 }
 
-/**
- * Manage a global object that allow storing and sharing values among modules.
- *
- * @example
- * // Use the default storage
- * const globalState = new GlobalState();
- * globalState.set( 'PROP', 'VALUE' );
- * globalState.get( 'PROP' );
- *
- * @example
- * // Use a storage with a specific name
- * const globalState = new GlobalState();
- * globalState.set( 'MY_STORE', 'PROP', 'VALUE' );
- * globalState.get( 'MY_STORE', 'PROP' );
- *
- * @example
- * // To use events on properties change
- * const globalState = new GlobalState({
- *  "dispatchEvents": true
- * });
- * globalState.registerOnEveryChange( (value, propertyName, storeName) => {} )
- * globalState.registerOnStoreChange( (value, propertyName, storeName) => {}, 'storeName' )
- * globalState.registerOnPropertyChange( (value, propertyName, storeName) => {}, 'storeName', 'myProperty' )
- */
 export default GlobalState;

package/Modules/LoadGMap.ts

@@ -4,18 +4,17 @@ let gMapLoadingPromise;
 /**
  * Google Map loader
  *
- * @param apiUrl
- * @param callbackFunctionName
- *
  * @example
+ * ```ts
  * loadGMap( urlAPI ).then(
  *      googleAPI =>
  *      {
  *          new googleAPI.maps.Map( $container, googleMapOptions );
  *      }
  *  );
+ * ```
  *
- * @returns {Promise} - a promise resolved when the API is loaded
+ * @returns - a promise resolved when the API is loaded
  */
 export default function loadGMap( apiUrl: string, callbackFunctionName = 'initworldMap' ): Promise<typeof window.google> {
     if ( gMapLoadingPromise ) {
@@ -36,13 +35,11 @@ export default function loadGMap( apiUrl: string, callbackFunctionName = 'initwo
 
 
     gMapLoadingPromise = new Promise( function( resolve ) {
-        let script;
-
         window[ callbackFunctionName ] = function() {
             resolve( window.google );
         };
 
-        script      = document.createElement( 'script' );
+        const script      = document.createElement( 'script' );
         script.type = 'text/javascript';
         script.src  = apiUrl;