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

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # CHANGELOG
 
+## 7.1.27
+
+* [Slider]: Remove gsap
+* [DragSlider]
+    * Remove gsap
+    * Add accessibility feature
+    * Take last item margin in account
+    * Improvements
+* [YouTubePlayer]: Update parameters doc
+* [Popin]:
+    * Fix focus issue
+    * Handle background to be inside the popin
+
+
 ## 7.1.26
 
 * Remove unused types

package/Modules/DragSlider.ts

@@ -13,40 +13,42 @@ const defaultOptions = {
     swipeTresholdSize: 0.5,
     lockedClass: 'is-locked',
     _animReset: function($list) {
-        gsap.set( $list, {
-            "x": 0,
-            "y": 0,
-            "z": 0
-        } );
+        // gsap.set( $list, {
+        //     "x": 0,
+        //     "y": 0,
+        //     "z": 0
+        // } );
     },
     _animClear: function($list) {
-        gsap.set( $list, {
-            "clearProps": "all"
-        } );
+        // gsap.set( $list, {
+        //     "clearProps": "all"
+        // } );
     },
     _animKill: function($list) {
-        gsap.killTweensOf( $list );
+        // gsap.killTweensOf( $list );
     },
     _animMoveItem: function($list, x, onUpdate) {
-        return gsap.to( $list, {
-            "duration": 0.3,
-            "x":        x,
-            "y":        0,
-            "z":        0,
-            "onUpdate": function() {
-                onUpdate(gsap.getProperty( this.targets()[ 0 ], 'x' ));
-            }
-        } );
+        // return gsap.to( $list, {
+        //     "duration": 0.3,
+        //     "x":        x,
+        //     "y":        0,
+        //     "z":        0,
+        //     "onUpdate": function() {
+        //         onUpdate(gsap.getProperty( this.targets()[ 0 ], 'x' ));
+        //     }
+        // } );
     },
     _setCoordinates: function($list, x) {
-        gsap.set( $list, {
-            "x": x,
-            "y": 0,
-            "z": 0
-        } );
+        // gsap.set( $list, {
+        //     "x": x,
+        //     "y": 0,
+        //     "z": 0
+        // } );
     }
 }
 
+const MINIMUM_MOVEMENT_TO_START_DRAG = 3; // px
+
 /**
  * DragSlider
  */
@@ -63,6 +65,7 @@ export default class DragSlider {
     #$slider:               HTMLElement;
     #viewportInfo;
     #siteOffsetLeft          = 0;
+    #siteOffsetRight         = 0;
     #listDelta               = 0;
     #$viewport:              HTMLElement | undefined;
     #$items:                 NodeList | undefined;
@@ -74,6 +77,8 @@ export default class DragSlider {
     #hasAlreadyBeenDragged   = false;
     #startDragCoords:        FLib.Events.Gesture.Coords | undefined;
     #isInitialized           = false;
+    #visibleItems:           FLib.DragSlider.Item[] = [];
+    #hiddenItems:            FLib.DragSlider.Item[] = [];
     #debouncedOnResize;
 
 
@@ -93,6 +98,14 @@ export default class DragSlider {
         return this.#$items;
     }
 
+    get visibleItems(): FLib.DragSlider.Item[] {
+        return this.#visibleItems;
+    }
+
+    get hiddenItems(): FLib.DragSlider.Item[] {
+        return this.#hiddenItems;
+    }
+
 
     constructor( $slider: HTMLElement, userOptions: Partial<FLib.DragSlider.Options> ) {
 
@@ -131,8 +144,9 @@ export default class DragSlider {
 
         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.#viewportInfo.width - this.#$list.scrollWidth;
+        this.#listDelta    = this.#viewportInfo.width - this.#$list.scrollWidth - this.#siteOffsetLeft - this.#siteOffsetRight;
 
         const prevIsDraggingActive = this.#isDraggingActive;
         this.#isDraggingActive     = this.#listDelta < 0;
@@ -152,37 +166,42 @@ export default class DragSlider {
         this.#itemArray.length = 0;
         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 DATA = {
+                index,
+                "isFirst": index === 0,
+                "isLast":  false,
+                "$item":   $ITEM,
+                "info":    ITEM_OFFSET
+            };
 
             if (ITEM_OFFSET.left - this.#siteOffsetLeft <= ABS_LIST_DELTA) {
-                this.#itemArray.push({
-                    index,
-                    "isFirst": index === 0,
-                    "isLast":  false,
-                    "$item":   $ITEM,
-                    "info":    ITEM_OFFSET
-                });
-
-                this.#itemMap.set( $ITEM, this.#itemArray[ index ] );
+                this.#itemArray.push(DATA);
+
+                this.#itemMap.set( $ITEM, DATA );
                 continue;
             }
 
-            this.#itemArray.push({
-                index,
-                "isFirst": index === 0,
-                "isLast":  true,
-                "$item":   $ITEM,
-                "info":    {
-                    ...ITEM_OFFSET,
-                    "left": ABS_LIST_DELTA + this.#siteOffsetLeft,
-                    "x":    ABS_LIST_DELTA + this.#siteOffsetLeft
-                }
-            });
-            this.#itemMap.set( $ITEM, this.#itemArray[ index ] );
+            DATA.isLast = true;
+
+            if (!flag) {
+                this.#itemArray.push(DATA);
+                // this.#itemArray.push({
+                //     ...DATA,
+                //     "info":    {
+                //         ...ITEM_OFFSET,
+                //         "left": ABS_LIST_DELTA + this.#siteOffsetLeft,
+                //         "x":    ABS_LIST_DELTA + this.#siteOffsetLeft
+                //     }
+                // });
+            }
+            flag = true;
 
-            break;
+            this.#itemMap.set( $ITEM, DATA );
         }
 
         this.#firstItem = this.#itemMap.get( (this.#$items[ 0 ] as HTMLElement) ) as FLib.DragSlider.Item;
@@ -193,17 +212,19 @@ export default class DragSlider {
         else {
             this.#currentSnapItem = this.#itemArray[ this.#currentSnapItem.index ];
         }
+
+        this.#updateAccessibilityFeature();
     }
 
 
-    #snapToItemAnimation =  ( snapItem: FLib.DragSlider.Item ): Promise<any> | void => {
+    #snapToItemAnimation =  ( snapItem: FLib.DragSlider.Item ): Promise<any> => {
         if (!snapItem) {
-            return;
+            return Promise.resolve();
         }
 
         let finalX;
 
-        finalX = -1 * snapItem.info.left + this.#siteOffsetLeft;
+        finalX = -1 * snapItem.info.left;
 
         finalX = Math.max( Math.min( 0, finalX ), this.#listDelta );
 
@@ -225,11 +246,15 @@ export default class DragSlider {
             "xPos":        this.#deltaMove.x,
             "moveMaxSize": this.#listDelta,
             "isAtStart":   IS_SNAP_TO_START,
-            "isAtEnd":     IS_SNAP_TO_END
+            "isAtEnd":     IS_SNAP_TO_END,
+            "visibleItems": this.#visibleItems,
+            "hiddenItems":  this.#hiddenItems
         } );
 
         this.#currentSnapItem = snapItem;
 
+        finalX += this.#siteOffsetLeft;
+
         return this.#options._animMoveItem( this.#$list, finalX, (newX) => {
             this.#deltaMove.x = newX;
 
@@ -238,9 +263,11 @@ export default class DragSlider {
                 "xPos":        this.#deltaMove.x,
                 "moveMaxSize": this.#listDelta,
                 "isAtStart":   IS_SNAP_TO_START,
-                "isAtEnd":     IS_SNAP_TO_END
+                "isAtEnd":     IS_SNAP_TO_END,
+                "visibleItems": this.#visibleItems,
+                "hiddenItems":  this.#hiddenItems
             } );
-        } );
+        } ).then(() => this.#updateAccessibilityFeature());
     }
 
 
@@ -329,7 +356,17 @@ export default class DragSlider {
             return;
         }
 
-        this.#snapToItemAnimation( snapItem.snapItem );
+        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
+            })
+        });
     }
 
 
@@ -348,7 +385,7 @@ export default class DragSlider {
         this.#options._animKill( this.#$list );
 
         this.#startDragCoords = coords;
-        this.#listDelta       = this.#viewportInfo.width - this.#$list.scrollWidth;
+        this.#listDelta       = this.#viewportInfo.width - this.#$list.scrollWidth - this.#siteOffsetLeft - this.#siteOffsetRight;
         this.#deltaMove.newX  = this.#deltaMove.x;
 
         gesture( document.body, 'dragSlider', {
@@ -369,7 +406,9 @@ export default class DragSlider {
             "xPos":        this.#deltaMove.x,
             "moveMaxSize": this.#listDelta,
             "isAtStart":   this.#deltaMove.x === 0,
-            "isAtEnd":     this.#deltaMove.x === this.#listDelta
+            "isAtEnd":     this.#deltaMove.x === this.#listDelta,
+            "visibleItems": this.#visibleItems,
+            "hiddenItems":  this.#hiddenItems
         } );
     }
 
@@ -380,13 +419,17 @@ export default class DragSlider {
         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.#deltaMove.newX = this.#listDelta;
+        else if ( this.#deltaMove.newX < this.#listDelta + this.#siteOffsetRight ) {
+            this.#deltaMove.newX = this.#listDelta + this.#siteOffsetRight;
         }
 
         this.#options._setCoordinates(this.#$list, this.#deltaMove.newX);
@@ -396,20 +439,25 @@ export default class DragSlider {
             "xPos":        this.#deltaMove.newX,
             "moveMaxSize": this.#listDelta,
             "isAtStart":   this.#deltaMove.newX === 0,
-            "isAtEnd":     this.#deltaMove.newX === this.#listDelta
+            "isAtEnd":     this.#deltaMove.newX === this.#listDelta,
+            "visibleItems": this.#visibleItems,
+            "hiddenItems":  this.#hiddenItems
         } );
     }
 
 
     #onStopDrag = (): void => {
         gestureOff( document.body, 'dragSlider' );
-
         this.#isDragging = false;
 
-        this.#deltaMove.x = this.#deltaMove.newX;
-
         this.#activeLinkClick();
 
+        if (this.#deltaMove.x === this.#deltaMove.newX) {
+            return;
+        }
+
+        this.#deltaMove.x = this.#deltaMove.newX;
+
         this.#snapToItem();
 
         this.#options.onStopDrag?.({
@@ -417,7 +465,9 @@ export default class DragSlider {
             "xPos":        this.#deltaMove.x,
             "moveMaxSize": this.#listDelta,
             "isAtStart":   this.#deltaMove.x === 0,
-            "isAtEnd":     this.#deltaMove.x === this.#listDelta
+            "isAtEnd":     this.#deltaMove.x === this.#listDelta,
+            "visibleItems": this.#visibleItems,
+            "hiddenItems":  this.#hiddenItems
         } );
     }
 
@@ -432,7 +482,9 @@ export default class DragSlider {
             "xPos":        this.#deltaMove.x,
             "moveMaxSize": this.#listDelta,
             "isAtStart":   this.#deltaMove.x === 0,
-            "isAtEnd":     this.#deltaMove.x === this.#listDelta
+            "isAtEnd":     this.#deltaMove.x === this.#listDelta,
+            "visibleItems": this.#visibleItems,
+            "hiddenItems":  this.#hiddenItems
         } );
     }
 
@@ -447,7 +499,9 @@ export default class DragSlider {
             "xPos":        this.#deltaMove.x,
             "moveMaxSize": this.#listDelta,
             "isAtStart":   this.#deltaMove.x === 0,
-            "isAtEnd":     this.#deltaMove.x === this.#listDelta
+            "isAtEnd":     this.#deltaMove.x === this.#listDelta,
+            "visibleItems": this.#visibleItems,
+            "hiddenItems":  this.#hiddenItems
         } );
     }
 
@@ -457,32 +511,32 @@ export default class DragSlider {
     }
 
 
-    next(): Promise<any> | void {
+    next(): Promise<any> {
         const CURRENT_ITEM = this.#currentSnapItem as FLib.DragSlider.Item;
 
         if ( !this.#isDraggingActive || !this.#itemArray[ CURRENT_ITEM.index + 1 ] ) {
-            return;
+            return Promise.resolve();
         }
 
         return this.#snapToItemAnimation( this.#itemArray[ CURRENT_ITEM.index + 1 ] );
     }
 
 
-    previous(): Promise<any> | void {
+    previous(): Promise<any> {
         const CURRENT_ITEM = this.#currentSnapItem as FLib.DragSlider.Item;
 
         if ( !this.#isDraggingActive || CURRENT_ITEM.isFirst ) {
-            return;
+            return Promise.resolve();
         }
 
         return this.#snapToItemAnimation( this.#itemArray[ CURRENT_ITEM.index - 1 ] );
     }
 
 
-    goToItem( blockOrIndex: HTMLElement | number ): Promise<any> | void {
+    goToItem( blockOrIndex: HTMLElement | number ): Promise<any> {
 
         if ( !this.#isDraggingActive ) {
-            return;
+            return Promise.resolve();
         }
 
         let $block;
@@ -495,13 +549,13 @@ export default class DragSlider {
         }
 
         if ( !$block ) {
-            return;
+            return Promise.resolve();
         }
 
         const ITEM = this.#itemMap.get( $block );
 
         if ( !ITEM ) {
-            return;
+            return Promise.resolve();
         }
 
         this.#currentSnapItem = ITEM;
@@ -511,7 +565,9 @@ export default class DragSlider {
             "xPos":        this.#deltaMove.x,
             "moveMaxSize": this.#listDelta,
             "isAtStart":   this.#deltaMove.x === 0,
-            "isAtEnd":     this.#deltaMove.x === this.#listDelta
+            "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) => {
@@ -522,8 +578,33 @@ export default class DragSlider {
                 "xPos":        this.#deltaMove.x,
                 "moveMaxSize": this.#listDelta,
                 "isAtStart":   this.#deltaMove.x === 0,
-                "isAtEnd":     this.#deltaMove.x === this.#listDelta
+                "isAtEnd":     this.#deltaMove.x === this.#listDelta,
+                "visibleItems": this.#visibleItems,
+                "hiddenItems":  this.#hiddenItems
             } );
+        }).then(() => this.#updateAccessibilityFeature());
+    }
+
+    #updateAccessibilityFeature = (): void => {
+        this.#visibleItems.length = 0;
+        this.#hiddenItems.length = 0;
+
+        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;
+
+            if (hideElement1 || hideElement2) {
+                item.$item.setAttribute("tabindex", "-1");
+                item.$item.setAttribute("inert", "");
+                item.$item.setAttribute("aria-hidden", "true");
+                this.#hiddenItems.push(item);
+                return;
+            }
+
+            item.$item.removeAttribute("tabindex");
+            item.$item.removeAttribute("inert");
+            item.$item.setAttribute("aria-hidden", "false");
+            this.#visibleItems.push(item);
         });
     }
 
@@ -600,7 +681,9 @@ export default class DragSlider {
             "xPos":        this.#deltaMove.x,
             "moveMaxSize": this.#listDelta,
             "isAtStart":   this.#deltaMove.x === 0,
-            "isAtEnd":     this.#deltaMove.x === this.#listDelta
+            "isAtEnd":     this.#deltaMove.x === this.#listDelta,
+            "visibleItems": this.#visibleItems,
+            "hiddenItems":  this.#hiddenItems
         } );
 
         return this;

package/Modules/Popin/Popin.ts

@@ -37,7 +37,7 @@ export default class Popin {
     #keyboardControls;
     #options:           FLib.Popin.Options;
     #controllerOptions: FLib.Popin.ControllerOptions | undefined;
-    #backgroundLayer:   PopinBackground;
+    #backgroundLayer:   PopinBackground | undefined;
     #tick;
     #$popin:            HTMLElement;
 
@@ -57,7 +57,7 @@ export default class Popin {
         }
         else {
             this.#options         = extend( defaultOptions, userOptions );
-            this.#backgroundLayer = new PopinBackground( this, this.#options );
+            this.#backgroundLayer = this.#options.isBackgroundAside ? new PopinBackground( this, this.#options ) : undefined;
         }
 
 
@@ -195,9 +195,6 @@ export default class Popin {
 
         return this.#showBackgroundLayer()
             .then( () => {
-                if ( this.#isInlinePopin ) {
-                    this.#addAccessibility();
-                }
                 return this.#animations.initOpenPopin( this.#$popin );
             } )
             .then( () => {
@@ -206,6 +203,9 @@ export default class Popin {
                 }
             } )
             .then( () => {
+                if ( this.#isInlinePopin ) {
+                    this.#addAccessibility();
+                }
                 return this.#animations.openPopin( this.#$popin );
             } )
             .then( () => {

package/Modules/Popin/Tools.ts

@@ -17,6 +17,7 @@ export const defaultOptions = {
     "marginHeight": 20,
     "autoResize": false,
     "enableKeyboard": true,
+    "isBackgroundAside": true,
     "onLoad": (): Promise<any> => {
         return Promise.resolve();
     },

package/Modules/Slider/Slider.ts

@@ -28,16 +28,16 @@ const defaultOptions = {
     "activeClass":          "active-slide",
     "loop":                 true,
     "_setStyle": ( $elem, styles ) => {
-        gsap.set( $elem, styles );
+        // gsap.set( $elem, styles );
     },
     "_tweenTo": ( $elem, styles ) => {
-        gsap.to( $elem, styles );
+        // gsap.to( $elem, styles );
     },
     "_tweenFromTo": ( $elem, init, styles ) => {
-        gsap.fromTo( $elem, init, styles );
+        // gsap.fromTo( $elem, init, styles );
     },
     "_killTweens": ( $elem ) => {
-        gsap.killTweensOf( $elem );
+        // gsap.killTweensOf( $elem );
     }
 };
 
@@ -63,7 +63,7 @@ export default class Slider {
     #STATE_IDLE     = 'idle';
     #STATE_MOVING   = 'moving';
     #state          = this.#STATE_IDLE;
-    #EASE_NONE      = Linear.easeNone;
+    #EASE_NONE      = "none";
     #options:       FLib.Slider.Options;
 
 

package/Modules/YouTubePlayer.ts

@@ -10,7 +10,6 @@ const defaultOptions: Partial<FLib.YouTubePlayer.Options> = {
         "autoplay": 0,
         "controls": 2,
         "autohide": 1,
-        "modestbranding": 1,
         "showinfo": 0
     }
 };
@@ -35,11 +34,13 @@ const defaultOptions: Partial<FLib.YouTubePlayer.Options> = {
  *             }
  *         },
  *         "playerVars": {
- *             "autoplay": 0,
- *             "controls": 2,
- *             "autohide": 1,
- *             "modestbranding": 1,
- *             "showinfo": 0,
+ *           "enablejsapi": 1,
+ *           "autoplay": 1,
+ *           "controls": 2,
+ *           "autohide": 1,
+ *           "showinfo": 0,
+ *           "origin": "my-domain.com",
+ *           "playsinline": 1,
  *             // ... All available youtube player options
  *         }
  *     }

package/README.md

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

package/Types/DragSlider.d.ts

@@ -1,11 +1,13 @@
 declare namespace FLib {
     namespace DragSlider {
         type CallbackParam = {
-            item:        any;
-            xPos:        number;
-            moveMaxSize: number;
-            isAtStart:   boolean;
-            isAtEnd:     boolean;
+            item:         any;
+            xPos:         number;
+            moveMaxSize:  number;
+            isAtStart:    boolean;
+            isAtEnd:      boolean;
+            visibleItems: Item[];
+            hiddenItems:  Item[];
         }
 
         type Item = {
@@ -36,6 +38,7 @@ declare namespace FLib {
             onDrag?:            Callback;
             onStopDrag?:        Callback;
             onSnap?:            Callback;
+            onSnapEnd?:         Callback;
             onSnapUpdate?:      Callback;
             onMouseEnter?:      Callback;
             onMouseLeave?:      Callback;
@@ -54,7 +57,7 @@ declare namespace FLib {
             _animReset: ($list) => void;
             _animClear: ($list) => void;
             _animKill: ($list) => void;
-            _animMoveItem: ($list, x, onUpdate) => Promise<any> | void;
+            _animMoveItem: ($list, x, onUpdate) => Promise<any>;
             _setCoordinates: ($list, x) => void;
         }
     }

package/Types/Popin.d.ts

@@ -75,6 +75,8 @@ declare namespace FLib {
             errorMessage:      string;
             /** @defaultValue true */
             enableKeyboard:    boolean;
+            /** @defaultValue true */
+            isBackgroundAside: boolean;
             onOpen?:            ( $popin: HTMLElement ) => void;
             onClose?:           ( $popin: HTMLElement ) => void;
             onLoad:             ( $popin: HTMLElement ) => Promise<void>;

package/package.json

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