@creative-web-solution/front-library 6.2.6 → 6.2.7

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 6.2.7
+
+* Custom Events: Add target element as param of the callback function on delegated event
+
 
 ## 6.2.6
 

package/Events/EventsManager.js

@@ -1,17 +1,22 @@
-import { slice } from '@creative-web-solution/front-library/Helpers/slice';
+import { slice } from '../Helpers/Slice';
+
+
+let passiveSupported = false,
+    createEvt,
+    DOMRegistry = [],
+    ObjectRegistry = [];
 
-let passiveSupported = false, DOMRegistry = [], ObjectRegistry = [], createEvt;
 
 (function () {
-    if ( typeof window.CustomEvent === "function" ) {
-        return false;
+    if ( typeof window.CustomEvent === 'function' ) {
+        return;
     }
 
     function CustomEvent ( event, params ) {
-      params = params || { bubbles: false, cancelable: false, detail: undefined };
-      const evt = document.createEvent( 'CustomEvent' );
-      evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
-      return evt;
+        params = params || { bubbles: false, cancelable: false, detail: undefined };
+        const evt = document.createEvent( 'CustomEvent' );
+        evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
+        return evt;
      }
 
     CustomEvent.prototype = window.Event.prototype;
@@ -43,18 +48,20 @@ let passiveSupported = false, DOMRegistry = [], ObjectRegistry = [], createEvt;
     }
 }() );
 
+function passiveTestFnc() {return;}
 
 (function () {
     try {
-        let options = Object.defineProperty( {}, "passive", {
+        const options = Object.defineProperty( {}, 'passive', {
             "get": () => {
                 passiveSupported = true;
                 return true;
             }
         } );
 
-        window.addEventListener( "test", options, options );
-        window.removeEventListener( "test", options, options );
+
+        window.addEventListener( 'test', passiveTestFnc, options );
+        window.removeEventListener( 'test', passiveTestFnc, options );
     }
     catch( err ) {
         passiveSupported = false;
@@ -64,13 +71,13 @@ let passiveSupported = false, DOMRegistry = [], ObjectRegistry = [], createEvt;
 
 function getDelegation( $element, selector, callback ) {
     return e => {
-        let $target = e.target.closest( selector );
+        const $target = e.target.closest( selector );
 
         if ( !$target || !$element.contains( $target ) ) {
             return;
         }
 
-        callback.call( $target, e );
+        callback.call( $target, e, $target );
     };
 }
 
@@ -101,36 +108,20 @@ function _useNativeDOMEvents( $element ) {
 
 /**
  * Indicate if the browser natively support passive event
- *
- * @name handlePassiveEvents
- * @type {Boolean}
  */
 export const handlePassiveEvents = passiveSupported;
 
 
 /**
  * Add an event listener
- *
- * @function on
- *
- * @param { HTMLElement|Object|HTMLElement[]|Object[] } $elements
- * @param { Object } options
- * @param { String } options.eventsName - Name of events separate by a space
- * @param { Function } options.callback - Callback function
- * @param { String } [options.selector] - Css selector used for event delegation
- * @param { Boolean } [options.capture] - Active or not capture event.
- * @param { Object } [options.eventOptions] - Native addEventListener options. Priority to options.capture if it's present.
- * @param { Boolean } [options.eventOptions.capure]
- * @param { Boolean } [options.eventOptions.once]
- * @param { Boolean } [options.eventOptions.passive]
  */
 export const on = function( $elements, options ) {
     let eventOptions;
 
-    $elements = normalizeElements( $elements );
+    const $ELEM_ARRAY = normalizeElements( $elements );
 
     if ( !options.eventsName ) {
-        throw '[EVENT MANAGER]: Missing event names';
+        throw '[EVENT MANAGER]: Missing event name';
     }
 
     if ( !options.callback ) {
@@ -145,15 +136,15 @@ export const on = function( $elements, options ) {
     }
 
     options.eventsName.split( ' ' ).forEach( eventName => {
-        $elements.forEach( $element => {
+        $ELEM_ARRAY.forEach( $element => {
             if ( exists( $element, eventName, options ) ) {
                 return;
             }
 
-            let useNativeDOMEvents = _useNativeDOMEvents( $element );
-            let cbFunction = options._internalCallback || options.callback;
+            const useNativeDOMEvents = _useNativeDOMEvents( $element );
+            const cbFunction = options._internalCallback || options.callback;
 
-            let data = {
+            const data = {
                 $element,
                 eventName,
                 options
@@ -180,20 +171,6 @@ export const on = function( $elements, options ) {
 
 /**
  * Add an event listener fired only one time
- *
- * @function one
- *
- * @param { HTMLElement|Object|HTMLElement[]|Object[] } $elements
- * @param { Object } options
- * @param { String } options.eventsName - Name of events separate by a space
- * @param { String } [options.selector] - Css selector used for event delegation
- * @param { Functio } options.callback - Callback function
- * @param { Boolean } [options.capture] - Active or not capture event.
- * @param { Object } [options.eventOptions] - Native addEventListener options. Priority to options.capture if it's present.
- * @param { Boolean } [options.eventOptions.capure]
- * @param { Boolean } [options.eventOptions.once]
- * @param { Boolean } [options.eventOptions.passive]
- *
  */
 export const one = function( $elements, options ) {
 
@@ -211,26 +188,19 @@ export const one = function( $elements, options ) {
 
 /**
  * Remove an event
- *
- * @function off
- *
- * @param { HTMLElement|Object|HTMLElement[]|Object[] } $elements
- * @param { Object } options
- * @param { String } options.eventsName - Name of events separate by space
- * @param { Function } [options.callback] - Callback function
- *
  */
-export const off = function( $elements, options ) {
-    $elements = normalizeElements( $elements );
+export const off = function( $elements, options) {
+
+    const $ELEM_ARRAY = normalizeElements( $elements );
 
     options.eventsName.split( ' ' ).forEach( eventName => {
-        $elements.forEach( $element => {
-            let useNativeDOMEvents = _useNativeDOMEvents( $element );
-            let registry = useNativeDOMEvents ? DOMRegistry : ObjectRegistry;
-            let removedItem = [];
+        $ELEM_ARRAY.forEach( $element => {
+            const useNativeDOMEvents              = _useNativeDOMEvents( $element );
+            const removedItem = [];
+            let registry      = useNativeDOMEvents ? DOMRegistry : ObjectRegistry;
 
             registry.forEach( item => {
-                let callback = item.delegate || item.options._internalCallback || item.options.callback;
+                const callback = item.delegate || item.options._internalCallback || item.options.callback;
 
                 if ( !options.callback || options.callback === item.options.callback ) {
                     if ( useNativeDOMEvents ) {
@@ -257,33 +227,21 @@ export const off = function( $elements, options ) {
 
 /**
  * Fire an event
- *
- * @function fire
- *
- * @param { HTMLElement|Object|HTMLElement[]|Object[] } $elements
- * @param { Object } options
- * @param { String } options.eventsName - Name of events separate by space
- * @param { Object } [options.detail] - Object to send with the event
- * @param { Boolean } [options.bubbles=true] - Only used for DOMM
- * @param { Boolean } [options.cancelable=true] - Only used for DOMM
- *
  */
 export const fire = function( $elements, options ) {
-    $elements = normalizeElements( $elements );
+    const $ELEM_ARRAY = normalizeElements( $elements );
 
     options.eventsName.split(' ').forEach( eventName => {
-        $elements.forEach( $element => {
-            let useNativeDOMEvents = _useNativeDOMEvents( $element );
-
-            if ( useNativeDOMEvents ) {
+        $ELEM_ARRAY.forEach( $element => {
+            if ( _useNativeDOMEvents( $element ) ) {
                 $element.dispatchEvent( createEvt( eventName, options ) );
                 return;
             }
 
-            let eventData = ObjectRegistry.filter( reg => reg.$element === $element && reg.eventName === eventName );
+            const eventData = ObjectRegistry.filter( reg => reg.$element === $element && reg.eventName === eventName );
 
             eventData.forEach( reg => {
-                reg.options[ reg.options._internalCallback ? '_internalCallback' : 'callback' ].call( reg.$element, options.detail );
+                reg.options[ reg.options._internalCallback ? '_internalCallback' : 'callback' ]?.call( reg.$element, options.detail );
             } );
         } );
     } );

package/Events/IntersectObserver.js

@@ -91,6 +91,7 @@ export function IntersectObserver( options ) {
         }
 
         ELEMENT_OBSERVER.observe( $element );
+        OBSERVED_ELEMENTS.push( $element );
     }
 
 

package/Modules/Slider.js

@@ -1607,14 +1607,14 @@ export function SliderControls( slider, options ) {
                     "selector": options.paginationItems,
                     "onPrevious": () => {
                         one( slider, {
-                            "eventsNAme": "before",
+                            "eventsName": "before",
                             "callback": updateBulletsFocus
                         } );
                         slider.previous();
                     },
                     "onNext": () => {
                         one( slider, {
-                            "eventsNAme": "before",
+                            "eventsName": "before",
                             "callback": updateBulletsFocus
                         } );
                         slider.next();

package/README.md

@@ -1,6 +1,6 @@
 # Front Library
 
-@version: 6.2.6
+@version: 6.2.7
 
 
 ## Use

package/package.json

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