Added doctest for flippable images with different sizes.

lib/flippable.html

@@ -64,16 +64,27 @@
         <script class="doctest">
             let scatterContainer = new DOMScatterContainer(main, { stopEvents: false })
             if (Capabilities.supportsTemplate()) {
-                let flip = new DOMFlip(
+                let flip1 = new DOMFlip(
                     scatterContainer,
                     flipTemplate,
                     new ImageLoader('./examples/king.jpeg'),
                     new ImageLoader('./examples/women.jpeg'),
-                    { tapDelegateFactory: CardWrapper, preloadBack: true }
+                    { /*tapDelegateFactory: CardWrapper,*/ preloadBack: true }
                 )
-                flip.load().then((flip) => {
+                flip1.load().then((flip) => {
                     flip.centerAt({ x: 150, y: 120 })
                 })
+
+                let flip2 = new DOMFlip(
+                    scatterContainer,
+                    flipTemplate,
+                    new ImageLoader('./examples/king.jpeg'),
+                    new ImageLoader('./examples/queen.jpeg'),
+                    { /*tapDelegateFactory: CardWrapper,*/ preloadBack: true }
+                )
+                flip2.load().then((flip) => {
+                    flip.centerAt({ x: 650, y: 120 })
+                })
             } else {
                 alert('Templates not supported, use Edge, Chrome, Safari or Firefox.')
             }

lib/flippable.js

@@ -17,7 +17,7 @@ export class CardLoader {
             scale = 1,
             minScale = 0.5,
             maxScale = 1.5,
-            rotation = 0,
+            rotation = 0
         } = {}
     ) {
         this.src = src
@@ -67,7 +67,7 @@ export class PDFLoader extends CardLoader {
                     // Render PDF page into canvas context.
                     let renderContext = {
                         canvasContext: context,
-                        viewport: viewport,
+                        viewport: viewport
                     }
                     page.render(renderContext)
                     domNode.appendChild(canvas)
@@ -209,7 +209,7 @@ export class DOMFlip {
             onClose = null,
             onUpdate = null,
             onRemoved = null,
-            onLoaded = null,
+            onLoaded = null
         } = {}
     ) {
         this.domScatterContainer = domScatterContainer
@@ -276,7 +276,7 @@ export class DOMFlip {
                 scalable: this.scalable,
                 rotatable: this.rotatable,
                 overdoScaling: this.overdoScaling,
-                tapDelegate: this.tapDelegateFactory ? new this.tapDelegateFactory(this.cardWrapper) : null,
+                tapDelegate: this.tapDelegateFactory ? new this.tapDelegateFactory(this.cardWrapper) : null
             })
 
             if (this.center) {
@@ -352,7 +352,7 @@ export class DOMFlip {
             opacity: 0,
             onComplete: () => {
                 this.cardWrapper.remove()
-            },
+            }
         })
     }
 
@@ -400,7 +400,7 @@ export class DOMFlippable {
         TweenLite.set(this.back, { rotationY: -180 })
         TweenLite.set([this.back, this.front], {
             backfaceVisibility: 'hidden',
-            perspective: 5000,
+            perspective: 5000
         })
         TweenLite.set(this.front, { visibility: 'visible' })
         this.infoBtn = element.querySelector('.infoBtn')
@@ -447,7 +447,7 @@ export class DOMFlippable {
                     if (this.onRemoved) {
                         this.onRemoved.call(this)
                     }
-                },
+                }
             })
         }
     }
@@ -476,7 +476,7 @@ export class DOMFlippable {
 
     scaleButtons() {
         TweenLite.set([this.infoBtn, this.backBtn, this.closeBtn], {
-            scale: this.buttonScale,
+            scale: this.buttonScale
         })
     }
 
@@ -618,10 +618,11 @@ export class DOMFlippable {
                 this.scatter.translatable = translatable
                 this.scatter.rotatable = rotatable
             },
-            force3D: true,
+            force3D: true
         })
         // See https://greensock.com/forums/topic/7997-rotate-the-shortest-way/
-        TweenLite.to(this.element, this.flipDuration / 2, {
+        const duration = this.flipDuration / 2
+        TweenLite.to(this.element, duration, {
             scale: targetScale,
             ease: Power1.easeOut,
             rotationZ: targetZ + '_short',
@@ -638,7 +639,25 @@ export class DOMFlippable {
                     this.hide(this.back)
                     // this.show(this.infoBtn)
                 }
-            },
+            }
         })
+
+        //uo: check for special case that the front image must be adapted to the back size
+        let frontImage = this.front.querySelector('img')
+        if (frontImage) {
+            let scaleX = this.flipped ? w / this.scatterStartWidth : this.scatterStartWidth / w
+            let scaleY = this.flipped ? h / this.scatterStartHeight : this.scatterStartHeight / h
+            let ratio = this.scatterStartWidth / this.scatterStartHeight
+            if (this.flipped) {
+                TweenLite.to(frontImage, duration, {
+                    ease: Power1.easeOut,
+                    scaleY: scaleY * targetScale * ratio,
+                    scaleX: scaleX * targetScale,
+                    onComplete: (e) => {
+                        TweenLite.set(frontImage, { scale: 1.0 })
+                    }
+                })
+            }
+        }
     }
 }