Feat: work on transition and namespaced events

Author: jlukic

packages/query/src/behavior.js

@@ -437,9 +437,19 @@ export class Behavior {
     }
   }
 
-  dispatchEvent(eventName, detail = {}, eventSettings = {}, element = this.element) {
+  dispatchEvent(
+    eventName,
+    detail = {},
+    eventSettings = {},
+    { element = this.element, namespace = this.namespace } = {},
+  ) {
+    // Auto-namespace if not already namespaced
+    const namespacedEvent = eventName.includes(':')
+      ? eventName
+      : `${namespace}:${eventName}`;
+
     element.dispatchEvent(
-      new CustomEvent(eventName, {
+      new CustomEvent(namespacedEvent, {
         detail,
         bubbles: true,
         cancelable: true,
@@ -449,9 +459,14 @@ export class Behavior {
   }
 
   // dispatch an event across entire group
-  dispatchGroupEvent(eventName, detail = {}, eventSettings = {}) {
-    return this.$elements.get().map(element => {
-      this.dispatchEvent(eventName, detail, eventSettings, element);
+  dispatchGroupEvent(
+    eventName,
+    detail = {},
+    eventSettings = {},
+    { $elements = this.$elements, namespace = this.namespace } = {},
+  ) {
+    return $elements.get().map(element => {
+      this.dispatchEvent(eventName, detail, eventSettings, { element, namespace });
     });
   }
 

src/behaviors/transition/transition.js

@@ -83,17 +83,6 @@ const createBehavior = (
       ...runtimeSettings,
     };
 
-    // handle case of already animating
-    // handle animation queuing
-    if (self.isAnimating()) {
-      if (settings.queue) {
-        await self.animationsFinished();
-      }
-      else {
-        self.stop();
-      }
-    }
-
     // determine canonical animations from css, this is cached between runs
     const cssAnimations = self.findCSSAnimation(animationSettings.animation);
 
@@ -123,7 +112,6 @@ const createBehavior = (
       dispatchGroupEvent('transitionGroupStarted', {
         groupOrder,
       });
-      console.log('group animation started');
     }
     if (self.isLastInGroup(direction)) {
       dispatchGroupEvent('transitionGroupEnded', {
@@ -250,6 +238,17 @@ const createBehavior = (
       return;
     }
 
+    // handle case of already animating
+    // handle animation queuing
+    if (self.isAnimating()) {
+      if (settings.queue) {
+        await $(el).afterEvent('transition:end');
+      }
+      else {
+        self.stop();
+      }
+    }
+
     // find animations for this particular direction (array of animations)
     const animationsToPlay = cssAnimations.animations[direction] ?? cssAnimations.animations.standard;
 
@@ -283,9 +282,9 @@ const createBehavior = (
       return el.animate(animData.keyframes, options);
     });
 
-    dispatchEvent('transitionScheduled', { cssAnimations: cssAnimations, animations: activeAnimations });
+    dispatchEvent('scheduled', { cssAnimations: cssAnimations, animations: activeAnimations });
     await self.animationsStarted(activeAnimations);
-    dispatchEvent('transitionStarted', { cssAnimations: cssAnimations, animations: activeAnimations });
+    dispatchEvent('started', { cssAnimations: cssAnimations, animations: activeAnimations });
 
     // make element visible
     self.setInitialDisplayState(direction);
@@ -300,16 +299,16 @@ const createBehavior = (
 
     // Handle show/hide callbacks based on direction
     if (direction === 'in') {
-      dispatchEvent('transitionVisible', { cssAnimations: cssAnimations, animations: activeAnimations });
+      dispatchEvent('visible', { cssAnimations: cssAnimations, animations: activeAnimations });
       settings.onShow.call(el);
     }
     else if (direction === 'out') {
-      dispatchEvent('transitionHidden', { cssAnimations: cssAnimations, animations: activeAnimations });
+      dispatchEvent('hidden', { cssAnimations: cssAnimations, animations: activeAnimations });
       settings.onHide.call(el);
     }
 
     // can use callback, event or await this function
-    dispatchEvent('transitionEnded', { cssAnimations: cssAnimations, animations: activeAnimations });
+    dispatchEvent('end', { cssAnimations: cssAnimations, animations: activeAnimations });
     callback.call(el);
   },