@creative-web-solution/front-library 7.1.3 → 7.1.4

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # CHANGELOG
 
+
+## 7.1.4
+
+* Typescript: Fix tsify and browserify compatibility
+* HistoryController: Remove UrlParser for window.URL
+
+
 ## 7.1.3
 
 * Typescript: Fix some type

package/Events/HistoryController.ts

@@ -1,5 +1,4 @@
 import { on }        from './EventsManager';
-import { UrlParser } from '../Helpers/UrlParser';
 import { slice }     from '../Helpers/Slice';
 
 
@@ -33,7 +32,7 @@ export default class HistoryController {
     #hasPushstate:           boolean;
     #hasPopStateEvent:       boolean;
     #currentState:           FLib.Events.History.StateObject;
-    #registeredFunctionList: (( url: FLib.Helpers.UrlParser, state: any ) => void)[];
+    #registeredFunctionList: (( url: URL, state: any ) => void)[];
 
 
     get state(): FLib.Events.History.StateObject {
@@ -53,7 +52,7 @@ export default class HistoryController {
         this.#defaultTitle = encodeURIComponent( defaultTitle );
 
         this.#currentState = {
-            "url":   new UrlParser( window.location.href ),
+            "url":   new window.URL( window.location.href ),
             "state": {},
             "title": this.#defaultTitle
         };
@@ -69,7 +68,7 @@ export default class HistoryController {
 
 
     // Call each registered function for popstate event
-    #callRegisteredFunction = ( url: FLib.Helpers.UrlParser, state: any ): void => {
+    #callRegisteredFunction = ( url: URL, state: any ): void => {
         if ( !this.#registeredFunctionList.length ) {
             return;
         }
@@ -87,7 +86,7 @@ export default class HistoryController {
         }
 
         this.#currentState = {
-            "url": new UrlParser( document.location.href ),
+            "url": new URL( document.location.href ),
             state,
             "title": ""
         };
@@ -101,15 +100,15 @@ export default class HistoryController {
      *
      * @param state - Native browser state object
      */
-    pushState( state: any, title: string, url: string | UrlParser ): this {
+    pushState( state: any, title: string, url: string | URL ): this {
         if ( !this.#hasPushstate ) {
             return this;
         }
 
-        url = url instanceof UrlParser ? url : new UrlParser( url as string );
+        url = url instanceof URL ? url : new URL( url as string );
 
         this.#currentState = {
-            "url": url as UrlParser,
+            "url": url as URL,
             state,
             "title": title ? encodeURIComponent( title ) : this.#defaultTitle
         };
@@ -118,7 +117,7 @@ export default class HistoryController {
             window.history.pushState(
                 state,
                 this.#currentState.title,
-                this.#currentState.url.absolute2
+                this.#currentState.url.href
             );
         }
         catch ( e ) {
@@ -137,14 +136,14 @@ export default class HistoryController {
             return this;
         }
 
-        anchor = anchor.indexOf( '#' ) === -1 ? anchor : anchor.slice( 1 );
+        anchor = anchor.indexOf( '#' ) === -1 ? `#${ anchor }` : anchor;
 
         try {
-            this.#currentState.url.setAnchor( anchor );
+            this.#currentState.url.hash = anchor.indexOf( '#' ) === -1 ? `#${ anchor }` : anchor;
             window.history.pushState(
                 this.#currentState.state,
                 this.#currentState.title,
-                this.#currentState.url.absolute2
+                this.#currentState.url.href
             );
         }
         catch ( e ) {

package/Helpers/Debounce.ts

@@ -9,7 +9,7 @@ export function debounce(
                     threshold = 100,
                     immediate = false
                 ): ( ...args: any[] ) => void {
-    let timeout: ReturnType<typeof setTimeout> | undefined;
+    let timeout: any;
 
     return function<Type>( this: Type, ...args: any[] ) {
 

package/Modules/DragSlider.ts

@@ -20,17 +20,17 @@ export default class DragSlider {
     #$slider:               HTMLElement;
     #viewportInfo;
     #siteOffset;
-    #listDelta!:             number;
-    #$viewport!:             HTMLElement;
-    #$items!:                NodeList;
-    #$list!:                 HTMLElement;
-    #isDragging!:            boolean;
-    #itemMap!:               Map<HTMLElement, FLib.DragSlider.Item>;
-    #firstItem!:             FLib.DragSlider.Item;
-    #currentSnapItem!:       FLib.DragSlider.Item;
-    #hasAlreadyBeenDragged!: boolean;
-    #startDragCoords!:       FLib.Events.Gesture.Coords;
-    #isInitialized!:         boolean;
+    #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;
     #debouncedOnResize;
 
 
@@ -40,6 +40,7 @@ export default class DragSlider {
 
 
     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';
         }
@@ -80,7 +81,10 @@ export default class DragSlider {
 
 
     #onResize = (): void => {
-        this.#viewportInfo = offset( this.#$viewport );
+        if ( !this.#$items || !this.#$list ) {
+            return;
+        }
+        this.#viewportInfo = offset( this.#$viewport as HTMLElement );
         this.#siteOffset   = parseInt( prop( (this.#$items[ 0 ] as HTMLElement), 'marginLeft' ), 10 );
         this.#listDelta    = this.#viewportInfo.width - this.#$list.scrollWidth;
 
@@ -105,6 +109,8 @@ export default class DragSlider {
 
         this.#itemArray.length = 0;
 
+        const LAST_INDEX = this.#$items.length;
+
         this.#$items.forEach( ( $item: Node, index: number ) => {
             const $ITEM       = $item as HTMLElement;
             const ITEM_OFFSET = offset( $ITEM, false, this.#$list );
@@ -112,7 +118,7 @@ export default class DragSlider {
             this.#itemArray.push({
                 index,
                 "isFirst": index === 0,
-                "isLast":  index === this.#$items.length - 1 || ITEM_OFFSET.left > Math.abs( this.#listDelta ),
+                "isLast":  index === LAST_INDEX - 1 || ITEM_OFFSET.left > Math.abs( this.#listDelta ),
                 "$item":   $ITEM,
                 "info":    ITEM_OFFSET
             });
@@ -161,7 +167,7 @@ export default class DragSlider {
 
         this.#currentSnapItem = snapItem;
 
-        const TWEEN = gsap.to( this.#$list, {
+        const TWEEN = gsap.to( this.#$list as HTMLElement, {
             "duration": 0.3,
             "x":        finalX,
             "y":        0,
@@ -276,7 +282,7 @@ export default class DragSlider {
 
         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 as FLib.DragSlider.Item ).info.width * this.#options.swipeTresholdSize, this.#options.swipeTresholdMin * 3 ) ) {
             if ( this.#deltaMove.deltaX < 0 ) {
                 snapItem = this.#getFirstNextItem( this.#deltaMove.x );
             }
@@ -302,7 +308,7 @@ export default class DragSlider {
             this.#hasAlreadyBeenDragged = true;
         }
 
-        if ( !this.#isDraggingActive ) {
+        if ( !this.#isDraggingActive || !this.#$list ) {
             return;
         }
 
@@ -339,8 +345,8 @@ export default class DragSlider {
     #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;
+        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.newX  = this.#deltaMove.deltaX + this.#deltaMove.x;
 
@@ -351,7 +357,7 @@ export default class DragSlider {
             this.#deltaMove.newX = this.#listDelta;
         }
 
-        gsap.set( this.#$list, {
+        gsap.set( this.#$list as HTMLElement, {
             "x": this.#deltaMove.newX,
             "y": 0,
             "z": 0
@@ -424,20 +430,20 @@ export default class DragSlider {
 
 
     next(): gsap.core.Tween | void {
-        if ( !this.#isDraggingActive || this.#currentSnapItem.isLast ) {
+        if ( !this.#isDraggingActive || ( this.#currentSnapItem as FLib.DragSlider.Item ).isLast ) {
             return;
         }
 
-        return this.#snapToItemAnimation( this.#itemArray[ this.#currentSnapItem.index + 1 ] );
+        return this.#snapToItemAnimation( this.#itemArray[ ( this.#currentSnapItem as FLib.DragSlider.Item ).index + 1 ] );
     }
 
 
     previous(): gsap.core.Tween | void {
-        if ( !this.#isDraggingActive || this.#currentSnapItem.isFirst ) {
+        if ( !this.#isDraggingActive || ( this.#currentSnapItem as FLib.DragSlider.Item ).isFirst ) {
             return;
         }
 
-        return this.#snapToItemAnimation( this.#itemArray[ this.#currentSnapItem.index - 1 ] );
+        return this.#snapToItemAnimation( this.#itemArray[ ( this.#currentSnapItem as FLib.DragSlider.Item ).index - 1 ] );
     }
 
 
@@ -461,7 +467,7 @@ export default class DragSlider {
             "isAtEnd":     this.#deltaMove.x === this.#listDelta
         } );
 
-        return gsap.to( this.#$list, {
+        return gsap.to( this.#$list as HTMLElement, {
             "duration": 0.3,
             "x":        -1 * ITEM.info.left + this.#siteOffset,
             "y":        0,
@@ -491,8 +497,6 @@ export default class DragSlider {
         this.#isInitialized = true;
 
         if ( !this.#$viewport ) {
-            this.#itemMap           = new Map();
-
             const $VP = this.#$slider.querySelector( this.#options.viewportSelector );
             if ( !$VP ) {
                 throw `"${ this.#options.viewportSelector }" not found`;
@@ -514,7 +518,7 @@ export default class DragSlider {
             this.#debouncedOnResize = debounce( this.#onResize );
         }
 
-        if ( !this.#$items.length ) {
+        if ( !this.#$items?.length ) {
             return this;
         }
 
@@ -563,7 +567,7 @@ export default class DragSlider {
         this.#isInitialized         = false;
         this.#hasAlreadyBeenDragged = false;
 
-        if ( !this.#$items.length ) {
+        if ( !this.#$items?.length ) {
             return this;
         }
 
@@ -572,7 +576,7 @@ export default class DragSlider {
             "callback":    this.#debouncedOnResize
         } );
 
-        gestureOff( this.#$viewport, 'dragSlider' );
+        this.#$viewport && gestureOff( this.#$viewport, 'dragSlider' );
 
         gestureOff( document.body, 'dragSlider' );
 
@@ -591,14 +595,15 @@ export default class DragSlider {
             "callback":   this.#onMouseleave
         } );
 
+        if ( this.#$list ) {
+            gsap.killTweensOf( this.#$list );
 
-        gsap.killTweensOf( this.#$list );
-
-        gsap.set( this.#$list, {
-            "clearProps": "all"
-        } );
+            gsap.set( this.#$list, {
+                "clearProps": "all"
+            } );
+        }
 
-        rClass( this.#$viewport, this.#options.dragClass );
+        this.#$viewport && rClass( this.#$viewport, this.#options.dragClass );
 
         rClass( this.#$slider, 'is-active' );
 

package/Modules/ScrollSnap.ts

@@ -35,12 +35,12 @@ function getPosition( start, end, elapsed, duration ) {
 
 
 class ScrollTo {
-    #startTime!:     number;
+    #startTime:      number | undefined;
     #animationFrame;
-    #duration!:      number;
-    #startPosition!: number;
-    #snapItem!:      FLib.ScrollSnap.Item;
-    #snapItemType!:  FLib.ScrollSnap.SnapType;
+    #duration:       number | undefined;
+    #startPosition:  number | undefined;
+    #snapItem:       FLib.ScrollSnap.Item | undefined;
+    #snapItemType:   FLib.ScrollSnap.SnapType | undefined;
     #scrollPropName: FLib.ScrollSnap.ScrollPropertyType;
     #$element:       HTMLElement;
     #callback:       FLib.ScrollSnap.ScrollToCallback;
@@ -54,6 +54,10 @@ class ScrollTo {
 
 
     #step = ( timestamp: number ) => {
+        if ( !this.#snapItem ) {
+            return;
+        }
+
         if ( !this.#startTime ) {
             this.#startTime = timestamp;
         }
@@ -69,13 +73,13 @@ class ScrollTo {
             );
         }
 
-        if ( elapsed < this.#duration ) {
+        if ( elapsed < (this.#duration as number) ) {
             this.#animationFrame = window.requestAnimationFrame( this.#step.bind( this ) );
         }
         else {
             if ( typeof this.#callback === 'function' ) {
                 window.requestAnimationFrame( () => {
-                    this.#callback( this.#snapItem, this.#snapItemType );
+                    this.#callback( this.#snapItem as FLib.ScrollSnap.Item, this.#snapItemType as FLib.ScrollSnap.SnapType );
                 } );
             }
         }
@@ -98,7 +102,7 @@ class ScrollTo {
         if ( !delta ) {
             if ( typeof this.#callback === 'function' ) {
                 window.requestAnimationFrame( () => {
-                    this.#callback( this.#snapItem, this.#snapItemType );
+                    this.#callback( this.#snapItem as FLib.ScrollSnap.Item, this.#snapItemType as FLib.ScrollSnap.SnapType );
                 } );
             }
             return;

package/Modules/SkinSelect.ts

@@ -38,26 +38,26 @@ const defaultOptions: FLib.SkinSelect.Options = {
  * You can access the skin API in the __skinAPI property of the $select HTMLElement or its wrapper.
  */
 export default class SkinSelect implements FLib.SkinSelect.SkinSelect {
-    #$select:           FLib.SkinSelect.CustomSelect;
-    #loading!:          boolean;
+    #$select!:          FLib.SkinSelect.CustomSelect;
+    #loading            = false;
     #options!:          FLib.SkinSelect.Options;
     #extraClass!:       string;
     #$parent!:          FLib.SkinSelect.CustomSelectParent;
     #$title!:           HTMLElement;
-    #isListOpened!:     boolean;
-    #$options!:         NodeList;
-    #$lastOption!:      HTMLElement | null;
-    #focusedItemIndex!: number;
-    #$layer!:           HTMLElement;
+    #isListOpened       = false;
+    #$options:          NodeList | undefined;
+    #$lastOption:       HTMLElement | null = null;
+    #focusedItemIndex   = -1;
+    #$layer:            HTMLElement | undefined;
 
-    constructor( $select: HTMLSelectElement, userOptions?: Partial<FLib.SkinSelect.Options> ) {
+    constructor( $select: FLib.SkinSelect.CustomSelect, userOptions?: Partial<FLib.SkinSelect.Options> ) {
 
-        this.#$select = $select;
-
-        if ( this.#$select.hasAttribute( 'multiple' ) || this.#$select.__skinAPI ) {
+        if ( $select.hasAttribute( 'multiple' ) || $select.__skinAPI ) {
             return;
         }
 
+        this.#$select = $select;
+
         this.#loading = false;
 
         this.#options = extend( defaultOptions, userOptions );
@@ -420,6 +420,10 @@ export default class SkinSelect implements FLib.SkinSelect.SkinSelect {
 
 
     #focusItem = ( index: number ): void => {
+        if ( !this.#$options ) {
+            return;
+        }
+
         if ( index < 0 ) {
             index = this.#$options.length - 1;
         }

package/README.md

@@ -1,6 +1,6 @@
 # Front Library
 
-@version: 7.1.3
+@version: 7.1.4
 
 
 ## Use

package/Types/EventsHelpers.d.ts

@@ -179,12 +179,12 @@ declare namespace FLib {
          */
         namespace History {
             type StateObject = {
-                url:    FLib.Helpers.UrlParser;
+                url:    URL;
                 state:  any;
                 title:  string;
             }
 
-            type Callback = ( url: FLib.Helpers.UrlParser, state: any ) => void;
+            type Callback = ( url: URL, state: any ) => 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.3",
+  "version": "7.1.4",
   "homepage": "https://github.com/creative-web-solution/front-library",
   "author": "Creative Web Solution <contact@cws-studio.com> (https://www.cws-studio.com)",
   "keywords": [],