IWMBrowser/iwmlib
IWMBrowser/iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

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

Browse Source
This commit is contained in:
Uwe Oestermeier 2019-07-05 16:11:23 +02:00
parent 84ea33f029
commit f68d8b53a3
4 changed files with 70 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
dist/iwmlib.js vendored
View File

@ -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,

29
dist/iwmlib.pixi.js vendored
View File

@ -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,

15
lib/flippable.js
View File

@ -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,

13
lib/scatter.js
View File

@ -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")