@creative-web-solution/front-library 7.1.23 → 7.1.25

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # CHANGELOG
 
+## 7.1.26
+
+* Use $target instead of e.target in EventManager callbacks
+
+
+## 7.1.25
+
+* [Defer] Fix type
+
+
+## 7.1.24
+
+* [Gesture] Fix currentTarget
+* [EventsManager] Callback signature harmonization
+
+
 ## 7.1.23
 
 * [TransitionHelpers] Fix delay issue

package/Events/EventsManager.ts

@@ -71,15 +71,21 @@ function passiveTestFnc() {return;}
 }() );
 
 
-function getDelegation( $element: Node, selector: string, callback: ( e: Event, $target: Element ) => void ) {
-    return e => {
-        const $target = e.target.closest( selector );
+function getDelegation( $element: Node, callback: ( e: Event, $target: Element ) => void, selector?: string ) {
+    if (selector) {
+        return e => {
+            const $target = e.target.closest( selector );
 
-        if ( !$target || !$element.contains( $target ) ) {
-            return;
-        }
+            if ( !$target || !$element.contains( $target ) ) {
+                return;
+            }
+
+            callback.call( $target, e, $target );
+        };
+    }
 
-        callback.call( $target, e, $target );
+    return e => {
+        callback.call( $element, e, $element as Element );
     };
 }
 
@@ -153,14 +159,8 @@ export const on = function( $elements: any, options: FLib.Events.EventsManager.O
             };
 
             if ( useNativeDOMEvents ) {
-                if ( options.selector ) {
-                    data.delegate = getDelegation( $element, options.selector, cbFunction );
-
-                    $element.addEventListener( eventName, data.delegate, eventOptions );
-                }
-                else {
-                    $element.addEventListener( eventName, cbFunction, eventOptions );
-                }
+                data.delegate = getDelegation( $element, cbFunction, options.selector );
+                $element.addEventListener( eventName, data.delegate, eventOptions );
                 DOMRegistry.push( data );
             }
             else {
@@ -178,7 +178,7 @@ export const one = function( $elements: any, options: FLib.Events.EventsManager.
 
     function _internalCallback( this: any, e ) {
         off( $elements || this, options );
-        options.callback.call( this, e );
+        options.callback.call( this, e, this );
     }
 
     on( $elements, {

package/Events/Gesture.ts

@@ -483,7 +483,12 @@ class GestureManager {
 
         const touchCoords = getPos( e );
 
-        this.#$currentTargetElement = e.target;
+        if (this.#options.selector) {
+            this.#$currentTargetElement = e.target?.closest(this.#options.selector) ?? this.#$element;
+        }
+        else {
+            this.#$currentTargetElement = this.#$element
+        }
 
         if ( this.#options.start ) {
             this.#options.start.call( this.#$currentTargetElement, e, this.#$currentTargetElement, touchCoords, 'start' );

package/Events/KeyboardHandler.ts

@@ -64,7 +64,7 @@ export default class KeyboardHandler {
     }
 
 
-    #onKeypress = ( e: KeyboardEvent ): void => {
+    #onKeypress = ( e: KeyboardEvent, $target: HTMLElement ): void => {
         const key = e.key;
 
         // Block all key except tab, CTRL R, CMD R or F5
@@ -78,12 +78,12 @@ export default class KeyboardHandler {
             e.preventDefault();
         }
 
-        this.#handleCallbacks( e, e.target, [ 'onKey' ] );
+        this.#handleCallbacks( e, $target, [ 'onKey' ] );
 
         const FNC = this.#eventsName.get( key );
 
         if ( FNC ) {
-            this.#handleCallbacks( e, e.target, FNC( e ) );
+            this.#handleCallbacks( e, $target, FNC( e ) );
         }
     }
 

package/Helpers/Defer.ts

@@ -1,32 +1,34 @@
+export type DeferredPromise<T> = Promise<T | undefined> & { resolve: ( a?: T | PromiseLike<T> ) => void; reject:  ( a?: T | PromiseLike<T> ) => void; }
+
 /**
  * Deferred promise
  *
  * @example
- * let dfd = defer()
+ * let prom = defer()
  *
  * // To resolve:
- * dfd.resolve()
+ * prom.resolve()
  *
  * // To reject:
- * dfd.reject()
+ * prom.reject()
  *
  * @returns - a promise with a resolve and reject function
  */
-export function defer(): Promise<any> & { resolve: ( a?: any ) => void; reject:  ( a?: any ) => void; } {
-    let res: (a: any ) => void,
-        rej: (a: any ) => void;
+export function defer<T>(): DeferredPromise<T> {
+    let res: (a?: T | PromiseLike<T> ) => void,
+        rej: (a?: T | PromiseLike<T> ) => void;
 
-    const promise = new Promise( ( resolve, reject ) => {
+    const promise = new Promise<T | undefined>( ( resolve, reject ) => {
         res = resolve;
         rej = reject;
-    } ) as Promise<any> & { resolve: ( a?: any ) => void; reject:  ( a?: any ) => void; } ;
+    } ) as DeferredPromise<T>;
 
-    promise.resolve = ( a: any ) => {
+    promise.resolve = ( a?: T | PromiseLike<T> ) => {
         res( a );
         return promise;
     };
 
-    promise.reject = ( a : any )=> {
+    promise.reject = ( a?: T | PromiseLike<T> )=> {
         rej( a );
         return promise;
     };

package/Modules/Popin/Popin.ts

@@ -399,15 +399,13 @@ export default class Popin {
     }
 
 
-    #openPopinHandler = ( e: Event ): void => {
+    #openPopinHandler = ( e: Event, $target: HTMLElement ): void => {
         e.preventDefault();
 
         if ( this.#loadingPromise ) {
             return;
         }
 
-        const $target = e.target as HTMLElement;
-
         if ( $target.nodeName === 'FORM' ) {
             this.#_loadForm( $target as HTMLFormElement );
             return;

package/Modules/Popin/PopinController.ts

@@ -104,10 +104,10 @@ export default class PopinController implements FLib.Popin.Controller {
 
 
 
-    #openPopinHandler = ( e: Event): void => {
+    #openPopinHandler = ( e: Event, $target: HTMLElement): void => {
         e.preventDefault();
 
-        this.#parseElement( e.target as HTMLElement );
+        this.#parseElement( $target );
     }
 
 

package/Modules/SkinSelect.ts

@@ -457,11 +457,11 @@ export default class SkinSelect implements FLib.SkinSelect.SkinSelect {
 
 
     // Handle click on the skinned ul>li list
-    #fakeOptionsClickHandler = ( e: MouseEvent ): void => {
-        if ( !(e.target as HTMLElement).matches( '.' + this.#options.itemClassName ) ) {
+    #fakeOptionsClickHandler = ( e: MouseEvent, $target: HTMLElement ): void => {
+        if ( !$target.matches( '.' + this.#options.itemClassName ) ) {
             return;
         }
-        this.selectByOption( e.target as HTMLElement );
+        this.selectByOption( $target );
     }
 
 

package/README.md

@@ -1,6 +1,6 @@
 # Front Library
 
-@version: 7.1.23
+@version: 7.1.25
 
 
 ## Use

package/package.json

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