@creative-web-solution/front-library 6.1.3 → 6.2.9

package/CHANGELOG.md

@@ -1,6 +1,57 @@
 # CHANGELOG
 
 
+## 6.2.9
+
+* Add transition helper
+
+
+## 6.2.8
+
+* Transition and animation end: Handle properties filter and pseudo elements
+
+
+## 6.2.7
+
+* Custom Events: Add target element as param of the callback function on delegated event
+
+
+## 6.2.6
+
+* Slider: add a function to get all slides of a page + Add the pageIndex in slide's properties
+
+
+## 6.2.5
+
+* Slider: expose list of slide objects + expose page number for each slide
+
+
+## 6.2.4
+
+* Accordion: add an option to avoid closing all tabs
+
+
+## 6.2.3
+
+* Update DragSlider module
+
+
+## 6.2.2
+
+* Add DragSlider module
+* Update touchdevice detection method
+* Slider:
+    * Add function to start and stop auto slide
+    * Fix display when no loop and several slides per page
+
+
+## 6.2.1
+
+* Add a scope to the package name for NPM publish
+* Update doc
+* Add CSS custom variable Modernizr test
+
+
 ## 6.1.3
 
 * Add CSS property setter/getter function
@@ -145,7 +196,7 @@
 * Validator
     * Add live validation system
     * Add getQueryFromForm function
-    * Update validator scaffolding. Split everything that was in `import { validatorTools } from 'front-library/Modules/Validator';` in the `front-library/Modules/Validator/Tools` folder.
+    * Update validator scaffolding. Split everything that was in `import { validatorTools } from '@creative-web-solution/front-library/Modules/Validator';` in the `@creative-web-solution/front-library/Modules/Validator/Tools` folder.
 
 
 ## 6.0.1

package/DOM/Class.js

@@ -1,4 +1,4 @@
-import { isString, isArray, isFunction } from 'front-library/Helpers/Type';
+import { isString, isArray, isFunction } from '@creative-web-solution/front-library/Helpers/Type';
 
 
 function normalizeCssClass( cssClass ) {

package/DOM/OuterSize.js

@@ -1,4 +1,4 @@
-import { getStyle } from 'front-library/DOM/Styles';
+import { getStyle } from '@creative-web-solution/front-library/DOM/Styles';
 
 function getOuterDim(
     $element,

package/DOM/matrix.js

@@ -1,4 +1,4 @@
-import { prop } from 'front-library/DOM/Styles';
+import { prop } from '@creative-web-solution/front-library/DOM/Styles';
 
 /**
  * @typedef {Object} matrix_Object

package/DOM/size.js

@@ -1,4 +1,4 @@
-import { prop, getStyle } from 'front-library/DOM/Styles';
+import { prop, getStyle } from '@creative-web-solution/front-library/DOM/Styles';
 
 /**
  * Compute the width of an element

package/DOM/wrap.js

@@ -1,5 +1,5 @@
-import { strToDOM } from 'front-library/DOM/strToDOM';
-import { isString } from 'front-library/Helpers/Type';
+import { strToDOM } from '@creative-web-solution/front-library/DOM/strToDOM';
+import { isString } from '@creative-web-solution/front-library/Helpers/Type';
 
 /**
  * Wrap a DOM element in another

package/Events/EventsManager.js

@@ -1,17 +1,22 @@
-import { slice } from '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/HistoryController.js

@@ -1,6 +1,6 @@
-import { on } from 'front-library/Events/EventsManager';
-import { UrlParser } from 'front-library/Helpers/UrlParser';
-import { slice } from 'front-library/Helpers/slice';
+import { on } from '@creative-web-solution/front-library/Events/EventsManager';
+import { UrlParser } from '@creative-web-solution/front-library/Helpers/UrlParser';
+import { slice } from '@creative-web-solution/front-library/Helpers/slice';
 
 /**
  * @typedef {object} state_Object

package/Events/ImageLoad.js

@@ -1,4 +1,4 @@
-import { defer } from 'front-library/Helpers/defer';
+import { defer } from '@creative-web-solution/front-library/Helpers/defer';
 
 /**
  * @callback onImageLoad_Callback

package/Events/IntersectObserver.js

@@ -1,5 +1,5 @@
-import { extend } from 'front-library/Helpers/Extend';
-import { slice } from 'front-library/Helpers/slice';
+import { extend } from '@creative-web-solution/front-library/Helpers/Extend';
+import { slice } from '@creative-web-solution/front-library/Helpers/slice';
 
 /**
  * @callback IntersectObserver_Handler
@@ -91,6 +91,7 @@ export function IntersectObserver( options ) {
         }
 
         ELEMENT_OBSERVER.observe( $element );
+        OBSERVED_ELEMENTS.push( $element );
     }
 
 

package/Events/KeyboardHandler.js

@@ -1,5 +1,5 @@
-import { on, off } from 'front-library/Events/EventsManager';
-import { extend } from 'front-library/Helpers/Extend';
+import { on, off } from '@creative-web-solution/front-library/Events/EventsManager';
+import { extend } from '@creative-web-solution/front-library/Helpers/Extend';
 
 /**
  * @callback KeyboardHandler_Callback

package/Events/MediaQueriesEvents.js

@@ -1,5 +1,5 @@
-import { extend } from 'front-library/Helpers/Extend';
-import { slice } from 'front-library/Helpers/slice';
+import { extend } from '@creative-web-solution/front-library/Helpers/Extend';
+import { slice } from '@creative-web-solution/front-library/Helpers/slice';
 
 /**
  * @callback MediaQueriesEvents_Handler

package/Events/TouchHover.js

@@ -1,6 +1,6 @@
-import { gesture, gestureOff } from 'front-library/Events/Gesture';
-import { rClass, aClass } from 'front-library/DOM/Class';
-import { wait } from 'front-library/Helpers/wait';
+import { gesture, gestureOff } from '@creative-web-solution/front-library/Events/Gesture';
+import { rClass, aClass } from '@creative-web-solution/front-library/DOM/Class';
+import { wait } from '@creative-web-solution/front-library/Helpers/wait';
 
 
 /**

package/Events/WindowEvents.js

@@ -1,6 +1,6 @@
-import { windowScroll } from 'front-library/DOM/windowScroll';
-import { documentSize } from 'front-library/DOM/documentSize';
-import { windowSize } from 'front-library/DOM/windowSize';
+import { windowScroll } from '@creative-web-solution/front-library/DOM/windowScroll';
+import { documentSize } from '@creative-web-solution/front-library/DOM/documentSize';
+import { windowSize } from '@creative-web-solution/front-library/DOM/windowSize';
 
 
 /**

package/Events/gesture.js

@@ -1,5 +1,5 @@
-import { on, off } from 'front-library/Events/EventsManager';
-import { extend } from 'front-library/Helpers/Extend';
+import { on, off } from '@creative-web-solution/front-library/Events/EventsManager';
+import { extend } from '@creative-web-solution/front-library/Helpers/Extend';
 
 /**
  * @callback gestureEvents_Callback

package/Events/onAnimationEnd.js

@@ -1,32 +1,12 @@
-import { defer } from 'front-library/Helpers/defer';
-
-const animationendEventName = ( function() {
-    let el, animation;
-
-    el = document.createElement( 'fakeelement' );
-
-    animation = {
-        "animation": "animationend",
-        "OAnimation": "oAnimationEnd",
-        "MozAnimation": "animationend",
-        "WebkitAnimation": "webkitAnimationEnd"
-    };
-
-    for ( let t in animation ) {
-        if ( el.style[ t ] !== undefined ) {
-            return animation[ t ];
-        }
-    }
-} )();
+import { animationendEventName } from '../Tools/PrefixedProperties';
 
 
 /**
  * Bind a one time animationend event on a DOM object
- * @function onAnimationEnd
  *
- * @param {HTMLElement} $elem
- *
- * @example onAnimationEnd( $elem ).then( () => {} );
+ * @example
+ * ```js
+ * onAnimationEnd( $elem ).then( () => {} );
  *
  * // To remove the event binding, don't chain .then() directly after onAnimationEnd:
  * let animationEnd = onAnimationEnd( $element );
@@ -34,28 +14,52 @@ const animationendEventName = ( function() {
  *
  * animationEnd.off()
  *
- * @returns {Promise} - Return a standard Promise + an .off() function to cancel event
+ * // To watch for a animation end:
+ * onAnimationEnd( $elem, {
+ * "animationName": [ "name-of-my-css-animation" ]
+ * } )
+ *
+ * // To watch a animation end on a pseudo element like "::after":
+ * onAnimationEnd( $elem, {
+ * "pseudoElement": "after"
+ * } )
+ * ```
+ *
+ * @returns Return a standard Promise + an .off() function to cancel event
  */
-export function onAnimationEnd( $elem ) {
-    let deferred = defer();
+export default function onAnimationEnd( $element, options = {} ) {
+    let _resolve;
+
+    const promise = new Promise( function( resolve ) {
+        _resolve = resolve;
+    } );
+
 
     function remove() {
-        $elem.removeEventListener( animationendEventName, onAnimationEnd );
+        $element.removeEventListener( animationendEventName, onAnimationEnd );
     }
 
     function onAnimationEnd( e ) {
-        if ( e.target !== $elem ) {
+        if (
+            e.target !== $element ||
+            ( options.animationName && !options.animationName.includes( e.animationName ) ) ||
+            ( options.pseudoElement === 'after' && e.pseudoElement !== '::after' ) ||
+            ( options.pseudoElement === 'before' && e.pseudoElement !== '::before' ) ||
+            ( options.pseudoElement === 'both' && !e.pseudoElement ) ||
+            ( !options.pseudoElement && e.pseudoElement !== '' )
+        ) {
             return;
         }
 
         remove();
 
-        deferred.resolve();
+        _resolve( [ e, $element ] );
     }
 
-    $elem.addEventListener( animationendEventName, onAnimationEnd, false );
 
-    deferred.off = remove;
+    $element.addEventListener( animationendEventName, onAnimationEnd, false );
+
+    promise.off = remove;
 
-    return deferred;
+    return promise;
 }

package/Events/onTransitionEnd.js

@@ -1,41 +1,40 @@
-import { defer } from 'front-library/Helpers/defer';
-
-
-const transitionendEventName = ( function() {
-    let el = document.createElement( 'fakeelement' );
-    let transitions = {
-        "transition": "transitionend",
-        "OTransition": "oTransitionEnd",
-        "MozTransition": "transitionend",
-        "WebkitTransition": "webkitTransitionEnd"
-    };
-
-    for ( let t in transitions ) {
-        if ( typeof el.style[ t ] !== 'undefined' ) {
-            return transitions[ t ];
-        }
-    }
-} )();
+import { transitionendEventName }   from '../Tools/PrefixedProperties';
 
 
 /**
  * Bind a one time transitionend event on a DOM object
- * @function onTransitionEnd
- *
- * @param {HTMLElement} $element
  *
- * @example onTransitionEnd( $elem ).then( () => {} );
+ * @example
+ * onTransitionEnd( $elem ).then( () => `{}` );
  *
+ * @example
+ * ```js
  * // To remove the event binding, don't chain .then() directly after onTransitionEnd:
  * let transitionEnd = onTransitionEnd( $element );
  * transitionEnd.then( () => {} );
  *
  * transitionEnd.off()
  *
- * @returns {Promise} - Return a standard Promise + an .off() function to cancel event
+ * // To watch for a specific CSS property transition end:
+ * onTransitionEnd( $elem, {
+ * "property": "opacity"
+ * } )
+ *
+ * // To watch a transition end on a pseudo element like "::after":
+ * onTransitionEnd( $elem, {
+ * "pseudoElement": "after"
+ * } )
+ * ```
+ *
+ * @returns Return a standard Promise + an .off() function to cancel event
  */
-export function onTransitionEnd( $element ) {
-    let deferred = defer();
+export default function onTransitionEnd( $element, options = {} ) {
+    let _resolve;
+
+    const promise = new Promise( function( resolve ) {
+        _resolve = resolve;
+    } );
+
 
     function remove() {
         $element.removeEventListener(
@@ -44,23 +43,33 @@ export function onTransitionEnd( $element ) {
         );
     }
 
+
     function onTransitionEnd( e ) {
-        if ( e.target !== $element ) {
+        if (
+            e.target !== $element ||
+            ( options.property && !options.property.includes( e.propertyName ) ) ||
+            ( options.pseudoElement === 'after' && e.pseudoElement !== '::after' ) ||
+            ( options.pseudoElement === 'before' && e.pseudoElement !== '::before' ) ||
+            ( options.pseudoElement === 'both' && !e.pseudoElement ) ||
+            ( !options.pseudoElement && e.pseudoElement !== '' )
+        ) {
             return;
         }
 
         remove();
 
-        deferred.resolve();
+        _resolve( [ e, $element ] );
     }
 
+
     $element.addEventListener(
         transitionendEventName,
         onTransitionEnd,
         false
     );
 
-    deferred.off = remove;
 
-    return deferred;
+    promise.off = remove;
+
+    return promise;
 }

package/Events/pubSub.js

@@ -1,5 +1,5 @@
-import { on, off, fire } from 'front-library/Events/EventsManager';
-import { isString } from 'front-library/Helpers/Type';
+import { on, off, fire } from '@creative-web-solution/front-library/Events/EventsManager';
+import { isString } from '@creative-web-solution/front-library/Helpers/Type';
 
 
 function PubSub() {

package/Helpers/Cookie.js

@@ -13,7 +13,7 @@ let defaultOptions = {
  *
  * @example cookie.create( 'cookieName', 'cookieValue' )
  * cookie.read( 'cookieName' )
- * cookie.erase( 'cookieName' )
+ * cookie.delete( 'cookieName' )
  *
  * // All parameters
  * cookie.create( 'cookieName', 'cookieValue', {