Using original click events for SVG elements. Must be checked for taps on touch devices.

lib/flippable.js

@@ -325,6 +325,7 @@ export class DOMFlip {
     }
 
     setupFlippable(flippable, loader) {
+        console.log("setupFlippable", loader.wantedWidth)
         flippable.wantedWidth = loader.wantedWidth
         flippable.wantedHeight = loader.wantedHeight
         flippable.wantedScale = loader.scale
@@ -387,6 +388,12 @@ export class DOMFlippable {
         this.onRemoved = flip.onRemoved
         this.onUpdate = flip.onUpdate
 
+        this.wantedWidth = scatter.width
+        this.wantedHeight = scatter.height
+        this.wantedScale = scatter.scale
+        this.minScale = scatter.minScale
+        this.maxScale = scatter.maxScale
+
         this.flipDuration = flip.flipDuration
         this.fadeDuration = flip.fadeDuration
         scatter.addTransformEventCallback(this.scatterTransformed.bind(this))
@@ -406,14 +413,12 @@ export class DOMFlippable {
 
         if (this.infoBtn) {
             scatter.addTapListener(this.infoBtn, event => {
-                console.log("within click handler", this)
                 this.flip.start()
             })
             this.enable(this.infoBtn)
         }
         if (this.backBtn) {
             scatter.addTapListener(this.backBtn, event => {
-                console.log("within click handler", this)
                 this.start()
             })
         }
@@ -534,7 +539,7 @@ export class DOMFlippable {
     disable(button) {
         this.hide(button, this.fadeDuration)
         if (button) {
-           // TweenLite.set(button, { pointerEvents: 'none' })
+            TweenLite.set(button, { pointerEvents: 'none' })
         }
     }
 
@@ -580,13 +585,14 @@ export class DOMFlippable {
         let y = this.flipped ? yy : this.startY
 
         let onUpdate = this.onUpdate !== null ? () => this.onUpdate(this) : null
-        console.log(this.flipDuration)
+        console.log("start", this.flipDuration)
         TweenLite.to(this.card, this.flipDuration, {
             rotationY: targetY,
             ease: Power1.easeOut,
             transformOrigin: '50% 50%',
             onUpdate,
             onComplete: e => {
+                console.log("start end", this.flipDuration)
                 if (this.flipped) {
                     //this.hide(this.front)
                     this.enable(this.backBtn)
@@ -619,6 +625,7 @@ export class DOMFlippable {
             force3D: true
         })
 
+        console.log("start 2", this.wantedWidth, this.startWidth, {w, h})
         // See https://greensock.com/forums/topic/7997-rotate-the-shortest-way/
         TweenLite.to(this.element, this.flipDuration / 2, {
             scale: targetScale,