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,

lib/scatter.js

@@ -1148,6 +1148,12 @@ export class DOMScatter extends AbstractScatter {
              is also dispatched by the system.
             */
             element.addEventListener('click', event => {
+                /* Currently we cannot send synthesized click events to SVG elements without unwanted side effects.
+                Therefore we make an exception and let the original click event through.
+                */
+                if (event.target.ownerSVGElement) {
+                    return
+                }
                 if (event.isTrusted) {
                     Events.stop(event)
                 }
@@ -1323,11 +1329,14 @@ export class DOMScatter extends AbstractScatter {
             else {
                 let nearestNode = this.nearestClickable(event)
                 if (this.isClickable(nearestNode)) {
-
+                    /* https://stackoverflow.com/questions/49564905/is-it-possible-to-use-click-function-on-svg-tags-i-tried-element-click-on-a
+                        proposes the dispatchEvent solution. But this leads to problems in flippable.html hiding the back page.
+                        Therefore we use the original click event (see constructor).
+                        */
                     if (nearestNode.tagName == 'svg') {
                         let handler = this.tapNodes.get(nearestNode)
                         console.log("Clicking beneath SVG: to be done", handler)
-                        Events.stop(event)
+                        // nearestNode.dispatchEvent(new Event('click'))
                         return
                     }
                     console.log("nearestNode clicked")