feat(Morph): abort animations when group is destroyed

Author: rstoenescu

ui/src/directives/Morph.js

@@ -33,26 +33,32 @@ function trigger (group) {
   changeClass(from, 'remove')
   changeClass(to, 'remove')
 
-  morph({
+  const cancelFn = morph({
     from: from.el,
     to: to.el,
     onToggle () {
       changeClass(from, 'add')
       changeClass(to, 'remove')
     },
     ...to.opts,
-    onReady () {
+    onReady (dir) {
       from.animating = false
       to.animating = false
 
       group.animating = false
+      group.cancel = void 0
       group.queue.shift()
 
-      // TODO: call ctx.onReady() if available
+      to.opts.onReady !== void 0 && to.opts.onReady(dir)
 
       trigger(group)
     }
   })
+
+  group.cancel = () => {
+    cancelFn(true) // abort
+    group.cancel = void 0
+  }
 }
 
 function updateModifiers (mod, ctx) {
@@ -163,6 +169,7 @@ function destroy (el) {
         group.queue = group.queue.filter(item => item !== ctx)
 
         if (group.queue.length === 0) {
+          group.cancel !== void 0 && group.cancel()
           delete morphGroups[ctx.group]
         }
       }

ui/src/directives/Morph.json

@@ -115,7 +115,7 @@
 
       "onReady": {
         "type": "Function",
-        "desc": "A function that will be called once the morphing is finished",
+        "desc": "A function that will be called once the morphing is finished; Not called if morphing is aborted",
         "returns": null,
         "params": {
           "direction": {

ui/src/utils/morph.js

@@ -463,7 +463,7 @@ export default function morph (_options) {
         document.body.appendChild(elFromTween)
       }
 
-      const commonCleanup = () => {
+      const commonCleanup = aborted => {
         // we put the element back in it's place
         // and restore the styles and classes
         if (elFrom === elTo && endElementTo !== true) {
@@ -488,7 +488,9 @@ export default function morph (_options) {
         elTo.qMorphCancel = void 0
 
         // we are ready
-        typeof options.onReady === 'function' && options.onReady(endElementTo === true ? 'to' : 'from')
+        if (aborted !== true) {
+          typeof options.onReady === 'function' && options.onReady(endElementTo === true ? 'to' : 'from')
+        }
       }
 
       if (options.useCSS !== true && typeof elTo.animate === 'function') {
@@ -628,7 +630,7 @@ export default function morph (_options) {
           delay: options.delay
         })
 
-        const cleanup = () => {
+        const cleanup = abort => {
           animationFromClone !== void 0 && animationFromClone.cancel()
           animationFromTween !== void 0 && animationFromTween.cancel()
           animationToClone !== void 0 && animationToClone.cancel()
@@ -637,7 +639,7 @@ export default function morph (_options) {
           animationTo.removeEventListener('finish', cleanup)
           animationTo.removeEventListener('cancel', cleanup)
 
-          commonCleanup()
+          commonCleanup(abort)
 
           // we clean the animations
           animationFromClone = void 0
@@ -667,8 +669,7 @@ export default function morph (_options) {
           }
 
           if (abort === true) {
-            cleanup()
-
+            cleanup(true)
             return true
           }