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

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## 6.2.10
+
+* Fix file import name
+
+## 6.2.9
+
+* Add transition helper
+
 
 ## 6.2.8
 

package/Events/EventsManager.js

@@ -1,4 +1,4 @@
-import { slice } from '../Helpers/Slice';
+import { slice } from '../Helpers/slice';
 
 
 let passiveSupported = false,

package/Helpers/TransitionHelpers.js

@@ -0,0 +1,95 @@
+import onTransitionEnd    from '../Events/OnTransitionEnd';
+import onAnimationEnd     from '../Events/OnAnimationEnd';
+import { wait }           from './Wait';
+
+
+const KEY = Symbol( 'TransitionHelper' );
+
+
+function addWatcher( $element, styleChange, isAnimation, options = {} ) {
+    if ( $element[ KEY ] ) {
+        $element[ KEY ].off();
+    }
+
+    if ( typeof options.delay !== undefined ) {
+        options.delay = 'idle'
+    }
+
+    $element[ KEY ] = isAnimation ?
+                        onAnimationEnd( $element, {
+                            "animationName": options.animationName,
+                            "pseudoElement": options.pseudoElement
+                        } ) :
+                        onTransitionEnd( $element, {
+                            "property":      options.property,
+                            "pseudoElement": options.pseudoElement
+                        } );
+
+    wait( options.delay ).then( () => styleChange( $element ) );
+
+    $element[ KEY ].then( () => {
+        $element[ KEY ] = null;
+        return $element;
+    } );
+
+    return $element[ KEY ];
+}
+
+
+/**
+ * @param styleChange - Change the style of $element inside this function by adding a class or set a style property
+ * @param delay - Delay betwwen the add of the listener and call of styleChange.
+ *
+ * delay = 'idle' : window.requestIdleCallback
+ * delay < 0 : window.requestAnimationFrame
+ * delay >= 0 : setTimeout
+ *
+ * @example
+ * ```js
+ * // Watch for the end of the transition of the property "opacity" on the pseudo element ::after on $element
+ *
+ * const myWatcher = transitionWatcher( $elment, () => $element.classList.add('some-class'), {
+ *  "pseudoElement": "after",
+ *  "property":     "opacity"
+ * } );
+ * ```
+ */
+export function transitionWatcher( $element, styleChange, options ) {
+    return addWatcher( $element, styleChange, false, options );
+}
+
+
+/**
+ * @param animationStart - Start the animation of $element inside this function by adding a class or set a style property
+ * @param delay - Delay betwwen the add of the listener and call of animationStart.
+ *
+ * delay = 'idle' : window.requestIdleCallback
+ * delay < 0 : window.requestAnimationFrame
+ * delay >= 0 : setTimeout
+ *
+ * @example
+ * ```js
+ * //Watch for the end of the animation "my-animation" on the pseudo element ::after on $element
+ *
+ * const myWatcher = animationWatcher( $elment, () => $element.classList.add('some-class'), {
+ *  "pseudoElement": "after",
+ *  "animationName": ["my-animation"]
+ * } );
+ * ```
+ */
+ export function animationWatcher( $element, animationStart, options ) {
+    return addWatcher( $element, animationStart, true, options );
+}
+
+
+/**
+ * @example Kill a transition or animation watcher on $element
+ *
+ * killWatcher( $elment )
+ */
+export function killWatcher( $element ) {
+    if ( $element[ KEY ] ) {
+        $element[ KEY ].off();
+        $element[ KEY ] = null;
+    }
+}

package/README.md

@@ -1,6 +1,6 @@
 # Front Library
 
-@version: 6.2.8
+@version: 6.2.10
 
 
 ## 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.8",
+  "version": "6.2.10",
   "homepage": "https://github.com/creative-web-solution/front-library",
   "author": "Creative Web Solution <contact@cws-studio.com> (https://www.cws-studio.com)",
   "keywords": [],