refactor(morph): onReady -> onEnd(dir, aborted)

rstoenescu · rstoenescu · commit d036baf2d8d1 · 2020-08-06T15:12:00.000+03:00
diff --git a/docs/src/examples/MorphUtils/ImageGallery.vue b/docs/src/examples/MorphUtils/ImageGallery.vue
@@ -120,7 +120,7 @@ export default {
             duration: 400,
             hideFromClone: true,
             style: 'z-index: 2002',
-            onReady: end => {
+            onEnd: end => {
               if (end === 'from' && this.indexZoomed === index) {
                 this.indexZoomed = void 0
               }
@@ -142,7 +142,7 @@ export default {
           duration: 200,
           keepToClone: true,
           style: 'z-index: 2002',
-          onReady: zoom
+          onEnd: zoom
         })
       }
       else {
diff --git a/docs/src/examples/MorphUtils/ImageStripHorizontal.vue b/docs/src/examples/MorphUtils/ImageStripHorizontal.vue
@@ -41,7 +41,7 @@ export default {
           },
           duration: 500,
           style: 'z-index: 1',
-          onReady: end => {
+          onEnd: end => {
             if (end === 'from' && this.indexZoomed === index) {
               this.indexZoomed = void 0
             }
diff --git a/docs/src/examples/MorphUtils/ImageStripVertical.vue b/docs/src/examples/MorphUtils/ImageStripVertical.vue
@@ -41,7 +41,7 @@ export default {
           },
           duration: 500,
           style: 'z-index: 1',
-          onReady: end => {
+          onEnd: end => {
             if (end === 'from' && this.indexZoomed === index) {
               this.indexZoomed = void 0
             }
diff --git a/docs/src/examples/MorphUtils/SameElement.vue b/docs/src/examples/MorphUtils/SameElement.vue
@@ -71,7 +71,7 @@ export default {
           onToggle,
           duration: 500,
           tween: true,
-          onReady: end => {
+          onEnd: end => {
             end === 'from' && onToggle()
           }
         })
@@ -91,7 +91,7 @@ export default {
           tween: true,
           tweenFromOpacity: 0.8,
           tweenToOpacity: 0.4,
-          onReady: end => {
+          onEnd: end => {
             end === 'from' && onToggle()
           }
         })
diff --git a/docs/src/pages/quasar-utils/morph-utils.md b/docs/src/pages/quasar-utils/morph-utils.md
@@ -45,7 +45,7 @@ The function expects one mandatory Object parameter with the following keys:
 | tween | Boolean | *false* | By default the final element is morphed from the position and aspect of the initial element to the ones of the final element - set this flag to use an opacity tween between the initial and final elements |
 | tweenFromOpacity | Number | 0.6 | If using **tween** it is the initial opacity of the initial element (will be animated to 0) - the initial element is placed on top of the destination element |
 | tweenToOpacity | Number | 0.5 | If using **tween** it is the initial opacity of the destination element (will be animated to 1) |
-| onReady | Function | - | A function that will be called once the morphing is finished - receives a single string parameter ('to' if the morphing was finished in the final state or 'from' if it was finished in the initial state) |
+| onEnd(direction, aborted) | Function | - | A function that will be called once the morphing is finalized - receives two params: "direction" is a string ('to' if the morphing was finished in the final state or 'from' if it was finished in the initial state) and "aborted" is a boolean (true means that the animation was aborted) |
 
 ## Morphing lifecycle
 
diff --git a/ui/dev/src/pages/other/morph-1.vue b/ui/dev/src/pages/other/morph-1.vue
@@ -207,7 +207,7 @@ export default {
           tween: this.tween,
           tweenFromOpacity: 1,
           tweenToOpacity: 0.5,
-          onReady: end => {
+          onEnd: end => {
             end === 'from' && onToggle()
             console.log('Morph 1 ready: ' + end)
           }
@@ -227,7 +227,7 @@ export default {
           resize: this.forceResize,
           useCSS: this.forceCssAnimation,
           classes: 'bg-orange',
-          onReady: end => {
+          onEnd: end => {
             end === 'from' && onToggle()
             console.log('Morph 2 ready: ' + end)
           }
diff --git a/ui/dev/src/pages/other/morph-img-1.vue b/ui/dev/src/pages/other/morph-img-1.vue
@@ -81,7 +81,7 @@ export default {
             duration: 400,
             hideFromClone: true,
             style: 'z-index: 1',
-            onReady: end => {
+            onEnd: end => {
               if (end === 'from' && this.indexZoomed === index) {
                 this.indexZoomed = void 0
               }
@@ -101,7 +101,7 @@ export default {
           duration: 200,
           keepToClone: true,
           style: 'z-index: 1',
-          onReady: zoom
+          onEnd: zoom
         })
       }
       else {
diff --git a/ui/dev/src/pages/other/morph-img-2.vue b/ui/dev/src/pages/other/morph-img-2.vue
@@ -39,7 +39,7 @@ export default {
           onToggle: () => { this.indexZoomed = index },
           duration: 500,
           style: 'z-index: 1',
-          onReady: end => {
+          onEnd: end => {
             if (end === 'from' && this.indexZoomed === index) {
               this.indexZoomed = void 0
             }
diff --git a/ui/dev/src/pages/other/morph-img-3.vue b/ui/dev/src/pages/other/morph-img-3.vue
@@ -39,7 +39,7 @@ export default {
           onToggle: () => { this.indexZoomed = index },
           duration: 500,
           style: 'z-index: 1',
-          onReady: end => {
+          onEnd: end => {
             if (end === 'from' && this.indexZoomed === index) {
               this.indexZoomed = void 0
             }
diff --git a/ui/dev/src/pages/other/morph-same-element.vue b/ui/dev/src/pages/other/morph-same-element.vue
@@ -71,7 +71,7 @@ export default {
           onToggle: toggleLogic,
           duration: 500,
           tween: true,
-          onReady: end => {
+          onEnd: end => {
             end === 'from' && toggleLogic()
           }
         })
@@ -91,7 +91,7 @@ export default {
           tween: true,
           tweenFromOpacity: 0.8,
           tweenToOpacity: 0.4,
-          onReady: end => {
+          onEnd: end => {
             end === 'from' && toggleLogic()
           }
         })
diff --git a/ui/src/directives/Morph.js b/ui/src/directives/Morph.js
@@ -6,7 +6,7 @@ const props = [
   'classes', 'style', 'duration', 'resize',
   'useCSS', 'hideFromClone', 'keepToClone', 'tween',
   'tweenFromOpacity', 'tweenToOpacity',
-  'waitFor', 'onReady'
+  'waitFor', 'onEnd'
 ]
 const mods = [
   'resize', 'useCSS', 'hideFromClone', 'keepToClone', 'tween'
@@ -41,16 +41,20 @@ function trigger (group) {
       changeClass(to, 'remove')
     },
     ...to.opts,
-    onReady (dir) {
+    onEnd (dir, aborted) {
+      to.opts.onEnd !== void 0 && to.opts.onEnd(dir, aborted)
+
+      if (aborted === true) {
+        return
+      }
+
       from.animating = false
       to.animating = false
 
       group.animating = false
       group.cancel = void 0
       group.queue.shift()
 
-      to.opts.onReady !== void 0 && to.opts.onReady(dir)
-
       trigger(group)
     }
   })
diff --git a/ui/src/directives/Morph.json b/ui/src/directives/Morph.json
@@ -113,7 +113,7 @@
         "examples": [ "300", "transitionend" ]
       },
 
-      "onReady": {
+      "onEnd": {
         "type": "Function",
         "desc": "A function that will be called once the morphing is finished; Not called if morphing is aborted",
         "returns": null,
@@ -122,9 +122,13 @@
             "type": "String",
             "desc": "'to' if the morphing was finished in the final state or 'from' if it was finished in the initial state",
             "values": [ "to", "from" ]
+          },
+          "aborted": {
+            "type": "String",
+            "desc": "Was the morphing aborted?"
           }
         },
-        "examples": [ "direction => { if (direction !== 'to') { revertLogic() } }" ]
+        "examples": [ "(direction, aborted) => { if (direction !== 'to') { revertLogic() } }" ]
       }
     },
 
diff --git a/ui/src/utils/morph.js b/ui/src/utils/morph.js
@@ -102,7 +102,7 @@ function normalizeOptions (options) {
   }
   else if (typeof options === 'function') {
     options = {
-      onReady: options
+      onEnd: options
     }
   }
 
@@ -488,8 +488,8 @@ export default function morph (_options) {
         elTo.qMorphCancel = void 0
 
         // we are ready
-        if (aborted !== true) {
-          typeof options.onReady === 'function' && options.onReady(endElementTo === true ? 'to' : 'from')
+        if (typeof options.onEnd === 'function') {
+          options.onEnd(endElementTo === true ? 'to' : 'from', aborted === true)
         }
       }
 
diff --git a/ui/types/utils.d.ts b/ui/types/utils.d.ts
@@ -49,7 +49,7 @@ interface MorphOptions {
   tweenFromOpacity?: number;
   tweenToOpacity?: number;
 
-  onReady?: (end: 'to' | 'from') => void;
+  onEnd?: (direction: 'to' | 'from', aborted: boolean) => void;
 }
 
 export function morph(options: MorphOptions): (abort?: boolean) => boolean;

Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,7 @@ export default {`
`41`	`41`	`},`
`42`	`42`	`duration: 500,`
`43`	`43`	`style: 'z-index: 1',`
`44`		`- onReady: end => {`
	`44`	`+ onEnd: end => {`
`45`	`45`	`if (end === 'from' && this.indexZoomed === index) {`
`46`	`46`	`this.indexZoomed = void 0`
`47`	`47`	`}`
Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@ export default {`
`39`	`39`	`onToggle: () => { this.indexZoomed = index },`
`40`	`40`	`duration: 500,`
`41`	`41`	`style: 'z-index: 1',`
`42`		`- onReady: end => {`
	`42`	`+ onEnd: end => {`
`43`	`43`	`if (end === 'from' && this.indexZoomed === index) {`
`44`	`44`	`this.indexZoomed = void 0`
`45`	`45`	`}`