diff --git a/dist/iwmlib.js b/dist/iwmlib.js index 43c0a3f..93eb439 100644 --- a/dist/iwmlib.js +++ b/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, diff --git a/dist/iwmlib.pixi.js b/dist/iwmlib.pixi.js index d5d3c44..21abf3f 100644 --- a/dist/iwmlib.pixi.js +++ b/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, diff --git a/lib/flippable.js b/lib/flippable.js index 826aee9..306d15e 100644 --- a/lib/flippable.js +++ b/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, diff --git a/lib/scatter.js b/lib/scatter.js index 26ddb59..268dd5f 100644 --- a/lib/scatter.js +++ b/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")