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

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+
+## 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

package/Events/onAnimationEnd.js

@@ -1,32 +1,12 @@
-import { defer } from '@creative-web-solution/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 '@creative-web-solution/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/README.md

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

package/Tools/PrefixedProperties.js

@@ -0,0 +1,54 @@
+
+
+function testPrefix( list, element = 'div' ) {
+
+    const $ELEMENT = document.createElement( element );
+
+    for ( const key of Object.keys( list ) ) {
+        if ( key in $ELEMENT.style ) {
+            return list[ key ];
+        }
+    }
+
+    return '';
+}
+
+
+export const animationendEventName = ( function() {
+    return testPrefix( {
+        "animation":       "animationend",
+        "OAnimation":      "oAnimationEnd",
+        "MozAnimation":    "animationend",
+        "WebkitAnimation": "webkitAnimationEnd"
+    } );
+} )();
+
+
+export const transitionendEventName = ( function() {
+    return testPrefix( {
+        "transition":       "transitionend",
+        "OTransition":      "oTransitionEnd",
+        "MozTransition":    "transitionend",
+        "WebkitTransition": "webkitTransitionEnd"
+    } );
+} )();
+
+
+export const transformPropertyName = ( function() {
+    return testPrefix( {
+        "transform":       "transform",
+        "WebkitTransform": "WebkitTransform",
+        "OTransform":      "OTransform",
+        "MozTransform":    "MozTransform"
+    } );
+} )();
+
+
+export const transitionPropertyName = ( function() {
+    return testPrefix( {
+        "transition":       "transition",
+        "WebkitTransition": "WebkitTransition",
+        "OTransition":      "OTransition",
+        "MozTransition":    "MozTransition"
+    } );
+} )();

package/Tools/TouchDeviceSupport.js

@@ -0,0 +1 @@
+export const isTouchDevice = window.matchMedia( '(hover: none)' ).matches;

package/package.json

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