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

dist/iwmlib.js

@@ -5268,6 +5268,12 @@
                  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);
                     }
@@ -5443,11 +5449,14 @@
                 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");
@@ -5978,6 +5987,7 @@
         }
 
         setupFlippable(flippable, loader) {
+            console.log("setupFlippable", loader.wantedWidth);
             flippable.wantedWidth = loader.wantedWidth;
             flippable.wantedHeight = loader.wantedHeight;
             flippable.wantedScale = loader.scale;
@@ -6040,6 +6050,12 @@
             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));
@@ -6059,14 +6075,12 @@
 
             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();
                 });
             }
@@ -6186,6 +6200,9 @@
 
         disable(button) {
             this.hide(button, this.fadeDuration);
+            if (button) {
+                TweenLite.set(button, { pointerEvents: 'none' });
+            }
         }
 
         start({ targetCenter = null } = {}) {
@@ -6230,13 +6247,14 @@
             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);
@@ -6269,6 +6287,7 @@
                 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,

dist/iwmlib.pixi.js

@@ -7033,6 +7033,12 @@
                  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$1.stop(event);
                     }
@@ -7208,11 +7214,14 @@
                 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$1.stop(event);
+                            // nearestNode.dispatchEvent(new Event('click'))
                             return
                         }
                         console.log("nearestNode clicked");
@@ -7609,6 +7618,7 @@
         }
 
         setupFlippable(flippable, loader) {
+            console.log("setupFlippable", loader.wantedWidth);
             flippable.wantedWidth = loader.wantedWidth;
             flippable.wantedHeight = loader.wantedHeight;
             flippable.wantedScale = loader.scale;
@@ -7671,6 +7681,12 @@
             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));
@@ -7690,14 +7706,12 @@
 
             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();
                 });
             }
@@ -7817,6 +7831,9 @@
 
         disable(button) {
             this.hide(button, this.fadeDuration);
+            if (button) {
+                TweenLite.set(button, { pointerEvents: 'none' });
+            }
         }
 
         start({ targetCenter = null } = {}) {
@@ -7861,13 +7878,14 @@
             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);
@@ -7900,6 +7918,7 @@
                 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/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")